uniProject/pages/client/hetong/HetongInfo.vue

<template>
	<view class="phone-hetong-page">
		<!-- 导航区域 -->
		<customNavbarVue title="合同" :show-back-btn="true" @back="handleGoLishi"></customNavbarVue>
		<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>
			<!-- 加载提示 -->
			<view class="pdf-tip-box" v-if="isLoading">
				<view class="tip-img-box">
					<view :style="{ backgroundImage: 'url(' + imgsArr.loadingIcon + ')' }" class="tip-icon"/>
					 <view class="tip-text">加载中...</view>
				</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="top" background-color="#fff" :is-mask-click="false" :mask-click="false">
			<view class="ht-qm-popup">
				<customNavbarVue title="签名" :show-back-btn="true" @back="goback2"></customNavbarVue>
				<writeSign @getBase64="getBase64"></writeSign>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,reactive
	} from "vue";
	import * as httpApi from "@/api/jzHetong.js"
	import cacheManager from '@/utils/cacheManager.js'
	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
	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)
	const imgsArr = reactive({
			loadingIcon: '',
	})

	onLoad((options) => {
		tId.value = options.id;
		const auth = cacheManager.get('auth');
		imgsArr.loadingIcon = cacheManager.get('projectImg').loading_icon;
		init();
	})

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

	function init() {
		httpApi.getHetongPreview({
			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,
			qianmingBase64: 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;
		}
		handleQM(img)

	}
	function handleGoLishi() {
		uni.navigateBack()
	}

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

<style scoped>

</style>