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"> pdf展示 </view>
        <!-- 	<web-view class="dljt-pdf-view" :src="pdfUrl1" v-if="show"
          webview-styles="height: 50vh;margin-top: 75px"></web-view> -->
      </template>
	  
	  
	  <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"

const tId = ref(null)
const pdfUrl1 = ref(null)

const info = ref({})
const show = ref(false)
const popupRef = 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;
    pdfUrl1.value = res.data.pdfUrl;
  })
}

function goUpPage() {
  uni.navigateBack()
}

function getBase64(img) {
	if (!img) {
		uni.showToast({
			title: '签名异常'
		})
		return;
	}
	
	httpApi.getHetongQianming({
		id: info.id,
		fuzeren: img.replace(/^data:image\/\w+;base64,/,'')
	}).then(res => {
		if (res.data) {
			uni.showToast({
				title: "签名成功",
				duration: 2000,
				success() {
					goUpPage()
				}
			})
		}
	})
}


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

</script>

<style scoped>

</style>