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,index) in imgList" :key="index" 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" :style="{ top: `calc(42px + ${statusBarHeight}px );`}">
				<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 v-if="showQianming" @getBase64="getBase64"></writeSign>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,reactive,onMounted,onUnmounted
	} 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, toast
	} from "@/utils/common.js"
	import {
		base64ToPath
	} from "image-tools";
	const statusBarHeight = ref(0);	
	const tId = ref(null)

	const info = ref({})
	const show = ref(false)
	const popupRef = ref(null)
	const showQianming = ref(false)
	const imgList = ref([])
	const isLoading = ref(true)
	const timer1 = ref(null)
	const imgsArr = reactive({
			loadingIcon: '',
	})
	const fromPage = ref('')
	const timer2 = ref(null);

	onMounted(() => {
			uni.getSystemInfo({
			success: (res) => {
			statusBarHeight.value = res.statusBarHeight;
			}
			});
		});
		
	onUnmounted(() => {
		clearTimeout(timer2.value);
		timer2.value = null;
	})	
		
	onLoad((options) => {
		tId.value = options.id;
		fromPage.value = options.from;
		const auth = cacheManager.get('auth');
		imgsArr.loadingIcon = cacheManager.get('projectImg').loading_icon;
		init();
	})

	function handleQianming() {
		popupRef.value.open()
		setTimeout(() => {
			showQianming.value = true
		})
	}

	function init() {
		httpApi.getHetongPreview({
			id: tId.value
		}).then(res => {
			info.value = res.data;
			imgList.value = res.data.base64List;
		}).catch(err => {
			timer2.value = setTimeout(() => {
				handleGoLishi()
			},3000)
		}).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() {
		clearTimeout(timer1.value);
		timer1.value = null;
		handleGoLishi()
	}

	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() {
		if (fromPage.value == 'appcx') {
			uni.redirectTo({
				url: '/pages/client/ShouYe/shouye'
			})
			return;
		}
		
		uni.navigateBack()
	}

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

<style scoped>

</style>