<template>
	<view class="container">
		<view class="contentBox" v-if="!depotMoneyother">
			<!-- <image mode='widthFix' src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png"></image> -->
			<view class="contentDiv">
				<view class="headview">
					<view class="schoolname">{{PersonalInfo.schoolname}}</view>
					<view class="IconCls">电子校园卡</view>
				</view>
				<!-- 卡号显示 -->
				<view class="cardNum">
					<view class="cardNumleft"><span>账户：</span> **** **** ****
						{{bankInfo_.accountNo.slice(bankInfo_.accountNo.length-4)}} <span>(工商III类户)</span>
					</view>
					<view class="cardNumright" id="cardNumright" @click="CopyCardNumber">复制</view>
				</view>
				<view class="HidenText">
					<view class="userName">姓名：<span>{{PersonalInfo.name}}</span></view>
					<view class="StudentCls" v-if="PersonalInfo.usertype=='1'">
						班级：{{PersonalInfo.gradename}}({{PersonalInfo.classname}})</view>
					<view class='TeacherCls' v-else>教职工</view>
				</view>
				<view class="Balance">
					<view class="cardBalanceTx">余额：￥<span>{{cardBalanceTx}}</span></view>
					<view @click="ToWalletTx">
						<span style="display: inline-block;padding-right: 10rpx;">余额提现</span>
						<image style="position: relative;width: 13rpx;height: 20rpx;" class='ImgIcon1' mode='widthFix'
							:src="ImgUrl+'images/xiaopaycard (17).png'" alt=""></image>
					</view>
				</view>
			</view>
			<!-- 充值明细 -->
			<view class="RechargeDetailed" @click="BackToMini('purchaseDetail')">
				账户明细
			</view>
			<!-- 充值账户 -->
			<view class="Recharge">
				<span></span>
				<span>账户充值</span>
			</view>
			<!--  充值的金额 -->
			<view class="MoneyBox">
				<view class="depotMoney" @click="depotMoney(item.value,index)"
					v-bind:class="(MoneyIndex==index)?'choiceClass':''" :data-money="item.value||0"
					v-for="(item,index) in MoneyList" :key="index">
					<span class="value">
						{{item.value}}
					</span>
					<span style="font-size: 28rpx;font-weight: 600;margin-left: 7rpx;">{{item.lable}}</span>
					<!-- <span class="tips" v-show="item.tips">
						{{item.tips}}
					</span> -->
				</view>
			</view>
			<!-- 充值限额提示 -->
			<view class="depositbox">
				<image mode='widthFix' class="depositImg" src="../../../static/img/depositIcon.png"></image>
				<span style="vertical-align:middle;font-size: 28rpx;color: #333333;font-weight: 500;">最大可充值金额：<span
						style="color:red;">￥<span class="canDepositTx">2000</span></span></span>
			</view>
			<!-- 充值其它金额 -->
			<view class="OtherMoney" v-if="isOtherMoney">
				<span>￥</span>
				<input v-model="inputOtherM" @input="inputControl" @blur="ReturnToTop" placeholder="请输入其他金额，最低3元"
					placeholder-class="placeholderinputOtherM" type="text" maxlength="6" />
			</view>
			<!-- 支付方式 -->
			<view class="payType" @click="queryBindCardList">
				<view>付款方式</view>
				<view> {{ bankInfo_.bindCardName}} {{ bankInfo_.bindCardNo.slice(bankInfo_.bindCardNo.length-4) }}<span
						class="arrow"></span></view>
				<!-- 	<view>{{bankInfo_.accountName}}({{bankInfo_.accountNo.slice(bankInfo_.accountNo.length-4)}}) <span
						class="arrow"></span></view> -->
			</view>
			<!-- <view class="" style="height: 1rpx;background-color: #DFDFDF;"></view> -->
			<!-- 充值生活费 -->
			<view class="bottomdiv">
				<view class="DepositID" @click="toDeposit"
					v-bind:style="Money!=''?'':'background: #e6e6e6 !important;'">
					<span>充值生活费</span>
				</view>
				<!--  -->
				<view class="switchbankCard" @click="ChangeBankPay">我要换银行卡支付</view>
			</view>

		</view>
		<!-- 其他充值金额 -->
		<view class="contentBox" v-if="depotMoneyother">
			<view class="OtherTitle">充值金额</view>
			<view class="inputOtherM">
				<span>￥</span>
				<input v-model="inputOtherM" @input="inputControl" placeholder-class="placeholderinputOtherM"
					type="text" maxlength="6" />
			</view>
			<view class="OtherLine"></view>
			<!-- 充值范围 -->
			<view class="Recharge_">
				<!-- <image mode="widthFix" class="depositImg" src="../../static/img/depositIcon.png"></image> -->
				<span>最大可充值金额：</span>
				<span>￥<span>3.00 ~ 2000.00</span></span>
			</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" :mask-click="false">
			<!-- 充值确认 -->
			<view class="RechargeConfirmationBox">
				<view class="RechargeInfo">
					<view class="closePhoneBox" @click="close()">
						<image src="../../../static/img/close.png" mode="aspectFit"></image>
					</view>
					<view class="RechargeInfo1">
						充值生活费
					</view>
					<view style="width: 520rpx;height: 1rpx;background: #EEEEEE;"></view>
					<view class="ContenInfo">
						<view class="" v-if="isOtherMoney">
							充值金额：{{inputOtherM}}元
						</view>
						<view class="" v-else>
							充值金额：{{Money}}元
						</view>
						<view class="">
							付款账户：{{bankInfo_.bindCardName}}({{bankInfo_.bindCardNo && bankInfo_.bindCardNo.slice(bankInfo_.accountNo.length-4)}})
						</view>
					</view>
					<view style="width: 520rpx;height: 1rpx;background: #EEEEEE;"></view>
					<!-- 取消 确认充值按钮 -->
					<view class="BtngGoup">
						<view class="" @click="close()">
							取消
						</view>
						<view class="" @click="ExchangeRecharge">
							确认充值
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 选择银行卡 -->
		<view class="selectCard">
			<van-popup v-model="popshow" round position="bottom" :style="{ height: '30%' }">
				<!-- 银行卡列表 -->
				<view class="accountlist">
					<!-- 切换绑定的一类卡列表 -->
					<view class="showBindCardList">
						<view class="choiceBox">选择付款账户</view>
						<view class="ListItem" @click="ChangeCardPay(item)" v-for="(item,index) in bindcardList"
							:key="index">
							<span style="padding-right:10px;">{{item.bindCardName}} </span>
							<span>尾号：{{item.bindCardNo.slice(item.bindCardNo.length-4)}}</span>
							<!-- <image class='BankListImg' src='../../../static/img/choiceBank.png'></image> -->
						</view>
					</view>
				</view>
			</van-popup>
		</view>
	</view>
