cultivationApp/components/poultry/farmersCard.vue

<template>
	<!-- {{userInfo.poultry_detail}} -->
	<view class="card" v-if="userInfo.poultry_detail">
		<!-- {{userInfo.animal_detail.total_count}} -->
		<view class="tit">
			<view class="">
				农户名称: {{userInfo.name}}
			</view>
		</view>
		<view class="card-li">
			<view class="">
				种养殖类型: 养殖户
			</view>
			<view class="">
				养殖头数: {{userInfo.poultry_detail.total_count}}头
			</view>
		</view>
		<view class="card-li">
			<view class="">
				土地面积:{{userInfo.total_land_area}}亩
			</view>
			<view class="">
				公: {{userInfo.poultry_detail.male_count}}头
			</view>
		</view>
		<view class="card-li">
			<view class="">
				养殖种类: {{userInfo.poultry_detail.kind[0]}},{{userInfo.poultry_detail.kind[1]}}
			</view>
			<view class="">
				母: {{userInfo.poultry_detail.maternal_count}}头
			</view>
		</view>
		<view class="card-li">
			<view class="">
				具体种类: {{userInfo.poultry_detail.breed[0]}}
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		watch
	} from "vue";
	// import {
	// 	userInfoAPI
	// } from "@/api/plant.js"
	import {
		userInfoStore
	} from '@/store/userInfo'
	const userInfoStores = userInfoStore()
	const userInfo = reactive({})
	const objFn = (res, data) => {
		for (let key in res) {
			data[key] = res[key]
		}
	}
	// userInfoAPI({
	// 	user_id: 307
	// }).then(res => {
	// 	objFn(res.data, userInfo)
	// })
	objFn(userInfoStores.userInfo, userInfo)
</script>

<style lang="scss" scoped>
	.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;
		}
	}
</style>