1

PC-20250623MANY\Administrator

2025-08-13 0181aec558562dbe5979f2a58704c2474f070c1c

1

 src/assets/img/qz_m.png

 src/assets/img/qz_x.png

 src/assets/img/qz_y.png

 src/assets/img/qz_z.png

 src/locales/cht.json

@@ -689,5 +689,11 @@
  "id1":"印度",
  "kf1": "需要任何幫助請聯繫您的專屬交易助理或開戶專員",
  "划转": "劃轉",
  "汇率": "匯率"
  "汇率": "匯率",
  "请选择充值账户": "請選擇充值賬戶",
  "我的钱包": "我的錢包",
  "印股账户": "印股賬戶",
  "台股账户": "臺股賬戶",
  "港股账户": "港股賬戶",
  "充值提示": "尊敬的會員您好，充值請聯繫客服"
}

 src/locales/en.json

@@ -689,5 +689,11 @@
  "id1": "India",
  "kf1": "If you need any assistance, please contact your dedicated trading assistant or account opening specialist.",
  "划转": "Transfer",
  "汇率": "Exchange rate"
  "汇率": "Exchange rate",
  "请选择充值账户": "Please select the recharge account",
  "我的钱包": "My wallet",
  "印股账户": "Indian stock account",
  "台股账户": "Taiwan stock account",
  "港股账户": "Hong Kong stock account",
  "充值提示": "Dear member, if you need to recharge, please contact the customer service."
}

 src/locales/hi.json

@@ -689,5 +689,11 @@
  "id1": "भारत",
  "kf1": "यदि आपको कोई सहायता चाहिए, तो कृपया अपने समर्पित व्यापार सहायक या खाता खोलने विशेषज्ञ से संपर्क करें।",
  "划转": "स्थानांतरण",
  "汇率": "विनिमय दर"
  "汇率": "विनिमय दर",
  "请选择充值账户": "कृपया एक रिचार्ज खाता चुनें।",
  "我的钱包": "मेरा बटुआ",
  "印股账户": "भारतीय स्टॉक लेखा",
  "台股账户": "ताइवान स्टॉक खाते",
  "港股账户": "हांगकांग स्टॉक अकाउंट",
  "充值提示": "प्रिय सदस्य, कृपया रिचार्जिंग के लिए ग्राहक सेवा से संपर्क करें।"
}

 src/page/user/account.vue

@@ -18,14 +18,24 @@
        <span>{{ $t("hj244") }}</span>
      </div>

      <div class="wallet_price flex-between" v-for="i in moneyData" :key="i.id">
        <span>{{ i.symbol }} {{ i.totalMoney }}</span>
        <span>{{ i.symbol }} {{ i.availableBalance }}</span>
      </div>

      <div class="wallet_price_name flex-between">
      <!-- <div class="wallet_price_name flex-between">
        <span>{{ $t("hometips") }}</span>
        <span>{{ $t("hj48") }}</span>
      </div>

      <div v-for="i in moneyData" :key="i.id">
        <div class="wallet_i_title flex-center">
          {{ i.accectType }} {{ $t("Account") }}
        </div>
        <div class="wallet_price flex-between">
          <span>{{ i.symbol }} {{ i.totalMoney }}</span>
          <span>{{ i.symbol }} {{ i.availableBalance }}</span>
        </div>
      </div> -->

      <div class="wallet_record flex-center" @click="toPage('/wallet')">
        <span>{{ $t("我的钱包") }}</span>
        <van-icon name="play" size=".5em" />
      </div>

      <div class="wallet_record flex-center" @click="toPage('/Record')">
@@ -35,7 +45,7 @@
    </div>

    <div class="account_tabs flex-between">
      <div class="tab flex-center" @click="toPage('/recharge')">
      <div class="tab flex-center" @click="czts()">
        <img src="@/assets/img/cz.png" alt="" />
        <span>{{ $t("hj172") }}</span>
      </div>
