<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">{{ RechargeMax }}</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 ~ {{ RechargeMax }}</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: [
        {
          lable: "元",
          value: 100,
        },
        {
          lable: "元",
          value: 200,
        },
        {
          lable: "元",
          value: 500,
        },
        {
          lable: "元",
          value: 1000,
        },
        {
          lable: "其他金额",
          value: "",
        },
      ],
      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 > this_.RechargeMax ? this_.RechargeMax : 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") {
            this_.close();
            setTimeout(() => {
              this_.queryBankInfo();
            }, 3000);
            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 {
  flex-wrap: wrap;
  height: auto;
  color: #888888;
  width: 686rpx;
  margin: 0 auto;
  overflow: hidden;
}

.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);
  margin-right: 2px;
  float: left;
}

.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>
