From 4f437aec7cfb60fe87daec1c5e52b3ed1d10e719 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Thu, 25 Sep 2025 15:07:51 +0800
Subject: [PATCH] 1
---
src/page/wallet/index.vue | 824 +++++++---------------------------------------------------
1 files changed, 106 insertions(+), 718 deletions(-)
diff --git a/src/page/wallet/index.vue b/src/page/wallet/index.vue
index 16e1cc0..03d44ea 100644
--- a/src/page/wallet/index.vue
+++ b/src/page/wallet/index.vue
@@ -1,767 +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/qiandai.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: 0,
- 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;
- }
-}
-.bank_1:last-child {
- border: none;
-}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3