1
jhzh
2025-03-18 074606f42763a6aaf6069484a5bc37722584c0e5
src/page/recharge/rechargePage.vue
@@ -1,37 +1,28 @@
<template>
  <div class="rechargePage box-border font-26">
    <assets-head :title="$t('快速充币')" />
    <div class="mt-30 w-full text-center font-36 textColor">
      {{ symbol.toUpperCase() + " " + $t("充值") }}
    </div>
    <div
      class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40"
    >
      <div>
        <canvas id="QRcodeCanvas" v-show="!imgshow"></canvas>
        <img :src="img" alt="" v-show="imgshow" class="QRcodeImg" />
      </div>
      <div
        class="code-btn btnMain text-center font-26 text-white"
        @click="download('#QRcodeCanvas')"
      >
        {{ $t("保存二维码") }}
      </div>
    </div>
    <div class="border-light-grey"></div>
    <div class="pl-30 pr-30">
      <div class="flex flex-col items-center justify-center">
        <div class="textColor font-30 mt50" ref="address">{{ address }}</div>
        <div
          v-clipboard:copy="address"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          class="font-26 border-solid-grey text-center code-btn rounded-6 textColor"
        >
          {{ $t("复制地址") }}
        </div>
      </div>
     <!-- <div>
   <div class="rechargePage box-border font-26">
      <assets-head :title="$t('快速充币')" />
      <div class="mt-30 w-full text-center font-36 textColor">
         {{ symbol.toUpperCase() + " " + $t("充值") }}
      </div>
      <div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
         <div>
            <canvas id="QRcodeCanvas" v-show="!imgshow"></canvas>
            <img :src="img" alt="" v-show="imgshow" class="QRcodeImg" />
         </div>
         <div class="code-btn btnMain text-center font-26 text-white" @click="download('#QRcodeCanvas')">
            {{ $t("保存二维码") }}
         </div>
      </div>
      <div class="border-light-grey"></div>
      <div class="pl-30 pr-30">
         <div class="flex flex-col items-center justify-center">
            <div class="textColor font-30 mt50" ref="address">{{ address }}</div>
            <div v-clipboard:copy="address" v-clipboard:success="onCopy" v-clipboard:error="onError"
               class="font-26 border-solid-grey text-center code-btn rounded-6 textColor">
               {{ $t("复制地址") }}
            </div>
         </div>
         <!-- <div>
        <div class="font-26 textColor">{{ $t("转出地址(选填)") }}</div>
        <div style="position: relative" class="mt-26 mb-60">
          <input
