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%"
			z-index="990"
		>
			<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%;' /> -->
							<image
								style="width: 100%; height: 100%"
								:src="imageSign"
								mode="aspectFit"
							></image>
						</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 wx from 'weixin-js-sdk';
import QrcodeVue, { Level, RenderAs } from 'qrcode.vue';
import { setToken, getToken } from '@/utils/storage';
import { handleToTypes } from '@/utils/utils';
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, 4).then(async (data) => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		// if (opin.jumpPage) {
		// 	jumpPage.value = opin.jumpPage
		// }
		jumpPage.value = data.config.jumpPage || jumpPage.value;
		online.value = data.order.promotionModes;
		await login(data);
		let key = await contractTesting(
			qdOrderVal.value.qdOrderNo,
			jumpPage.value,
			true
		);
		if (key) {
			return;
		}
		if (data.order.promotionModes === 1) {
			// 线上直接去内部判断
			handleToType(data.qdOrder.qtOrderNo);
		} else {
			uni.hideLoading();
			getCodeIamge(data.qdOrder.qtOrderNo);
		}
	});
});
// 获取签约二维码
const getCodeIamge = (orderId) => {
	let data = {
		orderId,
		accessToken: loginData.token
	};
	request('5f0b52cc55b94827840966e3af05ec53', {
		data
	}).then((res) => {
		if (res.statusCode === 0) {
			let bizContent = JSON.parse(res.bizContent);
			const reg = /^\//;
			if (!reg.test(bizContent.codeUrl)) {
				bizContent.codeUrl = '/' + bizContent.codeUrl;
			}
			// 处理为完整路径
			imageSign.value =
				window.location.protocol +
				'//' +
				window.location.host +
				bizContent.codeUrl;
			console.log('签约图片', bizContent);
		}
	});
};
// 无感登录,如果没有登录调用登录
const loginData = reactive({
	token: '',
	openId: ''
});
async function login(orderData) {
	let data = {
		userType: '',
		account: ''
	};
	if (orderData.order.userType === 'PERSONAL_USER') {
		// 个人办理
		data.userType = 'PERSONAL';
		data.account = orderData.order.customerTel;
	} else {
		// 单位办理
		data.userType = 'ENTERPRISE';
		data.account = orderData.order.customerIdnum;
	}
	console.log(data, '无感登录', qdOrderVal.value);
	await request('abaf0013caa24dafad12b0f571e8ee40', {
		data
	}).then((res) => {
		if (res.statusCode === 0) {
			let bizContent = JSON.parse(res.bizContent);
			console.log('login', bizContent);
			setToken(bizContent.accessToken);
			// 保存token
			loginData.token = bizContent.accessToken;
			loginData.openId = bizContent.openId;
		}
	});
}
// 处理进入类型
const handleToType = (qtOrderNo) => {
	let type = parseInt(uni.getStorageSync('web_type')) || '';
	let userAgent = navigator.userAgent.toLowerCase();
	console.log('类型', type);
	const agentType = handleToTypes();
	if (type) {
		if (type === 1) {
			// 微信小程序
			handleTonei();
		} else if (type === 2) {
			// 微信公众号
			handleToWai();
		} else if (type === 3) {
			// 支付宝小程序
			handleToZhifubao();
		} else {
			uni.hideLoading();
			getCodeIamge(qtOrderNo);
		}
	} else {
		if (agentType === 'alipaymini') {
			// 支付宝小程序环境
			handleToZhifubao();
		} else if (agentType === 'wechatmini') {
			// 微信内部
			handleTonei();
		} else if (agentType === 'wechat') {
			// 微信公众号
			handleToWai();
		} else {
			uni.hideLoading();
			getCodeIamge(qtOrderNo);
		}
	}
};
const paymentChannelList = [
	{
		name: '微信支付',
		imgUrl: `${fileURL}image/applyCard/wx.png`,
		desc: '服务费是每笔交易金额的0',
		label: ['微信代付', '微信便捷支付']
	}
];
const show = ref(false);
const imageSign = ref<String>('');
const renderAs = ref<RenderAs>('svg');
// 签约按钮
function handleCon() {
	show.value = true;
}