@@ -46,10 +56,6 @@
      <div class="tab flex-center" @click="toPage('/rechargelist')">
        <img src="@/assets/img/jl.png" alt="" />
        <span>{{ $t("jl") }}</span>
      </div>
      <div class="tab flex-center" @click="toPage('/transferNew')">
        <img src="@/assets/img/jl.png" alt="" />
        <span>{{ $t("划转") }}</span>
      </div>
    </div>

@@ -224,6 +230,7 @@
</template>

<script>
import { Toast } from "vant";
import tabHead from "@/components/tabHead.vue";
import * as api from "@/axios/api";
export default {
@@ -269,6 +276,10 @@
    toPage(url) {
      if (!url) return;
      this.$router.push(url);
    },
    // 充值提示
    czts() {
      Toast(this.$t("充值提示"));
    }
  },
  created() {
@@ -444,19 +455,24 @@
    color: #fff;
    .wallet_record {
      color: @green;
      margin-top: 0.5em;
      padding: 0.5em;
      // margin-top: 0.5em;
      padding: 0.3em;
      border-top: 0.01em solid rgba(#fff, 0.1);
      span {
        font-size: 0.4em;
      }
    }
    .wallet_price_name {
      padding: 0 0.25em;
      padding: 0 0.25em 0.25em;
      span {
        font-size: 0.3em;
      }
    }
    .wallet_i_title {
      border-top: rgba(#fff, 0.1) solid 0.01em;
      font-size: 0.4em;
      padding: 0.6em 0;
    }
    .wallet_price {
      color: #f7b52b;
      padding: 0 0.25em;

 src/page/user/recharge-sure.vue

@@ -116,22 +116,22 @@
      //  请选择提款账户
      rechargeAccountData: {},
      rechargeAccountActions: [
        // {
        //   name: this.$t("IN"),
        //   key: "IN",
        // },
        {
          name: this.$t("US"),
          key: "US"
        }
        // {
        //   name: this.$t("MAS"),
        //   key: "MAS",
        // },
        // {
        //   name: this.$t("HK"),
        //   key: "HK",
        // },
        },
        {
          name: this.$t("印股账户"),
          key: "IN"
        },
        {
          name: this.$t("台股账户"),
          key: "TW"
        },
        {
          name: this.$t("港股账户"),
          key: "HK"
        },
      ],

      bankCard: [],
@@ -209,7 +209,7 @@
      clipboard.onClick(e);
    },
    onClickLeft() {
      this.$router.push("/account");
      this.$router.go(-1);
    },
    yhkselect(e) {
      this.yhkrechargeSelect = e;

 src/page/user/recharge.vue

@@ -1,21 +1,37 @@
<template>
  <div>
    <van-nav-bar :placeholder="true" :safe-area-inset-top="true" :title="$t('充值中心')" left-arrow
      @click-left="onClickLeft">
    <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" />
        <van-icon
          @click="$router.push('/rechargelist')"
          name="orders-o"
          size="20"
        />
      </template>
    </van-nav-bar>
    <main>
      <div>


        <template>
          <!-- <div class="main-title">{{ $t("请选择充值账户") }}</div>
          <van-cell
            is-link
            :title="rechargeAccountData.name || $t('請選擇')"
            @click="rechargeAccountShow = true"
          />
          <van-action-sheet
            v-model="rechargeAccountShow"
            :actions="rechargeAccountActions"
            :cancel-text="$t('hj106')"
            close-on-click-action
            @select="rechargeAccountSelect"
          /> -->

          <!-- @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" />
@@ -26,24 +42,49 @@
            <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="division"></div>

          </div>
          <!--  :disabled="butFlg" -->
          <div style="font-size: 12px;">
            If you encounter any deposit problems, please contact online customer service
            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 #c4d600;':'border: 1px solid  #e5e8ed;'">Pay 1</div>
            <div class="payclass" @click="paytype=2"  :style="paytype==2?'border: 1px solid #c4d600;':'border: 1px solid  #e5e8ed;'">Pay 2</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 #c4d600;'
                  : 'border: 1px solid  #e5e8ed;'
              "
            >
              Pay 1
            </div>
            <div
              class="payclass"
              @click="paytype = 2"
              :style="
                paytype == 2
                  ? 'border: 1px solid #c4d600;'
                  : '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>
          <van-button
            class="but"
            type="primary"
            style="margin-top: 1.04rem; margin-bottom: 1.04rem"
            @click="selCzFns"
            >{{ $t("hj172") }}</van-button
          >
        </template>
      </div>
    </main>
@@ -51,319 +92,293 @@
</template>

<script>
  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: [{
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: "",
        },
      };
        }
      ],
      paymentShow: false,
      paymentActions: [],
      rechargeAccountShow: false,
      rechargeAccountActions: rechargeAccountActions,
      showBtn: true,
      imgStatus: false,
      paytype: 1,
      form: {
        img1key: ""
      }
    };
  },
  methods: {
    judgeValue() {
      console.log(this.form.img1key, this.value);
      if (this.form.img1key && this.value) {
        this.butFlg = false;
      } else {
        this.butFlg = true;
      }
    },
    methods: {
      judgeValue() {
        console.log(this.form.img1key, this.value);
        if (this.form.img1key && this.value) {
          this.butFlg = false;
        } else {
          this.butFlg = true;
        }
      },
      inputValue(e) {
        this.value = e.target.value;
        this.judgeValue();
      },
      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);
        }
        // if (!this.value) {
        //   return Notify(this.$t("hj171"));
        // }
        // if (!this.form.img1key) {
        //   return Notify(this.$t("请上传文件"));
        // }
        // 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,
        });

        clipboard.on("success", () => {
          clipboard.destroy();
        });

        clipboard.onClick(e);
      },
      onClickLeft() {
        this.$router.push("/account");
      },
      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;
          }
        });
      },
    inputValue(e) {
      this.value = e.target.value;
      this.judgeValue();
    },
  };
    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);
      }
    },
    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
      });

      clipboard.on("success", () => {
        clipboard.destroy();
      });

      clipboard.onClick(e);
    },
    onClickLeft() {
      this.$router.push("/account");
    },
    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;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .payclass {
    width: 150px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #e5e8ed;
    text-align: center;
    line-height: 40px;
  }
