forestry-wx/src/plant/base/gap-base-info/index.vue

<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
        <template #top>
            <ut-navbar title="GAP基地信息" :fixed="false" border></ut-navbar>
            <view class="d-flex a-c pd-25">
                <view class="min-w-200 flex1">
                    <ut-action-sheet v-model="form.res" :tabs="tabs" @change="onRefresh" title="选择审核状态">
                        <view class="d-flex search-select-item a-c">
                            <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ selectDictLabel(tabs, form.res) || '全部' }}</view>
                            <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
                        </view>
                    </ut-action-sheet>
                </view>
                <view class="h-86 pl-20 w-100%">
                    <ut-search ref="searchRef" v-model="form.keyword" @search="onRefresh" margin="0" :border="false" :placeholder="placeholder" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                </view>
            </view>
        </template>
        <template>
            <template>
                <view class="pl-25 pr-25">
                    <up-swipe-action>
                        <up-swipe-action-item v-for="item in list" :name="item?.id" :key="item?.id" :disabled="item?.res !== '2'" :options="optionsAction" @click="clickSwipe" class="mb-20 b-radius">
                            <view @click.stop="clickItem(item)" class="b-radius bg-#fff pd-20 p-rtv">
                                <view class="mb-10">
                                    <view class="c-#333 f-s-34 f-w-5 pb-5">{{ item?.gapBaseName }}</view>
                                    <view class="c-#999 f-s-24">{{ item?.ratedDate }}获评</view>
                                </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?.adcodeName }}{{ item?.address }}</text>
                                </view>
                                <template v-if="+item?.res == 2">
                                    <view class="h-1 bg-#F7F7F7"></view>
                                    <view class="c-#FC333F pt-20">
                                        <text class="f-s-28">审核不通过原因：</text>
                                        <text class="f-s-28">{{ item?.msg }}</text>
                                    </view>
                                </template>
                                <view class="status-tag" :class="{ [`bg-res-${item?.res}`]: true }">{{ selectDictLabel(tabs, item?.res) }}</view>
                            </view>
                        </up-swipe-action-item>
                    </up-swipe-action>
                </view>
            </template>
            <!-- 空数据处理 -->

            <template #empty v-if="address">
                <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="d-flex j-c f-s-28 c-#ccc">如需认定GAP基地，可前往数字云药官网进行申报</view>
                <view class="d-flex j-c f-s-28 c-primary pd-15">https://www.shuziyunyao.com/</view>
                <up-button type="primary" class="b-radius" style="width: 340rpx" @click="copyText('https://www.shuziyunyao.com/')">复制网址</up-button>
            </template>
        </template>
        <template #empty v-if="!address">
            <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="d-flex j-c f-s-28 c-#ccc">可点击底部按钮上传佐证材料添加获评信息</view>
        </template>
        <template #bottom v-if="!address">
            <view class="base-bottom-wrap pd-20 pb-0">
                <up-button type="primary" @click="$u.route({ url: '/plant/base/gap-base-info-edit/index' })">
                    <img class="w-38 h-36 mr-10" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/chooseGAP.png" alt="" mode="widthFix" />
                    <text>添加GAP基地信息</text>
                </up-button>
            </view>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { copyText } from '@/utils/public';
import { useClientRequest } from '@/utils/request';
import { useInfoStore } from '@/store';
const paging = ref();
const list = ref<any[]>([]);
const placeholder = ref('搜基地名称、品种、基地地址');
const tabs = ref([
    { label: '全部', value: '' },
    { label: '有效', value: '1' },
    { label: '审核未通过', value: '2' },
    { label: '待审核', value: '0' },
]);
// 判断是否是云南的企业
const isYunnanCompany = (): boolean => {
    const adcdCode = useInfoStore().companyInfo?.adcdCode;
    return adcdCode?.startsWith('53') || false;
};
const address = computed(() => isYunnanCompany());
const form = ref({
    keyword: '',
    res: '',
});

const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get<any>('/plt-api/app/gapCertificationInfo/pageList', params);
    if (!res || res.code !== 200) return;
    const { rows } = res;
    paging.value.complete(rows);
};
const onRefresh = () => {
    paging.value.reload();
};
const optionsAction = reactive([
    {
        text: '删除',
        style: {
            backgroundColor: '#f56c6c',
        },
    },
]);
const clickSwipe = async (event: object) => {
    const { name, index } = event as any;
    if (index === 0) {
        // 删除
        const res = await uni.showModal({
            title: '提示',
            content: '确定删除该GAP基地信息吗？',
        });
        console.log(res);

        if (res.confirm) {
            const delRes = await useClientRequest.get(`/plt-api/app/gapCertificationInfo/delById/${name}`);
            if (delRes && delRes.code === 200) {
                uni.showToast({ title: '删除成功', icon: 'none' });
                onRefresh();
            }
        }
    }
};
const clickItem = (item: any) => {
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/base/gap-base-info-detail/index',
        params: {
            id: item?.id,
        },
    });
};
onMounted(() => {
    uni.$on('gapBaseInfoUpdated', () => {
        onRefresh();
    });
});
</script>
<style lang="scss" scoped>
// @import '@/assets/styles/theme.scss';
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}
.status-tag {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4rpx 24rpx;
    font-size: 20rpx;
    color: #fff;
    border-radius: 0 16rpx 0 20rpx;
}
.u-page {
    padding: 0;
}

.u-demo-block__title {
    padding: 10px 0 2px 15px;
}

.swipe-action {
    &__content {
        padding: 25rpx 0;

        &__text {
            font-size: 15px;
            color: $u-main-color;
            padding-left: 30rpx;
        }
    }
}
</style>