TraceabilityAPP/pages/supervision/group.vue

179 lines
3.9 KiB
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>