yanzhiAPP/pages/landDetail/results.vue

<template>
	<view class="content">
		<view class="banner">
			<u-swiper :list="dataobj.pic" width="100%" height="484rpx"></u-swiper>
		</view>

		<view class="content-con-a" v-if="Object.keys(dataobj).length>0">
			<view class="shop_detail">
				<view class="shop_detail-top">
					品类信息
				</view>
				<view class="shop_detail-botm">
					<view class="detail">
						<view class="detaila">
							商品名称：
						</view>
						<view class="detailb">
							{{dataobj.kind}}
						</view>
					</view>
					<view class="detail">
						<view class="detaila">
							生产地址：
						</view>
						<view class="detailb">
							{{dataobj.land_address}}
						</view>
					</view>
					<view class="detail">
						<view class="detaila">
							生长期：
						</view>
						<view class="detailb">
							<!-- {{dataobj.plant_date}} -->
							<!-- {{dataobj.actions[dataobj.actions.length-1].create_time.split(' ')[0]}} -->

							{{ daysDiff }}天
						</view>
					</view>
				</view>
			</view>

			<view class="shop_action">
				<view class="" v-for="(item,i) in dataobj.actions">
					<view class="shop_action-title">
						{{item.type_text}}
					</view>
					<view class="shop_action-detail" v-if="item.type!=3&&item.type!=5">
						<view class="action-detail">
							<view class="title">
								{{item.type_text.slice(0, -2)}}名称：
							</view>
							<view class="detail">
								{{item.detail.kind}}
							</view>
						</view>
						<view class="action-detail">
							<view class="title">
								{{item.type_text.slice(0, -2)}}用量：
							</view>
							<view class="detail">
								{{item.detail.dosage}}
							</view>
						</view>
						<view class="action-detail">
							<view class="title">
								{{item.type_text.slice(0, -2)}}人：
							</view>
							<view class="detail">
								{{item.detail.user}}
							</view>
						</view>
						<view class="action-detail-img">
							<view class="title">
								{{item.type_text.slice(0, -2)}}图片：
							</view>
							<view class="detail-img">
								<u-swiper :list="dataobj.pic" width="100%" height="529rpx"></u-swiper>
							</view>
						</view>
					</view>

					<view class="shop_action-detail" v-if="item.type==3">
						<view class="action-detail">
							<view class="title">
								灌溉方式：
							</view>
							<view class="detail">
								{{item.detail.type==0?"喷灌":item.detail.type==1?"滴灌":"沟灌"}}
							</view>
						</view>
						<view class="action-detail">
							<view class="title">
								灌溉面积：
							</view>
							<view class="detail">
								{{item.detail.area}}
							</view>
						</view>
						<view class="action-detail">
							<view class="title">
								灌溉人：
							</view>
							<view class="detail">
								{{item.detail.user}}
							</view>
						</view>
						<view class="action-detail-img">
							<view class="title">
								灌溉图片：
							</view>
							<view class="detail-img">
								<u-swiper :list="dataobj.pic" width="100%" height="529rpx"></u-swiper>
							</view>
						</view>
					</view>
					<view class="shop_action-detail" v-if="item.type==5">
						<view class="action-detail">
							<view class="title">
								收获时间：
							</view>
							<view class="detail">
								{{item.create_time}}
							</view>
						</view>

						<view class="action-detail">
							<view class="title">
								收获人：
							</view>
							<view class="detail">
								{{item.detail.user}}
							</view>
						</view>
						<view class="action-detail-img">
							<view class="title">
								收获图片：
							</view>
							<view class="detail-img">
								<u-swiper :list="dataobj.pic" width="100%" height="529rpx"></u-swiper>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		suYuan
	} from '@/api/api.js'
	import {
		ref,
		reactive
	} from "vue"

	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	const task_id = ref('');
	const dataobj = reactive({})
	const daysDiff = ref('');
	onLoad((options) => {
		task_id.value = options.id
		// if (options.task_id) {
		// 	mode.value = "detail"
		// }
		getlist1(options.id)
	})

	//获取详情
	const getlist1 = (id) => {
		suYuan({
			plant_id: id
		}).then((res) => {
			
			if (res.code == 1) {
				Object.assign(dataobj, res.data);
				getday(res.data)
			}
		});
	};
	//生长期计算

	const getday = (data) => {
		const start = new Date(data.plant_date);
		const end = new Date(data.actions[data.actions.length-1].create_time.split(' ')[0]);
		const diffTime = Math.abs(end - start);
		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
		daysDiff.value = diffDays

	}
	//查看图片
	const perviewFn = (url) => {
		uni.previewImage({
			urls: [url]
		})
	}
</script>


<style lang="scss">
	page {
		background-color: $theme-bg-color;
	}

	.content {
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.banner {
			width: 694rpx;
			height: 484rpx;

			margin: 0 auto;
		}

		.content-con-a {
			padding: 0 32rpx;
			margin-top: 30rpx;

			.shop_detail {
				.shop_detail-top {
					margin-bottom: 28rpx;
				}

				.shop_detail-botm {
					width: 694rpx;
					padding: 35rpx 0;
					background: #FFFFFF;
					border-radius: 21rpx 21rpx;

					.detail {
						display: flex;
						margin-bottom: 35rpx;
						margin-left: 35rpx;

						.detaila {
							width: 200rpx;
						}

						.detailb {
							width: 500rpx;
						}
					}

				}
			}

			.shop_action {
				margin-top: 42rpx;

				.shop_action-title {
					font-size: 33rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 28rpx;
				}

				.shop_action-detail {
					width: 694rpx;
					padding: 35rpx 0;
					background: #FFFFFF;
					border-radius: 21rpx 21rpx;
					margin-bottom: 30rpx;

					.action-detail {
						display: flex;
						padding-left: 35rpx;
						margin-bottom: 25rpx;

						.title {
							width: 200rpx;
						}

						.detail {
							width: 500rpx
						}
					}

					.action-detail-img {
						padding-left: 35rpx;
						margin-bottom: 30rpx;

						.title {
							margin-bottom: 30rpx;

						}

						.detail-img {
							width: 627rpx;
							height: 529rpx;
						}
					}
				}
			}

		}
	}
</style>