uniProject/pages/admin/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>
			<uni-icons class="nav-bar-right-icon bar-ml10" type="list" @click="handleGoLishi" size="30"></uni-icons>

		</view>
		<template v-if="info.id">
			<view class="pdf-box"> 
			 <image v-for="item in imgList" :mode="item.mode" :src="`data:image/png;base64,${item}`"></image> 
			</view>
		</template>
		<template v-else>
			<view class="no-hetong-box">暂无合同</view>
		</template>
		<view class="hetong-tip-box" v-if="info.id && info.status == 0">
				  请务必仔细阅读上述内容，确认已完全理解所有条款后，点击【我已阅读】按钮完成签字确认。
		</view>
		<button v-if="info.id && 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/hetong.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import writeSign from "@/components/writeSign/index.vue"
  import {throttleAdvanced} from "@/utils/common.js"

	const pdfUrl1 = ref('');
	const info = ref({})
	const show = ref(false)
	const popupRef = ref(null)
	const imgList = ref([])

	function goUpPage() {
		uni.navigateBack()
	}
	onLoad(({id}) => {
		init(id)
	})

	function init(id) {
		
		if (!id) {
			uni.showToast({
				title: '数据异常，请确认路径是否完整'
			})
			return;
		}
		
		httpApi.getHetongLast({id}).then(res => {
			info.value = res.data;
			// pdfUrl1.value = `/hybrid/html/web/viewer.html?file=${encodeURIComponent(res.data.pdfUrl)}`;
			// let pdfUrl2 = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURIComponent(res.data.pdfUrl)}`
			// console.log('info', info.value)
			imgList.value = res.data.base64List;
			setTimeout(() => {
				console.log('xianshi')
				show.value = true;
			}, 3000)
		})
	}


	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: info.value.id,
      fuzeren: img.replace(/^data:image\/\w+;base64,/, '')
    }).then(res => {
      if (res.data) {
        uni.showToast({
          title: "签名成功",
          duration: 2000,
          mask: true,
          success() {
            setTimeout(() => uni.navigateBack(),2000)
          }
        })
      }
    })
  })

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

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

<style>

</style>