frontend-app/pages/contract/index.vue

<template>
	<view class="content">
		<TopSafe></TopSafe>
		<Header title="我的合同" />
		<view class="contract-view">
			<ContractItem :type="type" :text="obj && obj.signatureName" :time="obj && obj.time" class="mt-24" @click="onBtn">
			</ContractItem>
		</view>
		<u-modal :show="tipsShow" :showCancelButton="true" confirmText="去认证" @cancel="onTipsCancel" @confirm="onConfirm"
			confirmColor="#7934F6" title="提示" content='签署合同需要进行实名认证，请先完成实名认证'></u-modal>
		<DownPopup :show="downShow" @ok="onSignContract" @cancel="onCancel" />
		<up-toast ref="uToastRef"></up-toast>
		<!-- 腾讯电子签H5 → 集成到UniApp -->
		<web-view v-if="signUrl" :src="signUrl" @message="handleMessage"></web-view>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/auth.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import ContractItem from './components/contract-item.vue'
import DownPopup from '@/components/common/down-popup.vue';
import { getContractList, isSignContract, } from '@/api/contract.js'
import { getSignUrl, getMiniProgramSignUrl, signContract } from '@/api/order.js';
import func from '@/utils/func.js';

export default {
	components: { Header, TopSafe, ContractItem, DownPopup },
	data() {
		return {
			type: false,
			obj: null,
			flowId: null,
			signUrl: null,
			downShow: false,
			tipsShow: false,
			userInfo: null
		};
	},
	onShow() {
	},
	onLoad() {
		this.init();
		this.userinfo();
	},
	methods: {
		init() {
			this.isSignContract()

		},
		userinfo() {
			getUserInfo().then(res => {
				if (res.bizcode == 100) {
					this.userInfo = res.data;
				}
				console.log('res', res)
			})
		},
		onConfirm() {
			this.onTipsCancel();
			uni.navigateTo({
				url: '/pages/mine_package/mine_authentication/mine_authentication'
			})
		},
		onTipsCancel() {
			this.tipsShow = false;
		},
		onCancel() {
			this.downShow = false;
		},
		isSignContract() {
			isSignContract().then(res => {
				if (res.bizcode == 100) {
					this.type = res.data;
					if (this.type) {
						this.getSignContract()
					}
				} else {
					this.$refs.uToastRef.show({
						type: 'error',
						message: res.msg,
					});
				}
			})
		},
		getSignContract() {
			getContractList().then(res => {
				if (res.bizcode == 100 && res.data.length) {
					this.obj = res.data[0];
					this.obj.time = func.formatDate(new Date(res.data[0].signatureTime), 3)
				} else {
					this.$refs.uToastRef.show({
						type: 'error',
						message: res.msg,
					});
				}
			})
		},
		onBtn() {
			if (this.type) {
				//查看
				uni.navigateTo({
					url: `/pages/contract/check`
				})
			} else {
				//去签署
				this.downShow = true;
			}
		},
		// 发起合同签章
		async onSignContract() {
			if (this.userInfo.certStatus == 0) {
				this.downShow = false;
				this.tipsShow = true;
				return;
			} else if (this.userInfo.certStatus == 1) {
				this.downShow = false;
				this.$refs.uToastRef.show({
					type: 'success',
					message: '请耐心等待审核通过',
				});
				return;
			}

			const { bizcode, data } = await signContract();
			if (bizcode === 100) {
				this.flowId = data.flowId;

				if (this.flowId)
					// #ifdef APP-PLUS || WEB
					this.onGetSignUrl(this.flowId);
				// #endif

				// #ifdef MP-WEIXIN
				// 小程序
				this.onGetMiniProgramSignUrl(this.flowId)
				// #endif
			}
		},

		// 获取H5签署链接
		async onGetSignUrl(flowId) {
			const params = {
				// 需要的参数
				flowId: flowId,
			}
			const { bizcode, data } = await getSignUrl(params);
			if (bizcode === 100) {
				this.signUrl = data.flowApproverUrlInfos[0].longUrl;
			} else {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "获取签署链接失败，请稍后再试",
				});
				return null;
			}
		},
		// 获取跳转至腾讯电子签小程序的签署链接
		async onGetMiniProgramSignUrl(flowId) {
			const params = {
				flowId: flowId,
				endPoint: 'HTTP_SHORT_URL'
			}
			const { bizcode, data } = await getMiniProgramSignUrl(params);
			if (bizcode === 100) {
				console.log("跳转至腾讯电子签小程序的签署链接", data);
				this.openTencentESign(data.schemeUrl);
			} else {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "获取签署链接失败，请稍后再试",
				});
				return null;
			}
		},

		// 电子签的回调地址
		handleMessage(e) {
			const data = e.detail;
			console.log('电子签的回调地址', e);
		},
		// 小程序签名
		openTencentESign(signPath) {
			// 这个链接需要后端调用腾讯电子签 API 获取
			uni.navigateToMiniProgram({
				appId: 'wxa023b292fd19d41d', // 腾讯电子签官方小程序的 appId
				path: signPath,              // 跳转到的页面路径 + 参数
				extraData: {},               // 如果需要传额外参数
				envVersion: 'release',       // 小程序版本 release / trial / develop
				success(res) {
					console.log('跳转成功', res)
				},
				fail(err) {
					console.error('跳转失败', err)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.contract-view {
	width: 100%;
	height: calc(100% - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
}
</style>