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" :breadcrumb="false"></ut-navbar>
            <view ref="baseRef" class="pd-24" id="base12345">
                <view class="startline-title mb-6">请选择GAP基地获评信息</view>
                <view class="f-s-26 c-#999">未通过审核及待审核的GAP获评信息将不会在此展示</view>
            </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 select-item-card mb-20">
                <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?.adcdName || '' }}{{ 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="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/resFailed.png" style="position: absolute; top: 0; right: 0" mode="widthFix" />
                <image v-if="+item?.res == 0" class="w-100" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/resPendingReview.png" style="position: absolute; top: 0; right: 0" mode="widthFix" />
                <image v-if="+item?.res == 1" class="w-90" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/resEffective.png" style="position: absolute; top: 0; right: 0" mode="widthFix" />
                <image v-if="item.id === checkedId" class="w-40 h-40 checked-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-lm/price/checked1.png" mode="widthFix" />
            </view>
        </view>

        <template #empty>
            <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx" image="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/noEmptyBase.png">暂无获评GAP基地信息~</ut-empty>
            <view class="f-s-28 c-#ccc w-600 text-center">如已获评GAP信息，请前往<span class="c-primary">基地-GAP基地获评信息</span>添加后再来选择若未获评GAP基地，可前往各地官方渠道进行GAP基地申报</view>
        </template>
        <template #bottom>
            <view class="pd-20 d-flex">
                <up-button type="primary" @click="confirmSelect">确认选择</up-button>
            </view>
        </template>
    </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,
    });
    if (res.code == 200) {
        paging.value.complete(res.rows || []);
    }
};
const checkedId = ref(null);
const clickItem = (item: any) => {
    checkedId.value = item.id;
};
// 确认选择
const confirmSelect = () => {
    const selectedItem = list.value.find((item) => item.id === checkedId.value);
    if (selectedItem) {
        uni.$emit('selectGapInfo', selectedItem);
        uni.navigateBack();
    } else {
        uni.showToast({
            title: '请选择一项GAP基地获评信息',
            icon: 'none',
        });
    }
};
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 || '';
});
onUnload(() => {
    uni.$off('selectGapInfo');
});
</script>
<style lang="scss" scoped>
.select-item-card {
    border: 1rpx solid #fff;
    border-radius: 16rpx;
    overflow: hidden;
    .checked-icon {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    &.active {
        border-color: $u-primary;
        background-color: #ebf6ee;
    }
}
</style>