From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/views/my/transfer.vue | 363 ++++++++++++++++++++++++++++++++++-----------------
1 files changed, 238 insertions(+), 125 deletions(-)
diff --git a/src/views/my/transfer.vue b/src/views/my/transfer.vue
index 8f8ee07..5983496 100644
--- a/src/views/my/transfer.vue
+++ b/src/views/my/transfer.vue
@@ -6,46 +6,66 @@
</template>
</fx-header>
- <div style="position: relative;">
- <div class="card">
- <!-- <van-field v-model="startValue" :label="$t('从')" type="digit" @blur="getassets" /> -->
- <div>{{ $t('从') }}</div>
- <div class="mt-3">{{ swapValue ? $t('资金账户') : $t('交易账户') }}</div>
- </div>
-
- <div class="card mt-5">
- <!-- <van-field v-model="endValue" :label="$t('至')" type="digit" @blur="getassets" /> -->
- <div>{{ $t('至') }}</div>
- <div class="mt-3">{{ swapValue ? $t('交易账户') : $t('资金账户') }}</div>
- </div>
-
- <img src="@/assets/imgs/my/交换.png" class="swap" @click="onSwap">
- </div>
-
- <div class="mt-10 transfer_label">{{ $t('资产') }}</div>
- <div class="card mt-3">
- <span>USDT</span>
- </div>
-
- <div class="mt-10 transfer_label">{{ $t('数量') }}</div>
- <div class="card mt-3 flex juc-between items-center">
- <van-field v-model="moneyRevise" type="number" :placeholder="$t('输入金额')">
- <template #button>
- <div class="label_but flex flex-end items-center">
- <span class="mr-3">USDT</span>
- <van-button type="default" size="small" round @click="Maximum">{{ $t('最大') }}</van-button>
+ <div class="transfer-body">
+ <!-- 上方卡片：转出账户 -->
+ <div class="transfer-card">
+ <div class="transfer-card-head">
+ <span class="transfer-card-title">{{ swapValue ? $t('来自用户钱包') : $t('期货钱包') }}</span>
+ <span class="transfer-card-balance">{{ $t('balance') }}: {{ fromBalance }}</span>
+ </div>
+ <div class="transfer-card-row">
+ <div class="transfer-currency">
+ <span>USDT</span>
</div>
- </template>
- </van-field>
- </div>
- <div class="hint">
- <span>{{ $t('最多可转') }}</span>
- {{ maxMoneyRevise }} USDT
- </div>
+ <div class="transfer-input-wrap">
+ <van-field
+ v-model="moneyRevise"
+ type="number"
+ :placeholder="$t('请输入数量')"
+ class="transfer-input"
+ >
+ <template #button>
+ <span class="transfer-max" @click="Maximum">{{ $t('最大') }}</span>
+ </template>
+ </van-field>
+ </div>
+ </div>
+ </div>
- <van-button type="primary" round color="#f7b600" @click="submit" size="large" :disabled="!submitThrough">
- {{ $t('确认') }}
- </van-button>
+ <!-- 中间：紫色交换图标 -->
+ <div class="transfer-swap-wrap" @click="onSwap">
+ <div class="transfer-swap-circle">
+ <img src="@/assets/imgs/my/交换.png" alt="" class="transfer-swap-icon" />
+ </div>
+ </div>
+
+ <!-- 下方卡片：转入账户 -->
+ <div class="transfer-card">
+ <div class="transfer-card-head">
+ <span class="transfer-card-title">{{ swapValue ? $t('期货钱包') : $t('来自用户钱包') }}</span>
+ <span class="transfer-card-balance">{{ $t('balance') }}: {{ toBalance }}U</span>
+ </div>
+ <div class="transfer-card-row transfer-card-row--readonly">
+ <div class="transfer-currency">
+ <span>USDT</span>
+ </div>
+ <div class="transfer-approx">≈{{ toBalance }}</div>
+ </div>
+ </div>
+
+ <div class="transfer-hint">
+ <span>{{ $t('最多可转') }}</span> {{ maxMoneyRevise }} USDT
+ </div>
+
+ <van-button
+ type="button"
+ class="transfer-submit"
+ :disabled="!submitThrough"
+ @click="submit"
+ >
+ {{ $t('提交') }}
+ </van-button>
+ </div>
</div>
</template>
@@ -53,113 +73,206 @@
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { _transfer, _getassets } from "@/service/user.api.js";
-import { showToast } from 'vant'
+import { showToast } from 'vant';
-const { t } = useI18n()
+const { t } = useI18n();
-const moneyRevise = ref(0); // 划转金额
-const maxMoneyRevise = ref(0); // 最大划转金额
-const swapValue = ref(true) // 上下是否有交换
+const moneyRevise = ref('');
+const maxMoneyRevise = ref(0);
+const capitalBalance = ref('0');
+const contractBalance = ref('0');
+const swapValue = ref(true); // true: 资金账户 -> 交易账户
-const Maximum = () => { // 数量选择最大
- moneyRevise.value = maxMoneyRevise.value
-}
+const fromBalance = computed(() => swapValue.value ? capitalBalance.value : contractBalance.value);
+const toBalance = computed(() => swapValue.value ? contractBalance.value : capitalBalance.value);
-const submitThrough = computed(() => { // 判断是否可以提交
- return moneyRevise.value > 0
-})
+const submitThrough = computed(() => {
+ const n = Number(moneyRevise.value);
+ return !isNaN(n) && n > 0;
+});
-const submit = () => { // 提交
+const Maximum = () => {
+ moneyRevise.value = String(maxMoneyRevise.value);
+};
+
+const submit = () => {
+ const amount = Number(moneyRevise.value);
+ if (!submitThrough.value) return;
_transfer({
- deductAccount: swapValue.value ? 'capital' : 'contract', // 划转账户
- receiveAccount: swapValue.value ? 'contract' : 'capital', // 接收账户
- moneyRevise: moneyRevise.value,
- }).then(res => {
- showToast({
- message: t('操作成功'),
- forbidClick: true,
- duration: 2000
- })
- getassets()
- })
-}
+ deductAccount: swapValue.value ? 'capital' : 'contract',
+ receiveAccount: swapValue.value ? 'contract' : 'capital',
+ moneyRevise: amount,
+ }).then(() => {
+ showToast({ message: t('操作成功'), forbidClick: true, duration: 2000 });
+ moneyRevise.value = '';
+ getassets();
+ }).catch(() => {});
+};
-const getassets = () => { // 获取资产
+const getassets = () => {
_getassets().then(res => {
- swapValue.value ? maxMoneyRevise.value = res.capitalUSDT : maxMoneyRevise.value = res.contract // 根据上下是否颠倒来判断取的哪个值
- })
-}
-getassets()
+ capitalBalance.value = res.capitalUSDT != null ? res.capitalUSDT : '0';
+ contractBalance.value = res.contract != null ? res.contract : '0';
+ maxMoneyRevise.value = swapValue.value ? (res.capitalUSDT ?? 0) : (res.contract ?? 0);
+ }).catch(() => {});
+};
+getassets();
-const onSwap = () => { // 交换
- swapValue.value = !swapValue.value
- getassets()
-}
-
+const onSwap = () => {
+ swapValue.value = !swapValue.value;
+ moneyRevise.value = '';
+ getassets();
+};
</script>
<style lang="scss" scoped>
+@import '@/assets/theme/index.scss';
+
.transfer {
- padding: 0rem 1.2rem 2rem 1.2rem;
+ min-height: 100vh;
+ background: #f6f5fa;
+ padding-bottom: 2rem;
+}
- :deep(.van-cell) {
- background: none;
- padding: 0;
- }
+.transfer-body {
+ padding: 0 1.2rem 2rem;
+ position: relative;
+}
- :deep(.van-cell::after) {
- display: none;
- }
+.transfer-card {
+ background: #fff;
+ border-radius: 1.5rem;
+ padding: 2rem 1.2rem;
+ font-size: 16px;
+}
- :deep(.van-dropdown-menu__bar) {
- background-color: rgba($color: #000000, $alpha: 0);
- box-shadow: none;
- }
+.transfer-card-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+ margin-top: 2rem;
+}
- :deep(.van-dropdown-menu__title:after) {
- border-color: transparent transparent #000 #000;
- right: 10px;
- }
+.transfer-card-title {
+ color: #333;
+ font-weight: 500;
+}
- :deep(.van-dropdown-menu__title) {
- width: 100%;
- }
+.transfer-card-balance {
+ color: #333;
+ font-size: 16px;
+}
- :deep(.van-dropdown-item__content) {
- padding: 8px 16px;
- }
+.transfer-card-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
- .card {
- background: $input_background;
- padding: 2rem 1.2rem;
- border-radius: 0.5rem;
- font-size: 16px;
- }
-
- .swap {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 4rem;
- }
-
- .hint {
- font-size: 12px;
- margin-bottom: 150px;
-
- span {
- color: $text_color5;
- }
- }
-
- .label_but {
- color: $text_color4;
- }
-
- .transfer_label {
- font-size: 16px;
+ &.transfer-card-row--readonly {
}
}
-</style>
\ No newline at end of file
+
+.transfer-currency {
+ display: flex;
+ align-items: center;
+ color: #333;
+ font-size: 16px;
+}
+
+.transfer-input-wrap {
+ flex: 1;
+ min-width: 0;
+}
+
+.transfer-input {
+ padding: 0;
+ margin: 0;
+ font-size: 16px;
+ background: transparent;
+ text-align: right;
+
+ :deep(.van-field__body) {
+ background: transparent;
+ }
+ :deep(.van-field__control) {
+ text-align: right;
+ &::placeholder {
+ color: #999;
+ }
+ }
+ :deep(.van-field__button) {
+ padding-left: 0.5rem;
+ }
+}
+
+.transfer-max {
+ font-size: 16px;
+ color: #7c3aed;
+ cursor: pointer;
+}
+
+.transfer-approx {
+ font-size: 16px;
+ color: #333;
+}
+
+/* 中间交换按钮：紫色渐变圆 */
+.transfer-swap-wrap {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.8rem 0;
+ position: relative;
+ z-index: 1;
+}
+
+.transfer-swap-circle {
+ width: 4rem;
+ height: 4rem;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #7c3aed, #5b21b6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4);
+ cursor: pointer;
+}
+
+.transfer-swap-icon {
+ width: 2rem;
+ height: 2rem;
+ filter: brightness(0) invert(1);
+}
+
+.transfer-hint {
+ font-size: 12px;
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ color: #999;
+
+ span {
+ color: #999;
+ }
+}
+
+.transfer-submit {
+ width: 100%;
+ height: 48px;
+ line-height: 48px;
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #5b21b6);
+ border: none;
+ border-radius: 0.5rem;
+
+ &:disabled {
+ opacity: 0.5;
+ }
+}
+</style>
--
Gitblit v1.9.3