yanzhiAPP/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>
			</view>
			<view class="time">
				<u-icon name="clock"></u-icon>
				<text>刷新时间: {{getNowTimeFn()}} </text>
			</view>
			<view class="add-thing" @click="showPicker=true">
				记农事
			</view>
			<landInfo></landInfo>


			<view class="">
				<view class="tit" style="font-size: 33.29rpx;margin: 20rpx 0;">
					历史农事信息
				</view>
				<view class="thing-card" v-for="(item,index) in dataList" :key="index">
					<view class="head">
						<view class="">
							种植
						</view>
						<view class="" @click="navtoForm(item.type)">
							农事查看
						</view>
					</view>
					<view class="body">
						<view class="left">
							<u--image @click="perviewFn(url)" radius='10' :src="url" width="200rpx"
								height="200rpx"></u--image>
						</view>
						<view class="right">
							<view class="">
								土地名称: 张伟撒打算撒旦
							</view>
							<view class="">
								土地名称: 张伟撒打算撒旦
							</view>
							<view class="">
								土地名称: 张伟撒打算撒旦
							</view>
							<view class="">
								土地名称: 张伟撒打算撒旦
							</view>
						</view>
					</view>
				</view>
			</view>


		</view>
		<!-- 组件 -->
		<view class="">
			<u-picker keyName="label" :show="showPicker" @cancel="showPicker=false" @confirm="confirm"
				:columns="columns"></u-picker>
		</view>

	</view>
</template>

<script setup>
	import landInfo from "@/components/plant/landInfo.vue"
	import {
		ref,
		reactive
	} from "vue"
	const dataList = reactive([{
			type: '0'
		}, {
			type: '1'
		}, {
			type: '2'
		}, {
			type: '3'
		}, {
			type: '4'
		}, {
			type: '5'
		},


	])
	const showPicker = ref(false);
	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"
			},

		]
	]);
	const navto = (url) => {
		uni.navigateTo({
			url
		})
	}
	const navtoForm = (type) => {
		switch (type) {
			// 种植
			case "0":
				navto(`/pages/husbandryForm/sow?task_id=${5}`);
				break;
				// 施肥
			case "1":
				navto(`/pages/husbandryForm/fertilize?task_id=${5}`);
				break;
				// 除草
			case "2":
				navto(`/pages/husbandryForm/weeding?task_id=${5}`);
				break;
				// 灌溉
			case "3":
				navto(`/pages/husbandryForm/irrigate?task_id=${5}`);
				break;
				// 除虫
			case "4":
				navto(`/pages/husbandryForm/Pest?task_id=${5}`);
				break;
				// 收获
			case "5":
				navto(`/pages/husbandryForm/harvest?task_id=${5}`);
				break;
		}
	}
	const confirm = (e) => {
		showPicker.value = false
		uni.navigateTo({
			url: e.value[0].route
		})
	}
	const url = ref('https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg')
	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: 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;
		}
	}

	.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;
		}

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

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