client-app/pages/image/info.vue

<template>
    <hc-sys navBarUi="white">
        <template #navBar>
            <hc-nav-back-bar title="声像资料详情">
                <text class="text-26" @click="editFormClick">编辑</text>
            </hc-nav-back-bar>
        </template>
        <!-- 轮播图 -->
        <swiper class="screen-swiper square-dot h-8xl" indicator-dots circular autoplay interval="5000" duration="500">
            <swiper-item v-for="(item,index) in imageList" :key="index">
                <image :src="item" mode="aspectFill"/>
            </swiper-item>
        </swiper>
        <!-- 详情 -->
        <view class="relative bg-white">
            <view class="text-black text-36 hc-p">{{dataInfo.title}}</view>
            <view class="text-26 hc-p" un-border-t="1 solid gray-1">{{dataInfo.textContent}}</view>
            <view class="hc-flex hc-p text-26 text-black" un-border-t="1 solid gray-1">
                <view class="flex-1 hc-flex">
                    <text class="i-iconoir-user"/>
                    <text class="ml-0.5">{{ dataInfo.shootingUser }}</text>
                </view>
                <view class="flex-1 hc-flex-center">
                    <text class="i-iconoir-clock"/>
                    <text class="ml-0.5">{{ dataInfo.shootingTimeStr }}</text>
                </view>
                <view class="flex-1 hc-flex-end">
                    <text class="i-iconoir-page"/>
                    <text class="ml-0.5">{{ dataInfo.fileSize }}</text>
                </view>
            </view>
        </view>
        <template v-if="dataInfo.type === 2">
            <view class="hc-flex bg-white hc-p mt-2">
                <view class="flex-1 text-26">照片号</view>
                <text class="text-black">{{dataInfo.photoCode}}</text>
            </view>
            <view class="hc-flex bg-white hc-p">
                <view class="flex-1 text-26">底片号</view>
                <text class="text-black">{{dataInfo.filmCode}}</text>
            </view>
            <view class="hc-flex bg-white hc-p">
                <view class="flex-1 text-26">参见号</view>
                <text class="text-black">{{dataInfo.seeAlsoCode}}</text>
            </view>
            <view class="hc-flex bg-white hc-p mt-2" @click="viewPdfClick">
                <view class="flex-1 text-26">查看PDF文件</view>
                <text class="i-iconoir-nav-arrow-right"/>
            </view>
        </template>
    </hc-sys>
</template>

<script setup>
import {ref} from "vue";
import {onLoad} from '@dcloudio/uni-app'
import mainApi from '~api/image/index';
import {getObjValue, isString} from "js-fast-way";
import {errorToast, toPdfPreview} from "@/utils/tools";

const dataId = ref('');
const dataInfo = ref({})
const imageList = ref([])

//页面启动
onLoad(({id}) => {
    dataId.value = id ?? '';
    getInfoApi()
})

//获取详情
const getInfoApi = async () => {
    dataInfo.value = {}
    imageList.value = []
    if (!dataId.value) {
        errorToast('参数异常，请退出重试')
        return false;
    }
    uni.showLoading({title: '获取数据中...', mask: true});
    const { data } = await mainApi.queryById({
        id: dataId.value
    })
    const res = getObjValue(data)
    console.log(res)
    dataInfo.value = res
    imageList.value = res.imageUrl.toString().split(',')
    uni.hideLoading();
}

//查看PDF文件
const viewPdfClick = async () => {
    const { id, margePdfUrl } = dataInfo.value
    if (margePdfUrl) {
        await toPdfPreview(margePdfUrl)
    } else {
        const { data } = await mainApi.imageClassificationFile({id})
        const url = isString(data) ? data : ''
        if (url) {
            dataInfo.value.margePdfUrl = url
            await toPdfPreview(url)
        } else {
            errorToast('预览资料文件异常')
        }
    }
}

//编辑资料
const editFormClick = () => {
    const { id } = dataInfo.value
    uni.navigateTo({
        url: `/pages/image/form?id=${id}`
    })
}
</script>