修改：绑定银行卡 多语言

jhzh

2024-05-20 f8e9af35a267b7b9a2bf605187a11536889a6e38

 src/page/wallet/index.vue

@@ -1,764 +1,1256 @@
<template>
  <div class="user_page">
    <div class="content">
      <div class="top_icon">
        <div class="left_back" @click="handleBack()">
          <img src="../../assets/img/zuojiantou.png" alt />
        </div>
        <div class="right_icon">
          <div @click="goToTopUp()">
            <img src="../../assets/img/qianbao.png" alt />
          </div>
          <div>
            <img src="../../assets/img/kefu.png" alt />
          </div>
        </div>
      </div>
      <div class="tabs">
        <div
          v-for="(item, index) in tabsArr"
          :key="index"
          @click="handleTabsClick(item, index)"
          :class="tabsCurrentIndex === index ? 'active' : ''"
        >
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="center_card" v-if="tabsCurrentIndex === 0">
        <div class="keyon">
          <span>{{ '总资产' }}</span>
        </div>
        <div class="num_price">
          <p
            v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userIndexAmt).toFixed(2)
   <div class="user_page">
      <div class="content">
         <div class="top_icon">
            <div class="left_back" @click="handleBack()">
               <img src="@/assets/img/zuojiantou.png" alt />
            </div>
            <div class="right_icon">
               <div @click="goOnline()">
                  <img src="@/assets/img/kefu.png" alt />
               </div>
               <van-popover v-model="showPopover" trigger="click" placement="bottom-end" :actions="actions"
                  @select="onSelect">
                  <template #reference>
                     <div class="iconfont icon-icon_A">
                     </div>
                  </template>
               </van-popover>
            </div>
         </div>
         <div class="tabs">
            <div v-for="(item, index) in tabsArr" :key="index" @click="handleTabsClick(item, index)"
               :class="tabsCurrentIndex === index ? 'active' : ''">
               <span>{{ item }}</span>
            </div>
         </div>

         <div class="center_card" v-if="tabsCurrentIndex === 3">
            <div class="keyon">
               <span>{{ $t('hj49') }}</span>
            </div>
            <div class="num_price">
               <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
                  class="account">
                  ₹ {{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
              $store.state.userInfo.userIndexAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userFuturesAmt).toFixed(2)
               </p>
               <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
                  class="account">
                  ₹ {{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
              $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
        </div>
        <div class="yk es">
          <div>
            <span>{{ '沪深账户' }}</span>
          </div>
          <div>
            <span>{{ '指数账户' }}</span>
          </div>
        </div>
        <div class="yk as">
          <div>
            <span>{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
          </div>
          <div>
            <span>{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
          </div>
        </div>
        <div class="btns" @click="handleGoToTransfers()">
          <span>{{ '账户金额互转' }}</span>
        </div>
      </div>
      <div class="withdrawal" v-if="tabsCurrentIndex === 1">
        <div class="ttx">
          <span>{{ '可提现金额 (元)' }}</span>
        </div>
        <div class="ttx_price">
          <span>{{ $store.state.userInfo.enableAmt }}</span>
        </div>
        <div class="ttx_input">
          <div class="titles">
            <span>{{ '提现金额' }}</span>
          </div>
          <div class="num">
            <input type="text" v-model="withdrawalValue" />
          </div>
          <div class="all" @click="withdrawalAll()">
            <span>{{ '全部' }}</span>
          </div>
        </div>
        <div class="btns" @click="handleToSure()">
          <span>{{ '确定' }}</span>
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 1">
               </p>
               <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
                  class="account">₹
                  {{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}
               </p>
            </div>
            <div class="yk es">
               <div>
                  <span>{{ $t('hj156') }}</span>
               </div>
               <div>
                  <span>{{ $t('hj115') }}</span>
               </div>
            </div>
            <div class="yk as">
               <div>
                  <span>{{ '₹ ' + $store.state.userInfo.userAmt }}</span>
               </div>
               <div>
                  <span>{{ '₹ ' + $store.state.userInfo.userIndexAmt }}</span>
               </div>
            </div>
            <div class="btns" @click="handleGoToTransfers()">
               <span>{{ $t('hj157') }}</span>
            </div>
         </div>

         <div class="withdrawal" v-if="tabsCurrentIndex === 0">
            <div class="ttx">
               <span>{{ $t('hj48') }}</span>
            </div>
            <div class="ttx_price">
               <span>{{regexNum($store.state.userInfo.enableAmt)}} </span>
            </div>
            <div class="ttx_input">
               <div class="titles">
                  <span>{{ $t('hj170') }}</span>
               </div>
               <div class="num">
                  <input type="number" :placeholder="$t('hj171')" v-model.number="withdrawalValue" />
               </div>
               <!-- <div class="all" @click="withdrawalAll()">
            <span>{{ $t('hj160') }}</span>
          </div> -->
            </div>
            <div class="ttx_input">
               <div class="titles">
                  <span>{{ $t('hj170a') }}</span>
               </div>
               <!-- <div class="num"  @click.stop="czclick()"> -->

               <!-- <input style="pointer-events: none;" type="number" v-model="inputpayType" disabled :placeholder="$t('hj171a')"  /> -->
               <!-- </div> -->
            </div>
            <div class="ttx_input"
               style="align-items: center;flex-wrap: wrap;justify-content: space-between;height: 67px;">
               <div :class="index==payindex?'ttx_boxa':'ttx_box'" @click="slesetpay(item,index)"
                  v-for="(item,index) in array" :key="index" v-if="item.channelName!='USDT'">{{item.channelName}}</div>
            </div>
            <div v-show="payindex==6" class="qrcode" ref="qrCodeUrl"></div>
            <!-- <div class="qrcode_txt" v-if="payindex==3">{{array[3].channelDesc}}</div> -->
            <!-- <div v-if="payindex==3" class="ttx_box" style="display: flex;justify-content: center;align-items: center;">复制</div> -->
            <div class="btns" @click="handleCz()">
               <span>{{ $t('hj172') }}</span>
            </div>
         </div>

         <div class="withdrawal" v-if="tabsCurrentIndex === 1">
            <div class="ttx">
               <span>{{ $t('hj48') }}</span>
            </div>
            <div class="ttx_price">
               <span>{{regexNum($store.state.userInfo.enableAmt)}} </span>
            </div>
            <div class="ttx_input">
               <div class="titles">
                  <span>{{ $t('hj170') }}</span>
               </div>
               <div class="num">
                  <input type="number" :placeholder="$t('hj171')" v-model.number="withdrawalValue" />
               </div>
               <!--  <div class="all" @click="withdrawalAll()">
            <span>{{ $t('hj160') }}</span>
          </div> -->
            </div>
            <div class="ttx_input">
               <div class="titles">
                  <span>{{ $t('hj170a') }}</span>
               </div>
            </div>
            <!-- <div class="ttx_input" v-if="false"
               style="align-items: center;flex-wrap: wrap;justify-content: space-between;height: 67px;">
               <div :class="index==payindex?'ttx_boxa':'ttx_box'" @click="slesetpay(item,index)"
                  v-for="(item,index) in array" :key="index">{{item.channelName}}</div>
            </div> -->
            <div class="aaxx">
               <!-- <template>
                  <vue-qr style="width:200px;height:200px;" logoSrc="https://image.dandelioncloud.cn//dist/img/NoSlightly.png" text="Hello world!" :size="200"></vue-qr>
               </template> -->
               <div v-show="payindex==3" class="qrcode" ref="qrCodeUrl"></div>
               <div class="qrcode_txt">{{array[3].channelDesc}}</div>
            </div>

            <!-- <div class="ttx_input" style="align-items: center;flex-wrap: wrap;justify-content: space-between;height: 67px;">
         <div :class="index==payindex?'ttx_boxa':'ttx_box'" @click="slesetpay(item,index)" v-for="(item,index) in array" :key="index">{{item.channelName}}</div>
      </div> -->

            <!-- <div>
               <div style="width: 100%; display: flex; justify-content: center;align-items: center;display: flex;
       flex-direction: column;">

               </div>
            </div> -->

            <div class="btns" @click="handleCz()">
               <span>{{ $t('hj172') }}</span>
            </div>
         </div>
         <!--    <div class="banks" v-if="tabsCurrentIndex === 1">
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '提现记录' }}</span>
            <span>{{ $t('hj162') }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right" @click="handleGoToCashWithdrawalRecord()">
            <img src="../../assets/img/youjiantou.png" alt />
          </div>
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 0">
        <div class="bank_1">
      </div> -->
         <div class="banks" v-if="tabsCurrentIndex === 1">

            <!-- <div class="bank_1">
         <div class="left_name">
           <span>{{ $t('hj163') }}</span>
         </div>
         <div class="center_input">
           <input type="text" v-model="skName" readonly />
         </div>
         <div class="right_copy">
           <span v-clipboard:copy="skName" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164')
           }}</span>
         </div>
       </div>
       <div class="bank_1">
         <div class="left_name">
           <span>{{ $t('hj166') }}</span>
         </div>
         <div class="center_input">
           <input type="text" v-model="skBankName" readonly />
         </div>
         <div class="right_copy">
           <span v-clipboard:copy="skBankName" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164')
           }}</span>
         </div>
       </div>
       <div class="bank_1">
         <div class="left_name">
           <span>{{ $t('hj167') }}</span>
         </div>
         <div class="center_input">
           <input type="text" v-model="skUser" readonly />
         </div>
         <div class="right_copy">
           <span v-clipboard:copy="skUser" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164')
           }}</span>
         </div>
       </div> -->

            <div class="bank_1" @click="handleGoToTransferRecord()">
               <div class="left_name">
                  <span>{{ $t('hj168') }}</span>
               </div>
               <div class="center_input"></div>
               <div class="right_copy">
                  <span>{{ $t('hj169') }}</span>
               </div>
            </div>

            <!-- <div class="bank_1">
         <div class="left_name">
           <span>{{ $t('hj170') }}</span>
         </div>
         <div class="center_input">
           <input type="text" v-model="walletNum" :placeholder="$t('hj171')" />
         </div>
         <div class="right_copy" @click="handleGoCz()">
           <span
             style="background: #2d6ae9;color: #fff;padding: 0.2rem 0.4rem;border-radius: 0.2rem;white-space: nowrap;">{{
               $t('hj172')
             }}</span>
         </div>
       </div> -->
         </div>
         <div class="banks" v-if="tabsCurrentIndex === 0">

            <!-- <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款名称' }}</span>
            <span>{{ $t('hj163') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skName" />
            <input type="text" v-model="skName" readonly />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
            <span v-clipboard:copy="skName" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164')
            }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款银行' }}</span>
            <span>{{ $t('hj166') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skBankName" />
            <input type="text" v-model="skBankName" readonly />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skBankName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
            <span v-clipboard:copy="skBankName" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164')
            }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款账号' }}</span>
            <span>{{ $t('hj167') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skUser" />
            <input type="text" v-model="skUser" readonly />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skUser"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
            <span v-clipboard:copy="skUser" v-clipboard:success="onCopy" v-clipboard:error="onError">{{ $t('hj164')
            }}</span>
          </div>
        </div>
        <div class="bank_1">
        </div> -->

            <div class="bank_1" @click="handleGoToTransferRecord()">
               <div class="left_name">
                  <span>{{ $t('hj168') }}</span>
               </div>
               <div class="center_input"></div>
               <div class="right_copy">
                  <span>{{ $t('hj169') }}</span>
               </div>
            </div>

            <!-- <div class="bank_1">
          <div class="left_name">
            <span>{{ '充值金额' }}</span>
            <span>{{ $t('hj170') }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="walletNum" />
            <input type="text" v-model="walletNum" :placeholder="$t('hj171')" />
          </div>
          <div class="right_copy" @click="handleGoCz()">
            <span>{{ '充值' }}</span>
            <span
              style="background: #2d6ae9;color: #fff;padding: 0.2rem 0.4rem;border-radius: 0.2rem;white-space: nowrap;">{{
                $t('hj172')
              }}</span>
          </div>
        </div>
        <div class="bank_1" @click="handleGoToTransferRecord()">
          <div class="left_name">
            <span>{{ '充值记录' }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right">
            <img src="../../assets/img/youjiantou.png" alt />
          </div>
        </div>
      </div>
    </div>
    <van-notify v-model="messShow" type="primary">
      <span>{{ mess }}</span>
    </van-notify>
    <van-popup v-model="messDialog" position="bottom" :style="{ height: '70%' }">
      <div class="mess_content">
        <div class="top_title">
          <div class="tt">
            <div class="left_icon">
              <img src="../../assets/img/liucheng.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span>{{ '点击"复制", 复制信息' }}</span>
          </div>
          <div class="_on">
            <span>{{ '②' }}</span>
            <span>{{ '完成复制, 打开手机银行进行转账' }}</span>
          </div>
        </div>
        <div class="top_title" style="color: red;">
          <div class="tt">
            <div class="left_icon">
              <img src="../../assets/img/jinggao.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span class="hgg">{{ '为确保入金及时到账, 请确认您输入的金额和提交的充值金额一致' }}</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
        </div> -->
         </div>
      </div>
      <van-notify v-model="messShow" type="primary">
         <span>{{ mess }}</span>
      </van-notify>
      <van-popup v-model="showPicker" round position="bottom">
         <!-- <van-picker :confirm-button-text="$t('hj161')" :cancel-button-text="$t('hj106')" value-key="channelName"
            :columns="array" @cancel="quxiao" @confirm="onConfirm" show-toolbar /> -->
      </van-popup>
      <van-popup v-model="messDialog" position="bottom" :style="{ height: '70%' }">
         <div class="mess_content">
            <div class="top_title">
               <div class="tt">
                  <div class="left_icon">
                     <img src="../../assets/img/liucheng.png" alt />
                  </div>
                  <div class="right_title">
                     <span>{{ $t('hj173') + ':' }}</span>
                  </div>
               </div>
               <div class="_on">
                  <span>{{ '①' }}</span>
                  <span>{{ $t('hj174') }}</span>
               </div>
               <div class="_on">
                  <span>{{ '②' }}</span>
                  <span>{{ $t('hj175') }}</span>
               </div>
            </div>
            <div class="top_title" style="color: red;">
               <div class="tt">
                  <div class="left_icon">
                     <img src="../../assets/img/jinggao.png" alt />
                  </div>
                  <div class="right_title">
                     <span>{{ $t('hj173') + ':' }}</span>
                  </div>
               </div>
               <div class="_on">
                  <span>{{ '①' }}</span>
                  <span class="hgg">{{ $t('hj176') }}</span>
               </div>
            </div>
         </div>
      </van-popup>
   </div>
</template>

<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { mapState } from "vuex";
   import * as api from '@/axios/api'
   import {
      Toast
   } from 'mint-ui'
   import {
      mapState
   } from 'vuex'
   import QRCode from 'qrcodejs2'
   export default {
      name: 'newUser',
      data() {
         return {
            name: '',
            showPicker: false,
            selectUserFlag: true,
            // tabsArr: [this.$t('hj172'), this.$t('hj177')],
            tabsCurrentIndex: 0,
            walletNum: '',
            skName: '',
            array: [],
            inputpayType: '',
            skBankName: '',
            skUser: '',
            messShow: false,
            mess: '',
            messDialog: false,
            withdrawalValue: '',
            settingInfo: {},
            payindex: 0,
            payindexa: 3,
            qrcodeimg: '',
            id: '',
            onlineService: '',
            showPopover: false,
            actions: [{
                  text: 'English',
                  icon: require('@/assets/ico/english.png'),
                  lang: 'zh-CN'
               },
               {
                  text: 'हिंदी',
                  icon: require('@/assets/ico/india.png'),
                  lang: 'en'
               },
               {
                  text: '繁体中文',
                  icon: require('@/assets/ico/tw.png'),
                  lang: 'tw'
               }
            ]
         }
      },
      computed: {
         ...mapState(['userInfo', 'bankInfo']),
         tabsArr() {
            return [this.$t('hj172'), 'USDT']
         }
      },
      created() {
         this.getSettingInfo()
         this.getCardDetail() // 获取银行卡信息
         this.getUserInfo()
         this.getInfoSite()
         this.getPayInfos()
         this.getPayInfoa()
      },
      mounted() {
         this.creatQrCode()
      },
      methods: {
         creatQrCode() {
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
               // text: this.array[3].channelDesc, // 需要转换为二维码的内容
               text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
               width: 100,
               height: 100,
               colorDark: '#000000',
               colorLight: '#ffffff',
               correctLevel: QRCode.CorrectLevel.H
            })
         },
         czclick() {
            console.log(11);
            // this.showPicker = true
         },
         onConfirm(item) {
            // console.log(item.channelName)
            this.inputpayType = item.channelName
            // this.inputpayType = '123'
            this.id = item.id
            this.showPicker = !this.showPicker
            // this.lever = item.value
         },
         quxiao() {
            this.showPicker = false
         },
         async getPayInfoa() {
            // 获取支付渠道 详细信息
            let data = await api.getPayInfoa()
            if (data.status === 0) {
               this.array = data.data
               this.id = data.data[0].id
               // this.skName = this.payInfo.channelName
               // this.skBankName = this.payInfo.channelType
               // this.skUser = this.payInfo.channelAccount
            } else {
               Toast(data.msg)
            }
         },
         async getPayInfos() {
            // 获取支付渠道 详细信息
            let data = await api.getPayInfo()
            if (data.status === 0) {
               this.payInfo = data.data[0]
               // this.skName = this.payInfo.channelName
               // this.skBankName = this.payInfo.channelType
               // this.skUser = this.payInfo.channelAccount
            } else {
               Toast(data.msg)
            }
         },
         onSelect(e) {
            this.$i18n.locale = e.lang
            window.localStorage.setItem('language', e.lang)
         },
         slesetpay(item, index) {
            this.payindex = index
            this.id = item.id
         },
         goOnline() {
            // if (navigator.vibrate) {
            //   // 支持
            //   navigator.vibrate([55])
            // }
            // this.$router.push('/service')
            // this.$router.push('/service')
            window.location.href = this.onlineService
         },
         async getInfoSite() {
            let data = await api.getInfoSite()
            if (data.status === 0) {
               this.onlineService = data.data.onlineService
            } else {
               Toast(data.msg)
            }
         },
         async getUserInfo() {
            // 获取用户信息
            let data = await api.getUserInfo()
            if (data.status === 0) {
               // 判断是否登录
               this.$store.commit('dialogVisible', false)
               this.$store.state.userInfo = data.data
            } else {
               this.$store.commit('dialogVisible', true)
            }
         },
         handleZh() {
            // cho
            this.selectUserFlag = !this.selectUserFlag
         },
         handleBack() {
            // 点击返回/
            // this.$router.go(-1)
            this.$router.push('/user')
         },
         goToTopUp() {
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
            this.$router.push('/wallet')
         },
         handleTabsClick(item, index) {
            this.tabsCurrentIndex = index
            console.log(index);
            // if(index==1){
            //  this.$router.push({path: '/tixian'})
            //  return
            // }
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         },
         withdrawalAll() {
            // 点击全部提现
            this.withdrawalValue = this.userInfo.enableAmt
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         },

export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true,
      tabsArr: ["充值", "提现"],
      tabsCurrentIndex: 0,
      walletNum: "",
      skName: "",
      skBankName: "",
      skUser: "",
      messShow: false,
      mess: "",
      messDialog: false,
      withdrawalValue: "",
      settingInfo: {}
    };
  },
  computed: {
    ...mapState(["userInfo", "bankInfo"])
  },
  created() {
    this.getSettingInfo();
    this.getCardDetail(); // 获取银行卡信息
  },
  methods: {
    handleZh() {
      //cho
      this.selectUserFlag = !this.selectUserFlag;
    },
    handleBack() {
      // 点击返回/
      this.$router.go(-1);
    },
    goToTopUp() {
      this.$router.push("/wallet");
    },
    handleTabsClick(item, index) {
      this.tabsCurrentIndex = index;
    },
    withdrawalAll() {
      // 点击全部提现
      this.withdrawalValue = this.userInfo.enableAmt;
    },
    async handleToSure() {
      // 点击确定提现
      if (!this.userInfo.idCard) {
        Toast("请先实名认证");
        return;
      }
      if (!this.bankInfo.bankNo) {
        Toast("请先绑定银行卡");
        return;
      } else {
      }
      if (!this.withdrawalValue || this.withdrawalValue <= 0) {
        Toast("请输入正确的提现金额");
      } else if (this.withdrawalValue - this.settingInfo.withMinAmt < 0) {
        Toast("提现金额不得小于" + this.settingInfo.withMinAmt);
      } else {
        let opts = {
          amt: this.withdrawalValue
        };
        let data = await api.outMoney(opts);
        if (data.status === 0) {
          // 成功
          Toast("申请成功，请等待审核!");
          this.$router.push("/cashlist");
        } else {
          Toast(data.msg ? data.msg : "提现失败,请重新提现或者联系管理员");
        }
      }
    },
    async getCardDetail() {
      // 获取银行卡信息
      let data = await api.getBankCard();
      if (data.status === 0) {
        this.$store.state.bankInfo = data.data;
      } else {
        // Toast(data.msg)
      }
    },
    async getSettingInfo() {
      let data = await api.getSetting();
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data;
        console.log(this.settingInfo, "settingInfo");
      } else {
        Toast(data.msg);
      }
    },
    handleGoToTransferRecord() { // 充值记录
      this.$router.push('/transferRecord');
    },
    handleGoToCashWithdrawalRecord() { // 提现记录
      this.$router.push('/cashWithdrawalRecord');
    },
    handleGoToTransfers() {
      this.$router.push('/transfers');
    },
    handleGoCz() {
      if (this.walletNum === "") {
        this.messShow = true;
        this.mess = "请输入充值金额";
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
      } else if (this.walletNum < 200) {
        this.messShow = true;
        this.mess = "小于最少充值金额";
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
      } else if (this.walletNum !== "" && this.walletNum >= 200) {
        this.getPayInfo();
        this.messDialog = true;
      }
    },
    onCopy() {
      Toast("复制成功");
    },
    onError() {
      Toast("复制失败请重试");
    },
    async getPayInfo() {
      // 获取支付渠道 详细信息
      let data = await api.getPayInfoDetail({ payId: 3 });
      if (data.status === 0) {
        const { channelName, channelAccount, channelDesc } = data.data;
        this.skName = channelName;
        this.skUser = channelAccount;
        this.skBankName = channelDesc;
      } else {
        this.messShow = true;
        this.mess = data.msg;
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
      }
    }
  }
};
         async handleCz() {
            if(this.tabsCurrentIndex == 1){
               this.id = 10
            }
            let data = await api.selCzFn({
               currency: '',
               // payType: 'af-pay.com',
               payType: this.id,
               payAmt: this.withdrawalValue
            })

            if (data.status === 0) {
               if (navigator.vibrate) {
                  // 支持
                  navigator.vibrate([55])
               }
               this.$router.push({
                  path: '/chongz',
                  query: {
                     'payAmt': this.withdrawalValue,
                     url: data.data
                  }
               })
            } else {
               Toast(data.msg)
            }
         },

         async handleToSure() {
            // 点击确定提现
            if (!this.userInfo.idCard) {
               Toast(this.$t('hj178'))
               return
            }
            if (!this.bankInfo.bankNo) {
               Toast(this.$t('hj179'))
               return
            } else {}
            if (!this.withdrawalValue || this.withdrawalValue <= 0) {
               Toast(this.$t('hj180'))
            } else if (this.withdrawalValue - this.settingInfo.withMinAmt < 0) {
               Toast(this.$t('hj181') + this.settingInfo.withMinAmt)
            } else {
               let opts = {
                  amt: this.withdrawalValue
               }
               let data = await api.outMoney(opts)
               if (data.status === 0) {
                  // 成功
                  Toast(this.$t('hj182'))
                  this.$router.push('/cashWithdrawalRecord')
               } else {
                  Toast(data.msg ? data.msg : this.$t('hj183'))
               }
            }
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         },
         async getCardDetail() {
            // 获取银行卡信息
            let data = await api.getBankCard()
            if (data.status === 0) {
               this.$store.state.bankInfo = data.data
               // this.skName = data.data.bankName
               // this.skBankName = data.data.bankAddress
               // this.skUser = data.data.bankNo
            } else {
               // Toast(data.msg)
            }
         },
         async getSettingInfo() {
            let data = await api.getSetting()
            if (data.status === 0) {
               // 成功
               this.settingInfo = data.data
               console.log(this.settingInfo, 'settingInfo')
            } else {
               Toast(data.msg)
            }
         },
         handleGoToTransferRecord() { // 充值记录
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
            this.$router.push('/transferRecord')
         },
         handleGoToCashWithdrawalRecord() { // 提现记录
            this.$router.push('/cashWithdrawalRecord')
         },
         handleGoToTransfers() {
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
            this.$router.push('/transfers')
         },
         handleGoCz() {
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
            if (this.walletNum === '') {
               this.messShow = true
               this.mess = this.$t('hj171')
               setTimeout(() => {
                  this.messShow = false
               }, 1500)
            } else if (this.walletNum < 200) {
               this.messShow = true
               this.mess = this.$t('hj184')
               setTimeout(() => {
                  this.messShow = false
               }, 1500)
            } else if (this.walletNum !== '' && this.walletNum >= 200) {
               this.getPayInfo()
            }
         },
         onCopy() {
            Toast(this.$t('hj185'))
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         },
         onError() {
            Toast(this.$t('hj186'))
         },
         async getPayInfo() {
            this.getrecharge()
            // 获取支付渠道 详细信息
            // let data = await api.getPayInfoDetail({ payId: 3 });
            // if (data.status === 0) {
            //   const { channelName, channelAccount, channelDesc } = data.data;
            //   this.skName = channelName;
            //   this.skUser = channelAccount;
            //   this.skBankName = channelDesc;
            // } else {
            //   this.messShow = true;
            //   this.mess = data.msg;
            //   setTimeout(() => {
            //     this.messShow = false;
            //   }, 1500);
            // }
         },
         async getrecharge() {
            if (!this.walletNum) {
               this.$message.error('请输入充值金额')
               return
            }
            // this.dialogTableVisible = true;

            let opts = {
               amt: this.walletNum,
               payType: 1
            }
            let data = await api.inMoney(opts)
            if (data.status === 0) {
               this.messDialog = true
            } else {
               this.messShow = true
               this.mess = data.msg ? data.msg : '充值失败,请重新充值'
               setTimeout(() => {
                  this.messShow = false
               }, 1500)
            }
         },
         regexNum(str) {
            console.log(str);
            str = str.toString()
            if (str.indexOf(".") == -1) {
               str = str + ".00"
            }

            var newStr = str.split('.')
            var point = newStr[1]

            if (point.length < 2) {
               point = point + "0"
            }
            var moneyPoint = newStr[0]
            if (moneyPoint.length <= 3) {
               return moneyPoint + "." + point
            } else {
               var mPoint = moneyPoint.substr(moneyPoint.length - 3, moneyPoint.length)
               var twoPoint = moneyPoint.substr(0, moneyPoint.length - 3)
               var endString = twoPoint.toString().replace(/(\d)(?=(\d{2})+(?!\d))/g, '$1,')
               return endString + "," + mPoint + '.' + point;

            }
         },
      },
   }