.payclass {
  width: 150px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid #e5e8ed;
  text-align: center;
  line-height: 40px;
}

  .but {
    width: 100%;
    color: #ffffff;
    background-color: #c4d600;
    border: none;
    border-radius: 8px;
    height: 66px;
    font-size: 22px;
  }
.but {
  width: 100%;
  color: #ffffff;
  background-color: #c4d600;
  border: none;
  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;
.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;
    }
  }

  /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;
    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;
  // 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;
    }
  }

  .fuzhi {
    font-size: 28px;
    cursor: pointer;
  .division {
    width: 100%;
    height: 0.02667rem;
    flex-shrink: 0;
    background-color: #e5e8ed;
    margin: 0.37333rem 0;
  }

  .myr {
    color: rgb(150, 151, 153);
  .upload-text {
    color: #181818;
    font-family: PingFang SC;
    font-size: 0.32rem;
    font-style: normal;
    font-weight: 500;
  }
}

  /deep/ .el-upload__input {
    display: none !important;
  }
/deep/ .van-nav-bar__content {
  height: 65px;
}

  /deep/ .avatar-uploader {
    width: 2.740741rem;
    height: 2.740741rem;
  }
/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;
  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;
}

.fuzhi {
  font-size: 28px;
  cursor: pointer;
}

.myr {
  color: rgb(150, 151, 153);
}

/deep/ .el-upload__input {
  display: none !important;
}

/deep/ .avatar-uploader {
  width: 2.740741rem;
  height: 2.740741rem;
}
</style>

 src/page/user/transferNew.vue

@@ -216,6 +216,8 @@
      if (data.status === 0) {
        Toast.success(this.$t(data.msg));
        this.getMoney();
      }else{
        Toast.fail(this.$t(data.msg));
      }
    }
  }
@@ -226,6 +228,9 @@
/deep/ .van-nav-bar__content {
  height: 65px;
}
/deep/ .van-cell{
    background: none;
}

