zhywpt-sp/subpackage/carPark/recharge/recharge-weixin.vue

<template>
	<view class="wrapper">
		<view class="account">
			<image :src="`${$imgUrl}common/bg-recharge.png`" class="head-bg" mode="aspectFill"></image>
			<view class="account-text">
				<view class="balance">
					<text class="balance-tit">账户余额</text>
					<text class="balance-val">{{card.money/100}}元</text>
				</view>
				<view class="right-box">
					<view class="no">账户编号：000100</view>
					<view class="btn btn-record" @click="goRecord()">账户充值记录</view>
				</view>
			</view>
		</view>

		<view class="input-box">
			<input v-model="state.money" placeholder="请输入金额" class="input" @input="checkNum" />
			<view class="tips">最低充值金额不小于10元</view>
		</view>
		<view class="tabs">

			<view class="tab-tit">在线充值</view>
			<view class="tab">
				<view v-for="(item,index) in state.moneryArray" @click="tableIndexAction(index)" :key="index"
					:class="{'item':state.moneryArray,'active':state.tableIndex===index}">{{item.name}}</view>
			</view>
		</view>
		<view class="btn btn-primary" @click="rechargeAction">立即充值</view>

	</view>
	<u-select v-model="state.transWayTypeShow" :list="state.transWayTypeList" @confirm="selectConfirm"></u-select>
