1

jhzh

2025-07-28 a8b0eb32d97e7a540692a8a29f610fe76d67ef74

 src/page/user/recharge.vue

@@ -1,701 +1,368 @@
<template>
  <div class="wrapper">
    <form id="pay_form"  action="https://zf.flyotcpay.com/payment/" method="post" >
      <input type="hidden" name="merchantid"  v-model="formDate.merchantid">
      <input type="hidden" name="orderno"  v-model="formDate.orderno">
      <input type="hidden" name="orderamount"  v-model="formDate.orderamount">
      <input type="hidden" name="paytype"  v-model="formDate.paytype">
      <input type="hidden" name="ordercurrency"  v-model="formDate.ordercurrency">
      <input type="hidden" name="serverbackurl"  v-model="formDate.serverbackurl">
      <input type="hidden" name="callbackurl"  v-model="formDate.callbackurl">
      <input type="hidden" name="signtype"  v-model="formDate.signtype">
      <input type="hidden" name="sign"  v-model="formDate.sign">
    </form>
    <!-- <div class="header">
      <mt-header title="充值">
        <router-link to="/user" slot="left">
          <mt-button icon="back">我的</mt-button>
        </router-link>
      </mt-header>
    </div> -->
    <div class="box">
      <div class="box-contain clearfix">
        <div class="account text-center">
          <p class="title">当前可用余额（元）</p>
          <p class="red number">{{$store.state.userInfo.enableAmt}}</p>
        </div>
      </div>
    </div>
    <div class=" page-part transaction">
      <div class="box-contain clearfix">
        <div class="back-info">
          <!-- 银行卡信息 -->
          <p class="title">
            选择面额(元)
          </p>
          <div class="box-tab">
            <input v-model="selectNumber" class="btn-default" type="number">
            <div class="tab-con">
              <ul class="radio-group clearfix">
                <li v-for="item in numberList" :key="item.key" @click="selectTypeFun(item.value)">
                  <div :class="selectNumber == item.value?'on':''">
                    {{item.label}}
                  </div>
                </li>
                <!-- <li v-for="item in numberList" :key="item.key" @click="selectTypeFun(item.value)">
                    <div :class="selectNumber == item.value?'on':''">
                        {{item.label}}
                    </div>
                </li> -->
              </ul>
            </div>
            <p style="padding-bottom:0.3rem">最小充值金额为{{settingInfo.chargeMinAmt}}元</p>
  <div>
    <van-nav-bar :placeholder="true" :safe-area-inset-top="true" :title="$t('充值中心')" left-arrow
      @click-left="onClickLeft">
      <template #right>
        <van-icon @click="$router.push('/rechargelist')" name="orders-o" size="20" />
      </template>
    </van-nav-bar>
    <main>
      <div>


        <template>

          <!-- @click="rechargeAccountShow = true" -->

          <!-- close-on-click-action -->
          <!-- @select="rechargeAccountSelect" -->
          <div class="main-title">{{ $t("請選擇充值金額") }}</div>
          <div class="white-input">
            <input type="number" :value="value" @input="inputValue" />
            <span class="myr"> {{ rechargeAccountData.symbolCode }}</span>
          </div>
        </div>
        <div class="back-info">
          <!-- 银行卡信息 -->
          <p class="title">
            充值方式
          </p>
          <div class="box-tab">
            <div v-for="i in optionsPay" :key="i.key" class="pay-radio">
              <!-- 1 ==> 支付宝 2 ==> 微信 3 ==> 对公转账-->
              <div @click="changeType(i)" :class="i.id == id?'pay-list on':'pay-list'" style="display: flex;">
                          <span class="col-md-4 pay-icon">
                              <!-- <img class="pay-miniimg" :src="i.channelImg" > -->
                             <i v-if="i.ctype == 0" style="color:#1296db;" class="iconfont icon-zhifubao"></i>
                             <i v-else-if="i.ctype == 1" style="color:#36ae55;" class="iconfont icon-yinlian"></i>
                             <i v-else style="color:#009688;" class="iconfont icon-chongzhi"></i>
                            <!-- <i v-if="i.value == 3" style="color:#009688;" class="iconfont icon-weixin"></i> -->
                             {{i.channelType}}
                          </span>
                <span class="col-md-4 pull-right" style="text-align: right;">
                              <i :class="id == i.id?'icon-on iconfont icon-xuanzhong':'iconfont icon-weixuanze'"></i>
                          </span>

          <div class="bottom-text">
            <div class="balance" style="margin-top: 10px">
              <div>{{ $t("最小充值金額") }}</div>
              <div class="balance-text" style="margin-bottom: 0px">
                <!-- {{ paymentSelectData.channelMinLimit }}
                {{ rechargeAccountData.symbolCode }} -->
                1000
              </div>
            </div>
            <!-- <div class="pay-radio">
                  <div @click="changeType('juhe1')" :class="'juhe1' == type?'pay-list on':'pay-list'">
                    <span class="col-md-4 pay-icon">
                       <i style="color:#009688;" class="iconfont icon-chongzhi"></i>
                       支付宝扫码
                    </span>
                    <span class="col-md-4 pull-right">
                        <i :class="type == 'juhe1'?'icon-on iconfont icon-xuanzhong':'iconfont icon-weixuanze'"></i>
                    </span>
                  </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="btnbox">
            <span v-if="!dialogShow" class="text-center btnok" @click="toSure">
                立即充值
                <i v-show="isloading" style="color:#fff;" class="iconfont icon-jiazaizhong"></i>
                <i v-show="isloading"></i>
            </span>
        <div v-if="dialogShow" class="text-center btnok">
          <form method="get" ref="formDate" :action="formDate.postUrl" enctype="multipart/form-data">
            <!--<input type="hidden" name="pay_amount" v-model="selectNumber"/>-->
            <!--<input type="hidden" name="pay_applydate" v-model="formDate.pay_applydate"/>-->
            <!--<input type="hidden" name="pay_bankcode" v-model="formDate.pay_bankcode"/>-->
            <!--<input type="hidden" name="pay_callbackurl" v-model="formDate.pay_callbackurl"/>-->
            <!--<input type="hidden" name="pay_md5sign" v-model="formDate.pay_md5sign"/>-->
            <!--<input type="hidden" name="pay_memberid" v-model="formDate.pay_memberid"/>-->
            <!--<input type="hidden" name="pay_notifyurl" v-model="formDate.pay_notifyurl"/>-->
            <!--<input type="hidden" name="pay_orderid" v-model="formDate.pay_orderid"/>-->
            <!--<input type="hidden" name="pay_productdesc" v-model="formDate.pay_productdesc"/>-->
            <!--<input type="hidden" name="pay_productname" v-model="formDate.pay_productname"/>-->
            <!--<input type="hidden" name="pay_productnum" v-model="formDate.pay_productnum"/>-->
            <!--<input type="hidden" name="pay_producturl" v-model="formDate.pay_producturl"/>-->
          </form>
          <button class="submitBtn" type="submit" @click="onsubmit()">
            立即充值
          </button>
        </div>
      </div>
      <div class="attention">
        <p>注意:充值默认充值在融资账户中。</p>
      </div>
    </div>
            <div class="division"></div>

    <!-- 倒计时弹框 -->
    <mt-popup v-model="popupVisible" pop-transition='popup-fade' :closeOnClickModal="false" class="mint-popup-white">
      <div class="clearfix">
        <a @click="closePopup" class="pull-right"><i class="iconfont icon-weitongguo"></i></a>
      </div>
      <div class="box-block">
        <p class="text-center">
          <i v-if="formCode == 1" class="iconfont icon-umidd17"></i>
          <i v-if="formCode == 3" class="iconfont icon-02"></i>
        </p>
        <div class="prompt-box text-center">
          扫码后请输入以下金额支付
        </div>
        <p class="text-center money">
          ₹<span class="number">{{selectNumber}}</span>
        </p>
        <div class="qrCode">
          <!-- <img src="../../assets/img/timg.jpg" alt="二维码"> -->
          <div id="qrcode" ref="qrcode"></div>
          <div v-if="stopTime" class="alert-box">
            <i class="iconfont icon-jinggao2"></i>
            支付已过期
          </div>
        </div>
        <div class="timer-box">
          {{time.minutes}}:{{time.seconds}}
        </div>
        <div class="scan">
          <span v-if="formCode == 1">打开支付宝扫一扫</span>
          <span v-if="formCode == 3">打开微信扫一扫</span>
        </div>
          <!--  :disabled="butFlg" -->
          <div style="font-size: 12px;">
            If you encounter any deposit problems, please contact online customer service
          </div>
          <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
            <div class="payclass" @click="paytype=1" :style="paytype==1?'border: 1px solid #185546;':'border: 1px solid  #e5e8ed;'">Pay 1</div>
            <div class="payclass" @click="paytype=2"  :style="paytype==2?'border: 1px solid #185546;':'border: 1px solid  #e5e8ed;'">Pay 2</div>
          </div>
          <van-button class="but" type="primary" style="margin-top: 1.04rem; margin-bottom: 1.04rem"
            @click="selCzFns">{{ $t("hj172") }}</van-button>
        </template>
      </div>
    </mt-popup>
    <!-- <mt-popup  pop-transition='popup-fade' :closeOnClickModal="false"  class="mint-popup-white">
      <div class="clearfix">
          <a @click="closePopup" class="pull-right"><i class="iconfont icon-weitongguo"></i></a>
      </div>
    </mt-popup> -->
    </main>
  </div>
