zhywpt-h5/pages/sigManage/signContract.vue

<template>
	<view class="content" v-if="online === 2">
		<custom-header title="支付账户签约" :back="false"></custom-header>
		<view style="padding: 20rpx 0 30rpx" class="order-content">
			<!-- 获取产品展示 -->
			<view class="order-car" v-for='(item,index) in paymentChannelList' :key='index'>
				<view class="l-img">
					<image class="icon-tip" :src="item.imgUrl" mode='aspectFit'></image>
				</view>
				<view class="c-amount">
					<view class="goods-name">
						{{item.name}}
					</view>
					<view class="goods-des">
						{{item.desc}}
					</view>
					<view class="goods-label">
						<view class="label-item" v-for='(labelItem,index) in item.label' :key='index'>
							<u-tag :text="labelItem" mode="light" size='mini' bg-color='#38ca83' border-color='#38ca83'
								color='#fff' />
						</view>
					</view>
				</view>
				<view class="r-btn">
					<u-button shape="circle" plain class="custom-style" @click="handleCon">签约</u-button>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode='right' :closeable='true' length='100%'>
			<view style='background-color: #f4f4f4;height: 100vh;position: relative;'>
				<view class="title">
					签约
				</view>
				<view class="slot-content">
					<view style="background-color: #fff;">
						<view class="con-img">
							<qrcode-vue :value="qrCodeValue" level="H" :render-as="renderAs" style='width: 100%;height: 100%;' />
						</view>
						<view class="con-info">
							请打开微信扫码完成签约
						</view>
					</view>

				</view>
				<view class="bottom-btn">
					<button type="success" class="btn-txt btn" @click="handleNext">下一步</button>
				</view>
			</view>

		</u-popup>
	</view>
</template>
<script setup lang='ts'>
	import {
		fileURL
	} from '@/utils/network/api.js';
	import {
		reactive,
		ref
	} from 'vue'
	import {
		unifyTemplate
	} from '@/hooks/unifyTemplate'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		request
	} from '@/utils/network/request'
	import QrcodeVue, {
		Level,
		RenderAs
	} from 'qrcode.vue'
	const {
		CustomHeader, //头部组件
	} = unifyTemplate() //初始化数据

	const {
		initData, //初始化数据
		qdOrderVal //qdOrder中数据 ref
	} = unifyTemplate() //初始化数据
	const online = ref(1) //1为线上，2为线下
	const jumpPage = ref('pages/payment/signAContract')
	//获取页面配置
	onLoad((opin) => {
		initData(opin, 3).then(data => {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			if (opin.jumpPage) {
				jumpPage.value = opin.jumpPage
			}
			online.value = data.order.promotionModes
			if (data.order.promotionModes === 1) {
				// 线上直接去小程序
				handleTo()
			} else {
				uni.hideLoading()
			}
			qrCodeValue.value = `https://file.etcjz.cn/file/web/app.html?orderId=${data.order.orderId}`
		})
	})

	const paymentChannelList = [{
		name: '微信支付',
		imgUrl: `${fileURL}image/applyCard/wx.png`,
		desc: '服务费是每笔交易金额的0',
		label: ['微信代付', '微信便捷支付']
	}]
	const show = ref(false)
	const qrCodeValue = ref < String > ('')
	const renderAs = ref < RenderAs > ('svg')
	// 签约按钮
	function handleCon() {
		show.value = true
	}

	// 点击下一步
	function handleNext() {
		contractTesting(qdOrderVal.value.qdOrderNo, jumpPage.value)
	}
	// 跳转小程序
	function handleTo() {
		let getTokenUrl = ''
		let getUrl = ''
		
		if (import.meta.env.ENV === 'production') {
			getTokenUrl = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx8fba957179c1329a&secret=699c10826113ddb350fbe58a96e2b015'
			getUrl = 'https://api.weixin.qq.com/wxa/generatescheme?access_token='
		} else {
			getTokenUrl = '/wxApi/cgi-bin/token?grant_type=client_credential&appid=wx8fba957179c1329a&secret=699c10826113ddb350fbe58a96e2b015'
			getUrl = '/wxApi/wxa/generatescheme?access_token='
		}
		uni.request({
			url: getTokenUrl,
			method: 'GET', //请求方式，必须为大写

			success: (res) => {
				// console.log('接口返回------', res);
				let token = res.data['access_token']
				uni.request({
					url: getUrl + token,
					method: 'POST', //请求方式，必须为大写
					data: {
						"jump_wxa": {
							"path": "pages/index/index",
						}
					},
					success: (res) => {
						console.log('接口返回------', res);
						// 
						location.href = res.data.openlink
						uni.hideLoading()
					}
				})
			}
		})
	}
	// 签约检测
	function contractTesting(qdOrderNo, jumpPage) {

		const data = {
			qdOrderNo,
		}
		// uni.navigateTo({
		// 	url: '/' + jumpPage,
		// 	animationType: 'pop-in',
		// 	animationDuration: 500
		// })
		// signingInitialization(qdOrderNo)
		// return
		request('fdfbdddba6ec49f8b451cf2e299b4feb', {
			data,
		}).then((res) => {
			if (res.statusCode === 0) {
				const data = JSON.parse(res.bizContent)
				if (data.status !== 0) {
					// 后台调用它方接口报错
					uni.showModal({
						title: '警告',
						content: data.msg,
						success: function(res) {}
					});
					return
				}
				if (data.signStatus === 1 && data.accountStatus === 1 && data.bindStatus === 1) {
					// 上面三值都为1才进行下一步，否则进行签约初始化
					uni.navigateTo({
						url: '/' + jumpPage + `?qdOrderNo=${qdOrderNo}`,
						animationType: 'pop-in',
						animationDuration: 500
					})
					/* 自定义返回 */
				} else {
					// 进行签约初始化
					// 提醒未通过
					uni.showModal({
						title: '提示',
						content: '请使用微信扫描二维码进行签约',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {}
						}
					});
				}
				// qdOrderStore.orderInfo.value.orderId = JSON.parse(res.bizContent).orderId
				// 通过检测
			}
		})
	}
