uniProject/pages/admin/Hetong/previewHetong.vue

<template>
  <view class="phone-hetong-page">
    <view class="phone-navBar-box">
      <view @click="goUpPage" class="nav-bar-icon"></view>
      <text class="nav-bar-title">合同</text>
      <view></view>
    </view>
    <template v-if="tId">
      <view class="pdf-box">
        <img v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`"
             @click="previewBase64Image(`data:image/png;base64,${item}`)" class="pdf-img" />
      </view>
      <!-- 加载提示 -->
      <view class="pdf-tip-box" v-if="isLoading">
        <view class="tip-img-box">
          <view class="tip-text">加载中...</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import {
  ref
} from "vue";
import * as httpApi from "@/api/hetong.js"
import {
  onLoad
} from "@dcloudio/uni-app"
import {getSanfangPreview} from "../../../api/sanfang";

const tId = ref(null)

const info = ref({})
const show = ref(false)
const imgList = ref([])
const isLoading = ref(true)
const timer1 = ref(null)

onLoad((options) => {
  tId.value = options.id;
  init();
})

function init() {
  getSanfangPreview({
    id: tId.value
  }).then(res => {
    info.value = res.data;
    imgList.value = res.data.base64List;
  }).finally(() => {
    isLoading.value = false;
  })
}

async function previewBase64Image(base64Data) {
  try {
    // 关键步骤：将 Base64 字符串转换为本地临时路径
    // 此处以使用 image-tools 的 base64ToPath 为例
    const localPath = await base64ToPath(base64Data);
    // 调用 UniApp 的图片预览 API
    uni.previewImage({
      urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
      current: 0, // 当前显示图片在 urls 数组中的索引
    });
  } catch (error) {
    // 如果出现错误（如转换失败），隐藏加载提示并告知用户
    console.error('预览失败:', error);
    uni.showToast({
      title: '预览失败',
      icon: 'none'
    });
  }
}

function goUpPage() {
  uni.navigateBack()
  clearTimeout(timer1.value);
  timer1.value = null;
}

function handleGoLishi() {
  uni.redirectTo({
    url: '/pages/admin/Hetong/HetongList'
  })
}

</script>

<style scoped>

</style>