cultivationApp/pages/poultry/feedDetail.vue

<template>
	<view class="content" @click.capture="selectAct=false">
		<view class="card">
			<view class="tit">
				<view class="">
					农户名称: 1号土地
				</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="">
					具体种类: 20亩
				</view>
				<view class="">
					幼崽: 的划分等级
				</view>
			</view>
		</view>

		<!-- <view class="serch">
			<u-search bgColor='white' height='63.08rpx' :show-action="false" actionText="搜索"
				:animation="true"></u-search>
			<view class="serch-btn">
				搜索
			</view>
		</view> -->
		<view class="title">
			<view class="">
				编号: {{baseData.code}}
			</view>
			<view class="more-jt" @click="navgo(`/pages/poultry/SingleDetail?id=${poultry_id}`)">
				查看养殖详情 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;" width="31.54rpx"
					height="31.54rpx"></u--image>
			</view>
		</view>

		<view class="card">

			<view class="card-li">
				<view class="" @click.capture="selectFoucsFn">
					养殖类型: {{baseData.kind}}
				</view>
				<view class="" style="display: flex;align-items: center;">
					体重: <up-input style="height: 49.07rpx;width: 215.54rpx;margin-left: 20rpx;" placeholder="请输入内容"
						border="surround" v-model="formData.weight"></up-input>
				</view>
			</view>
			<view class="card-li" style="align-items: center;">
				<view class="">
					年龄: {{baseData.age}}年
				</view>
				<view class="select">
					状态: <up-input readonly style="height: 49.07rpx;width: 215.54rpx;margin-left: 20rpx;"
						placeholder="请选择" border="surround" @click.capture="selectFoucsFn" v-model="value">
					</up-input>
					<view class="JT" :class="{actJT:selectAct}">
						<u--image src="/static/img/XLJT.png" width="24.53rpx" height="24.53rpx"></u--image>
					</view>
					<view class="selectvalue" v-show="selectAct">
						<view class="select-li" v-for="(item,index) in selectList" :key="index"
							@click="changSelectfn(index)" :style="{color:indexs==index?'black':'#B3B3B3'}">
							{{item}}
							<view class="" v-show='indexs==index'>
								<u--image src="/static/img/XLZZ.png" width="24.53rpx" height="24.53rpx"></u--image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <imgCard :imgUrl='baseData?.pic_detail?.pic'></imgCard> -->
			<imgCard :imgUrl='baseData?.pic_detail?.pic'></imgCard>
			<view class="up-plant-btn" @tap="updataStatusFn">
				确认更新
			</view>
		</view>

		<view class="circumstance" v-for="(item,index) in actionList" :key="index">
			<view class="card-tit">
				<view class="">
					{{index}}
				</view>
				<view class="updata-btn" @click="navgo('/pages/growRecord/index')">
					更新{{index.slice(0,-2)}}
				</view>
			</view>
			<myTable :tit='`查看${index.slice(0,-2)}`' :dataList="item.action_record" route='/pages/feedIng/allRecording'>
			</myTable>
		</view>
		<view class="ripe-btn" @tap="outBar">
			标记状态为出栏
		</view>

	</view>
</template>

<script setup>
	import imgCard from "@/components/imgCard.vue"
	import myTable from "@/components/myTable/index.vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	import {
		animalInfoAPI,
		animalStatusAPI
	} from "@/api/animal.js"
	import {
		poultryStatusAPI,
		poultryInfoAPI
	} from "@/api/chick.js"
	import {
		actionsAPI
	} from "@/api/animal.js"
	const selectList = reactive([
		"健康", "产蛋中", "生病隔离中", "可出栏"
	])
	const value = ref("")
	const selectAct = ref(false)
	const selectFoucsFn = (e) => {
		selectAct.value = true
	}
	const indexs = ref(0)
	const changSelectfn = (index) => {
		indexs.value = index
		value.value = selectList[index]
		formData.status = index + 1
	}
	const poultry_id = ref(0)
	const baseData = reactive({})
	onLoad((options) => {
		poultry_id.value = options.id
		formData.poultry_id = options.id
		poultryInfoAPI({
			poultry_id: options.id
		}).then(res => {
			for (let key in res.data) {
				baseData[key] = res.data[key]
			}
			formData.weight = baseData.weight
			formData.status = baseData.status
			value.value = selectList[baseData.status - 1]
			indexs.value = baseData.status - 1
		})
	})
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const formData = reactive({
		status: '',
		poultry_id: '',
		weight: ""
	})
	const updataStatusFn = () => {
		poultryStatusAPI({
			...formData
		}).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		})
	}
	const outBar = () => {
		poultryStatusAPI({
			status: 4,
			animal_id: animal_id.value,
		}).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}, 2000)
		})
	}
	const actionList = reactive({})
	actionsAPI({
		type: 3
	}).then(res => {
		for (let key in res.data) {
			actionList[key] = (res.data)[key]
		}
	})
</script>

<style lang="scss" scoped>
	.card {
		margin-bottom: 20rpx;

		.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;
			align-items: center;
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		margin-top: 42rpx;

		.updata-btn {
			width: 192.76rpx;

			height: 57.83rpx;
			border: 1px solid #00A15E;
			color: #00A15E;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
			font-size: 26.29rpx;
		}
	}

	.serch {
		position: relative;
		margin-bottom: 20rpx;

		.serch-btn {
			color: white;
			width: 115.65rpx;
			height: 63.08rpx;
			background-color: #1BAB6F;
			text-align: center;
			line-height: 63.08rpx;
			border-radius: 50rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

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

		.poisition {
			opacity: 0.7;
			position: absolute;
			width: 380.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;

			.dw-cls {

				margin: 0 5rpx;
			}
		}
	}

	.up-plant-btn {
		width: 371.5rpx;
		height: 66.59rpx;
		color: #00A15E;
		margin: 40rpx auto;
		border: 1px solid #00A15E;
		font-weight: bold;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		display: flex;
		align-items: center;
		justify-content: center;


	}

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

	.select {
		display: flex;
		align-items: center;
		position: relative;

		.JT {
			position: absolute;
			right: 20rpx;
			z-index: 9999;
			transition: .2s;
		}

		.actJT {
			transition: .2s;
			transform: rotate(180deg);
		}



		.selectvalue {
			position: absolute;
			width: 208.53rpx;
			background-color: white;
			z-index: 99;
			font-size: 26.29rpx;
			left: 90rpx;
			bottom: -250rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			padding: 0 20rpx;
			border: 1px solid #F4F4F4;

			.select-li {
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}
		}
	}

	.circumstance {
		width: 693.93rpx;
		margin: 0 auto;
		margin-bottom: 43rpx;

		.card-tit {
			display: flex;
			justify-content: space-between;
			margin-bottom: 28rpx;
		}

		.updata-btn {
			font-size: 26.29rpx;
			// width: 192.76rpx;
			padding: 0 20rpx;
			height: 57.83rpx;
			border: 1px solid #00A15E;
			color: #00A15E;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
		}

		.check {
			font-size: 29.79rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.tab {

			height: 500rpx;
			background-color: red;
		}
	}
</style>