</script>
<!-- 签约管理 -->
<style lang='scss' scoped>
	.order-car {
		margin: 30rpx 30rpx 0;
		width: calc(100% - 60rpx);
		height: 190rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(to right, #15e5c3, #44a2df);
		display: flex;
		justify-content: space-between;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		align-items: center;
		color: #fff;

		.l-img {
			flex-shrink: 0;
			width: 120rpx;
			height: 120rpx;

			.icon-tip {
				height: 100%;
				width: 100%;
				object-fit: contain;
			}
		}

		.c-amount {
			flex: 1;
			padding: 20rpx 0;
			height: 100%;
			box-sizing: border-box;

			.goods-name {
				margin-bottom: 15rpx;
				font-size: 38rpx;
			}

			.goods-des {
				font-size: 26rpx;
				margin-bottom: 15rpx;
				color: #eff;
			}

			.goods-label {
				display: flex;
				align-items: center;

				.label-item {
					margin-right: 10rpx;
				}
			}
		}

		.r-btn {
			margin-left: 10rpx;
			flex-shrink: 0;
			width: 130rpx;
			margin-right: 20rpx;

			.custom-style {
				height: 70rpx;
				color: #fff;
				border-color: #fff;
				background-color: rgba(255, 255, 255, 0.2);
			}
		}

	}

	.title {
		font-size: 36rpx;
		text-align: center;
		font-weight: bold;
		padding: 20rpx 0;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);

		.con-img {
			width: 550rpx;
			height: 550rpx;
			padding: 100rpx;
			box-sizing: border-box;
		}

		.con-info {
			text-align: center;
			font-size: 26rpx;
			margin-bottom: 100rpx;
		}


	}

	.bottom-btn {
		position: absolute;
		padding: 20rpx;
		display: flex;
		align-items: center;
		bottom: 100rpx;
		width: 750rpx;

		.btn {
			height: 80rpx;
			opacity: 1;
			border-radius: 100rpx;
			margin: 20rpx 20rpx 20rpx 20rpx;
			width: 100%;
		}

		.btn-txt {
			background: #1AAC1B;
			margin: 10px;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
</style>