uniProject/pages/kehu/hetong/hetong.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>
		<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 class="hetong-tip-box" v-if="info.status == 0">
				  请务必仔细阅读上述内容，确认已完全理解所有条款后，点击【我已阅读】按钮完成签字确认。
		</view>
		<button v-if="info.status == 0" type="default" class="phone-green-btn ht-btn"
			@click="handleQianming">我已阅读</button>

		<uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
			<view class="ht-qm-popup">
				<view class="icon-title-navBar-box">
					<view @click="goback2" class="nav-bar-icon"></view>
					<text class="nav-bar-title">签名</text>
				</view>
				<writeSign @getBase64="getBase64"></writeSign>
			</view>
		</uni-popup>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import * as httpApi from "@/api/khHetong.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import writeSign from "@/components/writeSign/index.vue"
  import {throttleAdvanced} from "@/utils/common.js"
  import { base64ToPath } from 'image-tools';

	const tId = ref(null)
	const info = ref({})
	const popupRef = ref(null)
	const imgList = ref([])
	const isLoading = ref(true)
  const timer1 = ref(null)

	function goUpPage() {
		uni.navigateBack()
    clearTimeout(timer1.value);
    timer1.value = null;
	}
	onLoad(({id}) => {
    tId.value = id;
		init(id)
	})

	function init(id) {
		if (!id) {
			uni.showToast({
				title: '数据异常，请确认路径是否完整'
			})
			return;
		}

		httpApi.getHetongInfo({id}).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 handleGoLishi() {
		uni.redirectTo({
			url: '/pages/admin/Hetong/HetongList'
		})
	}

	function handleQianming() {
		popupRef.value.open()
	}

  const  handleQM = throttleAdvanced((img) => {
    uni.showToast({
      title: "签名提交中...",
      mask: true,
    })

    httpApi.getHetongQianming({
      id: tId.value,
      yifangBase64: img.replace(/^data:image\/\w+;base64,/, ''), // 当前接口，只有唯一yifangBase64 + id
    }).then(res => {
      if (res.data) {
        uni.showToast({
          title: "签名成功",
          duration: 2000,
          mask: true,
          success() {
            timer1.value = setTimeout(() => uni.navigateBack(),2000)
          }
        })
      }
    })
  })

	function getBase64(img) {
		if (!img) {
			uni.showToast({
				title: '签名异常'
			})
			return;
		}
    handleQM(img)
	}

	function goback2() {
		popupRef.value.close()
	}
</script>

<style>

</style>