yanzhiAPP/pages/supervision/captain.vue

<template>
	<view class="content">
		<!-- {{userInfoData}} -->

		<view class="card">
			<view class="card-tit">
				<view class="" style="display: flex; align-items: center;">
					<u--image :src="userInfoData.avatar" shape="circle" style="margin: 0 5rpx;" width="84.11rpx"
						height="84.11rpx"></u--image>
					<view class="" style="margin-left: 20rpx;">
						{{userInfoData.name}}
					</view>
				</view>
				<view class="">
					管辖: {{userInfoData.address}}
				</view>
			</view>
			<view class="card-li" v-if="!showMore">
				<view class="">
					监管农户: {{userInfoData.farmer_total}}
				</view>
				<view class="">
					涉及土地面积: {{userInfoData.farmer_area}}
				</view>
			</view>
			<view class="border">

			</view>
			<view class="" v-if="showMore">
				<view class="card-li">
					<view class="">
						监管农户: {{userInfoData.farmer_total}}
					</view>
					<view class="">
						涉及土地面积: {{userInfoData.farmer_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						种植户: {{userInfoData.farmer_zz_total}}
					</view>
					<view class="">
						占地面积: {{userInfoData.farmer_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-大型动物: {{userInfoData.farmer_jc_total}}
					</view>
					<view class="">
						占地面积: {{userInfoData.farmer_jc_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-禽类: {{userInfoData.farmer_jq_total}}
					</view>
					<view class="">
						占地面积: {{userInfoData.farmer_jq_area}}
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-水产: {{userInfoData.farmer_sc_total}}
					</view>
					<view class="">
						占地面积: {{userInfoData.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 class="query" @tap='showPicker=true'>
			<view class="" style="margin-right: 10rpx;">
				{{query}} (100户)
			</view>

			<u--image src="/static/img/CKGD.png" width="35.04rpx" height="35.04rpx"></u--image>
		</view>
		<view class="card" v-for="(item,index) in userInfoData.farmer_list" :key="index">
			<view class="card-tit">
				<view class="" style="display: flex; align-items: center;">
					<u--image src="/static/img/bg1.png" 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">
				<view class="" style="margin-bottom: 20rpx;">
					土地面积: {{item.total_area}}亩
				</view>
				<view class="">
					种养殖类别: {{farmerTypeFn(item)}}
				</view>

			</view>

			<!-- <view class="border">

			</view>
			<view class="">
				更新时间: 2023-10-11
			</view> -->
		</view>



	</view>
	<!-- 组件 -->
	<u-picker :show="showPicker" @close="showPicker=false" :columns="columns" @confirm="pickerConfirmFn"
		@cancel='showPicker=false' :closeOnClickOverlay='true'></u-picker>

</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		userInfoAPI
	} from "@/api/plant.js"
	const userInfoData = reactive({})

	onLoad((option) => {
		userInfoAPI({
			user_id: option.id,
			user_type: 2
		}).then(res => {
			for (let key in res.data) {
				userInfoData[key] = res.data[key]
			}
		})
	})


	const farmerTypeFn = (data) => {
		let arr = ['is_zz_user', 'is_sz_user', 'is_jc_user', 'is_jq_user']
		let identity = ''
		arr.forEach(item => {
			if (data[item]) {
				identity = identity + typeFn(item)
			}
		})
		return identity.substr(0, identity.length - 1)
	}
	const typeFn = (type) => {
		if (type == 'is_zz_user') return "种植户,"
		if (type == 'is_sz_user') return "水产户,"
		if (type == 'is_jc_user') return "家畜户,"
		if (type == 'is_jq_user') return "家禽户,"
	}

	const showMore = ref(false)
	const showPicker = ref(false)
	const columns = reactive([
		['全部 ', '1队农户', '2队农户', '3队农户', '4队农户', '5队农户', '6队农户']
	]);
	const pickerConfirmFn = (e) => {
		query.value = e.value[0]
		showPicker.value = false
	}
	const query = ref("全部")
</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: ;
		flex-wrap: wrap;
		justify-content: space-between;

	}

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

	.detail {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.query {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
	}
</style>