TraceabilityAPP/pages/supervision/group.vue

<template>
	<view class="content">
		<view class="card">

			<view class="card-herd">
				<u--image :src="userInfoDetail.avatar" shape="circle" style="margin: 0 5rpx;" width="84.11rpx"
					height="84.11rpx"></u--image>
				<view class="">
					{{userInfoDetail.name}}
				</view>
				<view class="">
					{{userInfoDetail.company_name}}
					<!-- 通滩指导养殖合作服务公司 -->
				</view>
			</view>
		</view>

		<view class="serch">
			<view class="" style="margin-right: 61rpx;">
				监管土地
			</view>
			<!-- <u-search placeholder="搜索基地名称" :show-action="false" bgColor='white' v-model="keyword"></u-search> -->
		</view>

		<view class="card" v-for="(item,index) in userInfoDetail.captain_list" :key="index" @click="navgo(item.id)">
			<view class="card-tit">
				<view class="" style="display: flex; align-items: center;">
					<u--image :src="item.avatar" shape="circle" style="margin: 0 5rpx;" width="84.11rpx"
						height="84.11rpx"></u--image>
					<view class="" style="margin-left: 20rpx;">
						{{item.name}}
					</view>
				</view>
				<view class="">
					管辖: {{item.address}}
				</view>
			</view>
			<view class="card-li" v-if="!showMore">
				<view class="">
					监管农户: {{item.farmer_total}}
				</view>
				<view class="">
					涉及土地面积: {{item.farmer_area}}
				</view>
			</view>
			<view class="border">

			</view>
			<view class="" v-if="showMore">
				<view class="card-li">
					<view class="">
						监管农户:{{item.farmer_total}}
					</view>
					<view class="">
						涉及土地面积: {{item.farmer_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						种植户:{{item.farmer_zz_total}}
					</view>
					<view class="">
						占地面积: {{item.farmer_zz_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-大型动物: {{item.farmer_jc_total}}
					</view>
					<view class="">
						占地面积: {{item.farmer_jc_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-禽类: {{item.farmer_jq_total}}
					</view>
					<view class="">
						占地面积: {{item.farmer_jq_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-水产: {{item.farmer_sc_total}}
					</view>
					<view class="">
						占地面积: {{item.farmer_sc_area}}
					</view>
				</view>
				<view class="border">

				</view>
				<view class="detail" @click="showMore=!showMore">
					收起 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;transform: rotate(270deg);"
						width="28.04rpx" height="28.04rpx"></u--image>
				</view>
			</view>
			<view class="detail" v-if="!showMore" @click="showMore=!showMore">
				查看监管详情 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;transform: rotate(90deg)"
					width="28.04rpx" height="28.04rpx"></u--image>
			</view>


		</view>




	</view>

</template>

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

	const showMore = ref(true)
	const userInfoDetail = reactive({})
	userInfoAPI({
		user_id: 25,
		user_type: 1
	}).then(res => {
		for (let key in res.data) {
			userInfoDetail[key] = res.data[key]
		}
	})
	const navgo = (id) => {
		uni.navigateTo({
			url: `/pages/supervision/captain?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 30rpx;
	}

	.card-herd {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.serch {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-tit {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-li {
		display: flex;
		// margin: ;
		justify-content: space-between;
	}

	.border {
		border-bottom: 1px solid #F4F4F4;
		margin: 20rpx 0;
	}

	.detail {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>