cultivationApp/pages/growRecord/index.vue

<template>
	<view :class="{popupShow:showPop}">
		<view class="cont">

			<!-- <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="">
						播种时间: 2020.12.01
					</view>
		
				</view>
			</view> -->
			<landInfo :land_id='land_id'></landInfo>

			<view class="operate" v-for="(item,index) in actionData" :key="index">

				<view class="tit">
					{{index}}
				</view>
				<view class="card">
					<view class="operate-li" style="margin: 20rpx 0;margin-right: 20rpx;" @click="showPopFn(items.id)"
						v-for="items,indexs in item.actions" :key='indexs'>
						{{items.name}}
					</view>

					<!-- <view class="operate-li" @tap="navgo('')">
						喂食
					</view>
					<view class="operate-li" @tap="navgo('/pages/feedIng/vaccineInfo')">
						注射疫苗
					</view>
					<view class="operate-li">
						胶水dassdd
					</view>
					<view class="operate-li">
						胶水
					</view>
					<view class="operate-li">
						胶水
					</view> -->
				</view>
				<view class="">

				</view>
			</view>
			<view class="fertilize">
				<view class="card">
					<view class="fertilize-tit">
						<view class="">
							施肥
						</view>
						<view class="fertilize-tit-r">
							<view class="" style="color: red;" @tap="showModal=true">
								删除
							</view>
							<view style="margin-left: 40rpx;color: #00A15E;">
								编辑
							</view>
						</view>

					</view>
					<view class="fertilize-li">
						<view class="">
							肥料类型: 地生上的飞机
						</view>
						<view class="">
							肥料品牌: 地生上的
						</view>
					</view>
					<view class="fertilize-li">
						<view class="">
							兑水浓度: 地生上的飞机
						</view>
						<view class="">
							备注: 地生上的
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ripe-btn">
			完成今日操作
		</view>
		<!-- 组件 -->
		<view class="">
			<u-popup :show="showPop" :round="10" :closeable='true' @close="showPop=false" @open="showPop=true">
				<scroll-view scroll-y style="max-height: 90vh;">
					<!-- 滚动内容 -->
					<view class="pop-content" v-for="item,index in popList" :key='index'>
						<!-- 文本框 -->
						<view class="" v-if="item.type==1">
							<view class="">
								{{item.title}}
							</view>
							<view class="pop-li">
								<up-input placeholder="请输入" border="surround" v-model="formData.value"
									@change="change"></up-input>
							</view>
						</view>
						<!-- 下拉框 -->
						<view class="" v-if="item.type==4">
							<view class="">
								{{item.title}}
							</view>
							<view class="pop-li">
								<up-input readonly placeholder="点击选择" border="surround" v-model="formData.value"
									@click="showPicker=true"></up-input>
							</view>
						</view>
						<!-- 上传图片 -->
						<view class="" v-if="item.type==2">
							<view class="">
								{{item.title}}
							</view>
							<view class="pop-li">
								<view class="code-img">
									<view class="carime-icon" @click="updateImgFn">
										<u--image src="/static/img/DJSC.png" width="91.12rpx"
											height="91.12rpx"></u--image>
										<view class="">
											点击上传图片
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 搜索框 -->
						<view class="" v-if="item.type==3">
							<view class="">
								{{item.title}}
							</view>
							<view class="pop-li">
								<up-input placeholder="请输入品种" border="surround" v-model="formData.value"></up-input>
							</view>

							<view style="margin-bottom: 20rpx;" v-for="item in [1]" :key="item">
								<u-swipe-action>
									<u-swipe-action-item :options="options1"
										style="border-radius: 20rpx;border: 1px solid #C7C6CD;">
										<view class="" style="padding: 20rpx 30rpx;">
											<view class="swipe-action-tit">
												<view class="">
													编号: 123456
												</view>
												<view class="" style="color: #00A15E;" v-if="true">
													健康
												</view>
												<view class="" style="color: #FFD736;" v-if="0">
													怀孕中
												</view>
												<view class="" style="color: #3274F9;" v-if="0">
													可出栏
												</view>

											</view>
											<view class="swipe-action-li">
												<view class="">
													养殖品种:黑山猪
												</view>
												<view class="">
													年龄: 5年
												</view>
												<view class="">
													体重: 150kg
												</view>
											</view>
										</view>

									</u-swipe-action-item>
								</u-swipe-action>
							</view>
						</view>
					</view>

					<view class="pop-confirm" @tap="confirm">
						确认
					</view>
				</scroll-view>
			</u-popup>
		</view>
		<!-- 组件 -->
		<u-picker :show="showPicker" :columns="columns" @confirm="confirmFn"></u-picker>
		<u-modal :show="showModal" :showCancelButton='true' :closeOnClickOverlay="true" @close="showModal=false"
			content='确认删除吗?' @confirm="delFn" @cancel="showModal=false"></u-modal>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import landInfo from "@/components/plant/landInfo.vue"
	import {
		actionsListAPI,
		actionsDetailAPI
	} from "@/api/plant.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const options1 = reactive([{
		text: '删除'
	}])
	const showPicker = ref(false)
	const columns = reactive([
		['中国', '美国', '日本']
	], )
	const confirmFn = (e) => {
		showPicker.value = false
		console.log(e.value)
	}
	const land_id = ref(0)
	const type = ref(0)
	const actionData = reactive({})
	onLoad((options) => {
		land_id.value = options.land_id
		actionsListAPI({
			type: options.type
		}).then(res => {
			for (let key in res.data) {
				actionData[key] = res.data[key]
			}
		})
	})
	const showPop = ref(false)
	const formData = reactive({
		value: ""
	})
	const confirm = () => {
		showPop.value = false
		// var key of formData {

		// }
	}
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}

	const showModal = ref(false)
	const delFn = () => {
		showModal.value = false
		uni.showToast({
			title: '删除成功',
			icon: 'success',
			duration: 1000
		})
	}
	const popList = reactive([])
	const showPopFn = (id) => {
		popList.splice(0, popList.length)
		showPop.value = true
		columns[0].splice(0, columns[0].length)
		actionsDetailAPI({
			action_id: id
		}).then(res => {
			res.data.forEach(item => {
				popList.push(item)
				if (item.type == 4) {
					columns[0] = Array.from(item.options)
					console.log(columns[0])
				}
			})
			// console.log(popList)
		})
	}