</script>

<style scoped lang="less">
.user_page {
  width: 100%;
  height: calc(100% - 1.3rem);
  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.3rem;
    .top_icon {
      width: 100%;
      height: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left_back {
        width: 10%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
      .right_icon {
        width: 25%;
        height: 50%;
        display: flex;
        > div {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.6rem;
            height: 0.6rem;
          }
        }
      }
    }
    .users {
      width: 100%;
      height: 1.7949rem;
      background: #fff;
      border-radius: 0.15rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left_tou {
        width: 80%;
        height: 70%;
        display: flex;
        .left_tx {
          width: 20%;
          height: 100%;
          margin-left: 0.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          > div {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            overflow: hidden;
            background: rgb(211, 211, 211);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right_name {
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4415rem;
          span {
            font-weight: 600;
          }
        }
      }
      .right_go {
        width: 20%;
        height: 70%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 0.2rem;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
    .center_card {
      width: 100%;
      height: 5.3846rem;
      background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
      // background-image: linear-gradient(to right, #ffffff , #dfedfc);
      border-radius: 0.15rem;
      padding: 0.5rem 0.4rem;
      .keyon {
        width: 100%;
        height: 0.5128rem;
        font-size: 0.359rem;
        display: flex;
        align-items: center;
        color: #3d4144;
        span {
          font-weight: 600;
        }
      }
      .num_price {
        width: 100%;
        height: 0.6667rem;
        margin-top: 0.1rem;
        display: flex;
        align-items: center;
        font-size: 0.5528rem;
        span {
          font-weight: 600;
        }
      }
      .yk {
        width: 100%;
        height: 0.5rem;
        display: flex;
        align-items: center;
        > div {
          width: 50%;
          height: 100%;
          color: #97989d;
          display: flex;
          align-items: center;
        }
      }
      .yk.es {
        margin-top: 0.3rem;
      }
      .yk.as {
        font-size: 0.4033rem;
        margin-top: 0.1rem;
        span {
          color: #000;
          font-weight: 600;
        }
        .bzz {
          color: #4ea364;
        }
      }
      .btns {
        width: 100%;
        height: 1.2821rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        background: #2d6ae9;
        font-size: 0.4015rem;
        color: #fff;
        margin-top: 0.35rem;
        span {
          font-weight: 600;
        }
      }
      .active {
        background: #4ea364;
      }
    }
    .jy {
      width: 100%;
      height: 1.5rem;
      border-radius: 0.2rem;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.3rem;
      margin-top: 0.3rem;
      .left_gn {
        width: 40%;
        height: 60%;
        display: flex;
        .l_icon {
          width: 30%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.5041rem;
            height: 0.5041rem;
          }
        }
        .r_title {
          width: 70%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4046rem;
          color: #404040;
          span {
            font-weight: 600;
          }
        }
      }
      .right_gos {
        width: 20%;
        height: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }
   .qrcode {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .ttx_boxa {
      width: 32%;
      height: 40px;
      margin-bottom: 15px;
      background-color: #fff;
      border-radius: 3px;
      background: #2D6AE9;
      font-size: 0.4015rem;
      color: #fff;
   }

   .ttx_box {
      width: 32%;
      height: 40px;
      margin-bottom: 15px;
      background-color: #fff;
      border-radius: 3px;
   }

   .qrcode_txt {
      text-align: center;
      margin-top: 20px;
   }
.aaxx{
   // width: 100%;
       display: flex;
       flex-direction: column;
       justify-items: center;
       align-items: center;
}
.tabs {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
    width: 48%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active {
    background: rgb(255, 255, 255);
    border-radius: 0.15rem;
  }
}
.banks {
  width: 100%;
  background: #fff;
  padding: 0 0.3rem;
  border-radius: 0.15rem;
  margin-top: 0.3rem;
  > div {
    width: 100%;
    height: 1.5385rem;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.05rem solid rgb(224, 224, 224);
    font-size: 0.359rem;
    span {
      font-weight: 600;
    }
    .left_name {
      width: 25%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .center_input {
      width: 60%;
      height: 50%;
      input {
        width: 100%;
        height: 100%;
      }
    }
    .right_copy {
      width: 15%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.img_right {
  > img {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.mess_content {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.3rem;
  .top_title {
    width: 100%;
    height: 2.5rem;
    .tt {
      width: 100%;
      height: 30%;
      display: flex;
      align-items: center;
      .left_icon {
        width: 0.5rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .right_title {
        margin-left: 0.2rem;
      }
    }
  }
  ._on {
    width: 100%;
    height: 0.5rem;
    padding: 0 0.3rem;
    margin-top: 0.1rem;
  }
  .hgg {
    line-height: 0.5rem;
  }
}
.withdrawal {
  width: 100%;
  height: 5rem;
  background: #fff;
  border-radius: 0.15rem;
  padding: 0.5rem 0.4rem;
  background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
  .ttx {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ttx_price {
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d6ae9;
    font-size: 0.6615rem;
    span {
      font-weight: 600;
    }
  }
  .ttx_input {
    width: 100%;
    height: 1rem;
    display: flex;
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .titles {
      width: 20%;
      height: 100%;
    }
    .num {
      width: 70%;
      height: 100%;
      input {
        width: 100%;
        height: 100%;
        padding-left: 1rem;
        font-weight: 600;
      }
    }
    .all {
      width: 10%;
      height: 100%;
    }
  }
}
.btns {
  width: 100%;
  height: 1.2821rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background: #2d6ae9;
  font-size: 0.4015rem;
  color: #fff;
  margin-top: 0.35rem;
  span {
    font-weight: 600;
  }
}
</style>
   .user_page {
      width: 100%;
      height: calc(100% - 1.3rem);

      .content {
         width: 100%;
         height: 100%;
         padding: 0 0.3rem;

         .top_icon {
            width: 100%;
            height: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left_back {
               width: 10%;
               height: 50%;
               display: flex;
               align-items: center;
               justify-content: center;

               img {
                  width: 0.6rem;
                  height: 0.6rem;
               }
            }

            .right_icon {
               width: 18%;
               height: 35%;
               padding-right: 0.1rem;
               display: flex;
               justify-content: space-between;

               >div {
                  width: auto;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  img {
                     width: 0.55rem;
                     height: 0.55rem;
                  }
               }
            }
         }

         .users {
            width: 100%;
            height: 1.7949rem;
            background: #fff;
            border-radius: 0.15rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left_tou {
               width: 80%;
               height: 70%;
               display: flex;

               .left_tx {
                  width: 20%;
                  height: 100%;
                  margin-left: 0.3rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  >div {
                     width: 1rem;
                     height: 1rem;
                     border-radius: 50%;
                     overflow: hidden;
                     background: rgb(211, 211, 211);

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

               .right_name {
                  width: 80%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  font-size: 0.4415rem;

                  span {
                     font-weight: 600;
                  }
               }
            }

            .right_go {
               width: 20%;
               height: 70%;
               display: flex;
               justify-content: flex-end;
               align-items: center;
               padding-right: 0.2rem;

               img {
                  width: 0.6rem;
                  height: 0.6rem;
               }
            }
         }

         .center_card {
            width: 100%;
            height: 5.3846rem;
            background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
            // background-image: linear-gradient(to right, #ffffff , #dfedfc);
            border-radius: 0.15rem;
            padding: 0.5rem 0.4rem;

            .keyon {
               width: 100%;
               height: 0.5128rem;
               font-size: 0.359rem;
               display: flex;
               align-items: center;
               color: #3d4144;

               span {
                  font-weight: 600;
               }
            }

            .num_price {
               width: 100%;
               height: 0.6667rem;
               margin-top: 0.1rem;
               display: flex;
               align-items: center;
               font-size: 0.5528rem;

               span {
                  font-weight: 600;
               }
            }

            .yk {
               width: 100%;
               height: 0.5rem;
               display: flex;
               align-items: center;

               >div {
                  width: 50%;
                  height: 100%;
                  color: #97989d;
                  display: flex;
                  align-items: center;
               }
            }

            .yk.es {
               margin-top: 0.3rem;
            }

            .yk.as {
               font-size: 0.4033rem;
               margin-top: 0.1rem;

               span {
                  color: #000;
                  font-weight: 600;
               }

               .bzz {
                  color: #4ea364;
               }
            }

            .btns {
               width: 100%;
               height: 1.2821rem;
               display: flex;
               align-items: center;
               justify-content: center;
               border-radius: 0.25rem;
               background: #2D6AE9;
               font-size: 0.4015rem;
               color: #fff;
               margin-top: 0.35rem;

               span {
                  font-weight: 600;
               }
            }

            .active {
               background: #4ea364;
            }
         }

         .jy {
            width: 100%;
            height: 1.5rem;
            border-radius: 0.2rem;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.3rem;
            margin-top: 0.3rem;

            .left_gn {
               width: 40%;
               height: 60%;
               display: flex;

               .l_icon {
                  width: 30%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  img {
                     width: 0.5041rem;
                     height: 0.5041rem;
                  }
               }

               .r_title {
                  width: 70%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  font-size: 0.4046rem;
                  color: #404040;

                  span {
                     font-weight: 600;
                  }
               }
            }

            .right_gos {
               width: 20%;
               height: 60%;
               display: flex;
               align-items: center;
               justify-content: flex-end;

               img {
                  width: 0.6rem;
                  height: 0.6rem;
               }
            }
         }
      }
   }

   .tabs {
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      >div {
         width: 48%;
         height: 70%;
         display: flex;
         align-items: center;
         justify-content: center;
      }

      .active {
         background: rgb(255, 255, 255);
         border-radius: 0.15rem;
      }
   }

   .banks {
      width: 100%;
      background: #fff;
      padding: 0 0.4rem;
      border-radius: 0.3rem;
      margin-top: 0.3rem;

      >div {
         width: 100%;
         // height: 1.5385rem;
         // margin-top: 0.3rem;
         padding: 0.5rem 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         border-bottom: 0.05rem solid rgb(224, 224, 224);
         font-size: 0.359rem;

         span {
            font-weight: 600;
         }

         .left_name {
            width: 25%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
         }

         .center_input {
            width: 60%;
            height: 50%;

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

         .right_copy {
            // width: 15%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      }
   }

   .img_right {
      >img {
         width: 0.55rem;
         height: 0.55rem;
      }
   }

   .mess_content {
      width: 100%;
      height: 100%;
      padding: 0.5rem 0.3rem;

      .top_title {
         width: 100%;
         height: 2.5rem;

         .tt {
            width: 100%;
            height: 30%;
            display: flex;
            align-items: center;

            .left_icon {
               width: 0.5rem;
               height: 100%;
               display: flex;
               align-items: center;
               justify-content: center;

               img {
                  width: 0.4rem;
                  height: 0.4rem;
               }
            }

            .right_title {
               margin-left: 0.2rem;
            }
         }
      }

      ._on {
         width: 100%;
         height: 0.5rem;
         padding: 0 0.3rem;
         margin-top: 0.1rem;
      }

      .hgg {
         line-height: 0.5rem;
      }
   }

   .withdrawal {
      width: 100%;
      // height: 5rem;
      background: #fff;
      border-radius: 0.15rem;
      padding: 0.5rem 0.4rem;
      background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);

      .ttx {
         width: 100%;
         height: 0.5rem;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.35rem;
      }

      .ttx_price {
         width: 100%;
         height: 1rem;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #2D6AE9;
         font-size: 0.6615rem;

         span {
            font-weight: 600;
         }
      }

      .ttx_input {
         width: 100%;
         height: 1rem;
         display: flex;

         >div {
            display: flex;
            justify-content: center;
            align-items: center;
         }

         .titles {
            width: 20%;
            height: 100%;
            font-size: 0.35rem;
         }

         .num {
            width: 70%;
            height: 100%;
            font-size: 0.35rem;
            display: flex;

            input {
               width: 100%;
               height: 100%;
               padding-left: 1rem;
               font-weight: 600;
               font-size: 0.35rem;
            }
         }

         .all {
            width: 10%;
            height: 100%;
            font-size: 0.35rem;
         }
      }
   }

   .btns {
      width: 100%;
      height: 1.2821rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.25rem;
      background: #2D6AE9;
      font-size: 0.4015rem;
      color: #fff;
      margin-top: 0.35rem;

      span {
         font-weight: 600;
      }
   }

   .bank_1:last-child {
      border: none;
   }
</style>