cultivationApp/components/aquatic/pondCard.vue

<template>
	<view class="card">
		<view class="tit">
			<view class="">
				农户名称: {{userInfo.userInfo.name}}
			</view>
			<view class="">
				<!-- {{headData}} -->
				溯源码: {{headData.source_code}}
			</view>
		</view>

		<view class="card-li">
			<view class="">
				种养殖类型: 养殖户
			</view>
			<view class="">
				养殖数量: {{headData.total_num}}
			</view>
		</view>
		<view class="card-li" v-if="headData.kind">
			<view class="">
				土地面积: 20亩
			</view>
			<view class="">
				养殖种类: {{headData.kind[0]}},{{headData.kind[1]}},{{headData.kind[2]}}
			</view>
			<!-- <view class="">
				草鱼鱼苗: 的划分等级
			</view> -->
		</view>
		<!-- <view class="card-li" v-if="headData.kind">

			<view class="">
				鲫鱼鱼苗: 的划分等级
			</view>
		</view> -->
		<view class="card-li" v-if="headData.breed">
			<view class="">
				<!-- {{}} -->
				具体种类: {{headData.breed[0]}},{{headData.breed[1]}},{{headData.breed[2]}}
			</view>
		</view>
		<view class="add-btn" v-if="props.showBtn" @click="navgo(`/pages/aquatic/addPond?pond_id=${props.id}`)">
			添加水产养殖
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from "vue"
	import {
		pondInfoAPI,
	} from "@/api/aquatic.js"
	import {
		userInfoStore
	} from '@/store/userInfo'
	const userInfo = userInfoStore()

	const props = defineProps({
		id: String,
		showBtn: Boolean
	})
	const headData = reactive({})
	watch(props, (newValue, oldVlaue) => {
		// console.log(newValue, oldVlaue)
		if (props?.id) {
			pondInfoAPI({
				user_id: 307,
				pond_id: props.id
			}).then(res => {
				// console.log(4557545)
				for (let key in res.data) {
					headData[key] = (res.data)[key]
				}
			})
		}
	}, {
		immediate: true
	})

	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
</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;
		}
	}

	.add-btn {
		margin: 0 auto;
		width: 220.79rpx;
		height: 57.83rpx;
		color: #00A15E;
		border: 1px solid #00A15E;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		line-height: 57rpx;
		font-size: 26rpx;
	}
</style>