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

<template>
    <view class="ksqulc">
        <z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" refresher-only @onRefresh="onRefresh" scroll-with-animation>
            <template #top>
                <ut-navbar leftText="GAP基地获评信息详情" :fixed="false" border></ut-navbar>
            </template>
            <view class="p-rtv">
                <!-- 基本信息 -->
                <image class="gap_res_image w-160 h-160" :src="`/static/images/plant/base/gap_res${form.res}.png`" mode="widthFix" />
                <view class="pd-24 bg-#fff mb-10">
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地类型：</span>
                        <span class="c-#333">{{ selectDictLabel(pt_base_type, form?.gapBaseType) || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地名称：</span>
                        <span class="c-#333">{{ form?.gapBaseName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">获评品种：</span>
                        <span class="c-#333">{{ form?.medicineName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">获评时间：</span>
                        <span class="c-#333">{{ form?.ratedDate || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地所在地区：</span>
                        <span class="c-#333">{{ form?.adcodeName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">详细地址：</span>
                        <span class="c-#333">{{ form?.address || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <view class="f-s-30 c-#666 mb-10">基地范围：</view>
                        <view class="bg-#f7f7f7 d-flex ov-hd p-rtv">
                            <image class="w-full" v-if="form?.basePic" :src="form?.basePic" mode="widthFix" @click="previewBasePic"></image>
                            <view v-else class="w-full h-120 d-flex a-c j-c c-999">暂无基地范围</view>
                        </view>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地面积：</span>
                        <span class="c-#333">{{ form?.area || '-' }}{{ form?.areaUnit || '亩' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地经纬度：</span>
                        <span class="c-#333">E{{ form?.lng || '-' }}, N{{ form?.lat || '-' }}</span>
                    </view>
                    <view v-if="form?.certFile" class="f-s-30 pd2-16-0 info-border-bottom">
                        <view class="f-s-30 c-#666 mb-10">官方公示证明材料</view>
                        <ut-album :urls="form?.certFile"></ut-album>
                    </view>
                    <view v-if="form?.url" class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">官方公示网址：</span>
                        <span class="c-#333">{{ form?.url || '-' }}</span>
                    </view>
                </view>
            </view>
            <template v-if="form.res == '2'" #bottom>
                <view class="pd-20 d-flex">
                    <up-button @click="$u.route({ type: 'redirect', url: '/plant/base/gap-base-info-edit/index', params: { id: did } })" type="primary">修改</up-button>
                </view>
            </template>
        </z-paging>
    </view>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { getUrlParams, recursiveDecodeURIComponent } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_base_type } = toRefs<any>(proxy?.useDict('pt_base_type'));
const paging = ref<any>(null);
const form = ref<any>({});
const did = ref('');

// 获取详情（GAP获评信息）
const getDetailById = async (id: string) => {
    if (!id) return;
    const res = await useClientRequest.get(`/plt-api/app/gapCertificationInfo/getInfoById/${id}`);
    if (res && res.code === 200) {
        form.value = res.data || {};
    }
};

const onRefresh = () => {
    getDetailById(did.value);
    paging.value?.complete();
};

// 页面入参解析并加载
onLoad((options: any) => {
    did.value = options?.id || getUrlParams(recursiveDecodeURIComponent(options?.q))?.id || '';
    getDetailById(did.value);
});

// 预览基地范围图片
const previewBasePic = () => {
    const url = form.value?.basePic;
    if (!url) return;
    uni.previewImage({ urls: [url], current: 0 });
};
</script>
<style lang="scss" scoped>
.z-paging-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

.btn-aree-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.plot-item {
    border: 1rpx solid rgba($u-primary, 0.4);
    border-radius: 10rpx;
}
.gap-info-card {
    border: 1rpx solid rgba($u-primary, 0.4);
}

.gap_res_image {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
}
</style>