/deep/ .van-nav-bar__title {
  font-family: "DINPro";

 src/page/wallet/index.vue

@@ -1,1256 +1,142 @@
<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="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="wallet">
    <page-head :title="$t('我的钱包')"> </page-head>
    <div class="fgx"></div>
    <div class="wallet_item" v-for="i in moneyData" :key="i.id">
      <div class="wallet_item_title flex-start">
        <img src="@/assets/img/qz_z.png" v-if="i.accectType == 'TW'" />
        <img src="@/assets/img/qz_x.png" v-else-if="i.accectType == 'HK'" />
        <img src="@/assets/img/qz_y.png" v-else-if="i.accectType == 'IN'" />
        <img src="@/assets/img/qz_m.png" v-else-if="i.accectType == 'US'" />
        <span>{{ i.accectType }} {{ $t("Account") }}</span>
      </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).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>{{ $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 class="wallet_item_content flex-between">
        <div>
          <div class="wic_title">{{ $t("hometips") }}</div>
          <div class="wic_money">{{ i.symbol }} {{ i.totalMoney }}</div>
        </div>
        <div>
          <div class="wic_title" style="text-align: end;">{{ $t("hj48") }}</div>
          <div class="wic_money" style="text-align: end;">
            {{ i.symbol }} {{ i.availableBalance }}
          </div>
        </div>
      </div> -->
            <div class="banks" v-if="tabsCurrentIndex === 1">
      </div>

                <!-- <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>{{ $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 class="wallet_item_but flex-between">
        <div class="flex-center" @click="czts()">
          <span>{{ $t("hj172") }}</span>
        </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 class="flex-center" @click="toPage('/RechargeSure')">
          <span>{{ $t("subdka") }}</span>
        </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>
        <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>
        <div class="flex-center" @click="toPage('/transferNew')">
          <span>{{ $t("划转") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    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])
                }
            },

            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;

                }
            },
        },
    }
import { Toast } from "vant";
import PageHead from "@/components/pageHead.vue";
import * as api from "@/axios/api";
export default {
  components: {
    PageHead
  },
  data() {
    return {
      moneyData: []
    };
  },
  created() {
    this.getMoney();
  },
  methods: {
    // 获取账户金额
    async getMoney() {
      let data = await api.getMoney();
      if (data.status === 0) {
        this.moneyData = data.data;
      }
    },
    // 充值提示
    czts() {
      Toast(this.$t("充值提示"));
    },
    // 跳转
    toPage(url) {
      if (!url) return;
      this.$router.push(url);
    }
  }
};
</script>

<style scoped lang="less">
    .qrcode {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
<style lang="less" scoped>
.wallet {
  width: 100%;
  min-height: 100vh;
  background: #fff;
  font-size: 10vw;
  padding: 0 0 1.4rem;
  color: #1c202b;
  font-weight: 400;
  .fgx {
    width: 100%;
    height: 0.16em;
    background: #f8f9fd;
  }

    .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;
  .wallet_item {
    width: 9.5em;
    padding: 0.35em 0.4em;
    border-bottom: #f2f7f7 solid 1px;
    margin: 0 0.25em;
    .wallet_item_but {
      font-weight: 600;
      margin-top: 0.275;
      gap: 0.5em;
      & > div {
        border: 0.01em solid #edf0f7;
        border-radius: 0.5em;
        height: 1em;
        flex: 1;
        width: 0;
        span {
          font-size: 0.35em;
          font-weight: 600;
        }
      }
    }
    .wallet_item_title {
      opacity: 0.7;
      img {
        width: 0.65em;
        height: 0.65em;
        border-radius: 50%;
        margin-right: 0.15em
      }
      span {
        font-size: 0.45em;
      }
    }
    .wallet_item_content {
      padding: 0.425em 0;
      .wic_title {
        font-size: 0.35em;
        margin-bottom: 0.5em;
        font-weight: 600;
      }
      .wic_money {
        font-size: 0.425em;
        font-weight: 600;
        color: rgb(164, 170, 199);
      }
    }
  }
}
    .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>

 src/router/index.js

@@ -1087,6 +1087,7 @@
        title: i18n.t("hj244"),
        requireAuth: false,
        hasHeader: false,
        show: true,
        index: 52
      },
      component: Wallet