cultivationApp/components/aquatic/pondCard.vue

114 lines
2.1 KiB
Vue
Raw Normal View History

2023-10-27 18:38:25 +08:00
<template>
<view class="card">
<view class="tit">
<view class="">
农户名称: ???
</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">
<view class="">
土地面积: 20
</view>
<view class="">
草鱼鱼苗: 的划分等级
</view>
</view>
<view class="card-li" v-if="headData.kind">
<view class="">
养殖种类: {{headData.kind[0]}},{{headData.kind[1]}},{{headData.kind[2]}}
</view>
<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"
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 => {
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>