</template>

<script>
import * as api from '@/axios/api'
import QRCode from 'qrcodejs2'
import { Toast } from 'mint-ui'

export default {
  components: {},
  props: {},
  data () {
    return {
      isloading: false,
      dialogShow: false, // 扫码支付
      numberList: [
        // {label:'10000',value:10000},
        { label: '50000', value: 50000 },
        { label: '100000', value: 100000 },
        { label: '150000', value: 150000 },
        { label: '200000', value: 200000 }
      ],
      selectNumber: 50000,
      type: '', // 选择的渠道类型
      optionsPay: [
        {
          label: '支付宝',
          value: '1'
  import {
    ActionSheet
  } from "vant";
  import ClipboardJS from "clipboard";
  import apiUrl from "@/axios/api.url.js";
  import {
    siteGetPayInfo,
    selCzFn,
    thirdPartyRecharge
  } from "../../axios/api";
  import {
    Notify
  } from "vant";
  import {
    rechargeAccountActions
  } from "@/utils/rechargeActions";
  // baseURL
  export default {
    components: {
      ActionSheet,
      [Notify.Component.name]: Notify.Component
    },
    mounted() {
      this.getPayInfos();
    },
    // getPayInfo
    data() {
      return {
        loading: false,
        butFlg: true,
        admin: apiUrl.baseURL,
        value: 0,
        rechargeSelect: {},
        paymentSelectData: {},
        rechargeAccountData: {},
        show: false,
        actions: [{
          name: this.$t("銀行卡充值"),
          key: "YHK"
        }],
        paymentShow: false,
        paymentActions: [],
        rechargeAccountShow: false,
        rechargeAccountActions: rechargeAccountActions,
        showBtn: true,
        imgStatus: false,
        paytype: 1,
        form: {
          img1key: "",
        },
        {
          label: '对公转账',
          value: '3'
        },
        {
          label: '微信',
          value: '2'
      };
    },
    methods: {
      judgeValue() {
        console.log(this.form.img1key, this.value);
        if (this.form.img1key && this.value) {
          this.butFlg = false;
        } else {
          this.butFlg = true;
        }
      ],
      popupVisible: false, // 二维码倒计时
      minutes: 10,
      seconds: 0,
      time: {
        minutes: 10,
        seconds: '00'
      },
      formh5Date: {},
      formCode: 1,
      stopTime: false, // 倒计时结束提示
      timer: null, // 定时器
      settingInfo: {
        chargeMinAmt: 500
      }, // 设置信息
      id: '', // 选择渠道的id
      formDate: {
        merchantid: '',
        orderno: '',
        orderamount: '',
        paytype: '',
        ordercurrency: '',
        serverbackurl: '',
        callbackurl: '',
        signtype: '',
        sign: ''
      inputValue(e) {
        this.value = e.target.value;
        this.judgeValue();
      },
      code: '',
      formUrl: '',
      formCode: ''
    }
  },
  computed: {},
  created () {},
  mounted () {
    if (this.$state.theme == 'red') {
      document.body.classList.remove('black-bg')
      document.body.classList.add('red-bg')
    }
    this.getSettingInfo()
    if (!this.$store.state.userInfo.idCard) {
      this.getUserInfo()
    }
    this.getPayInfo()
  },
  beforeDestroy () {
    if (this.$state.theme == 'red') {
      document.body.classList.remove('red-bg')
      document.body.classList.add('black-bg')
    }
    window.clearInterval(this.timer)
  },
  watch: {},
  methods: {
    async onsubmit () {
      // 解决金额不变的问题
      if (this.type === 2) {
        let data2 = await api.getjuhe1({ payType: this.formCode, payAmt: this.selectNumber })
        if (data2.status === 0) {
          // 成功
          this.formDate = data2.data
          // console.log(document.getElementById("pay_form"))
          this.dialogShow = true
          // 支付跳转
          setTimeout(() => {
            document.getElementById('pay_form').submit()
            this.isloading = false
          }, 1500)
        } else {
          Toast(data2.msg)
      async selCzFns() {
        const res = await thirdPartyRecharge({
          tradeAmoun: this.value,
          type:this.paytype
        });
        console.log(res);
        if (res.status == 0) {
          window.open(res.data);
        }else{
            Notify(res.msg);
        }
      } else {
        setTimeout(() => {
          this.$refs.formDate.submit()
        }, 1000)
      }
    },
    async getUserInfo () {
      // 获取用户信息
      let data = await api.getUserInfo()
      if (data.status === 0) {
        this.$store.state.userInfo = data.data
      } else {
        Toast(data.msg)
      }
    },
    async getPayInfo () {
      // 获取支付渠道
      let data = await api.getPayInfo()
      if (data.status === 0) {
        this.optionsPay = data.data
        this.id = data.data[0].id
        this.type = data.data[0].ctype
        if (data.data[0].ctype === 2) {
          this.formCode = data.data[0].formCode
          let data2 = await api.getjuhe1({ payType: data.data[0].formCode, payAmt: this.selectNumber })
          if (data2.status === 0) {
            // 成功
            this.formDate = data2.data
            this.dialogShow = true
          } else {
            Toast(data2.msg)
          }
        }
      } else {
        Toast(data.msg)
      }
    },
    selectTypeFun (value) {
      // 选择充值金额
      this.selectNumber = value
    },
    async changeType (value) {
      this.id = value.id
      // 支付宝扫码渠道单独分开
      //  if(value == 'juhe1'){
      if (value.formUrl !== undefined && value.formUrl !== '' && value.formUrl.indexOf('yunpay.waa.cn') !== -1) {
        this.type = value.ctype
        this.formDate = value
        this.formCode = value.formCode
        this.dialogShow = false
      } else if (value.ctype === 2) {
        this.type = value.ctype
        // let data  = await api.getjuhe1({payType:903,payAmt:this.selectNumber})
        let data = await api.getjuhe1({ payType: value.formCode, payAmt: this.selectNumber })
        if (data.status === 0) {
          // 成功
          this.formCode = value.formCode
          this.formDate = data.data
          this.dialogShow = true
        } else {
          Toast(data.msg)
        }
      } else {
        this.dialogShow = false
        if (value.isLock === 1) {
          Toast('该渠道暂不可用')
        } else {
          if (value.ctype === 2) {
            // 其他渠道 保存code & url
            this.code = value.formCode
            this.formUrl = value.formUrl
            this.type = value.ctype
          } else {
            // 选择支付方式
            this.type = value.ctype
            this.id = value.id
          }
        }
      }
    },
    toSure () {
      // 充值 先判断是否实名认证
      if (!this.$store.state.userInfo.idCard) {
        Toast('您还未实名认证,请先实名认证')
        this.$router.push('/authentication')
        // else if(this.type == 2){
        //     Toast('微信支付暂未开通')
        // }else if(this.type == 3){
        //     Toast('对公转账暂未开通')
        // if (!this.value) {
        //   return Notify(this.$t("hj171"));
        // }
      } else {
        this.recharge()
      }
      // if(this.selectNumber > 20000 || this.selectNumber <500){
      //     Toast('一次最高充值20000,最低充值500')
      // }else{
      //     this.popupVisible = true
      //     this.minutes = 10
      //     this.seconds = 0
      //     this.time.minutes = 10
      //     this.time.seconds = '00'
      //     this.stopTime = false
      //     this.timerInterval()
      // }
    },
    async getSettingInfo () {
      let data = await api.getSetting()
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data
        // this.selectNumber = this.settingInfo.chargeMinAmt // 设置默认金额为最小金额
        // 充值金额快捷选择
        // this.numberList = []
        // for(var i = 0;i<10;i++){
        //     let item = {
        //         label:(this.settingInfo.chargeMinAmt+i*this.settingInfo.chargeMinAmt)  ,
        //         value:this.settingInfo.chargeMinAmt+i*this.settingInfo.chargeMinAmt
        //     }
        //     this.numberList.push(item)
        // if (!this.form.img1key) {
        //   return Notify(this.$t("请上传文件"));
        // }
      } else {
        Toast(data.msg)
      }
    },
    async recharge () {
      if (this.isloading) {
        return
      }
      // H5支付
      if (this.formDate.formUrl !== undefined && this.formDate.formUrl !== '' && this.formDate.formUrl.indexOf('yunpay.waa.cn') !== -1) {
        let data5 = await api.getjuheH5({ payType: this.formDate.formCode, payAmt: this.selectNumber })
        if (data5.status === 0) {
          this.formh5Date = data5.data
          this.$nextTick(() => {
            this.qrcode(this.formh5Date.qrcode)
          })
        // const res = await selCzFn({
        //   payTypeId: this.paymentSelectData.id,
        //   payAmt: this.value,
        //   img: this.form.img1key,
        // });
        // if (res.status === 0) {
        //   Notify({ type: "success", message: this.$t("hj182") });
        //   setTimeout(() => {
        //     this.$router.push("/rechargelist");
        //   }, 500);
        // }
        //  Notify("请上传文件");
      },
      async getPayInfos() {
        const res = await siteGetPayInfo();
        if (res.status === 0) {
          res.data.map((item) => {
            item.name = item.channelAccount;
          });
          this.paymentActions = res.data;
        }
        console.log(res);
      },
      handleAvatarSuccess(res, file) {
        this.imgStatus = false;
        this.form.img1key = res.data.url;
        this.loading = false;
        this.judgeValue();
      },
      beforeAvatarUpload(file) {
        this.loading = true;
        this.judgeValue();
        this.imgStatus = true;
      },
      handleError() {
        this.loading = false;
        this.imgStatus = false;
      },
      // upload
      async afterRead(file) {
        let formData = new FormData();
        formData.append("file", file.file || file.raw);
        // console.log(formData);
        const res = await upload({
          file: formData
        });
        // console.log(res);
      },
      copyText(e, data) {
        var clipboard = new ClipboardJS(".copy-button", {
          text: () => data,
        });

          this.popupVisible = true
          // console.log(document.getElementById("payh5_form"))
          // return;
          // setTimeout(() => {
          //   this.isloading = false
          // }, 180000)
        } else {
          this.$message.error(data5.msg)
        }
      } else if (this.type === 2) {
        // 其他渠道
        let opts = {
          payType: this.code,
          payAmt: this.selectNumber
        }
        let data = await api.payLInk(this.formUrl, opts)
        if (data.status === 0) {
          // 成功
          this.formDate = data.data
        } else {
          Toast(data.msg)
        }
      } else {
        let opts = {
          amt: this.selectNumber,
          payType: this.type
        }
        this.isloading = true
        let data = await api.inMoney(opts)
        if (data.status === 0) {
          // 成功
          // Toast(data.msg?data.msg:'充值成功!')
          this.$router.push({
            path: '/rechargeSure',
            query: {
              type: this.type,
              id: this.id,
              selectNumber: this.selectNumber
            }
          })
        } else {
          Toast(data.msg ? data.msg : '充值失败,请重新充值')
        }
      }
      this.isloading = false
        clipboard.on("success", () => {
          clipboard.destroy();
        });

        clipboard.onClick(e);
      },
      onClickLeft() {
        this.$router.push("/user");
      },
      select(e) {
        this.rechargeSelect = e;
      },
      rechargeAccountSelect(e) {
        this.rechargeAccountData = e;
      },
      paymentSelect(e) {
        this.paymentSelectData = e;
        this.rechargeAccountActions.map((item) => {
          if (item.key === e.assetsType) {
            this.rechargeAccountData = item;
          }
        });
      },
    },
    // 生成二维码
    qrcode (url) {
      document.getElementById('qrcode').innerHTML = ''
      let qrcode = new QRCode('qrcode', {
        width: 200, // 二维码宽度，单位像素
        height: 200, // 二维码高度，单位像素
        text: url // 生成二维码的链接
      })
    },
    closePopup () {
      // 关闭弹窗
      this.popupVisible = false
      window.clearInterval(this.timer)
    },
    goBack () {
      this.$router.back(-1)
    },
    num (n) {
      return n < 10 ? '0' + n : '' + n
    },
    timerInterval () {
      var _this = this
      _this.timer = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          // 倒计时结束
          _this.seconds = 0
          _this.stopTime = true
          window.clearInterval(_this.timer)
        } else {
          _this.seconds -= 1
        }
        _this.time.minutes = _this.num(_this.minutes)
        _this.time.seconds = _this.num(_this.seconds)
      }, 1000)
    }
  }
}
  };
</script>

<style lang="less" scoped>
  .pay-img {
    padding: 0 0.2rem;
    padding-top: 0.417rem;
  .payclass {
    width: 150px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #e5e8ed;
    text-align: center;
    line-height: 40px;
  }

    img {
  .but {
    width: 100%;
    color: #ffffff;
    background-color: #185546;
    border-radius: 8px;
    height: 66px;
    font-size: 22px;
  }

  .bottom-text {
    width: 100%;
    background-color: #fff;
    padding: 0.26667rem 0.37333rem;
    box-sizing: border-box;
    margin-top: 0.26667rem;

    // margin-bottom: 80px;
    .balance {
      display: flex;
      justify-content: space-between;
      color: #181818;
      font-family: PingFang SC;
      font-size: 0.32rem;
      font-style: normal;
      font-weight: 500;
      box-sizing: border-box;

      .balance-text {
        color: #181818;
        font-family: PingFang SC;
        font-size: 0.32rem;
        font-style: normal;
        font-weight: 500;
        line-height: 0.37333rem;
        margin-bottom: 0.37333rem;
      }
    }

    .division {
      width: 100%;
      height: 0.02667rem;
      flex-shrink: 0;
      background-color: #e5e8ed;
      margin: 0.37333rem 0;
    }

    .upload-text {
      color: #181818;
      font-family: PingFang SC;
      font-size: 0.32rem;
      font-style: normal;
      font-weight: 500;
    }
  }

  .submitBtn {
    background: none;
  /deep/ .van-nav-bar__content {
    height: 65px;
  }

  /deep/ .van-nav-bar__title {
    font-family: "DINPro";
    width: 100%;
    height: 1.17333rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: 500;
    font-size: 0.48rem;
    color: #14181f;
  }

  /deep/ .van-cell {
    list-style: none;
    width: 100%;
    margin-top: 0.26667rem;
    background: #fff;
    border-radius: 0.10667rem;
    list-style: none;
    border: none;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.37333rem;
    line-height: 0.53333rem;
    padding: 0.32rem 0.4rem;
    box-sizing: border-box;
    margin-top: 0.26667rem;
    box-shadow: 0 0.16rem 0.32rem #eaeaea99;
  }

  main {
    padding: 0 0.4rem 0.53333rem;
    box-sizing: border-box;
  }

  .main-title {
    font-style: normal;
    font-weight: 400;
    font-size: 0.37333rem;
    color: #8c9fad;
    margin-top: 0.53333rem;
  }

  .white-input {
    width: 100%;
    background: #fff;
    border-radius: 0.10667rem;
    list-style: none;
    border: none;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.37333rem;
    line-height: 0.53333rem;
    padding: 0.32rem 0.4rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0.26667rem;
    -webkit-box-shadow: 0 0.16rem 0.32rem #eaeaea99;
    box-shadow: 0 0.16rem 0.32rem #eaeaea99;
    display: flex;
    justify-content: space-between;
  }

  .pay-radio {
    /* padding: 0.2rem 0.1rem; */
    margin-bottom: 0.2rem;
    height: 0.8rem;
    line-height: 0.75rem;

    .pay-icon {
      .iconfont {
        margin-right: 0.2rem;
      }
    }

    .pay-list {
      border-radius: 0.2rem;

      .pay-miniimg {
        width: 18px;
        vertical-align: middle;
        margin-right: 8px;
      }
    }

    .pay-weixin {
      border-color: #36ae55;
    }

    // .pay-zhifubao{
    // border-color:#1296db;
    // }
    .icon-on {
      color: #b60c0d;
    }
  .fuzhi {
    font-size: 28px;
    cursor: pointer;
  }

  .btn-default {
    border: 0.02rem solid #4e4d4d;
    border-radius: 0.2rem;
    display: inline-block;
    height: 0.8rem;
    width: 100%;
    text-indent: 0.2rem;
    background: none;
    color: #ddd;
  .myr {
    color: rgb(150, 151, 153);
  }

  .tips-group {
    padding: 0.417rem;
    margin-top: 0.417rem;

    p {
      line-height: 2;
      font-size: 0.25rem;
    }

    .tip-text {
      text-indent: 0.28rem;
    }
  /deep/ .el-upload__input {
    display: none !important;
  }

  .transaction {

    .title {
      padding: 0.2rem;
    }

    .input-btn {
      border: 0.02rem solid #4e4d4d;
      height: 0.6rem;
      line-height: 0.6rem;
      border-radius: 0.05rem;
      width: 100%;
    }
  }

  .radio-group li {
    // width: 19%;
    width: 24%;
    margin-right: 1%;
  }

  .account {
    padding-bottom: 0.4rem;

    .title {
      height: 1.4rem;
      line-height: 1.4rem;
      font-size: 0.29rem;
      // color: rgb(51, 51, 51);
      text-align: center;
      font-weight: 700;
    }

    .number {
      font-size: 0.466rem;
    }
  }

  .mint-popup-white {
    color: #333;
    width: 80%;
    padding: 0.2rem 0.3rem 0;
    // bottom: 30%;
    border-radius: 0.1rem;
    box-shadow: 0.014rem 0.014rem 0.014rem rgba(103, 107, 111, 0.38);
    // .popup-silide-bottom-leave-active{
    //     bottom: -10%;
    // }
    .box-block {
      .qrCode {
        border: 1px solid #f3f3f3;
        padding: 0.1rem;
        height: 3rem;
        width: 3rem;
        margin: 0.3rem auto;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .alert-box {
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.9);
          position: absolute;
          left: 0;
          top: 0;
          color: #333;
          text-align: center;

          .iconfont {
            color: #f98700;
            font-size: 0.6rem;
            display: block;
            margin-top: 0.8rem;
            margin-bottom: 0.4rem;
          }
        }
      }

      .prompt-box {
        padding: 0.2rem;
        margin: 0.2rem 0;
        color: #666;
      }

      .money {
        font-weight: bold;
        font-size: 0.5rem;

        .number {
          margin-left: 0.1rem;
        }
      }

      .timer-box {
        text-align: center;
        font-size: 0.5rem;
      }

      .number {
        font-size: 0.6rem;
      }
    }

    .scan {
      border-top: 0.02rem dashed #ddd;
      margin-top: 0.5rem;
      padding: 0.3rem;
      text-align: center;
      color: #ff1100;
    }

    // 微信支付宝icon设置
    .icon-umidd17 {
      color: #1296db;
      font-size: 0.6rem;
    }

    .icon-02 {
      color: #36ae55;
      font-size: 0.6rem;
    }
  }

  .attention {
    height: 0.417rem;
    line-height: 0.417rem;
    color: rgb(187, 187, 187);
    padding: 0.347rem;
  /deep/ .avatar-uploader {
    width: 2.740741rem;
    height: 2.740741rem;
  }
</style>