TraceabilityAPP/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="tit">
					品类信息
				</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.plant_date}}
						</view>
					</view>
					<view class="detail">
						<view class="detaila">
							收获日期：
						</view>
						<view class="detailb">
							{{dataobj.harvest_date}}
						</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]}} -->

							{{ dataobj.group_day }}天
						</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]}} -->
							{{ dataobj.user}}
						</view>
					</view>
					<view class="detail">
						<view class="detaila">
							生产地址：
						</view>
						<view class="detailb">
							{{dataobj.land_address}}
						</view>
					</view>

				</view>
			</view>

			<view class="shop_action">
				<view class="" v-for="(item,i) in dataobj.actions">
					<view class="tit">
						{{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)}}<text class=""
									v-if="item.type==2||item.type==4">剂</text>品种：
							</view>
							<view class="detail">
								{{item.detail.kind}}
							</view>
						</view>
						<view class="action-detail" v-if="item.detail.breed">
							<view class="title">
								{{item.type_text.slice(0, -2)}}<text class=""
									v-if="item.type==2||item.type==4">剂</text>品牌：
							</view>
							<view class="detail">
								{{item.detail.breed}}
							</view>
						</view>
						<view class="action-detail">
							<view class="title">
								{{item.type_text.slice(0, -2)}}<text class=""
									v-if="item.type==2||item.type==4">剂</text>用量：
							</view>
							<view class="detail">
								{{item.detail.dosage}}<text v-if='item.type==4'>升</text>
								<text v-if='item.type!=4&&item.type!=5'>斤</text>
							</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">
								{{item.type_text.slice(0, -2)}}图片：
							</view>
							<view class="detail-img" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
								<!-- <image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
								</image> -->

								<u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
									circular></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==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
							</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" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
								<!-- <image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
								</image> -->
								<u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
									circular></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">
								{{dataobj.harvest_date}}
							</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" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
								<!-- <image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
								</image> -->
								<u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
									circular></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) => {

		console.log(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: white;
					border-radius: 21rpx 21rpx;
					box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);

					.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;
					box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);

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

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

		}
	}

	.tit {
		position: relative;
		padding-left: 20rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.tit::before {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		width: 3px;
		/* 左边框的宽度 */
		height: 30rpx;
		background-color: #34D08D;
	}
</style>