uniProject/pages/admin/Hetong/Hetong.vue

<template>
    <view class="phone-hetong-page">
      <view class="icon-title-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 class="pdf-tip" v-if="isLoading">
				加载中...
			</view>
		  </view>
      </template>
	  
	  <view class="hetong-tip-box" v-if="tId && info.status == 0">
		  请务必仔细阅读上述内容，确认已完全理解所有条款后，点击【我已阅读】按钮完成签字确认。
	  </view>
	  <button @click="handleQianming" v-if="tId && info.status == 0"
	  class="phone-green-btn ht-btn"  type="default">我已阅读</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/hetong.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 show = ref(false)
const popupRef = ref(null)
const imgList = ref([])
const isLoading = ref(true)
const timer1 = ref(null)

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

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

function init() {
  httpApi.getHetongInfo({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;
}

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

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

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

}


function goback2() {
	popupRef.value.close()
}

</script>

<style scoped>

</style>