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;
		// setItem("QYorderId",option.orderId+'')
	});

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

				wx.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 = () => {
		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') {
				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;

			}
		});

	};
</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>