1

PC-20250623MANY\Administrator

2025-08-21 86628db1986675f33e3bb2606ffa3853e91bf3cc

 src/page/wallet/index.vue

@@ -1,764 +1,155 @@
<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 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="wallet_item_content flex-between">
        <div>
          <div class="wic_title">{{ $t("hometips") }}</div>
          <div class="wic_money">{{ i.symbol }} {{ i.totalMoney }}</div>
        </div>
        <div class="right_icon">
          <div @click="goToTopUp()">
            <img src="../../assets/img/qianbao.png" alt />
          </div>
          <div>
            <img src="../../assets/img/kefu.png" alt />
        <div>
          <div 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="tabs">
        <div
          v-for="(item, index) in tabsArr"
          :key="index"
          @click="handleTabsClick(item, index)"
          :class="tabsCurrentIndex === index ? 'active' : ''"
        >
          <span>{{ item }}</span>

      <div class="wallet_item_content flex-between" style="padding-top: 0;">
        <div>
          <div class="wic_title">{{ $t("冻结资金") }}</div>
          <div class="wic_money">{{ i.symbol }} {{ i.freezeMoney }}</div>
        </div>
      </div>
      <div class="center_card" v-if="tabsCurrentIndex === 0">
        <div class="keyon">
          <span>{{ '总资产' }}</span>
        </div>
        <div class="num_price">
          <p
            v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userIndexAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
        </div>
        <div class="yk es">
          <div>
            <span>{{ '沪深账户' }}</span>
          </div>
          <div>
            <span>{{ '指数账户' }}</span>
          </div>
        </div>
        <div class="yk as">
          <div>
            <span>{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
          </div>
          <div>
            <span>{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
          </div>
        </div>
        <div class="btns" @click="handleGoToTransfers()">
          <span>{{ '账户金额互转' }}</span>
        </div>
      </div>
      <div class="withdrawal" v-if="tabsCurrentIndex === 1">
        <div class="ttx">
          <span>{{ '可提现金额 (元)' }}</span>
        </div>
        <div class="ttx_price">
          <span>{{ $store.state.userInfo.enableAmt }}</span>
        </div>
        <div class="ttx_input">
          <div class="titles">
            <span>{{ '提现金额' }}</span>
          </div>
          <div class="num">
            <input type="text" v-model="withdrawalValue" />
          </div>
          <div class="all" @click="withdrawalAll()">
            <span>{{ '全部' }}</span>
          </div>
        </div>
        <div class="btns" @click="handleToSure()">
          <span>{{ '确定' }}</span>
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 1">
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '提现记录' }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right" @click="handleGoToCashWithdrawalRecord()">
            <img src="../../assets/img/youjiantou.png" alt />
        <div>
          <div class="wic_title" style="text-align: end;">{{ $t("待补资金") }}</div>
          <div class="wic_money" style="text-align: end;">
            {{ i.symbol }} {{ i.amountToBeCovered }}
          </div>
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 0">
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款名称' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skName" />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</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>{{ '收款银行' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skBankName" />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skBankName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
          </div>
        <div class="flex-center" @click="toPage('/RechargeSure')">
          <span>{{ $t("subdka") }}</span>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款账号' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skUser" />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skUser"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '充值金额' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="walletNum" />
          </div>
          <div class="right_copy" @click="handleGoCz()">
            <span>{{ '充值' }}</span>
          </div>
        </div>
        <div class="bank_1" @click="handleGoToTransferRecord()">
          <div class="left_name">
            <span>{{ '充值记录' }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right">
            <img src="../../assets/img/youjiantou.png" alt />
          </div>
        <div class="flex-center" @click="toPage('/transferNew')">
          <span>{{ $t("划转") }}</span>
        </div>
      </div>
    </div>
    <van-notify v-model="messShow" type="primary">
      <span>{{ mess }}</span>
    </van-notify>
    <van-popup v-model="messDialog" position="bottom" :style="{ height: '70%' }">
      <div class="mess_content">
        <div class="top_title">
          <div class="tt">
            <div class="left_icon">
              <img src="../../assets/img/liucheng.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span>{{ '点击"复制", 复制信息' }}</span>
          </div>
          <div class="_on">
            <span>{{ '②' }}</span>
            <span>{{ '完成复制, 打开手机银行进行转账' }}</span>
          </div>
        </div>
        <div class="top_title" style="color: red;">
          <div class="tt">
            <div class="left_icon">
              <img src="../../assets/img/jinggao.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span class="hgg">{{ '为确保入金及时到账, 请确认您输入的金额和提交的充值金额一致' }}</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import PageHead from "@/components/pageHead.vue";
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { mapState } from "vuex";

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

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

  .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;
    }
    .left_name {
      width: 25%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .center_input {
      width: 60%;
      height: 50%;
      input {
        width: 100%;
        height: 100%;
      }
    }
    .right_copy {
      width: 15%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.img_right {
  > img {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.mess_content {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.3rem;
  .top_title {
    width: 100%;
    height: 2.5rem;
    .tt {
      width: 100%;
      height: 30%;
      display: flex;
      align-items: center;
      .left_icon {
        width: 0.5rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.4rem;
          height: 0.4rem;
      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;
        }
      }
      .right_title {
        margin-left: 0.2rem;
    }
    .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;
      }
    }
  }
  ._on {
    width: 100%;
    height: 0.5rem;
    padding: 0 0.3rem;
    margin-top: 0.1rem;
  }
  .hgg {
    line-height: 0.5rem;
  }
}
.withdrawal {
  width: 100%;
  height: 5rem;
  background: #fff;
  border-radius: 0.15rem;
  padding: 0.5rem 0.4rem;
  background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
  .ttx {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ttx_price {
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d6ae9;
    font-size: 0.6615rem;
    span {
      font-weight: 600;
    }
  }
  .ttx_input {
    width: 100%;
    height: 1rem;
    display: flex;
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .titles {
      width: 20%;
      height: 100%;
    }
    .num {
      width: 70%;
      height: 100%;
      input {
        width: 100%;
        height: 100%;
        padding-left: 1rem;
    .wallet_item_content {
      padding: 0.425em 0;
      .wic_title {
        font-size: 0.35em;
        margin-bottom: 0.5em;
        font-weight: 600;
      }
    }
    .all {
      width: 10%;
      height: 100%;
      .wic_money {
        font-size: 0.4em;
        font-weight: 600;
        color: rgb(164, 170, 199);
      }
    }
  }
}
.btns {
  width: 100%;
  height: 1.2821rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background: #2d6ae9;
  font-size: 0.4015rem;
  color: #fff;
  margin-top: 0.35rem;
  span {
    font-weight: 600;
  }
}
</style>
</style>