<template>
|
<div class="transfer">
|
<fx-header :title="$t('划转')">
|
<template v-slot:title>
|
<div>{{ $t('划转') }}</div>
|
</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>
|
</template>
|
</van-field>
|
</div>
|
<div class="hint">
|
<span>{{ $t('最多可转') }}</span>
|
{{ maxMoneyRevise }} USDT
|
</div>
|
|
<van-button type="primary" round color="#f7b600" @click="submit" size="large" :disabled="!submitThrough">
|
{{ $t('确认') }}
|
</van-button>
|
</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(0); // 划转金额
|
const maxMoneyRevise = ref(0); // 最大划转金额
|
const swapValue = ref(true) // 上下是否有交换
|
|
const Maximum = () => { // 数量选择最大
|
moneyRevise.value = maxMoneyRevise.value
|
}
|
|
const submitThrough = computed(() => { // 判断是否可以提交
|
return moneyRevise.value > 0
|
})
|
|
const submit = () => { // 提交
|
_transfer({
|
deductAccount: swapValue.value ? 'capital' : 'contract', // 划转账户
|
receiveAccount: swapValue.value ? 'contract' : 'capital', // 接收账户
|
moneyRevise: moneyRevise.value,
|
}).then(res => {
|
showToast({
|
message: t('划转成功'),
|
forbidClick: true,
|
duration: 2000
|
})
|
getassets()
|
})
|
}
|
|
const getassets = () => { // 获取资产
|
_getassets().then(res => {
|
swapValue.value ? maxMoneyRevise.value = res.capital : maxMoneyRevise.value = res.contract // 根据上下是否颠倒来判断取的哪个值
|
})
|
}
|
getassets()
|
|
const onSwap = () => { // 交换
|
swapValue.value = !swapValue.value
|
getassets()
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.transfer {
|
padding: 0rem 1.2rem 2rem 1.2rem;
|
|
:deep(.van-cell) {
|
background: none;
|
padding: 0;
|
}
|
|
:deep(.van-cell::after) {
|
display: none;
|
}
|
|
:deep(.van-dropdown-menu__bar) {
|
background-color: rgba($color: #000000, $alpha: 0);
|
box-shadow: none;
|
}
|
|
:deep(.van-dropdown-menu__title:after) {
|
border-color: transparent transparent #000 #000;
|
right: 10px;
|
}
|
|
:deep(.van-dropdown-menu__title) {
|
width: 100%;
|
}
|
|
:deep(.van-dropdown-item__content) {
|
padding: 8px 16px;
|
}
|
|
.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;
|
|
}
|
}
|
</style>
|
