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

<template>
	<image style="
      margin-top: 20rpx;
      width: 100%;
      height: 240rpx;
      background-color: #eeeeee;
    " :src="`${$imgUrl}applyCard/car-service.png`"></image>
	<view class="title"> 支付宝签约代扣 </view>
	<view class="value">
		<view class="content_1">
			支付宝签约代扣是支付宝支付为车主用户提供的安全便捷的智慧服务
		</view>
		<view class="content_2">
			本次将为贵州黔通智联科技股份有限公司开启免密支付服务，后续相关的费用将通过支付宝签约代扣从你的支付宝账户扣除
		</view>
		<view class="content_3">
			注：签约成功后请返回本页面，再次点击开通服务
		</view>
	</view>
	<view class="action">
		<button type="default" class="button" @click="savaHandle()">
			开通服务
		</button>
	</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 { setItem, StorageKeys } from "@/utils/storage";
	import { msg, confirm} from "@/utils/utils";
	import {
		aliPayConfigIdTwo,
		obtainUserId,
		userSign
	} from "@/utils/network/api";
	const imgURL = `${fileURL}image/`;

	const state = reactive({
		openid: "",
		orderId: "",
		id: "",
		clientFee: "",
		code: "",
		qdOrderNo: "", //渠道订单编号
	});
	onLoad((option : any) => {
		console.log("option22222", option)
		state.orderId = option.orderId;
		state.qdOrderNo = option.qdOrderNo;
		setItem('accessToken', option.token);
		setItem(StorageKeys.Token, option.token);
		setItem('openId', option.openId);
	});

	const savaHandle = () => {
		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 = res;
							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(
									"您已完成签约，等待业务员审核发货",
									() => {
										const param = `https://qtzl.etcjz.cn/order/#/pages/sigManage/signContract?qdOrderNo=${state.qdOrderNo}&type=3`
										const params = encodeURIComponent(JSON.stringify(param))
										console.log('支付结果查询params', params)
										uni.navigateTo({
											url: `/subpackage/personal-center/webview?url=` + params
										})
									},
									"已完成签约",
									false
								);
							} else if (data.signStatus === "UNSIGN") {
								//已解约
								// msg("已解约");
								confirm(
									"您已解约！",
									() => {
										// uni.switchTab({
										// 	url: "/pages/order/order"
										// })
									},
									"您已解约",
									false
								);
							}
						});

					})


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

	}
</script>

<style lang="scss" scoped>
	.action {
		margin-top: 40rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;

		.button {
			height: 80rpx;
			background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
		}
	}

	.title {
		text-align: center;
		margin-top: 15rpx;
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
	}

	.value {
		padding: 0rpx 60rpx;
	}

	.content_1 {
		margin-top: 60rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 58rpx;
	}

	.content_2 {
		margin-top: 50rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 58rpx;
	}

	.content_3 {
		margin-top: 50rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #ff0000;
		line-height: 58rpx;
	}
</style>