TraceabilityAPP/pages/aquatic/imgList.vue

<template>
	<view class="content">

		<!-- <view class="card">
			<view class="tit">
				<view class="">
					1号土地
				</view>
				<view class="">
					溯源码: 12302
				</view>
			</view>
			<view class="card-li">
				<view class="">
					当前种植: 土豆
				</view>
				<view class="">
					种植品牌: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					土地面积: 20亩
				</view>
				<view class="">
					种子品牌: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					预计产量: 20亩
				</view>
				<view class="">
					已出售: 的划分等级
				</view>
			</view>


			<view class="card-li">
				<view class="">
					播种时间: 2020.12.01
				</view>

			</view>

		</view> -->
		<landInfo :pond_id='pond_id'></landInfo>

		<!-- <view class="status">
			<view class="" style="margin-bottom: 30rpx;">
				今日种植状态
			</view>
			<imgCard text="地址"
				imgUrl='http://ceshi-suyuan.lihaink.cn/uploads/20231025/3048b734cff7d9adfb00aaf6ab7290e5.jpeg'>
			</imgCard>
		</view>
		<view class="status">
			<view class="" style="margin-bottom: 30rpx;">
				播种图片
			</view>
			<imgCard text="地址"
				imgUrl='http://ceshi-suyuan.lihaink.cn/uploads/20231025/3048b734cff7d9adfb00aaf6ab7290e5.jpeg'>
			</imgCard>
		</view> -->
		<view class="status">
			<view class="" style="margin-bottom: 30rpx;">
				生长情况
			</view>
			<imgCard text="地址" :imgUrl="item" v-for="(item,index) in imgList" :key="index" @tap='previewImage(index)'>
			</imgCard>
		</view>

		<view class="up-btn" @click="updateImgFn">
			上传新的种植情况
		</view>
	</view>
</template>

<script setup>
	import landInfo from "@/components/plant/landInfo.vue"
	import imgCard from "@/components/imgCard.vue"
	import {
		fishPicListAPI,
		addFishPicAPI
	} from "@/api/aquatic.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	import uplodeImg from "@/utils/uplodeImg.js"
	const imgList = reactive([])
	const pond_id = ref(0)
	onLoad((options) => {
		pond_id.value = options.pond_id
		fishPicListAPI({
			pond_id: options.pond_id
		}).then(res => {
			res.data.forEach(item => {
				imgList.push(item.pic)
			})
		})
	})
	const updateImgFn = () => {
		let image = ""
		uplodeImg().then(res => {
			image = res.data.image
			addFishPicAPI({
				pond_id: pond_id.value,
				pic: image
			}).then(res2 => {
				imgList.unshift(image)
			})
		})
	}
	const previewImage = (index) => {
		uni.previewImage({
			urls: imgList,
			current: index,

		})
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		background-color: #F4F4F4;
		min-height: 100vh;

		.card {
			.tit {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #EBF1EF;
			}

			.card-li {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.status {
			margin-bottom: 40rpx;
		}

		.head-img {
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			margin: 20rpx auto;
			position: relative;

			.poisition {
				opacity: 0.7;
				position: absolute;
				width: 360.26rpx;
				height: 71rpx;
				background-color: #FFFFFF;
				left: 20rpx;
				bottom: 36rpx;
				border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
				display: flex;
				align-items: center;
				font-size: 29.79rpx;
				padding-left: 20rpx;

			}
		}
	}

	.up-btn {
		width: 371.5rpx;
		height: 66.59rpx;
		border: 1px solid #00A15E;
		color: #00A15E;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		text-align: center;
		line-height: 66rpx;
		margin: 40rpx auto;
	}
</style>