forestry-wx/src/tools/select-gap-info/index.vue

<template>
    <z-paging ref="paging" safe-area-inset-bottom v-model="list" @query="query">
        <template #top>
            <ut-navbar leftText="请选择GAP基地获评信息" :fixed="false"></ut-navbar>
            <view class="pd-20">
                <ut-search margin="0" height="68rpx" fontSize="26rpx" placeholder="搜基地名称、品种、基地地址" :border="false" v-model="form.keyword" @search="onRefresh"></ut-search>
            </view>
        </template>
        <view class="base-content pd-20">
            <view :class="{ active: item.id === checkedId }" v-for="(item, index) in list" :key="item.id" @click="clickItem(item)" class="b-radius bg-#fff pd-20 p-rtv">
                <view class="c-#333 f-s-34 f-w-5 pb-5">{{ item?.gapBaseName }}</view>
                <view class="c-#999 f-s-24 pb-20">{{ item?.ratedDate }}获评</view>
                <view class="d-flex pb-5">
                    <view class="w-50%">
                        <text class="c-#666 f-s-28">种养殖品种：</text>
                        <text class="c-#333 f-s-28 f-w-5">{{ item?.medicineName || '-' }}</text>
                    </view>
                    <view class="w-50%">
                        <text class="c-#666 f-s-28">基地面积：</text>
                        <text class="c-#333 f-s-28 f-w-5">{{ item?.area }}{{ item?.areaUnit || '亩' }}</text>
                    </view>
                </view>
                <view class="pb-20">
                    <text class="c-#666 f-s-28">基地地址：</text>
                    <text class="c-#333 f-s-28 f-w-5">{{ item?.address }}</text>
                </view>
                <view v-if="+item?.res == 2" class="pl-5 pr-5 pt-20 pb-20 border-top-#f7f7f7 c-#FC333F">
                    <text class="f-s-28">审核不通过原因：</text>
                    <text class="f-s-28">{{ item?.msg }}</text>
                </view>
                <image v-if="+item?.res == 2" class="w-145" src="/static/images/plant/resFailed.png" style="position: absolute; top: 0; right: 0" mode="widthFix" />
                <image v-if="+item?.res == 0" class="w-100" src="/static/images/plant/resPendingReview.png" style="position: absolute; top: 0; right: 0" mode="widthFix" />
                <image v-if="+item?.res == 1" class="w-90" src="/static/images/plant/resEffective.png" style="position: absolute; top: 0; right: 0" mode="widthFix" />
            </view>
        </view>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const paging = ref<any>(null);
const list = ref<any[]>([]);
const form = ref({
    keyword: '',
    res: '1',
    gapBaseType: ''
});
const query = async (pageNum: number, pageSize: number) => {
    const res = await useClientRequest.get('/plt-api/app/gapCertificationInfo/pageList', {
        ...form.value,
        pageNum: pageNum,
        pageSize: pageSize,
    });
    if (res.code == 200) {
        paging.value.complete(res.rows || []);
    }
};
const checkedId = ref(null);
const clickItem = (item: any) => {
    checkedId.value = item.id;
    uni.$emit('selectGapInfo', item);
    uni.navigateBack();
};
const onRefresh = () => {
    try {
        paging.value?.reload();
    } catch (e) {
        console.error('Error refreshing address list:', e);
    }
};
onLoad((options: any) => {
    form.value.res = options?.res || '1';
    form.value.gapBaseType = options?.baseType || '';
})
</script>
<style lang="scss" scoped>
.select-item-card {
    border-radius: 16rpx;
    &.active {
        border-color: #4456fb;
    }
}
</style>