zhywpt-sp/subpackage/orders/sign-up-ali.vue

<template>
	<view class="container">
		<view class="t-card">
			<view class="title">
				<image :src="`${$imgUrl}issuance/title-bg.png`" mode="aspectFit" class='bg'></image>
				<image :src="`${$imgUrl}issuance/bg-xia.png`" mode="aspectFit" class='bg-xia'></image>
				<view class="txt">
					支付宝签约代扣
				</view>
			</view>
			<view class="value">
				<view class="item">
					<view class="l-icon"></view>
					<view class="r-txt">
						支付宝签约代扣是支付宝支付为车主用户提供的安全便捷的智慧服务
					</view>
				</view>
				<view class="item">
					<view class="l-icon"></view>
					<view class="r-txt">
						本次将为贵州黔通智联科技股份有限公司开启免密支付服务，后续相关的费用将通过支付宝签约代扣从你的支付宝账户扣除
					</view>
				</view>
			</view>
			<view class="as-layout-horizontal agreement">
				<checkbox-group @change="checkboxChange">
					<checkbox :checked="state.checked" style="transform: scale(0.8)" />我已阅读并同意
				</checkbox-group>
				<text style="color:#007AFF;text-decoration: underline;" @click="downAuthD()">《代扣协议》</text>
			</view>
		</view>
		<view class="action">
			<view class="btn-tip">
				<image :src="`${$imgUrl}issuance/note.png`" mode="aspectFit" class="tip-icon"></image>
				注：签约成功后请返回本页面，再次点击开通服务
			</view>
			<button type="default" class="button" @click="savaHandle()">
				开通服务
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { reactive } from "vue";
	import { request, requestNew } from "@/utils/network/request.js";

	import { stringToJson } from "@/utils/network/encryption";
	import { fileURL } from "@/datas/fileURL.js";
	import { msg, confirm } from "@/utils/utils";
	import {
		aliPayConfigIdTwo,
		obtainUserId,
		infoQuery,
		envs, userSign
	} from "@/utils/network/api";
	const imgURL = `${fileURL}image/`;

	const state = reactive({
		openid: "",
		orderId: "",
		id: "",
		clientFee: "",
		code: "",
		checked: false,
		agreeURL: "",
		channelSing: "0",//0 正常签约  1恢复签约
	});
	onLoad((option : any) => {
		state.orderId = option.orderId;
		if (option.channelSing) {
			state.channelSing = option.channelSing;
		}
		state.vehiclePlate = option.vehiclePlate;
		getInfo();
	});
	const checkboxChange = (e) => {
		state.checked = !state.checked;
		console.log(state.checked);
	};
	const downAuthD = () => {
		uni.downloadFile({
			url: state.agreeURL,
			filePath: uni.env.USER_DATA_PATH + '/' + '代扣协议.docx',
			success(res) {
				const filePath = res.filePath
				uni.openDocument({
					filePath: filePath,
					fileType: 'docx',
					showMenu: true, //关键点
					success: function (res) {
					},
					fail: function (err) {
						msg("打开文档失败");
					}
				});
			},
			fail: function (err) {
				msg("下载文档失败");
				console.log("err", err)
			},
			complete(res) {

			}
		})
	}
	const getInfo = () => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				businessType: 'WITHHOLD_AGREEMENT' //代扣协议
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		requestNew(infoQuery, options)
			.then((res) => {
				let data = res
				if (data.textType = "URL") {
					state.agreeURL = envs[process.env.NODE_ENV].baseUrl + data.text
				}
				console.log("代扣协议", state.agreeURL);
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const savaHandle = () => {
		if (!state.checked) {
			msg("请勾选协议！")
			return;
		}
		my.getAuthCode({
			scopes: 'auth_user',
			success: res => {
				// 获取需要的用户信息
				state.code = res.authCode
				//如果获取openId成功
				if (state.code) {
					console.log("code*******", state.code);
					const optionsUser = {
						type: 2,
						data: {
							payConfigId: aliPayConfigIdTwo,
							code: res.authCode
						},
						method: "POST",
						showLoading: true,
					};
					console.log('支付宝用户编号请求：', optionsUser)

					requestNew(obtainUserId, optionsUser).then((res) => {
						console.log('支付宝用户编号返回：', res)
						const bizContent = res;
						var data = {
							orderId: state.orderId,
							subOpenId: bizContent.openId,
						};
						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						requestNew(userSign, options).then((res) => {
							console.log("res*******", res);
							const data = stringToJson(res.bizContent);
							console.log("data*******", data);
							if (data.signStatus === "WAIT_SIGN") {
								//待签约
								my.ap.navigateToAlipayPage({
									path: "https://render.alipay.com/p/yuyan/180020010001250649/sign.html?orderId=" + data.alipayOrderId
								});
							} else if (data.signStatus === "SIGNED") {
								//已签约
								// msg("已签约");
								confirm("您已完成签约，等待业务员审核发货", () => {
									uni.redirectTo({
										url:  `/pages/order/order?index=0`
									})
								}, "已完成签约", false);
							} else if (data.signStatus === "UNSIGN") {
								//已解约
								// msg("已解约");
								confirm(
									"您已解约！",
									() => {
										uni.redirectTo({
											url:  `/pages/order/order?index=0`
										})
									},
									"您已解约",
									false
								);
							}
						});

					})


				} else {
					//如果获取openId失败
					uni.showToast({
						title: "网络异常，请重试！",
						icon: "none",
						duration: 1000,
					});
					return;
				}
			},
			fail: err => {
				console.log('my.getAuthCode 调用失败', err)
			}
		});

	}
</script>

<style lang="scss" scoped>
	.container {
		background: #E9EDF0;
		height: 100vh;
		width: 100%;
		position: relative;
		overflow: hidden;

		.t-card {
			margin: 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 50rpx 30rpx;
		}
	}

	.action {
		position: absolute;
		bottom: 0rpx;
		left: 0;
		height: 188rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.btn-tip {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #CCB375;
			margin-bottom: 14rpx;
			display: flex;
			align-items: center;

			.tip-icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}

		.button {
			height: 88rpx;
			background: radial-gradient(at 0% 0%, #C6B077 0%, #DFCC96 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 88rpx;
			width: 660rpx;
			margin: 0 auto;
		}
	}

	.title {
		margin: 0 auto;
		width: 322rpx;
		height: 44rpx;
		position: relative;

		.bg {
			width: 322rpx;
			height: 44rpx;
		}

		.bg-xia {
			left: 50%;
			position: absolute;
			width: 200rpx;
			height: 8rpx;
			transform: translateX(-50%);
			bottom: 0;
		}

		.txt {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: bold;
			font-size: 36rpx;
			color: #004576;
			position: absolute;
			width: 322rpx;
			text-align: center;
			bottom: 0;
		}
	}

	.item {
		display: flex;
		margin-top: 60rpx;
		font-size: 28rpx;
		font-family: SourceHanSansSC, SourceHanSansSC;
		font-weight: 400;
		color: #222;
		line-height: 48rpx;

		.l-icon {
			margin-top: 20rpx;
			flex-shrink: 0;
			border-radius: 50%;
			height: 10rpx;
			width: 10rpx;
			background-color: #004576;
			margin-right: 18rpx;


		}
	}

	.item2 {
		margin-top: 30rpx;
	}

	.agreement {
		font-size: 30rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
</style>