uniProject/pages/admin/Hetong/components/qianMing.vue

<template>
	<view>
		<!-- 合同模板 -->
		<view class="sfht-mt24">
			<view class="form-label-select form-radius-box">
				<view class="phone-form-label"><text class="form-label-require">
				<text class="form-label-require">*</text>
				</text>签名</view>
				<view class="form-radio-select" @click="handleQianming">
					<view>{{!!data.hetong.qianmingBase64? '已签名': ''}}</view>
					<icon></icon>
				</view>
			</view>
		</view>
		<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,
		reactive,
		nextTick
	} from "vue";
	import writeSign from "@/components/writeSign/index.vue"
	import {
		throttleAdvanced
	} from "@/utils/common.js"
	import {
		base64ToPath
	} from "image-tools";
	import {
		useHetong
	} from "../useHetong.js"

	const {
		injectHetong
	} = useHetong();
	const data = injectHetong()



	const popupRef = ref(null)

	const handleQM = throttleAdvanced((img) => {
		data.hetong.qianmingBase64 = img.replace(/^data:image\/\w+;base64,/, '')
		goback2();
	})

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

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

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

<style>
</style>