zhywpt-sp/pages/recharge/recharge.vue

<template>
	<view class="wrapper">
		<view class="account">
			<image :src="`${$imgUrl}common/bg-recharge.png`" class="head-bg"></image>
			<view class="account-text">
				<view class="balance">
					<!-- <text class="balance-tit">账户余额</text> -->
					<!-- <text class="balance-val">20.00元</text> -->
				</view>
				<view class="right-box">
					<view class="no">账户编号：000100</view>
					<view class="btn btn-record">账户充值记录</view>
				</view>
			</view>
		</view>
		<view class="input-box">
			<input placeholder="请输入金额" class="input" />
			<view class="tips">最低充值金额不小于10元</view>
		</view>
		<view class="tabs">
			<view class="tab-tit">在线充值</view>
			<view class="tab">
				<view class="item">50元</view>
				<view class="item active">100元</view>
				<view class="item">200元</view>
				<view class="item">300元</view>
				<view class="item">500元</view>
				<view class="item">1000元</view>
			</view>
		</view>
		<view class="btn btn-primary" @click="rechargeAction">立即充值</view>
	</view>
</template>

<script setup lang="ts">
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		quanCheck,
		quanApply,
		quanXf,
		cardCzPayResultCheck,
		cardCzApply,
		cardCzPay,
		cardCzPayResult,
		cardCzXFCheck,
		quanConfirm,
		wechatAppID,
		wechatPayConfigId,
		wechatSecret,
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		reactive
	} from "vue";
	import {
		msg
	} from "@/utils/utils";
	import {
		getItem,
		StorageKeys,
		setItem
	} from "@/utils/storage";

	const datas = require("../../static/etcUtil/datas.js");
	const bluetoothUtil = require("../../static/etcUtil/index.js");
	const cmd = require("../../static/etcUtil/cmdConfig.js");
	const tools = require("../../static/etcUtil/tools.js");

	const state = reactive({
		openid: "",
		connectSuccess: undefined,
		fee: 1,
		orderNum: '',
		cardId: '', //卡号 需要传参
		mockpreBalance: 2000 //fix:模拟余额 目前没有检测状态接口，第一次会模拟圈层检测来检测状态
	});

	const card = reactive({
		cardId: "",
		netId: "",
		cardType: "",
		startTime: "",
		endTime: "",
		userName: "",
		idNum: "",
		vehiclePlate: "",
		vehiclePlateColor: "",
		color: "",
		version: "",
		type: "",
		favourable: "",
		money: undefined,
		v_userType: "",
	});
	onLoad((option) => {
		/*获取openId 用途:（用户支付）*/
		getOpenID();
		/*传参*/
		state.cardId = option.cardId
		state.connectSuccess = option.connectSuccess
		state.orderNum = getItem("orderNum")
		if (state.connectSuccess === '1') {
			/*读卡*/
			getCardId()
		}
	});


	/*点击充值按钮*/
	const rechargeAction = () => {

		/*进行圈层检测，此处检测仅为校验圈层状态来决定去哪里*/
		console.log('进行圈层检测')
		quanCheckAction().then((val: any) => {
			//如果 圈层检测正常
			if (val.chargeStatus === 1) {
				console.log(`进行充值检测`)
				czCheckAction().then((checkResult: any) => {

					//判断订单逻辑如果有订单充值 则直接拿到订单去链接蓝牙
					if (checkResult.orders && checkResult.orders.length > 0) {

						//拿到订单,存起来
						state.orderNum = checkResult.orders[0].orderNum
						setItem("orderNum", state.orderNum)

						//链接蓝牙
						uni.navigateTo({
							url: `/pages/bluetooth/device-active-step3?routeType=2`,
						});
					} else {
						console.log(`进行充值申请`)
						cardCzApplyAction().then((applyResult: any) => {

							//拿到订单 存起来
							state.orderNum = applyResult.orderNum
							setItem("orderNum", state.orderNum)
							//如果订单没有支付 走支付
							if (applyResult.orderStatus === 'ORDER_NOT_PAY') {

								//走支付
								console.log('走支付')
								wxPayment()
							}
						})
					}
				})

			} else {
				//走蓝牙进行修复
				uni.navigateTo({
					url: `/pages/bluetooth/device-active-step3?routeType=2`,
				});

			}
		})
	}

	/*读卡*/
	const getCardId = () => {
		console.log('======获取卡信息======')
		let cmdArr = [
			cmd.HOME_DIRECTORY,
			//选择主目
			cmd.APPLICATION_DIRECTORY,
			//选择文件1001--DF01联网收费应用目录
			cmd.CMD_READBINARY,
			//15文件--卡片发行基本数据文件
			cmd.CMD_GETBALANCE
			//钱包
		];
		tools.showLoadingAlert("正在执行指令");
		bluetoothUtil.transCmd(cmdArr, "10", function(res) {
			tools.hideLoadingAlert();
			//10：写卡   20：写OBU
			let str = res[2].substring(res[2].length - 4, res[2].length);
			let str3 = res[3].substring(res[3].length - 4, res[3].length);
			if (str == "9000" || str3 == "9000") {
				if (res[2].length > 86 || res[3] >= 12) {
					card.cardId = res[2].substring(20, 40); //卡号
					card.startTime = res[2].substring(40, 48);
					card.endTime = res[2].substring(48, 56);
					card.version = res[2].substring(18, 19) >= 4 ? "4x" : "2x";
					card.netId = res[2].substring(20, 24);
					card.cardType = res[2].substring(28, 29) == 23 ? 1 : 2;
					card.vehiclePlateColor = parseInt(res[2].substring(82, 84), 16);
					card.money = parseInt(parseInt(res[3].substring(0, 8), 16), 10),
						console.log('======卡信息======', card)

					if (card.cardId !== state.cardId) {
						msg('设备卡信息与当前充值卡号不匹配，请核对卡号')
						return;
					}
					quanCheckActionTrue().then(val => {
						checkQuanCengEvent(val)
					})
				} else {
					console.error("CMD_READBINARY指令长度不符" + res[2])
					tools.hideLoadingAlert();
				}
			}
			console.error("CMD_READBINARY指令长度不符" + res[2])
			tools.hideLoadingAlert();
		});
	};
	const checkQuanCengEvent = (val: any) => {
		if (val.chargeStatus === 1) {
			let cmdArr = val.command.split(",");
			uni.showLoading({
				title: "写入中"
			})
			bluetoothUtil.transCmd(cmdArr, "10", function(res) {
				let response = res.toString();
				var dic = {
					command: val.command,
					cosResponse: response,
				}
				uni.hideLoading()
				cardCzXFCheckAction().then(xfRes => {
					quanApplyAction(dic).then(value => {
						console.log('圈层申请完后的结果')
						console.log(value)
						//圈存初始化验证通过 , 进行圈存
						if (value.commandType === 2) {
							uanConfirmAction(value).then(
								confirmResult => {
									msg('充值成功')
								})
						} else {
							msg('圈存初始化指令验证失败, 重新初始化')
						}
					})

				})
			});
		} else {
			let cmdArr = val.command.split(",");
			uni.showLoading({
				title: "写入中"
			})
			bluetoothUtil.transCmd(cmdArr, "10", function(res) {
				var status = res[1].substring(res[1].length - 4,
					res[1].length);
				console.log('打印状态')
				console.log(status)
				if (status === '9000') {
					console.log('修复指令入参')
					let response = res.toString();
					var dic = {
						command: val.command,
						cosResponse: response,
						rechargeId: val.rechargeId
					}
					quanFixAction(dic).then(value => {
						console.log(value)
						console.log('修复结果返回')
						var fixStatus = value.fixStatus;
						//圈存修复COS指令Response信息不足,重新进行修复初始化
						if (fixStatus === 3) {
							let xfcmdArr = value.command.split(",");
							bluetoothUtil.transCmd(xfcmdArr, "10", function(resValueData) {
								var status = resValueData[1].substring(resValueData[1].length -
									4,
									resValueData[1].length);
								console.log('打印状态')
								console.log(status)
								if (status === '9000') {
									console.log(resValueData)
									var valueResponse = resValueData.toString();
									console.log(response)

									var applyDic = {
										command: value.command,
										cosResponse: valueResponse,
										rechargeId: value.rechargeId
									}
									console.log('消费成功')
									quanApplyAction(applyDic).then(
										applyValue => {

											uanConfirmAction(applyValue).then(
												confirmResult => {
													msg('充值成功')
												})
										})
								}
							})

						} else if (fixStatus === 2) {
							uanConfirmSucessAction(value).then(
								confirmResult => {
									msg('充值成功')
								})
						} else if (fixStatus === 1) {

						}
					})
					uni.hideLoading()
				}
			});


		}

	}

	/*透传*/
	const transCmd = (cmd) => {
		bluetoothUtil.transCmd(cmd, "10", function(res) {
			var status = res[1].substring(res[1].length -
				4,
				res[1].length);

			if (status === '9000') {

				return res.toString()
			}
		})
	}

	/*圈层检测 -假数据校验*/
	const quanCheckAction = () => {
		var data = {
			cardId: state.cardId, //卡号
			fee: state.fee,
			preBalance: state.mockpreBalance, //假余额
			tradeType: 14,
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(quanCheck, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	const quanCheckActionTrue = () => {
		console.log('进行真实圈层检测')
		var data = {
			cardId: card.cardId,
			fee: state.fee,
			preBalance: card.money,
			tradeType: 14,
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(quanCheck, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}

	/*充值消费*/
	const cardCzXFCheckAction = () => {
		var data = {
			cardId: card.cardId, //修复初始化的指令
			openId: getItem(StorageKeys.OpenId), //修复初始化结果
			orderNum: state.orderNum, //充值流水号
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(cardCzXFCheck, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	/*圈存修复*/
	const quanFixAction = (val) => {
		var data = {
			command: val.command, //修复初始化的指令
			cosResponse: val.cosResponse, //修复初始化结果
			rechargeId: val.rechargeId, //充值流水号
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(quanXf, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	/*圈层申请*/
	const quanApplyAction = (data) => {
		var form = {
			cardId: card.cardId,
			fee: state.fee,
			preBalance: card.money,
			tradeType: 14,
			command: data.command,
			cosResponse: data.cosResponse,
			orderId: state.orderNum,
			rechargeId: data.rechargeId
		};
		const options = {
			type: 2,
			data: form,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(quanApply, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	/*圈层确认*/
	const uanConfirmAction = (data) => {
		console.log('圈层确认进入')
		let cmdArr = data.command.split(",");
		console.log(cmdArr)
		bluetoothUtil.transCmd(cmdArr, "10", function(res) {
			console.log('圈层透传')
			console.log(res)
			var arraylenth = res.length
			var status = res[arraylenth - 1].substring(res[arraylenth - 1].length -
				4,
				res[arraylenth - 1].length);
			console.log('打印圈层确认指令状态')
			console.log(status)
			if (status === '9000') {
				var form = {
					command: data.command,
					cosResponse: res.toString(),
					rechargeId: data.rechargeId,
					paidAmount: state.fee,
					giftAmount: 0,

				};
				const options = {
					type: 2,
					data: form,
					method: "POST",
					showLoading: true,
				};
				return new Promise(async (resolve, reject) => {
					const res = await request(quanConfirm, options);
					const data = stringToJson(res.bizContent);
					resolve(data);
				}).catch((error) => {
					reject(error);
				});
			}
		})
	}

	const uanConfirmSucessAction = (data) => {
		var form = {
			command: data.command,
			cosResponse: '9000',
			rechargeId: data.rechargeId,
			paidAmount: state.fee,
			giftAmount: 0,
		};
		const options = {
			type: 2,
			data: form,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(quanConfirm, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}

	/*充值检测*/
	const czCheckAction = () => {
		var form = {
			cardId: state.cardId,
			openId: getItem(StorageKeys.OpenId),
		};
		const options = {
			type: 2,
			data: form,
			method: "POST",
			showLoading: true,
		};


		return new Promise(async (resolve, reject) => {
			const res = await request(cardCzPayResultCheck, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	/*充值申请*/
	const cardCzApplyAction = () => {
		var data = {
			cardId: state.cardId,
			openId: getItem(StorageKeys.OpenId),
			rechargeMoney: state.fee,
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(cardCzApply, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}

	//获取微信小程序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;
					},
				});
			},
			fail: function() {
				msg('获取不到oppenId，请检查AppID和Secret是否争取')
			}
		});
	};

	//掉起微信支付
	const wxPayment = () => {
		// #ifdef MP-WEIXIN
		const options = {
			type: 2,
			data: {
				openId: getItem(StorageKeys.OpenId),
				wxOpenId: state.openid,
				cardId: state.cardId,
				orderNum: state.orderNum,
				payConfigId: wechatPayConfigId,
				body: '储值卡充值'
			},
			method: "POST",
			showLoading: true,
		};
		request(cardCzPay, options).then((res) => {
			const data = stringToJson(res.bizContent);
			uni.requestPayment({
				provider: "wxpay",
				orderInfo: "",
				timeStamp: data.timestamp,
				nonceStr: data.noncestr,
				package: data.wxPackage ?? "",
				signType: data.signType,
				paySign: data.sign,
				success: function() {
					//回调订单状态
					console.log('回调订单状态')
					checkOrder();
				},
				fail: function(err) {
					confirm(err, () => {}, "支付失败", false);
				},
			});
		});
		// #endif
	};

	//支付成功改变订单状态
	const checkOrder = () => {
		const options = {
			type: 2,
			data: {
				cardId: state.cardId,
				openId: getItem(StorageKeys.OpenId),
				orderNum: state.orderNum
			},
			method: "POST",
			showLoading: true,
		};
		request(cardCzPayResult, options).then((res) => {
			const data = stringToJson(res.bizContent);
			if (data.tradeState === 'SUCCESS')

				uni.navigateTo({
					url: `/pages/bluetooth/device-active-step3?routeType=2`,
				});

			console.log(data)
		});
	};
</script>

<style>
	.account {
		height: 224rpx;
		width: 690rpx;
		margin: 30rpx;
		position: relative;
	}

	.account .account-text {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 50rpx;
		height: 100%;
	}

	.account .balance {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		color: #ffffff;
	}

	.account .balance-tit {
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.account .balance-val {
		font-size: 56rpx;
	}

	.account .right-box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.account .right-box .no {
		font-size: 26rpx;
		color: #ffffff;
	}

	.account .right-box .btn {
		font-size: 26rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 42rpx;
		line-height: 42rpx;
		color: #28d20f;
		background: #ffffff;
		border-radius: 21rpx;
		display: inline-block;
		margin-top: 18rpx;
	}

	.account .head-bg {
		width: 690rpx;
		height: 224rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -99;
	}

	.input-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	.input-box .input {
		width: 430rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #f8f8f8;
		border: 1px solid #999999;
		border-radius: 6rpx;
		font-size: 30rpx;
		text-align: center;
	}

	.input-box .tips {
		color: #666666;
		font-size: 26rpx;
		margin-top: 18rpx;
	}

	.tabs {}

	.tabs .tab-tit {
		font-size: 30rpx;
		color: #333;
		padding: 45rpx 0 22rpx 30rpx;
	}

	.tabs .tab {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.tabs .tab .item {
		width: 210rpx;
		height: 100rpx;
		background: #f6fff7;
		border: 1px solid #dcdde1;
		box-sizing: border-box;
		line-height: 100rpx;
		border-radius: 6rpx;
		text-align: center;
		margin-bottom: 24rpx;
		color: #333333;
		font-size: 32rpx;
	}

	.tabs .tab .item.active {
		border: 1px solid #24cc49;
		color: #24cc49;
	}

	.btn-primary {
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin: 200rpx 40rpx 0;
		text-align: center;
	}
</style>