</template>

<script>
	import {
		Dialog,
		Toast
	} from 'vant';
	import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
	import cityData from "@/common/js/city.js"
	var gHost = "https://" + window.location.host;
	if (window.location.protocol != "https:") {
		gHost = "https://fpdev.xiaopay.net";
		// gHost = "/api";
	}
	let times = 0;
	var limitClick = false; //禁止重复点击
	var sessionID = '',
		userID = '';
	var payCardNumber = ''; //一类卡号
	var orderSerialNo = ''; //提现结果查询 指令号
	var businessNo = '',
		otpOrderNo = '',
		mobileNo = '';
	var msCount = 60; //定时器
	var MyTimer = null;
	var fromType = 0; //0转账  1提现
	var opeType = 0; //0充值  1提现   手机号验证
	var bankInfo = {
		acctNoArray: '',
		idNo: '',
		schoolId: '',
		trueName: '',
		userId: '',
		sessionid: '',
		wechattype: 1
	}
	/**
	 * 对象转拼接字符串
	 * @param {*} res   Object    需要转换的数据对象
	 */
	function OforS(res) {
		var resL = 0;
		var outS = "";
		for (var i in res) {
			if (resL == 0) {
				outS += "" + i + "=" + res[i];
			} else {
				outS += "&" + i + "=" + res[i];
			}
			resL++;
		}
		return outS;
	}
	export default {
		components: {
			keyboardPackage
		},
		name: "Recharge",
		data() {
			return {
				popshow: false,
				// 输入其它金额
				isOtherMoney: false,
				inputOtherM: '',
				RechargeException: false,
				depotMoneyother: false, //其他充值
				Money: '', //选择金额
				MoneyIndex: -1,
				RechargeMax: '2000', //最大充值限制
				ReflectMoney: '', //提现金额
				VerifyCode: '', //验证码
				cardBalanceTx: '0', //余额
				CodeMsg: "获取验证码",
				type: 'number',
				PersonalInfo: {
					schoolname: "",
					name: "",
					usertype: "1"
				},
				bankInfo_: {
					accountNo: '**** **** **** 1234',
					bindCardName: '',
					bindCardNo: ''
				},
				ImgUrl: this.$ImgUrl,
				MoneyList: Array(6).fill(1).map((v, index) => {
					return {
						lable: index == 5 ? '其他金额' : '元',
						value: index == 5 ? '' : 50 * (index + 1),
						tips: index == 1 ? "推荐充值" : null
					}
				}),
				numberList: [],
				tempFiles1: '../../static/img/idCardBg1.png', //上传身份证临时选择文件
				tempFiles2: '../../static/img/idCardBg0.png',
				//绑定的一类卡列表 
				bindcardList: []
			}
		},
		onLoad: function(options) {
			console.log(options);
			// 初始化
			userID = options['userID'] || '';
			sessionID = options['seesionID'] || '';
			fromType = options['fromType'] || '';
			bankInfo.sessionid = sessionID || '';
			this.QueryUserInfo()
		},
		created: function() {

		},
		mounted: function() {

		},
		methods: {
			async ChangeBankPay(){
				uni.showLoading({ mask:true });
				let status = await this.accountCloseacceptStatusQuery();
				uni.hideLoading();
				if( status !== 0 )  return false;
				this.BackToMini('AssignAddCard')
			},
			accountCloseacceptStatusQuery(){
				return new Promise(( resolve,reject) => {
					$.ajax({     //查询是否提交销户
						url:gHost + "/bank-wechat/icbc/account/manager/accountCloseacceptStatusQuery",
						type:'post',
						data:{
							schoolId:this.PersonalInfo.schoolid,
							userId:this.PersonalInfo.id,
							wechattype: 1,
							'sessionid': sessionID,
						},
						contentType: "application/x-www-form-urlencoded",
						headers: {
							'sessionid': sessionID,
						},
						success:( { code , message , results } ) => {
							let status = results && results.status ;  // 0表示未申请，1申请中，2已销户，3销户申请失败
							if(code === '10000' && status == '0'){
							}else if(code === '10000' && status == '1'){
								uni.showToast({
									title: "您已提交销户申请，银行正在审核中。",
									icon:'none',
								})
							}else{
								uni.showToast({
									title: message,
									icon:'none',
								})
							}
							resolve(status)
							
						},
						error: function(err) {
							uni.showToast({
								title: err.message || '请求失败',
								icon:'none',
							});
							reject(-1)
						},
					});
				})
				
			},
			// 验证码弹出框开启
			toDeposit() {
				if (this.isOtherMoney) {
					if (this.inputOtherM == '') {
						uni.showModal({
							title: "系统提示",
							content: "请输入要充值的金额!"
						})
						return
					}
					if (parseFloat(this.inputOtherM) * 1 < 3) {
						weui.topTips('充值金额必须大于3元');
						return
					}
				} else {
					if (this.Money == '') {
						uni.showModal({
							title: "系统提示",
							content: "请选择要充值的金额!"
						})
						return
					}
					if (parseFloat(this.inputOtherM) * 1 < 3) {
						weui.topTips('充值金额必须大于3元');
						return
					}
				}
				this.$refs.popup.open('top')
			},
			// 验证码弹出框关闭
			close() {
				this.$refs.popup.close()
			},
			//切换到提现
			ToWalletTx() {
				$('#DepositBox').css('display', 'none');
				$('#TxWalletBox').css('display', 'block');
				// $('.TitleHeader').html('电子账户提现');
				$('.doBtnTx').html('提现');
				opeType = 1;
				uni.navigateTo({
					url: "../Reflect/Reflect?" + OforS({
						sessionID: sessionID,
						userID: userID
					})
				})
			},
			//全部提现
			TxAllFun() {
				this.ReflectMoney = this.cardBalanceTx * 1
				// $('.TxClsTx').val($('.cardBalanceTx')[0].textContent * 1);
			},
			// 输入限制
			inputControl(e) {
				let this_ = this
				let obj = e.detail
				this.$nextTick(function() {
					obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
					obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是.
					obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的.
					obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只允许输入一个小数点
					obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
					obj.value = obj.value * 1 > 2000 ? 2000 : obj.value;
					if (obj.value == '' || obj.value * 1 < 3) {
						$('.DepositID').attr('style', 'background: rgb(230, 230, 230) !important;');
					} else {
						$('.DepositID').removeAttr('style');
					}
					this_.inputOtherM = obj.value
				})
			},
			//input键盘弹起不会弹
			ReturnToTop() {
				this.$nextTick(function() {
					document.scrollingElement.scrollTo(0, this.scrollTop);
				})
			},
			// 充值
			async ExchangeRecharge() {
				let amount,
					bindMedium,
					summary;
				if (this.isOtherMoney) {
					if (this.inputOtherM == '') {
						uni.showModal({
							title: "系统提示",
							content: "请输入要充值的金额!"
						})
						return
					}
					amount = this.inputOtherM * 1
				} else {
					if (this.Money == '') {
						uni.showModal({
							title: "系统提示",
							content: "请选择要充值的金额!"
						})
						return
					}
					amount = this.Money * 1
				}
				let this_ = this;
				uni.showLoading({
					mask: true,
					title: "处理中......"
				})
				try{
					let status = await this.accountCloseacceptStatusQuery();
					if(status !== 0) { uni.hideLoading(); return false };
				}catch(e){
					uni.hideLoading();
					return false
				}
				
				
				$.ajax({
					url: gHost + '/bank-wechat/icbc/account/exchange/recharge',
					type: "POST",
					contentType: "application/x-www-form-urlencoded",
					data: {
						schoolId: bankInfo.schoolId,
						userId: userID,
						sessionid: sessionID,
						wechattype: 1,
						amount: amount,
						bindMedium: this.bankInfo_.bindCardNo,
						summary: "充值",
					},
					headers: {
						'sessionid': sessionID,
					},
					success: function(res5) {
						uni.hideLoading()
						if (res5.code == "10000") {
							wx.showModal({
								title:'充值申请已提交',
								content:'银行处理需要1-5分钟时间，充值结果以余额查询为准。',
								showCancel:false
							})
						} else {
							weui.topTips(res5.message)
						}
						
					},
					error: function(err) {
						uni.hideLoading();
					},
				});
			},
			// 充值结果查询
			async ExchangeRechargeQuery(flowId, oriCorpSerno) {
				let this_ = this;
				let loading = Toast.loading({
					message: '加载中...',
					forbidClick: true,
					loadingType: 'spinner',
					duration: 0
				});
				$.ajax({
					url: gHost + '/bank-wechat/icbc/account/exchange/rechargeQuery',
					type: "POST",
					contentType: "application/x-www-form-urlencoded",
					data: {
						schoolId: bankInfo.schoolId,
						userId: userID,
						sessionid: sessionID,
						wechattype: 1,
						flowId: flowId,
						oriCorpSerno: oriCorpSerno,
					},
					headers: {
						'sessionid': sessionID,
					},
					success: function(res5) {
						loading.clear();
						if (res5.code == "10000") {
							let appStatus = res5.results.appStatus;
							if (appStatus == '4') {
								uni.showModal({
									title: "系统提示",
									content: "充值成功!"
								})
								this_.queryBankInfo();
							} else {
								uni.showModal({
									title: "系统提示",
									content: appStatus == '1' ? '申请已受理' : res5.message
								})
							}
						} else {
							weui.topTips(res5.message)
							uni.showModal({
								title: "系统提示",
								content: res5.message
							})
						}
					},
					error: function(err) {
						loading.clear();
					},
				});
			},
			// 复制我卡号
			async CopyCardNumber() {
				let value = this.bankInfo_.accountNo
				Dialog({
					title: '系统提示',
					message: '复制成功！'
				});
				this.$nextTick(function() {
					let clipboard = new ClipboardJS('#cardNumright', {
						text: function() {
							return value
						}
					})
				})
			},
			//选择输入其他金额
			OtherMoney() {
				this.depotMoneyother = true
			},
			// 快捷选择金额
			async depotMoney(value, MoneyIndex) {
				console.log(value)
				if (!value) {
					this.isOtherMoney = true
					this.Money = ''
					this.MoneyIndex = MoneyIndex
					return
				}
				this.isOtherMoney = false
				this.Money = parseInt(value)
				this.MoneyIndex = MoneyIndex
			},
			//按钮操作
			HideHTML(dom, type) {
				this.$nextTick(function() {
					if (type == 0) {
						$('.' + dom).css('display', 'none');
					} else {
						$('.' + dom).css('display', 'block');
					}
				})
			},
			//返回小程序 跳转指定页面
			BackToMini(page) {
				if (page == 'UserMain' || page == 'personalCenter') {
					jWeixin.miniProgram.switchTab({
						url: `/pages/${page}/main`,
					});
				} else {
					jWeixin.miniProgram.redirectTo({
						url: `/pages/${page}/main`,
					});
				}
			},
			//换绑卡
			ChangeCardPay(item) {
				let this_ = this;
				if (bankInfo.bindCardNo == item.bindCardNo) {
					return
				}
				var loading = weui.loading('请稍后');
				$.ajax({
					url: gHost + '/bank-wechat/icbc/account/bindcard/changeDefaultBinding',
					type: "POST",
					contentType: "application/x-www-form-urlencoded",
					data: {
						schoolId: bankInfo.schoolId,
						userId: userID,
						sessionid: sessionID,
						wechattype: 1,
						bindMedium: item.bindCardNo,
						bindMediumName: item.bindCardName
					},
					success: function(res5) {
						loading.hide();
						if (res5.code == "10000") {
							this_.queryUserBankInfo();
							this_.close();
						} else {
							weui.topTips(res5.message)
						}
						this_.popshow = false;
					},
					error: function(err) {
						loading.hide();
					},
				});
			},
			//查询一类卡绑定列表
			queryBindCardList() {
				let this_ = this;
				let loading = weui.loading('请稍后');
				$.ajax({
					url: gHost + '/bank-wechat/icbc/account/bindcard/bindingList',
					type: "POST",
					contentType: "application/x-www-form-urlencoded",
					data: {
						mediumId: bankInfo.accountNo,
						schoolId: bankInfo.schoolId,
						userId: userID,
						sessionid: sessionID,
						wechattype: 1
					},
					success: function(res4) {
						loading.hide();
						if (res4.code == "10000") {
							this_.bindcardList = res4.results;
							this_.popshow = true
						} else {
							weui.topTips(res4.message)
						}
					},
					error: function(err) {
						loading.hide();
					},
				});
			},
			//获取银行余额
			queryBankInfo() {
				let this_ = this;
				// let loading = weui.loading('请稍后');
				$.ajax({
					url: gHost + '/bank-wechat/icbc/account/balance/balanceQuery',
					type: "POST",
					timeout: 8000,
					contentType: "application/x-www-form-urlencoded",
					data: {
						mediumId: bankInfo.accountNo || '',
						schoolId: bankInfo.schoolId || '',
						userId: bankInfo.userId || '',
						sessionid: sessionID,
						wechattype: 1,
					},
					success: function(res3) {
						// loading.hide();
						if (res3.code == "10000") {
							if (res3.results.accountBalance == null) {
								weui.topTips("账户信息为空，余额查询失败");
							} else {
								this_.cardBalanceTx = (res3.results.accountBalance * 1).toFixed(2);
								$('.TxClsTx').attr('placeholder',
									`可提现金额${(res3.results.accountBalance * 1).toFixed(2)}元`
								)
								this_.RechargeMax = ((2000 - ((res3.results.accountBalance * 1).toFixed(2) *
									1)).toFixed(2));
							}
						} else {
							weui.topTips(res3.message)
						}
					},
					error: function(err) {
						// loading.hide();
					},
					complete: function(XMLHttpRequest, status) {
						// loading.hide();
						if (status == 'timeout') {
							weui.topTips("请求超时，余额查询失败");
						}
					}
				})
			},
			//获取用户已填写银行信息
			queryUserBankInfo() {
				let this_ = this;
				// let loading = weui.loading('请稍后');
				$.ajax({
					url: gHost + '/bank-wechat/user/bank/get',
					type: "POST",
					contentType: "application/x-www-form-urlencoded",
					data: {
						schoolId: bankInfo.schoolId,
						userId: userID,
						sessionid: sessionID,
						wechattype: 1
					},
					success: function(res2) {
						if (res2.code == "10000") {
							if (!res2.results) {
								weui.topTips("获取用户银行信息失败!")
								// loading.hide();
								return
							}
							bankInfo = res2.results;
							bankInfo.sessionid = sessionID;
							this_.queryBankInfo(); //查余额
							this_.bankInfo_ = bankInfo;
							// this_.getBindingList(bankInfo.accountNo,bankInfo.schoolId,bankInfo.id);
						} else {
							weui.topTips(res2.message)
						}
					},
					error: function(err) {
						// loading.hide();
					},
				});
			},
			//查询用户信息
			QueryUserInfo() {
				let this_ = this;
				let loading = Toast.loading({
					message: '加载中...',
					forbidClick: true,
					loadingType: 'spinner',
					duration: 0
				});
				$.ajax({
					url: gHost + '/wechat/svweapp/QueryPersonalInfo',
					type: "POST",
					contentType: "application/x-www-form-urlencoded",
					data: {
						userid: userID,
						sessionid: sessionID,
						wechattype: 1
					},
					success: function(res1) {
						loading.clear();
						if (res1.code == "10000") {
							bankInfo.schoolId = res1.results.schoolid;
							bankInfo.userId = res1.results.id;
							this_.PersonalInfo = res1.results
							if (res1.results.usertype == 1) {
								$('.StudentCls').css('display', 'block');
								$('.TeacherCls').css('display', 'none');
							} else {
								$('.StudentCls').css('display', 'none');
								$('.TeacherCls').css('display', 'block');
							}
							this_.queryUserBankInfo();
						} else {
							weui.topTips(res1.message);
							setTimeout(() => {
								this_.BackToMini('UserMain');
							}, 1500)
						}
					},
					error: function(err) {
						loading.clear();
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	html,
	body,
	page {
		width: 750rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
	}

	.showBindCardList {
		.choiceBox {
			text-align: center;
			font-weight: bold;
			height: 50px;
			line-height: 50px;
			padding: 0;
			border-bottom: 0.5px solid #e6e6e6;
		}

		.ListItem {
			border-bottom: 1rpx solid #e6e6e6;
			font-size: 30rpx;
			padding: 25rpx 0;
			background: #fff;
			position: relative;
			text-align: center;
		}
	}

	.SubmittedSuccessfully {
		width: 400rpx !important;
		height: 200rpx !important;
		margin: 0 auto !important;
		background: #000000;
		opacity: 0.8;
		border-radius: 8rpx;
		
	}

	.cardNum {
		width: 574rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-top: 36rpx;
		font-size: 24rpx;

		.cardNumleft {
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.cardNumright {
			font-family: PingFang SC;
			font-weight: 500;
			text-decoration: underline;
			color: #FFFFFF;
		}

	}

	.RechargeDetailed {
		text-align: center;
		// width: 118rpx;
		height: 32rpx;
		margin: 0 auto;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: #36A8FF;
		margin-top: 50rpx;
	}


	.contentBox {
		width: 670rpx;
		height: 376rpx;
		margin: 0 auto;
	}

	.contentDiv {
		height: 100%;
		// margin-top: 36rpx;
		border-radius: 15rpx;
		background-image: url('https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		position: relative;
		top: 36rpx;
	}

	.HidenText {
		width: 574rpx;
		margin: 0 auto;
		padding-top: 88rpx;

	}

	.HidenText,
	.Balance {
		padding-left: 46rpx;
		padding-right: 40rpx;
		display: flex;
		justify-content: space-between;

		font-size: 28rpx;
		color: #FFFFFF;
	}

	.Balance {
		width: 574rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.Recharge {
		// height: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 58rpx;

		span:nth-child(1) {
			width: 4rpx;
			height: 30rpx;
			background: #23D6A3;
			border-radius: 2rpx;
			display: inline-block;
			position: relative;
			top: 5rpx;
		}

		span:nth-child(2) {
			display: inline-block;
			margin-left: 16rpx;

		}
	}


	.headview {
		display: flex;
		justify-content: space-between;
		// padding-left: 40rpx;
		// padding-right: 40rpx;

		padding-top: 36rpx;
		width: 574rpx;
		margin: 0 auto;
	}

	.headview .schoolname {
		width: 252rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.headview .IconCls {
		width: 170rpx;
		height: 48rpx;
		background: #20946D;
		border-radius: 25rpx;

		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}

	.MoneyBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		height: auto;
		color: #888888;
		width: 686rpx;
		margin: 0 auto;
	}

	.choiceClass {
		background: rgba(39, 266, 148, 0.1) !important;
		color: #28D79C;
	}

	.MoneyBox view {
		width: 220rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1rpx solid #EEEEEE;
		margin-top: 16rpx;
		text-align: center;
		position: relative;
		box-shadow: 0px 9rpx 23rpx 0rpx rgba(25, 26, 88, 0.07);
	}

	.depotMoney .value {
		font-size: 45rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 120rpx;
		text-align: center;
	}

	.depotMoney .tips {
		// width: 79rpx;
		// height: 33rpx;
		// background: linear-gradient(180deg, #FA6400 0%, #FD9D00 100%);
		// border-radius: 4rpx;
		// font-size: 18rpx;
		// font-weight: 500;
		// padding: 4rpx;
		// text-align: center;
		// float: right;
		// position: absolute;
		// right: 0rpx;
		// line-height: 33rpx;
	}

	.OtherMoney {
		display: flex;
		justify-content: flex-start;
		// color: #999999;
		// font-size: 28rpx;
		// font-family: PingFangSC-Regular, PingFang SC;
		// font-weight: 400;
		// color: #999999;
		// line-height: 40rpx;
		width: 686rpx;
		height: 100rpx;
		background: #F7F6FB;
		border-radius: 10rpx;
		margin: 0 auto;
		line-height: 100rpx;
		margin-top: 32rpx;


		span {
			display: inline-block;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			padding-left: 26rpx;
		}

		input {
			height: 100%;
		}
	}

	.OtherMoney view:nth-child(2) {
		// width: 30rpx;
		// height: 30rpx;
		// background: #F0F0F0;
		// border-radius: 50%;
		// text-align: center;
		// line-height: 30rpx;
		// margin-top: 7rpx;
		// margin-left: 5rpx;
	}

	.payType {
		height: 98rpx;
		line-height: 98rpx;
		display: flex;
		justify-content: space-between;
	}

	.payType view:nth-child(1) {
		// width: 120rpx;
		height: 42rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		line-height: 98rpx;
	}

	.payType view::nth-child(2) {
		width: 225rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 45rpx;
	}



	.arrow {
		transform: rotate(-45deg);
		top: -3rpx;
		border: solid #999999;
		border-width: 0 1rpx 1rpx 0;
		display: inline-block;
		padding: 8rpx;
		position: relative;

	}

	@media (min-height: 650px) {
		.bottomdiv {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 30rpx;
		}
	}

	.DepositID {
		width: 630rpx;
		height: 92rpx;
		background: #04BA73;
		border-radius: 8rpx;
		margin: 0 auto;
		text-align: center;
		bottom: 30rpx;

	}

	.DepositID span {
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 92rpx;
	}

	.switchbankCard {
		text-align: center;
		/* width: 205px; */
		// height: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: #268EF8;
		margin-top: 23rpx;
	}

	.RechargeConfirmationBox {
		position: fixed;
		left: 0;
		right: 0;
		top: 400rpx;
		width: 618rpx;
		height: 478rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;

		.RechargeInfo {
			width: 520rpx;
			height: 100%;
			margin: 0 auto;

			.RechargeInfo1 {
				height: 124rpx;
				line-height: 124rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				text-align: center;
			}

			.ContenInfo {
				text-align: center;
				// width: 383rpx;
				height: 159rpx;
				margin: 0 auto;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #010101;

				view {
					line-height: 75rpx;
				}
			}

			.BtngGoup {
				justify-content: space-between;
				display: flex;
				margin-top: 40rpx;

				view {
					width: 250rpx;
					height: 88rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 88rpx;
				}

				view:nth-child(1) {
					background: #EBEBEB;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #1CC48B;
				}

				view:nth-child(2) {
					background: #1CC48B;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

			}

		}
	}

	.closePhoneBox {
		// width: 35rpx;
		height: 35rpx;
		position: relative;
		right: -20rpx;
		top: 20rpx;
		text-align: right;

		image {
			width: 40rpx;
			height: 40rpx;
			position: relative;
		}

	}

	.doBtnTx {
		width: 506rpx;
		height: 92rpx;
		background: #04BA73;
		border-radius: 8rpx;
		color: #FFFFFF;

		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 38rpx;
	}

	.PhoneNum,
	.VerifyCode {
		width: 506rpx;
		height: 80rpx;
		line-height: 60rpx;
		background: #F7F6FB;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.VerifyCode {
		display: flex;
		justify-content: space-between;
	}

	.VerifyCode input {
		width: 200rpx;
	}

	.CodeMsg {
		color: #01BC73;
		background: #F7F6FB;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 80rpx;
		letter-spacing: 3rpx;
	}

	.placeholderInput {
		color: #AAAAAA;
		font-size: 42rpx;
		font-weight: 500;
		letter-spacing: 3rpx;
		// padding-left: 50rpx;
		height: 80rpx;
	}

	.OtherTitle {
		height: 67rpx;
		font-size: 48rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #010101;
		line-height: 67rpx;

		padding-top: 60rpx;
	}

	.inputOtherM {
		display: flex;
		height: 100rpx;
		margin-top: 40rpx;
	}

	.inputOtherM input {
		border: none;
		outline: none;
		height: 50rpx;
		padding-left: 16rpx;
		font-size: 72rpx;
		font-weight: 600;
	}

	.inputOtherM span:nth-child(1) {
		width: 72rpx;
		font-size: 80rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #010101;
		line-height: 100rpx;
	}

	.OtherLine {
		width: 631rpx;
		height: 1rpx;
		background-color: #CCCCCC;
		margin-top: 19rpx;
	}

	.depositbox {
		margin-top: 31rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.depositImg {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		margin-right: 8rpx;
		position: relative;
		top: -2rpx;
	}

	.Recharge_ {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		margin-top: 40rpx;
	}

	.Recharge_ span:nth-child(2) {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FA6400;
	}

	.placeholderinputOtherM {
		height: 50rpx;
		// font-family: PingFangSC-Semibold, PingFang SC;
		// font-weight: 600;
		// color: #010101;
		line-height: 50rpx;
		width: 323rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
	}

	// 异常处理
	.RechargeException {
		padding-top: 20rpx;
	}

	.weui-label {
		// width: 118rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #3D3D3D;
		line-height: 42rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}

	.tiptext {
		height: 1.06rem;
		font-size: 0.75rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #03BC73;
		line-height: 1.06rem;
		margin-bottom: 0.625rem;
		text-align: center;
	}

	.bottomDetail {
		width: 628rpx;
		height: 88rpx;
		color: white;
		// position: fixed;
		// left: 0;
		// right: 0;
		margin: 0 auto;
		background-color: #03BC73;
		text-align: center;
		line-height: 88rpx;


		margin-top: 84rpx;
	}


	.RechargeException input::placeholder {
		color: #A1A4A8;
	}

	.RechargeException .weui-cell {
		height: 4rem;
		padding: 0 !important;
	}

	.idCardPhoto1,
	.idCardPhoto2 {
		width: 388rpx;
		height: 224rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.idCardPhoto1 image,
	.idCardPhoto2 image {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.weui-toptips_success {
		background-color: #03BC73 !important
	}

	.positionCam {
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #6D7278;
		line-height: 32rpx;
		text-align: center;
		position: relative;
		top: -29px;
	}


	.BgCoverBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		background: #000000;
		opacity: 0.5;
	}

	.hideListCover {
		max-height: 50vh;
		overflow-y: auto;
		padding: 0;
	}

	.bottomDiv {
		font-weight: bold;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #e6e6e6;
	}
</style>
