TraceabilityAPP/pages/husbandryForm/detail.vue

<template>
	<view class="content">

		<view class="content-con-a" v-if="datalist.length>0">

			<view class="shop_action">
				<view class="" v-for="(item,i) in datalist" :key="i">
					<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">
								施肥面积：
							</view>
							<view class="detail">
								{{item.detail.area}}亩
							</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.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" v-if="item.detail.start_date">
							<view class="title">
								{{item.type_text.slice(0, -2)}}开始时间：
							</view>
							<view class="detail">
								{{item.detail.start_date}}
							</view>
						</view>
						<view class="action-detail" v-if="item.detail.end_date">
							<view class="title">
								{{item.type_text.slice(0, -2)}}结束时间：
							</view>
							<view class="detail">
								{{item.detail.end_date}}
							</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">

								<u-swiper style="height: 380rpx;" :list="item.detail.pic" @click="hdClick" indicator
									indicatorMode="dot" circular></u-swiper>

								<!-- <image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
								</image> -->







							</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.area}}亩
							</view>
						</view>
						<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.user}}
							</view>
						</view>
						<view class="action-detail" v-if="item.detail.start_date">
							<view class="title">
								{{item.type_text.slice(0, -2)}}开始时间：
							</view>
							<view class="detail">
								{{item.detail.start_date}}
							</view>
						</view>
						<view class="action-detail" v-if="item.detail.end_date">
							<view class="title">
								{{item.type_text.slice(0, -2)}}结束时间：
							</view>
							<view class="detail">
								{{item.detail.end_date}}
							</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>
							</view>
						</view>
					</view>
					<view class="shop_action-detail" v-if="item.type==5">
						<view class="action-detail">
							<view class="title" style="width: 200rpx;">
								收获时间：
							</view>
							<view class="detail">
								{{item.create_time}}
							</view>
						</view>

						<view class="action-detail">
							<view class="title" style="width: 200rpx;">
								参与人：
							</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>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>



	</view>
</template>

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

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

	//获取详情
	const getlist1 = (id, type) => {
		listForType({
			plant_id: id,
			type: type
		}).then((res) => {

			if (res.code == 1) {

				datalist.splice(0, datalist.length, ...res.data)
				res.data.detai
				// console.log(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
		})
	}

	const hdClick = (e) => {
		console.log(e)
	}
</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 {
					font-size: 28rpx;
					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: 240rpx;
						}

						.detail {
							width: 450rpx;
							color: #7B7B7B;
							font-size: 28rpx;
						}
					}

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

						.title {
							margin-bottom: 30rpx;

						}

						.detail-img {
							width: 627rpx;
							height: 380rpx;
							// background-color: red;
							// height: 529rpx;
							// background-color: red;

							// 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>