</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,
		wechatPayConfigId,
		aliPayConfigId,
		obtainUserId,
		getOpenId
	} from "@/utils/network/api.js";
	import {
		request,requestNew
	} from "@/utils/network/request.js";
	import {
		reactive
	} from "vue";
	import {
		navTo
	} from "@/utils/utils"
	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 NFCAPI = require('../../../static/nfc/NFCAPI.js');

	const state = reactive({
		transWayTypeShow: false,
		transWayTypeList: [{
			label: "蓝牙",
			value: "blu",
		}, {
			label: "NFC",
			value: "nfc",
		}
		],
		isShowBlue: false,
		moneryArray: [{
			name: '50元',
			value: 50
		}, {
			name: '100元',
			value: 100
		}, {
			name: '200元',
			value: 200
		}, {
			name: '300元',
			value: 300
		}, {
			name: '500元',
			value: 500
		}, {
			name: '1000元',
			value: 1000
		}],
		tableIndex: 0,
		openid: "",
		connectSuccess: undefined,
		fee: 5000,
		money: 50,
		orderNum: "",
		transWayName: "蓝牙",
		transWay: "blu", //“blu”为蓝牙充值方式、“nfc”为NFC充值方式
		cardId: "", //卡号 需要传参
		mockpreBalance: 2000, //fix:模拟余额 目前没有检测状态接口，第一次会模拟圈存检测来检测状态
		show: false,
		items: [{
			value: '0',
			name: '微信',
			checked: 'true'
		},
		{
			value: '1',
			name: '对公账户'
		}
		],
		current: 0,
		tradeType: 14
	});

	const selectConfirm = (item : any) => {
		state.transWayName = item[0].label
		state.transWay = item[0].value
	};
	//读卡信息
	const card : any = reactive({
		cardId: "",
		netId: "",
		cardType: "",
		startTime: "",
		endTime: "",
		userName: "",
		idNum: "",
		vehiclePlate: "",
		vehiclePlateColor: "",
		color: "",
		version: "",
		type: "",
		favourable: "",
		money: 0,
		v_userType: "",
	});
	onLoad((option) => {
		/*获取openId 用途:（用户支付）*/
		// #ifdef MP-WEIXIN
		getOpenID();/*传参*/
		// #endif
		console.log("开始option", option)
		state.transWay = option.transWay == 'nfc' ? "nfc" : "blu"
		// state.cardId = option.cardId;
		state.connectSuccess = option.connectSuccess;
		// state.orderNum = getItem("orderNum");
		// 金额回填，本来是好的，但是他跳转了，跳转过来就得刷新页面，所以就是默认的5000
		if (option.fee) {
			state.fee = option.fee
			state.money = option.fee / 100
		} else {
			state.fee = state.money * 100; //元换成分
		}
		console.log("state.fee", option, state.fee)
		//跳转过来走圈存流程
		// connectSuccess  2 从选择方式进来去圈存检测  1 只读卡
		if (state.connectSuccess === "1") {
			/*读卡*/
			getCardId(1);
		} else {
			//进行真实圈层检测
			quanCheckActionTrue().then((val : any) => {
				console.log("圈存检测val", val)
				//如果 圈存检测正常
				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);
							// 检测用户是否存在有半条流水
						} else {
							console.log('没有可修复的流水')
						}
					});
				} else {
					// 检测用户是否存在有半条流水
				}
			});
		}
	});

	function radioChange(evt) {
		console.log('输出内容', evt)
		state.transWay = evt.detail.value; //“blu”为蓝牙充值方式、“nfc”为NFC充值方式
	}

	function go(money) {
		let content = ""
		if (money) {
			state.fee = money * 100
			content = '待消费订单' + money + '元'
		} else {
			content = '待消费订单'
		}
		uni.showModal({
			title: '提示',
			content: content,
			showCancel: false,
			success: (res) => {
				if (res.confirm) {
					//走蓝牙进行修复
					quanCheckActionTrue().then((val : any) => {
						console.log("圈存检测val", val)
						//如果 圈存检测正常
						if (val.chargeStatus === 1) {
							console.log(`进行充值检测`);
							czCheckAction().then((checkResult : any) => {
								//判断订单逻辑如果有订单充值 则直接拿到订单去链接蓝牙
								if (checkResult.orders && checkResult.orders.length > 0) {
									//拿到订单,存起来
									state.orderNum = checkResult.orders[0].orderNum;
									// 检测用户是否存在有半条流水
									getCardId()
								} else {
									console.log('没有可修复的流水')
								}
							});
						} else {
							// 检测用户是否存在有半条流水

							getCardId()
						}
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}

				console.log("state.isShowBlue", state.isShowBlue)
			},
			fail: () => {

			}
		})
	}

	const tableIndexAction = (val : any) => {
		state.tableIndex = val
		state.money = state.moneryArray[val].value
	}
	/*点击充值按钮*/
	const rechargeAction = () => {
		state.fee = state.money * 100; //元换成分

		uni.showModal({
			title: '圈存确认',
			content: '您确定要充值圈存吗',
			success: function (res) {
				if (res.confirm) {
					/*进行圈存检测，此处检测仅为校验圈存状态来决定去哪里*/
					console.log("进行圈存检测");
					quanCheckActionTrue().then((val : any) => {
						console.log("圈存检测接口返回", val)
						//如果 圈存检测正常
						if (val.chargeStatus === 1) {
							console.log(`进行充值检测`);
							czCheckAction().then((checkResult : any) => {
								console.log("进行充值检测", checkResult)

								//判断订单逻辑如果有订单充值 则直接拿到订单去链接蓝牙
								if (checkResult.orders && checkResult.orders.length > 0) {
									state.fee = checkResult.orders[0]['rechargeMoney']
									state.money = checkResult.orders[0]['rechargeMoney'] / 100
									//拿到订单,存起来
									state.orderNum = checkResult.orders[0].orderNum;
									//链接蓝牙
									go(state.money)
								} else {
									cardCzApplyAction().then((applyResult : any) => {
										//拿到订单 存起来
										state.orderNum = applyResult.orderNum;
										//如果订单没有支付 走支付
										if (applyResult.orderStatus === "ORDER_NOT_PAY") {
											//走支付
											console.log("走支付");
											// #ifdef MP-WEIXIN
											wxPayment();
											// #endif
											// #ifdef MP-ALIPAY
											aliPayment()
											// #endif

										}
									});
								}
							});
						} else {
							//走蓝牙进行修复
							// 圈存检测异常,继续上次圈存 chargeStatus==2
							let fixFee = val.fixFee / 100
							console.log("fixFee", fixFee)
							go(fixFee)
						}
					});
				}
			}
		});
	};

	/*读卡*/
	const getCardId = (readCard : number) => {
		console.log("======获取卡信息======");
		let cmdArr = [
			cmd.HOME_DIRECTORY,
			//选择主目
			cmd.APPLICATION_DIRECTORY,
			//选择文件1001--DF01联网收费应用目录
			cmd.CMD_READBINARY,
			//15文件--卡片发行基本数据文件
			cmd.CMD_GETBALANCE,
			//钱包
		];
		tools.showLoadingAlert("正在执行指令");
		transCmd(cmdArr, function (res : any) {
			if (readCard == 1) {
				// 只读卡号
				getCardIdReturnReadCard(res)
			} else {
				getCardIdReturn(res);
			}
		})
	};
	function getCardIdReturnReadCard(res : any) {
		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) {
				state.cardId = res[2].substring(20, 40); //卡号
				card.cardId = res[2].substring(20, 40); //卡号
				card.money = parseInt(parseInt(res[3].substring(0, 8), 16), 10)
				console.log("======卡信息======", card, state.cardId);
			} else {
				// console.error("CMD_READBINARY指令长度不符" + res[2]);
				tools.hideLoadingAlert();
			}
		}
		tools.hideLoadingAlert();
	}
	function getCardIdReturn(res : any) {
		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) {
				state.cardId = res[2].substring(20, 40); //卡号
				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, card.money);

				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: "写入中",
			});
			transCmd(cmdArr, function (res : any) {
				let response = res.toString();
				var dic = {
					command: val.command,
					cosResponse: response,
				};
				uni.hideLoading();
				quanApplyAction(dic).then((value : any) => {
					console.log("圈存申请完后的结果");
					console.log(value.commandType, value);
					//圈存初始化验证通过 , 进行圈存
					if (value.commandType === 2) {
						uanConfirmAction(value);
					} else {
						console.log("第二次70", value)
						let cmdArr = value.command.split(",");
						uni.showLoading({
							title: "写入中",
						});
						transCmd(cmdArr, function (res : any) {
							let response = res.toString();
							var dic = {
								command: val.command,
								cosResponse: response,
							};
							uni.hideLoading();
							quanApplyAction(dic).then((values) => {
								console.log("圈存申请完后的结果");
								uanConfirmAction(values);
							});
						})
					}
				});
			});
		} else {
			let cmdArr = val.command.split(",");
			uni.showLoading({
				title: "写入中",
			});
			transCmd(cmdArr, function (res : any) {
				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 : any) => {
						state.orderNum = value.orderId
						state.tradeType = value.tradeType
						console.log(value);
						console.log("修复结果返回");
						var fixStatus = value.fixStatus;
						//圈存修复COS指令Response信息不足,重新进行修复初始化
						if (fixStatus === 3) {
							let xfcmdArr = value.command.split(",");
							console.log("xfcmdArr", xfcmdArr)
							transCmd(xfcmdArr, 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);
									});
								}
							});
						} else if (fixStatus === 2) {
							uanConfirmSucessAction(value).then((confirmResult) => {
								console.log("充值成功")
								getCardId(1)
								setTimeout(() => {
									msg("充值成功");
									navTo(`/pages/recharge/result?cardId=${card.cardId}`)
								}, 2000)
							});
						} else if (fixStatus === 1) {
							quanCheckActionTrue().then((val) => {
								checkQuanCengEvent(val);
							});
						}
					});
					uni.hideLoading();
				}
			});
		}
	};

	/*透传*/
	const transCmd = (cmd : any, click : any) => {
		if (state.transWay == 'blu') {
			bluetoothUtil.transCmd(cmd, "10", function (res : any) {
				click(res);
			});
		} else {
			//nfc透传
			NFCAPI.transCmd(cmd, function (res : any) {
				tools.hideLoadingAlert();
				if (res.code == 0) {
					click(res.data);
				} else {
					//透传失败返回
					tools.alertF(res.msg);
				}
			});
		}
	};

	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 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) => {
		console.log("圈存申请data====", data, data.rechargeId)
		var form = {
			cardId: card.cardId,
			fee: state.fee,
			preBalance: card.money,
			tradeType: state.tradeType,
			command: data.command,
			cosResponse: data.cosResponse,
			orderId: state.orderNum,
			rechargeId: data.rechargeId,
			openId: getItem(StorageKeys.OpenId)
		};
		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 : any) => {
		console.log("圈存确认进入");
		let cmdArr = data.command.split(",");
		console.log(cmdArr);
		transCmd(cmdArr, function (res : any) {
			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("打印圈存确认指令状态");
			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 () => {
					const res = await request(quanConfirm, options);
					const data = stringToJson(res.bizContent);
					console.log("data充值成功", data);
					getCardId(1)
					setTimeout(() => {
						msg("充值成功");
						navTo(`/pages/recharge/result?cardId=${card.cardId}`)
					}, 2000)
				}).catch((error) => {
					console.log('输出内容', 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);
			console.log("uanConfirmSucessAction", 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);
			console.log("充值检测", data)
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	};
	/*充值申请*/
	const cardCzApplyAction = () => {
		var data = {
			cardId: state.cardId,
			openId: getItem(StorageKeys.OpenId),
			rechargeMoney: state.fee,
			tradeType: 14,
			preBalance: card.money,
		};
		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) {
				getOpenid(e.code);
			},
			fail: function () {
				msg("获取不到oppenId，请检查AppID和Secret是否争取");
			},
		});
	};
	const getOpenid = (code) => {
		const options = {
			type: 2,
			data: {
				"jsCode": code
			},
			method: "POST",
			showLoading: true,
		};
		// #ifdef MP-WEIXIN
		requestNew(getOpenId, options).then((res) => {
			const result = res;
			console.log("获取微信小程序openid", result);
			const openidData = stringToJson(result.data);
			state.openid = openidData.openid
		});
		// #endif
	}
	//掉起微信支付
	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 ? data.wxPackage : "",
				signType: data.signType,
				paySign: data.sign,
				success: function () {
					//回调订单状态
					console.log("回调订单状态");
					checkOrder();
				},
				fail: function (err) {
					confirm(err, () => { }, "支付失败", false);
				},
			});
		});
		// #endif
	};
	//掉起支付宝支付
	const aliPayment = () => {
		// #ifdef MP-ALIPAY
		my.getAuthCode({
			scopes: 'auth_base',
			success: res => {
				const optionsUser = {
					type: 2,
					data: {
						payConfigId: aliPayConfigId,
						code: res.authCode
					},
					method: "POST",
					showLoading: true,
				};
				request(obtainUserId, optionsUser).then((res) => {
					const data = stringToJson(res.bizContent);
					const optionsali = {
						type: 2,
						data: {
							openId: getItem(StorageKeys.OpenId),
							wxOpenId: data.openId,
							cardId: state.cardId,
							orderNum: state.orderNum,
							payConfigId: "6a9a54123456578934edfre132b1234",
							body: "储值卡充值",
						},
						method: "POST",
						showLoading: true,
					};
					request(cardCzPay, optionsali).then((res) => {
						const data = stringToJson(res.bizContent);
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
							tradeNO: data.tranPackage,
							success: res => {
								console.log("支付成功", res);
								checkOrder();
							},
							fail: res => {
								confirm(res, () => { }, "支付失败", false);
							},
						});

					});
				});
			},
			fail: err => {
				console.log('my.getAuthCode 调用失败', err)
			}
		});
		// #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") {
				getCardId();
			}
			console.log(data);
		});
	};
	const goRecord = () => {
		uni.navigateTo({
			url: `/subpackage/personal-center/consumption-record?cardId=${state.cardId}`
		})
	}
	// 校验金额输入框
	const checkNum = (event) => {
		let sNum = event.target.value.toString(); //先转换成字符串类
		if (sNum.indexOf('.') == 0) {//第一位就是 .
			console.log('first str is .')
			sNum = '0' + sNum
		}
		sNum = sNum.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
		sNum = sNum.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
		sNum = sNum.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
		sNum = sNum.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
		//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		if (sNum.indexOf(".") < 0 && sNum != "") {
			sNum = parseFloat(sNum);
		}
		console.log('输入的值1', sNum)
		setTimeout(() => {
			state.money = sNum
		}, 20)

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

	.uni-list {
		padding: 120rpx 10rpx 0 10rpx;
		font-size: 34rpx;
	}

	label {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
</style>