zhywpt-sp/applyCard/sign-up.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>
	<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 {
		etcQYAction
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		fileURL
	} from "@/datas/fileURL.js";
	import navBar from "../components/nav-bar/nav-bar2.vue";
	import navBgCar from "./components/nav-bg-car4";
	import {
		setItem
	} from "@/utils/storage";
	import {
		msg
	} from "@/utils/utils";
	import {
		checkOrderStatus,
		orderPay,
		wechatAppID,
		wechatPayConfigId,
		wechatSecret,
	} from "@/utils/network/api";
	const imgURL = `${fileURL}image/`;

	const state = reactive({
		openid: "",
		orderId: "",
		id: '',
		clientFee: ''
	});
	onLoad((option: any) => {
		getOpenID();
		state.orderId = option.orderId;
		state.clientFee = option.clientFee;
		state.id = option.id;
	});

	//获取微信小程序openid
	const getOpenID = () => {
		uni.login({
			provider: "weixin",
			success: function(e) {

				uni.request({
					url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
					success: (res: any) => {
						state.openid = res.data.openid;
						setItem("QYorder", state)
						console.log(res);
					},
				});
			},
		});
	};

	const savaHandle = () => {
		//如果获取openId成功
		if (state.openid != '') {
			var data = {
				orderId: state.orderId,
				subOpenId: state.openid,
			};
			const options = {
				type: 2,
				data: data,
				method: "POST",
				showLoading: true,
			};
			request(etcQYAction, options).then((res) => {
				const data = stringToJson(res.bizContent);
				console.log(data);
				if (data.userState === 'UNAUTHORIZED') {
					uni.navigateToMiniProgram({
						appId: 'wxbcad394b3d99dac9',
						path: 'pages/route/index',
						extraData: {
							appid: 'wxcb1388c809fe25a9',
							sub_appid: 'wx008c60533388527a',
							mch_id: '1500877591',
							sub_mch_id: '1622652848',
							nonce_str: data.nonceStr,
							sign_type: 'HMAC-SHA256',
							trade_scene: 'HIGHWAY',
							plate_number: data.plateNumber,
							sub_openid: data.subOpenId,
							sign: data.sign,
						},
						success(res) {
							console.log(res);
						},
						complete(res) {
							console.log(res);
						},
						fail(res) {
							console.log(res);
							// 未成功跳转到车主小程序
						},
					});
				} else if (data.userState === 'NORMAL') {
					msg('已开通车主服务')
					uni.navigateTo({
						url: `/applyCard/product-detail?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}`,
					});
				} else if (data.userState === 'PAUSED') {
					msg('已暂停车主服务')
					return;
				} else if (data.userState === 'OVERDUE') {
					msg('用户已开通车主服务，但欠费状态。提示用户还款，请跳转到车主服务')
					return;

				}
			});


		} else {
			//如果获取openId失败
			uni.showToast({
				title: "网络异常，请重试！",
				duration: 500
			})
			return;
		}
	};
</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;
	}
</style>