@@ -54,441 +45,477 @@
          </div>
        </div>
     </div> -->
      <div class="mb-60">
        <div class="font-26 textColor">{{ $t("充币数量") }}</div>
        <div>
          <input
            v-model="amount"
            class="input-view w-full font-26 textColor inputBackground"
            :placeholder="$t('请输入充币数量')"
          />
        </div>
      </div>
      <div>
                <div class="font-26 textColor">{{ $t('链名称') }}</div>
                <div class="flex ">
                    <div :class="blockchainIndex == index ? 'borderMain colorMain' : 'border-solid-dark-grey border-r-grey'"
                        class="mr-20 flex-wrap font-32 text-center name-btn rounded textColor"
                        v-for="(item, index) in chainList" :key="index" @click="changeBlockchain(index)">{{
         <div class="mb-60">
            <div class="font-26 textColor">{{ $t("充币数量") }}</div>
            <div>
               <input v-model="amount" class="input-view w-full font-26 textColor inputBackground"
                  :placeholder="$t('请输入充币数量')" />
            </div>
         </div>
         <div>
            <div class="font-26 textColor">{{ $t('链名称') }}</div>
            <div class="flex ">
               <div :class="blockchainIndex == index ? 'borderMain colorMain' : 'border-solid-dark-grey border-r-grey'"
                  class="mr-20 flex-wrap font-32 text-center name-btn rounded textColor"
                  v-for="(item, index) in chainList" :key="index" @click="changeBlockchain(index)">{{
                            item.blockchain_name }}</div>
                </div>
            </div>
     <div>
        <div class="font-26 textColor">
          {{ $t("付款凭证(上传支付详情截图)") }}
        </div>
        <div class="img-box">
          <van-uploader
            accept="image/*"
            style="width: 100%; height: 100%"
            v-model="fileList"
            multiple
            :max-count="1"
            :before-read="beforeRead"
            :after-read="afterRead"
          />
        </div>
      </div>
    </div>
    <div class="hint-box">
      <div class="pl-30 pr-30">
        <div class="font-26 mb-27 textColor">{{ $t("重要提示") }}</div>
        <div class="font-28 text-grey" v-html="tip"></div>
        <button
          class="btnMain text-white next-btn font-30 rounded-lg"
          @click="nextBtn"
        >
          {{ $t("下一步") }}
        </button>
      </div>
    </div>
  </div>
            </div>
         </div>
         <div>
            <div class="font-26 textColor">
               {{ $t("付款凭证(上传支付详情截图)") }}
            </div>
            <div class="img-box">
               <van-uploader accept="image/*" style="width: 100%; height: 100%" v-model="fileList" multiple
                  :max-count="1" :before-read="beforeRead" :after-read="afterRead" />
            </div>
         </div>
      </div>
      <div class="hint-box">
         <div class="pl-30 pr-30">
            <div class="font-26 mb-27 textColor">{{ $t("重要提示") }}</div>
            <div class="font-28 text-grey" v-html="tip"></div>
            <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn">
               {{ $t("下一步") }}
            </button>
         </div>
      </div>
   </div>
</template>
<script>
import QRCode from "qrcode";
import { Icon } from "vant";
import * as imageConversion from "image-conversion";
import { Uploader } from "vant";
import Axios from "@/API/recharge.js";
import axios from "axios";
import assetsHead from "@/components/assets-head";
//import Config from "@/config";
import { BASE_URL } from "@/config";
import { signatureGenerate } from "@/utils/signatureUtil";
import { mapGetters } from "vuex";
   import QRCode from "qrcode";
   import {
      Icon
   } from "vant";
   import * as imageConversion from "image-conversion";
   import {
      Uploader
   } from "vant";
   import Axios from "@/API/recharge.js";
   import axios from "axios";
   import assetsHead from "@/components/assets-head";
   //import Config from "@/config";
   import {
      BASE_URL
   } from "@/config";
   import {
      signatureGenerate
   } from "@/utils/signatureUtil";
   import {
      mapGetters
   } from "vuex";
export default {
  name: "rechargePage",
  components: {
    [Uploader.name]: Uploader,
    [Icon.name]: Icon,
    assetsHead,
  },
  computed: {
    ...mapGetters({
      userInfo: "user/userInfo",
    }),
  },
  state: {
    status: 0, // 状态
    gasObj: {}, //
    userInfo: {
      usercode: "", //
      token: "", // 登录token
      username: "",
      perpetual_contracts_status: 0,
      account: "", // 钱包地址
    },
  },
  getters: {
    mingStatus: (state) => state.status,
    isToken: (state) => state.token,
    userInfo: (state) => state.userInfo,
  },
  data() {
    return {
      BASE_URL,
      tip: "",
      fileList: [],
      address: "",
      uploadImgUrl: "",
      nowUrl: "",
      session_token: "",
      amount: "", //充币数量
      from: "", //客户转出地址
      submitImg: "",
      coin: "", //币种
      blockchainIndex: 0,
      blockchain_name: "",
      chainList: [],
      QRCodeMsg: "",
      imgshow: false,
      img: "",
      enterAddress: "",
      symbol: "",
    };
  },
  mounted() {
    //获取域名
    this.nowUrl = "https://" + window.location.hostname;
    this.coin = this.$route.query.coin;
    this.symbol = this.$route.query.symbol;
    this.getData();
    this.getToken();
    // https://www.wbfjsfhjdbsh.site/wap/api/cms!get.action?language=en&content_code=002&token=fe3c35583f8a4f12a86b0c13faa75ee6
    Axios.getRechargeTips({
      language: this.$i18n.locale,
      token: this.$store.state.user.userInfo.token,
      content_code: "002",
    })
      .then((res) => {
        //console.log('充值提示',res)
        this.tip = res.data.content;
      })
      .catch((err) => {
        if (err.code === "ECONNABORTED") {
          this.$toast(this.$t("网络超时!"));
        } else if (err !== undefined) {
          this.$toast(this.$t(err));
        }
      });
  },
  methods: {
   async getData() {
   export default {
      name: "rechargePage",
      components: {
         [Uploader.name]: Uploader,
         [Icon.name]: Icon,
         assetsHead,
      },
      computed: {
         ...mapGetters({
            userInfo: "user/userInfo",
         }),
      },
      state: {
         status: 0, // 状态
         gasObj: {}, //
         userInfo: {
            usercode: "", //
            token: "", // 登录token
            username: "",
            perpetual_contracts_status: 0,
            account: "", // 钱包地址
         },
      },
      getters: {
         mingStatus: (state) => state.status,
         isToken: (state) => state.token,
         userInfo: (state) => state.userInfo,
      },
      data() {
         return {
            BASE_URL,
            tip: "",
            fileList: [],
            address: "",
            uploadImgUrl: "",
            nowUrl: "",
            session_token: "",
            amount: "", //充币数量
            from: "", //客户转出地址
            submitImg: "",
            coin: "", //币种
            blockchainIndex: 0,
            blockchain_name: "",
            chainList: [],
            QRCodeMsg: "",
            imgshow: false,
            img: "",
            enterAddress: "",
            symbol: "",
         };
      },
      mounted() {
         //获取域名
         this.nowUrl = "https://" + window.location.hostname;
         this.coin = this.$route.query.coin;
         this.symbol = this.$route.query.symbol;
         this.getData();
         this.getToken();
         // https://www.wbfjsfhjdbsh.site/wap/api/cms!get.action?language=en&content_code=002&token=fe3c35583f8a4f12a86b0c13faa75ee6
         Axios.getRechargeTips({
               language: this.$i18n.locale,
               token: this.$store.state.user.userInfo.token,
               content_code: "002",
            })
            .then((res) => {
               //console.log('充值提示',res)
               this.tip = res.data.content;
            })
            .catch((err) => {
               if (err.code === "ECONNABORTED") {
                  this.$toast(this.$t("网络超时!"));
               } else if (err !== undefined) {
                  this.$toast(this.$t(err));
               }
            });
      },
      methods: {
         async getData() {
            await Axios.getBlock({
               coin_para: this.symbol,
               // coin: this.coin
            }).then((res) => {
               if (res.code == "0") {
                  this.chainList = res.data.page.elements;
                  this.address = res.data.page.elements[0].address;
                  this.blockchain_name = res.data.page.elements[0].blockchain_name;
     await Axios.exchange({}).then((res) => {
        console.log(res);
        if (res.data&&res.data.filter(item => {
          return item.userid == this.userInfo.usercode
        }).length >0) {
          Axios.user_wallet({}).then((res) => {
            let trc20=res.data["wallet_address_USDT(trc20)"].contract_address
            let erc20=res.data["wallet_address_USDT(erc20)"].contract_address
            let btc=res.data["wallet_address_BTC"].contract_address
            let eth=res.data["wallet_address_ETH"].contract_address
            if(this.symbol=='usdt'){
              this.chainList=[{
                address:trc20,
                blockchain_name:'TRC20'
              },{
                address:erc20,
                blockchain_name:'ERC20'
              }]
            }else if (this.symbol=='btc'){
              this.chainList=[{
                address:btc,
                blockchain_name:'BTC'
              }]
            }else if (this.symbol=='eth'){
              this.chainList=[{
                address:eth,
                blockchain_name:"ETH"
              }]
            }
            this.address = this.chainList[0].address;
            this.blockchain_name = this.chainList[0].blockchain_name;
            this.getQRCode();
          })
        } else {
          Axios.getBlock({
            coin: this.coin
          }).then((res) => {
            if (res.code == "0") {
              this.chainList = res.data.page.elements;
              this.address = res.data.page.elements[0].address;
              this.blockchain_name = res.data.page.elements[0].blockchain_name;
           let trc20=res.data.page.elements[3].address
           let erc20=res.data.page.elements[0].address
           let btc=res.data.page.elements[1].address
           let eth=res.data.page.elements[2].address
           // debugger
           if(this.symbol=='usdt'){
             this.chainList=[{
               address:trc20,
               blockchain_name:'TRC'
             },{
               address:erc20,
               blockchain_name:'ERC'
             }]
           }else if (this.symbol=='btc'){
              this.chainList=[{
                address:btc,
                blockchain_name:'BTC'
              }]
            }else if (this.symbol=='eth'){
              this.chainList=[{
                address:eth,
                blockchain_name:"ETH"
              }]
            }
              this.getQRCode();
            }
          });
        }
      }).catch((error)=>{
        console.error(error);
     })
    },
    changeBlockchain(index) {
      this.blockchainIndex = index;
      this.address = this.chainList[this.blockchainIndex].address;
      this.blockchain_name =
        this.chainList[this.blockchainIndex].blockchain_name;
      this.getQRCode();
    },
    getToken() {
      Axios.getRechargeToken().then((res) => {
        this.session_token = res.data.session_token;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onCopy(e) {
      this.$toast(this.$t("复制成功"));
    },
    onError(e) {
      this.$toast(this.$t("复制失败"));
    },
    //上传前
    beforeRead(file) {
      let types = [
        "image/jpeg",
        "image/jpg",
        "image/gif",
        "image/bmp",
        "image/png",
      ];
      const isImage = types.includes(file.type);
      if (!isImage) {
        this.$toast(this.$t("上传图片只能是JPG、JPEG、gif、bmp、PNG格式!"));
        return false;
      }
      return true;
    },
    //上传完成
    async afterRead(file) {
      const { timestamp, signature } = signatureGenerate();
      const blob = await imageConversion.compressAccurately(file.file, 500);
      const formData = new FormData();
      formData.append("file", blob);
      const BASE_URL = this.BASE_URL;
      await axios
        .post(`${BASE_URL}public/uploadimg!execute.action`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            tissuePaper: timestamp,
            sign: signature,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.submitImg = res.data.data;
            // this.uploadImgUrl = this.nowUrl+'/wap/public/showimg!showImg.action?imagePath=' + res.data.data;
            this.uploadImgUrl = `${BASE_URL}public/showimg!showImg.action?imagePath=${res.data.data}`;
            this.$toast(this.$t("上传成功"));
            console.log(this.uploadImgUrl);
          } else {
            this.$toast(this.$t("上传失败"));
          }
        });
    },
    //生成二维码
    getQRCode() {
      console.log( this.address);
      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 4, //二维码留白边距
        width: 200, //宽
        height: 200, //高
        text: "", //二维码内容
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      this.QRCodeMsg = this.address; //生成的二维码为URL地址js
      let msg = document.getElementById("QRcodeCanvas"); // 将获取到的数据(val)画到msg(canvas)上
      QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
        console.log(error);
      });
      // 将canvas转成图片格式,可以长按保存
      this.img = msg.toDataURL("image/png");
      this.imgshow = true;
    },
    download(selector) {
      // 通过 API 获取目标 canvas 元素
      const canvas = document.querySelector(selector);
      // 创建一个 a 标签,并设置 href 和 download 属性
      const el = document.createElement("a");
      // 设置 href 为图片经过 base64 编码后的字符串,默认为 png 格式
      el.href = canvas.toDataURL();
      el.download = "123";
                  if (this.symbol == 'usdt') {
                     let trc20 = res.data.page.elements[1].address
                     let erc20 = res.data.page.elements[0].address
                     this.chainList = [{
                        address: trc20,
                        blockchain_name: 'TRC'
                     }, {
                        address: erc20,
                        blockchain_name: 'ERC'
                     }]
                  } else if (this.symbol == 'btc') {
                     let btc = res.data.page.elements[0].address
                     console.log('123');
                     this.chainList = [{
                        address: btc,
                        blockchain_name: 'BTC'
                     }]
                  } else if (this.symbol == 'eth') {
                     let eth = res.data.page.elements[0].address
                     this.chainList = [{
                        address: eth,
                        blockchain_name: "ETH"
                     }]
                  }
                  this.getQRCode();
               }
            });
            //   await Axios.exchange({}).then((res) => {
            //  console.log(res);
            //      if (res.data&&res.data.filter(item => {
            //        return item.userid == this.userInfo.usercode
            //      }).length >0) {
            //        Axios.user_wallet({}).then((res) => {
            //          let trc20=res.data["wallet_address_USDT(trc20)"].contract_address
            //          let erc20=res.data["wallet_address_USDT(erc20)"].contract_address
            //          let btc=res.data["wallet_address_BTC"].contract_address
            //          let eth=res.data["wallet_address_ETH"].contract_address
            //          if(this.symbol=='usdt'){
            //            this.chainList=[{
            //              address:trc20,
            //              blockchain_name:'TRC20'
            //            },{
            //              address:erc20,
            //              blockchain_name:'ERC20'
            //            }]
            //          }else if (this.symbol=='btc'){
            //            this.chainList=[{
            //              address:btc,
            //              blockchain_name:'BTC'
            //            }]
            //          }else if (this.symbol=='eth'){
            //            this.chainList=[{
            //              address:eth,
            //              blockchain_name:"ETH"
            //            }]
            //          }
            //          this.address = this.chainList[0].address;
            //          this.blockchain_name = this.chainList[0].blockchain_name;
            //          this.getQRCode();
            //        })
            //      } else {
            //        Axios.getBlock({
            //          coin: this.coin
            //        }).then((res) => {
            //          if (res.code == "0") {
            //            this.chainList = res.data.page.elements;
            //            this.address = res.data.page.elements[0].address;
            //            this.blockchain_name = res.data.page.elements[0].blockchain_name;
            //   let trc20=res.data.page.elements[3].address
            //   let erc20=res.data.page.elements[0].address
            //   let btc=res.data.page.elements[1].address
            //   let eth=res.data.page.elements[2].address
            //   // debugger
            //   if(this.symbol=='usdt'){
            //     this.chainList=[{
            //       address:trc20,
            //       blockchain_name:'TRC'
            //     },{
            //       address:erc20,
            //       blockchain_name:'ERC'
            //     }]
            //   }else if (this.symbol=='btc'){
            //            this.chainList=[{
            //              address:btc,
            //              blockchain_name:'BTC'
            //            }]
            //          }else if (this.symbol=='eth'){
            //            this.chainList=[{
            //              address:eth,
            //              blockchain_name:"ETH"
            //            }]
            //          }
            //            this.getQRCode();
            //          }
            //        });
            //      }
            //    }).catch((error)=>{
            //  console.error(error);
            // })
         },
         changeBlockchain(index) {
            this.blockchainIndex = index;
            this.address = this.chainList[this.blockchainIndex].address;
            this.blockchain_name =
               this.chainList[this.blockchainIndex].blockchain_name;
            this.getQRCode();
         },
         getToken() {
            Axios.getRechargeToken().then((res) => {
               this.session_token = res.data.session_token;
            });
         },
         onClickLeft() {
            this.$router.go(-1);
         },
         onCopy(e) {
            this.$toast(this.$t("复制成功"));
         },
         onError(e) {
            this.$toast(this.$t("复制失败"));
         },
         //上传前
         beforeRead(file) {
            let types = [
               "image/jpeg",
               "image/jpg",
               "image/gif",
               "image/bmp",
               "image/png",
            ];
            const isImage = types.includes(file.type);
            if (!isImage) {
               this.$toast(this.$t("上传图片只能是JPG、JPEG、gif、bmp、PNG格式!"));
               return false;
            }
            return true;
         },
         //上传完成
         async afterRead(file) {
            const {
               timestamp,
               signature
            } = signatureGenerate();
            const blob = await imageConversion.compressAccurately(file.file, 500);
            const formData = new FormData();
            formData.append("file", blob);
            const BASE_URL = this.BASE_URL;
            await axios
               .post(`${BASE_URL}public/uploadimg!execute.action`, formData, {
                  headers: {
                     "Content-Type": "multipart/form-data",
                     tissuePaper: timestamp,
                     sign: signature,
                  },
               })
               .then((res) => {
                  if (res.data.code == 0) {
                     this.submitImg = res.data.data;
                     // this.uploadImgUrl = this.nowUrl+'/wap/public/showimg!showImg.action?imagePath=' + res.data.data;
                     this.uploadImgUrl =
                        `${BASE_URL}public/showimg!showImg.action?imagePath=${res.data.data}`;
                     this.$toast(this.$t("上传成功"));
                     console.log(this.uploadImgUrl);
                  } else {
                     this.$toast(this.$t("上传失败"));
                  }
               });
         },
         //生成二维码
         getQRCode() {
            console.log(this.address);
            let opts = {
               errorCorrectionLevel: "H", //容错级别
               type: "image/png", //生成的二维码类型
               quality: 0.3, //二维码质量
               margin: 4, //二维码留白边距
               width: 200, //宽
               height: 200, //高
               text: "", //二维码内容
               color: {
                  dark: "#333333", //前景色
                  light: "#fff", //背景色
               },
            };
            this.QRCodeMsg = this.address; //生成的二维码为URL地址js
            let msg = document.getElementById("QRcodeCanvas"); // 将获取到的数据(val)画到msg(canvas)上
            QRCode.toCanvas(msg, this.QRCodeMsg, opts, function(error) {
               console.log(error);
            });
            // 将canvas转成图片格式,可以长按保存
            this.img = msg.toDataURL("image/png");
            this.imgshow = true;
         },
         download(selector) {
            // 通过 API 获取目标 canvas 元素
            const canvas = document.querySelector(selector);
            // 创建一个 a 标签,并设置 href 和 download 属性
            const el = document.createElement("a");
            // 设置 href 为图片经过 base64 编码后的字符串,默认为 png 格式
            el.href = canvas.toDataURL();
            el.download = "123";
      // 创建一个点击事件并对 a 标签进行触发
      const event = new MouseEvent("click");
      el.dispatchEvent(event);
    },
    nextBtn() {
      if (!this.amount) {
        this.$toast(this.$t("请输入数量"));
        return;
      }
            // 创建一个点击事件并对 a 标签进行触发
            const event = new MouseEvent("click");
            el.dispatchEvent(event);
         },
         nextBtn() {
            if (!this.amount) {
               this.$toast(this.$t("请输入数量"));
               return;
            }
      let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
      if (!numReg.test(this.amount)) {
        this.$toast(this.$t("请输入数字"));
        return;
      }
            let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
            if (!numReg.test(this.amount)) {
               this.$toast(this.$t("请输入数字"));
               return;
            }
      if (this.amount) {
        Axios.rechargeApply({
          session_token: this.session_token,
          amount: this.amount,
          from: this.enterAddress,
          // blockchain_name: this.coin.toUpperCase(),
        blockchain_name: this.blockchain_name,
          img: this.submitImg,
          coin: this.symbol.toUpperCase(),
          channel_address: this.address,
          tx: "",
        })
          .then((res) => {
            if (res.code == 0) {
              this.$router.push({
                path: "/recharge/rechargeSubmit",
              });
            } else {
              this.getToken();
              this.$toast(this.$t(res.msg));
            }
          })
          .catch((error) => {
            if (error.code === "ECONNABORTED") {
              this.$toast(this.$t("网络超时!"));
            } else if (error.msg !== undefined) {
              this.$toast(this.$t(error.msg));
            }
            this.getToken();
          });
      } else {
        this.$toast(this.$t("请输入充币数量"));
      }
    },
  },
};
            if (this.amount) {
               Axios.rechargeApply({
                     session_token: this.session_token,
                     amount: this.amount,
                     from: this.enterAddress,
                     // blockchain_name: this.coin.toUpperCase(),
                     blockchain_name: this.blockchain_name,
                     img: this.submitImg,
                     coin: this.symbol.toUpperCase(),
                     channel_address: this.address,
                     tx: "",
                  })
                  .then((res) => {
                     if (res.code == 0) {
                        this.$router.push({
                           path: "/recharge/rechargeSubmit",
                        });
                     } else {
                        this.getToken();
                        this.$toast(this.$t(res.msg));
                     }
                  })
                  .catch((error) => {
                     if (error.code === "ECONNABORTED") {
                        this.$toast(this.$t("网络超时!"));
                     } else if (error.msg !== undefined) {
                        this.$toast(this.$t(error.msg));
                     }
                     this.getToken();
                  });
            } else {
               this.$toast(this.$t("请输入充币数量"));
            }
         },
      },
   };
</script>
<style lang="scss" scoped>
.rechargePage {
  width: 100%;
  box-sizing: border-box;
   .rechargePage {
      width: 100%;
      box-sizing: border-box;
  ::v-deep .van-uploader__upload {
    @include themify() {
      background: themed("upload_bg");
    }
  }
}
      ::v-deep .van-uploader__upload {
         @include themify() {
            background: themed("upload_bg");
         }
      }
   }
.code-btn {
  width: 280px;
  height: 70px;
  margin-top: 36px;
  margin-bottom: 56px;
  line-height: 70px;
}
   .code-btn {
      width: 280px;
      height: 70px;
      margin-top: 36px;
      margin-bottom: 56px;
      line-height: 70px;
   }
.mt50 {
  margin-top: 50px;
}
   .mt50 {
      margin-top: 50px;
   }
.mt70 {
  margin-top: 70px;
}
   .mt70 {
      margin-top: 70px;
   }
.input-view {
  height: 100px;
  width: 100%;
  border: none;
  outline: none;
  padding-left: 20px;
  box-sizing: border-box;
}
   .input-view {
      height: 100px;
      width: 100%;
      border: none;
      outline: none;
      padding-left: 20px;
      box-sizing: border-box;
   }
.name-btn {
  width: 210px;
  height: 80px;
  line-height: 80px;
  margin-top: 30px;
  margin-bottom: 50px;
}
   .name-btn {
      width: 210px;
      height: 80px;
      line-height: 80px;
      margin-top: 30px;
      margin-bottom: 50px;
   }
.img-box {
  margin-top: 32px;
  margin-bottom: 90px;
}
   .img-box {
      margin-top: 32px;
      margin-bottom: 90px;
   }
.hint-box {
  @include themify() {
    background: themed("tab_background");
  }
   .hint-box {
      @include themify() {
         background: themed("tab_background");
      }
  padding-top: 35px;
  padding-bottom: 52px;
}
      padding-top: 35px;
      padding-bottom: 52px;
   }
.mtb27 {
  margin: 27px 0;
}
   .mtb27 {
      margin: 27px 0;
   }
.next-btn {
  width: 100%;
  height: 100px;
  margin-top: 35px;
  border: none;
  outline: none;
}
</style>
   .next-btn {
      width: 100%;
      height: 100px;
      margin-top: 35px;
      border: none;
      outline: none;
   }
</style>