From df817cb82947971993b65b48fa987e42c7b12837 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Mon, 28 Apr 2025 14:38:26 +0800
Subject: [PATCH] style: 账户划转样式更新
---
src/page/user/transfer.vue | 267 +++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 215 insertions(+), 52 deletions(-)
diff --git a/src/page/user/transfer.vue b/src/page/user/transfer.vue
index 6c4bc6b..3b6815b 100644
--- a/src/page/user/transfer.vue
+++ b/src/page/user/transfer.vue
@@ -7,7 +7,7 @@
</router-link>
</mt-header>
</div> -->
- <van-nav-bar
+ <!-- <van-nav-bar
:placeholder="true"
:safe-area-inset-top="true"
:title="$t('账户资金互转')"
@@ -17,10 +17,10 @@
</van-nav-bar>
<mt-navbar v-model="selected">
<mt-tab-item id="1">{{ $t("沙特账户转黄金原油账户") }}</mt-tab-item>
- <mt-tab-item id="2">{{ $t("黄金原油账户转沙特账户") }}</mt-tab-item>
- <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="3">融资转期货</mt-tab-item> -->
- <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">期货转融资</mt-tab-item> -->
- </mt-navbar>
+ <mt-tab-item id="2">{{ $t("黄金原油账户转沙特账户") }}</mt-tab-item> -->
+ <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="3">融资转期货</mt-tab-item> -->
+ <!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">期货转融资</mt-tab-item> -->
+ <!-- </mt-navbar>
<mt-tab-container class="order-list" v-model="selected">
<mt-tab-container-item id="1">
<div class="form-block">
@@ -48,15 +48,18 @@
<mt-field label="资金密码" placeholder="资金密码" type="password" v-model="form.password"></mt-field>
</div>
<p class="prompt">资金密码默认为登录密码</p> -->
- <!-- <div class="btnbox">
+ <!-- <div class="btnbox">
<span class="text-center btnok loginout" @click="tosubmit">{{
$t("确认转入黄金原油账户")
}}</span>
</div> -->
- <van-button class="but" type="primary" style="margin-top: 1.04rem; margin-bottom: 1.04rem"
- @click="tosubmit">{{
- $t("确认转入黄金原油账户")
- }}</van-button>
+ <!-- <van-button
+ class="but"
+ type="primary"
+ style="margin-top: 1.04rem; margin-bottom: 1.04rem"
+ @click="tosubmit"
+ >{{ $t("确认") }}</van-button
+ >
</mt-tab-container-item>
<mt-tab-container-item id="2">
<div class="form-block">
@@ -67,8 +70,8 @@
disabled
v-model="myMoney[1].availableBalance"
></mt-field>
- </div>
- <div class="form-block">
+ </div> -->
+ <!-- <div class="form-block">
<mt-field
:label="$t('转账金额')"
v-model="form.account2"
@@ -77,18 +80,21 @@
>
<span @click="selectAll2">{{ $t("hj60") }}</span>
</mt-field>
- </div>
- <!-- <div class="btnbox">
+ </div> -->
+ <!-- <div class="btnbox">
<span class="text-center btnok loginout" @click="tosubmit">{{
$t("确认转入沙特账户")
}}</span>
</div> -->
- <van-button class="but" type="primary" style="margin-top: 1.04rem; margin-bottom: 1.04rem"
- @click="tosubmit">{{
- $t("确认转入沙特账户")
- }}</van-button>
- </mt-tab-container-item>
- <!-- <mt-tab-container-item id="3">
+ <!-- <van-button
+ class="but"
+ type="primary"
+ style="margin-top: 1.04rem; margin-bottom: 1.04rem"
+ @click="tosubmit"
+ >{{ $t("确认") }}</van-button
+ >
+ </mt-tab-container-item> -->
+ <!-- <mt-tab-container-item id="3">
<div class="form-block">
<mt-field label="可转金额" placeholder="可转金额" type="text" disabled v-model="this.$store.state.userInfo.enableAmt">
</mt-field>
@@ -103,7 +109,7 @@
</div>
</mt-tab-container-item>
-->
- <!-- <mt-tab-container-item id="4">
+ <!-- <mt-tab-container-item id="4">
<div class="form-block">
<mt-field label="可转金额" placeholder="可转金额" type="text" disabled
v-model="this.$store.state.userInfo.enableFuturesAmt"></mt-field>
@@ -118,7 +124,84 @@
</div>
</mt-tab-container-item>
-->
- </mt-tab-container>
+ <!-- </mt-tab-container> -->
+
+ <div class="exchange-wrapper">
+ <van-nav-bar
+ :title="$t('账户资金互转')"
+ left-arrow
+ @click-left="$router.go(-1)"
+ />
+
+ <van-form @submit="onSubmit">
+ <!-- 从货币 -->
+ <van-cell-group>
+ <van-field
+ v-model="fromAmount"
+ type="number"
+ :label="$t('转出金额')"
+ :placeholder="$t('请输入转出金额')"
+ :rules="[{ required: true, message: $t('请输入转出金额') }]"
+ >
+ <template #button>
+ <van-dropdown-menu active-color="#1989fa">
+ <van-dropdown-item
+ v-model="fromCurrency"
+ :options="currencyOptions"
+ disabled
+ />
+ </van-dropdown-menu>
+ </template>
+ </van-field>
+ <van-field
+ v-model="myMoney[my_availableBalance].availableBalance"
+ :label="$t('可用余额')"
+ disabled
+ />
+ </van-cell-group>
+
+ <!-- 兑换箭头 -->
+ <div class="exchange-icon">
+ <van-icon name="exchange" size="24" @click="switchCurrency" />
+ </div>
+
+ <!-- 到货币 -->
+ <van-cell-group>
+ <van-field
+ v-model="toAmount"
+ type="number"
+ :label="$t('转入金额')"
+ :placeholder="$t('转入金额')"
+ disabled
+ >
+ <template #button>
+ <van-dropdown-menu active-color="#1989fa">
+ <van-dropdown-item
+ v-model="toCurrency"
+ :options="currencyOptions"
+ disabled
+ />
+ </van-dropdown-menu>
+ </template>
+ </van-field>
+ </van-cell-group>
+
+ <!-- 汇率显示 -->
+ <!-- <van-cell title="汇率" :value="exchangeRate" /> -->
+
+ <!-- 提交按钮 -->
+ <div style="margin: 16px;">
+ <van-button
+ class="but"
+ type="primary"
+ style="margin-top: 1.04rem; margin-bottom: 1.04rem"
+ native-type="submit"
+ >
+ {{ $t("确认兑换") }}
+ </van-button>
+ </div>
+ </van-form>
+ </div>
</div>
</template>
@@ -143,11 +226,38 @@
userInfo: {
realName: ""
},
- myMoney: ""
+ myMoney: "",
+ my_availableBalance: 0,
+ fromCurrency: "USDT",
+ toCurrency: "ST",
+ fromAmount: "",
+ toAmount: "",
+ fromBalance: "1000.00",
+ exchangeRate: "1 USDT = 100 ST",
+ currencyOptions: [
+ { text: "USDT", value: "USDT" },
+ { text: "ST", value: "ST" }
+ // { text: "欧元(EUR)", value: "EUR" },
+ // { text: "英镑(GBP)", value: "GBP" }
+ ]
};
},
- watch: {},
- computed: {},
+ watch: {
+ fromAmount() {
+ this.calculateAmount();
+ },
+ fromCurrency() {
+ this.calculateAmount();
+ },
+ toCurrency() {
+ this.calculateAmount();
+ }
+ },
+ computed: {
+ toCurrencyDisabled() {
+ return this.currencyOptions.length <= 1;
+ }
+ },
created() {
this.getProductSetting();
this.getMoney();
@@ -159,6 +269,42 @@
this.getUserInfo();
},
methods: {
+ onSubmit() {
+ // 处理兑换逻辑
+ console.log(
+ "提交兑换:",
+ this.fromAmount,
+ this.fromCurrency,
+ "->",
+ this.toAmount,
+ this.toCurrency
+ );
+
+ this.tosubmit();
+ },
+ switchCurrency() {
+ // 切换货币方向
+ const temp = this.fromCurrency;
+ this.fromCurrency = this.toCurrency;
+ this.toCurrency = temp;
+
+ if (this.fromCurrency === "ST") {
+ this.my_availableBalance = 0;
+ } else if (this.fromCurrency === "USDT" || this.fromCurrency === "USD") {
+ this.my_availableBalance = 1;
+ }
+ console.log(this.myMoney[this.my_availableBalance].availableBalance);
+ this.calculateAmount();
+ },
+ calculateAmount() {
+ // 这里应该调用汇率API计算金额
+ // 示例简单计算
+ if (this.fromAmount && this.fromCurrency && this.toCurrency) {
+ const rate =
+ this.fromCurrency === "USDT" && this.toCurrency === "ST" ? 100 : 1;
+ this.toAmount = (this.fromAmount * rate).toFixed(2);
+ }
+ },
onClickLeft() {
this.$router.push("/user");
},
@@ -192,18 +338,11 @@
async tosubmit() {
// 融资转指数
let opt = {
- amt:
- this.selected === "1"
- ? this.form.account1
- : this.selected === "2"
- ? this.form.account2
- : this.selected === "3"
- ? this.form.account3
- : this.form.account4,
+ amt: this.fromAmount,
// type: this.selected, // 1 融资转指数 2 指数转融资
userId: this.$store.state.userInfo.id, // 用户id
- disbursementAccount: this.selected === "1" ? "ST" : "USDT", // 划出账户
- depositAccount: this.selected === "2" ? "ST" : "USDT" // 划入账户
+ disbursementAccount: this.fromCurrency, // 划出账户
+ depositAccount: this.toCurrency // 划入账户
};
let data = await api.transfer(opt);
if (data.status === 0) {
@@ -226,6 +365,14 @@
let data = await api.getMoney();
if (data.status === 0) {
this.myMoney = data.data;
+ if (this.fromCurrency === "ST") {
+ this.my_availableBalance = 0;
+ } else if (
+ this.fromCurrency === "USDT" ||
+ this.fromCurrency === "USD"
+ ) {
+ this.my_availableBalance = 1;
+ }
} else {
Toast(data.msg);
}
@@ -234,23 +381,23 @@
};
</script>
<style lang="less" scoped>
- .payclass {
- width: 150px;
- height: 40px;
- border-radius: 5px;
- border: 1px solid #e5e8ed;
- text-align: center;
- line-height: 40px;
- }
- .but {
- width: 95%;
- color: #ffffff;
- background-color: #1989fa;
- border-radius: 8px;
- height: 66px;
- font-size: 22px;
- margin-left: 2.5%;
- }
+.payclass {
+ width: 150px;
+ height: 40px;
+ border-radius: 5px;
+ border: 1px solid #e5e8ed;
+ text-align: center;
+ line-height: 40px;
+}
+.but {
+ width: 95%;
+ color: #ffffff;
+ background-color: #1989fa;
+ border-radius: 8px;
+ height: 66px;
+ font-size: 22px;
+ margin-left: 2.5%;
+}
.is-selected .mint-tab-item-label:hover {
text-decoration: none;
}
@@ -281,4 +428,20 @@
.prompt {
padding: 0.3rem 0 0.2rem 0.7rem;
}
+
+.exchange-wrapper {
+ padding-bottom: 20px;
+}
+
+.exchange-icon {
+ display: flex;
+ justify-content: center;
+ margin: 15px 0;
+ color: #1989fa;
+}
+
+.van-dropdown-menu {
+ width: 120px;
+ height: 44px;
+}
</style>
--
Gitblit v1.9.3