TraceabilityAPP/pages/landDetail/index.vue

<template>
	<view class="box">
		<view class="content">

			<view class="video" @click="navto('/pages/live/live')">

				<!-- <u--image :src="url" width="100%" height="300rpx"></u--image> -->
				<u-swiper :list="dataobj.pic" width="100%" height="300rpx"></u-swiper>

			</view>
			<view class="time">
				<u-icon name="clock"></u-icon>
				<text>刷新时间: {{getNowTimeFn()}} </text>
			</view>
			<view class="add-thing" @click="addshowPicke">
				新增种植
			</view>
			<landInfo :info='dataobj'></landInfo>


			<view class="">
				<view class="tit" style="font-size: 33.29rpx;margin: 20rpx 0;">
					种植信息
				</view>
				<view class="" v-if="dataList.length>0">
					<view class="thing-card" v-for="(item,index) in dataList" :key="index">
						<view class="head">
							<view class="">
								种植
							</view>
							<view class="" @click="navtoForm(item,i)">
								农事查看
							</view>
						</view>
						<view class="card_body">
							<view class="left">
								<u--image @click="perviewFn(item.pic[0])" radius='10' :src="item.pic[0]" width="200rpx"
									height="200rpx"></u--image>
							</view>
							<view class="right">
								<view class="">
									种植种类:{{item.kind}}
								</view>
								<view class="">
									种植品种: {{item.breed}}
								</view>
								<view class="">
									种植面积: {{item.area}}
								</view>
								<view class="">
									参与人员: {{item.user}}
								</view>
								<view class="">
									开始日期: {{item.create_time}}
								</view>
								
								<view class="" style="display:flex;" v-if="item.status==2">
									<view class="" style="margin-right: 10rpx;">溯源码: </view>
									
									<u--image @click="perviewFn(item.qr_code)" radius='10' :src="item.qr_code" width="200rpx"
										height="200rpx" style="margin-top: 10rpx;"></u--image>
								</view>
							</view>
						</view>
					</view>




				</view>


				<view class="coneng-detail" v-else>
					<view class="">
						<image src="@/static/img/zw.png" mode="aspectFit"></image>
						<view class="">
							暂无数据
						</view>
					</view>
				</view>

			</view>




		</view>


	</view>
</template>

<script setup>
	import landInfo from "@/components/plant/landInfo.vue"
	import {
		ref,
		reactive
	} from "vue"

	import {
		plantlist,

		landdetail
	} from '@/api/file.js'

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const list = reactive([{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
		{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
		{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
		{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
	])
	const dataList = reactive([])
	const dataList1 = reactive([])
	const dataobj = reactive({})
	const typeID = ref('')

	const columns = reactive([
		[{
			label: '种植',
			route: "/pages/husbandryForm/sow"
		}, {
			label: '施肥',
			route: "/pages/husbandryForm/fertilize"
		}, {
			label: '除草',
			route: "/pages/husbandryForm/weeding"
		}, {
			label: '灌溉',
			route: "/pages/husbandryForm/irrigate"
		}, {
			label: '除虫',
			route: "/pages/husbandryForm/Pest"
		}, {
			label: '收获',
			route: "/pages/husbandryForm/harvest"
		}]
	]);

	onLoad((option) => {
		typeID.value = option.id;
		getlist();
		getlist1();

	});
	onShow(() => {
		
		getlist();
		getlist1();

	})

	const getlist1 = () => {
		landdetail({
			land_id: typeID.value
		}).then((res) => {
			console.log(res);
			if (res.code == 1) {
				Object.assign(dataobj, res.data);


			}
		});
	};


	const getlist = () => {
		plantlist({
			land_id: typeID.value
		}).then((res) => {

			if (res.code == 1) {
				dataList.splice(0, dataList.length, ...res.data);
			}
		});
	};

	//新增种植
	const addshowPicke = () => {
		uni.navigateTo({
			url: '/pages/husbandryForm/sow?id=' + typeID.value
		})
	}

	//跳转

	const navto = (url) => {
		uni.navigateTo({
			url
		})
	}
	const navtoForm = (item, type) => {
		console.log(item)
		uni.navigateTo({
			url: '/pages/landDetail/tudi?data=' +item.id
		})


		// }
	}


	const getNowTimeFn = () => {
		const now = new Date();
		const hour = now.getHours();
		const minute = now.getMinutes();
		const formattedHour = hour < 10 ? '0' + hour : hour;
		const formattedMinute = minute < 10 ? '0' + minute : minute;
		const currentTime = formattedHour + ':' + formattedMinute;
		return currentTime
	}
	const perviewFn = (url) => {
		console.log(url)
		uni.previewImage({
			urls: [url]
		})
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		min-height: 100vh;
		background-color: $theme-bg-color;
		padding: 0;

		.content {
			width: 693.93rpx;
			margin: auto;
			padding-top: 20rpx;
		}

		// padding: 20rpx;
		.time {
			display: flex;
			font-size: 26.29rpx;
			color: #737373;
			margin-top: 10rpx;
		}

		.video {
			// margin-top: 10rpx;
		}

		.add-thing {
			width: 266.36rpx;
			height: 66.59rpx;
			border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
			border: 1px solid $theme-main-color;
			margin: 20rpx auto;
			line-height: 66rpx;
			text-align: center;
			color: $theme-main-color;
		}
	}

	.coneng-detail {
		width: 478rpx;
		height: 341rpx;
		background: #FFFFFF;
		border-radius: 6px 6px 6px 6px;
		opacity: 1;
		font-size: 25rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #737373;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 70rpx auto;

		image {
			width: 280rpx;
			height: 142rpx;
			margin-bottom: 20rpx;


		}
	}

	.thing-card {
		width: 693.93rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

		.head {
			height: 90rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: $theme-main-color;
			display: flex;
			justify-content: space-between;
			line-height: 90rpx;
			color: white;
			padding: 0 30rpx;
		}

		.card_body {
			padding: 20rpx;
			display: flex;
			// justify-content: space-between;

			.right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-left: 40rpx;
			}
		}
	}
</style>