<template>
|
<div class="transfer">
|
<fx-header :title="$t('划转')">
|
<template v-slot:title>
|
<div>{{ $t('划转') }}</div>
|
</template>
|
</fx-header>
|
|
<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>
|
<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>
|
|
<!-- 中间：紫色交换图标 -->
|
<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>
|
|
<script setup>
|
import { ref, computed } from "vue";
|
import { useI18n } from "vue-i18n";
|
import { _transfer, _getassets } from "@/service/user.api.js";
|
import { showToast } from 'vant';
|
|
const { t } = useI18n();
|
|
const moneyRevise = ref('');
|
const maxMoneyRevise = ref(0);
|
const capitalBalance = ref('0');
|
const contractBalance = ref('0');
|
const swapValue = ref(true); // true: 资金账户 -> 交易账户
|
|
const fromBalance = computed(() => swapValue.value ? capitalBalance.value : contractBalance.value);
|
const toBalance = computed(() => swapValue.value ? contractBalance.value : capitalBalance.value);
|
|
const submitThrough = computed(() => {
|
const n = Number(moneyRevise.value);
|
return !isNaN(n) && n > 0;
|
});
|
|
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: amount,
|
}).then(() => {
|
showToast({ message: t('操作成功'), forbidClick: true, duration: 2000 });
|
moneyRevise.value = '';
|
getassets();
|
}).catch(() => {});
|
};
|
|
const getassets = () => {
|
_getassets().then(res => {
|
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;
|
moneyRevise.value = '';
|
getassets();
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/theme/index.scss';
|
|
.transfer {
|
min-height: 100vh;
|
background: #f6f5fa;
|
padding-bottom: 2rem;
|
}
|
|
.transfer-body {
|
padding: 0 1.2rem 2rem;
|
position: relative;
|
}
|
|
.transfer-card {
|
background: #fff;
|
border-radius: 1.5rem;
|
padding: 2rem 1.2rem;
|
font-size: 16px;
|
}
|
|
.transfer-card-head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 2rem;
|
margin-top: 2rem;
|
}
|
|
.transfer-card-title {
|
color: #333;
|
font-weight: 500;
|
}
|
|
.transfer-card-balance {
|
color: #333;
|
font-size: 16px;
|
}
|
|
.transfer-card-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 1rem;
|
margin-top: 2rem;
|
margin-bottom: 2rem;
|
|
&.transfer-card-row--readonly {
|
|
}
|
}
|
|
.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>
|