// 点击下一步
function handleNext() {
	contractTesting(qdOrderVal.value.qdOrderNo, jumpPage.value);
}
// 跳转支付宝小程序
function handleToZhifubao() {
	let token = loginData.token;
	let openId = loginData.openId;
	my.navigateTo({
		// appid:'2021004102619032',
		url: `/subpackage/orders/sign/sign-up-ali?token=${token}&openId=${openId}&orderId=${qdOrderVal.value.qtOrderNo}&qdOrderNo=${qdOrderVal.value.qdOrderNo}`
	});
}
// 跳转微信小程序内部
function handleTonei() {
	let token = loginData.token;
	let openId = loginData.openId;
	// let data = JSON.parse(res.data.rd.bizContent)
	wx.miniProgram.navigateTo({
		// appId: 'wx008c60533388527a', // 要打开的小程序的AppID
		// url: `/pages/sign/auth?accessToken=${token}&openId=${openId}&orderId=${qdOrderVal.value.qtOrderNo}&qdOrderNo=${qdOrderVal.value.qdOrderNo}&reset=111`, // 可选，小程序的页面路径，可以不填
		url: `/carPark/pages/dmc/signingAContract/signingAContract?accessToken=${token}&openId=${openId}&orderId=${qdOrderVal.value.qtOrderNo}&qdOrderNo=${qdOrderVal.value.qdOrderNo}&reset=111`, // 可选，小程序的页面路径，可以不填
		extraData: {
			// 可选，传递给小程序的数据，如分享信息等
		},
		success(res) {
			// 打开小程序成功的回调
			// console.log(res);
			// alert(JSON.stringify(res) + '123')
		},
		fail(err) {
			// 打开小程序失败的回调
			// console.error(err);
			// alert(JSON.stringify(err) + '456')
		}
	});
}

// 跳转微信小程序-外链
function handleToWai() {
	let token = loginData.token;
	let openId = loginData.openId;
	let getTokenUrl =
		'/cgi-bin/token?grant_type=client_credential&appid=wx008c60533388527a&secret=95197718b43b497f02732bd9f8011080';
	let getUrl = '/wxa/generatescheme?access_token=';

	uni.request({
		url: getTokenUrl,
		method: 'GET', //请求方式，必须为大写
		success: (res) => {
			// console.log('接口返回------', res);
			let accessToken = res.data['access_token'];
			uni.request({
				url: getUrl + accessToken,
				method: 'POST', //请求方式，必须为大写
				data: {
					jump_wxa: {
						path: '/carPark/pages/dmc/signingAContract/signingAContract',
						query: `accessToken=${token}&openId=${openId}&orderId=${qdOrderVal.value.qtOrderNo}&qdOrderNo=${qdOrderVal.value.qdOrderNo}&reset=111`,
						env_version: 'develop' //正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。
					}
				},
				success: (res) => {
					console.log('接口返回------', res);
					if (res.data.errcode === 0) {
						location.href = res.data.openlink;
					}
					uni.hideLoading();
				}
			});
		}
	});
}
// 签约检测
const contractTesting = async (qdOrderNo, jumpPage, isInit = false) => {
	const data = {
		qdOrderNo
	};

	return await request('fdfbdddba6ec49f8b451cf2e299b4feb', {
		data
	}).then((res) => {
		if (res.statusCode === 0) {
			const data = JSON.parse(res.bizContent);
			if (
				data.signStatus === 1 &&
				data.accountStatus === 1 &&
				data.bindStatus === 1
			) {
				// 上面三值都为1才进行下一步，否则进行签约初始化
				uni.navigateTo({
					url: '/' + jumpPage + `?qdOrderNo=${qdOrderNo}`,
					animationType: 'pop-in',
					animationDuration: 500
				});
				return true;
				/* 自定义返回 */
			} else {
				// 进行签约初始化
				// 提醒未通过
				if (!isInit) {
					uni.showModal({
						title: '提示',
						content: '请使用微信扫描二维码进行签约',
						success: function (res) {}
					});
				}
			}
			// qdOrderStore.orderInfo.value.orderId = JSON.parse(res.bizContent).orderId
			// 通过检测
		}
	});
};
// async function contractTesting(qdOrderNo, jumpPage, isInit = false) {
// 	const data = {
// 		qdOrderNo
// 	};
// 	// uni.navigateTo({
// 	// 	url: '/' + jumpPage,
// 	// 	animationType: 'pop-in',
// 	// 	animationDuration: 500
// 	// })
// 	// signingInitialization(qdOrderNo)
// 	// return
// 	uni.showModal({
// 		title: '提示',
// 		content: '请使用微信扫描二维码进行签约',
// 		success: (res) =>{
// 			console.log(res);
// 		},
// 		fail:(err)=>{
// 			console.log(err);
// 		}
// 	});
// 	return  request('fdfbdddba6ec49f8b451cf2e299b4feb', {
// 		data
// 	}).then((res) => {
// 		if (res.statusCode === 0) {
// 			const data = JSON.parse(res.bizContent);
// 			if (
// 				data.signStatus === 1 &&
// 				data.accountStatus === 1 &&
// 				data.bindStatus === 1
// 			) {
// 				// 上面三值都为1才进行下一步，否则进行签约初始化
// 				uni.navigateTo({
// 					url: '/' + jumpPage + `?qdOrderNo=${qdOrderNo}`,
// 					animationType: 'pop-in',
// 					animationDuration: 500
// 				});
// 				return true;
// 				/* 自定义返回 */
// 			} else {
// 				// 进行签约初始化
// 				// 提醒未通过
// 				console.log('isInit', isInit);
// 				if (!isInit) {
// 					console.log('isInit', isInit, uni.showModal);
// 					uni.showModal({
// 						title: '提示',
// 						content: '请使用微信扫描二维码进行签约',
// 						success: function (res) {}
// 					});
// 				}
// 			}
// 			// 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>