</script>

<style lang="scss" scoped>
	.cont {
		padding-top: 30rpx;
		background-color: #F4F4F4;
		min-height: 100vh;
	}

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

		.card-li {
			margin-top: 20rpx;
			display: flex;
		}
	}

	.operate {
		width: 693.93rpx;
		margin: auto;

		.tit {
			margin: 20rpx 0;
		}

		.card {
			display: flex;
			flex-wrap: wrap;

			.operate-li {
				font-size: 29.79rpx;
				padding: 0 60rpx;
				background-color: #F4F4F4;
				margin-bottom: 28rpx;
				height: 63.08rpx;
				line-height: 63rpx;
				border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
			}
		}
	}

	.ripe-btn {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 588.79rpx;
		height: 84.11rpx;
		background-color: #00A15E;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		background: linear-gradient(to right, #00A15E, #4CC593);
	}

	.fertilize {
		.fertilize-tit {
			display: flex;
			// justify-self: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #F4F4F4;
			margin-bottom: 20rpx;

			.fertilize-tit-r {
				display: flex;
			}
		}

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

	.pop-content {
		padding: 20rpx;
		padding-bottom: 0;

		.pop-tit {
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.pop-li {
			margin: 20rpx 0;
			// margin-bottom: 40rpx;
		}
	}

	.pop-confirm {
		width: 693.93rpx;
		height: 84.11rpx;
		background: linear-gradient(to right, #00A15E, #4CC593);
		color: white;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		text-align: center;
		line-height: 84rpx;
		margin-top: 70rpx;
		margin: 0 auto;
	}

	.code-img {
		background-color: #F4F4F4;
		height: 196.26rpx;
		position: relative;

		.carime-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
		}

	}

	.swipe-action-tit {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F4F4F4;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.swipe-action-li {
		display: flex;
		justify-content: space-between;
		// align-items: ;
	}

	.popupShow {
		// overflow: hidden;
		position: fixed;
		left: 30rpx;
	}
</style>