1

jhzh

2026-05-22 ef52095f5e9f0a9fe2da779bb1573947d77d75b6

 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>

.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>