uniProject/pages/admin/Hetong/HetongInfo.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">
        <view class="pdf-box">
          <image v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`"></image>
        </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 class="loading-overlay" v-if="isLoading">
	  	<view class="loading-spinner"></view>
	  	<text class="loading-text">加载中...</text>
	  </view>
    </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"

const tId = ref(null)

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

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;
  })
}

function goUpPage() {
  uni.navigateBack()
}

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() {
          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>