<template>
|
<div class="transfer_new">
|
<van-nav-bar
|
:placeholder="true"
|
:safe-area-inset-top="true"
|
:title="$t('划转')"
|
left-arrow
|
@click-left="$router.go(-1)"
|
>
|
</van-nav-bar>
|
|
<div style="position: relative;">
|
<div class="card">
|
<div class="flex-center">
|
<span style="margin-right: 1em;">{{ $t("从") }}</span>
|
<van-field
|
v-model="moneyRevise"
|
type="number"
|
:placeholder="$t('请输入')"
|
>
|
<template #button>
|
<van-button
|
size="small"
|
class="butn2"
|
type="primary"
|
@click="onMax"
|
>
|
{{ $t("全部") }}
|
</van-button>
|
</template>
|
</van-field>
|
<span style="margin-left: 1em;">{{ cValue.currency }}</span>
|
</div>
|
<div class="mt-1">
|
<van-popover
|
v-model="showPopover"
|
trigger="click"
|
:actions="actions"
|
@select="onSelect"
|
placement="bottom-start"
|
>
|
<template #reference>
|
<div class="lv flex-center">
|
{{ cValue.text }}
|
<van-icon name="arrow-down" />
|
</div>
|
</template>
|
</van-popover>
|
</div>
|
</div>
|
|
<div class="card mt-1">
|
<div class="flex-center">
|
<span style="margin-right: 1em;">{{ $t("到") }}</span>
|
<div style="flex:1">
|
≈ {{ this.moneyReviseTo || 0 }} {{ dValue.currency }}
|
</div>
|
</div>
|
<div class="mt-1">
|
<van-popover
|
v-model="showPopover1"
|
trigger="click"
|
:actions="actions"
|
@select="onSelect1"
|
placement="bottom-start"
|
>
|
<template #reference>
|
<div class="lv flex-center">
|
{{ dValue.text }}
|
<van-icon name="arrow-down" />
|
</div>
|
</template>
|
</van-popover>
|
</div>
|
</div>
|
|
<img src="@/assets/img/transfer.png" class="swap" @click="onSwap" />
|
</div>
|
|
<div class="flex-between transfer_a">
|
<span>{{ $t("汇率") }}</span>
|
<span>
|
1 {{ cValue.currency }} <van-icon name="exchange" /> {{ exRate }}
|
{{ dValue.currency }}</span
|
>
|
</div>
|
|
<div class="flex-between transfer_a">
|
<span>{{ $t("hj44") }}</span>
|
<span>
|
{{ Math.ceil(sxf * moneyRevise * 1000) / 1000 }} {{ cValue.currency }}
|
</span>
|
</div>
|
|
<van-button type="info" class="butn" @click="submit">
|
{{ $t("qr") }}
|
</van-button>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import { Toast } from "vant";
|
export default {
|
data() {
|
return {
|
moneyRevise: 0, // 划转金额
|
showPopover: false,
|
showPopover1: false,
|
actions: [
|
{ text: this.$t("美国"), value: "US", currency: "USD" },
|
{ text: this.$t("hk1"), value: "HK", currency: "HKD" },
|
{ text: this.$t("tw"), value: "TW", currency: "TWD" },
|
{ text: this.$t("id1"), value: "IN", currency: "INR" }
|
],
|
cValue: {},
|
dValue: {},
|
usM: {}, // 账户金额 us
|
twM: {}, // 账户金额 tw
|
inM: {}, // 账户金额 in
|
hkM: {}, // 账户金额 hk
|
arrRate: [], // 汇率
|
sxf: 0.01 // 手续费比例
|
};
|
},
|
computed: {
|
moneyReviseTo() {
|
return Math.floor(this.moneyRevise * this.exRate * 100) / 100;
|
},
|
exRate() {
|
let rate = 1;
|
this.arrRate.forEach(item => {
|
if (
|
item.currency == this.cValue.currency &&
|
item.conversionCurrency == this.dValue.currency
|
)
|
rate = item.rata;
|
});
|
return rate;
|
}
|
},
|
created() {
|
this.cValue = this.actions[0]; // 默认值
|
this.dValue = this.actions[1]; // 默认值
|
this.getMoney();
|
this.getExchangeRate();
|
this.queryStockConfig();
|
},
|
methods: {
|
// 获取汇率
|
async getExchangeRate() {
|
let data = await api.getRateInfo();
|
if (data.status === 0) {
|
this.arrRate = data.data;
|
}
|
},
|
onMax() {
|
switch (this.cValue.currency) {
|
case "USD":
|
this.moneyRevise = this.usM.availableBalance;
|
break;
|
case "HKD":
|
this.moneyRevise = this.hkM.availableBalance;
|
break;
|
case "TWD":
|
this.moneyRevise = this.twM.availableBalance;
|
break;
|
case "INR":
|
this.moneyRevise = this.inM.availableBalance;
|
break;
|
default:
|
break;
|
}
|
},
|
// 获取手续比例
|
async queryStockConfig() {
|
let data = await api.queryStockConfigTwo();
|
if (data.status === 0) {
|
this.sxf = data.data.cValue;
|
}
|
},
|
// 获取账户金额
|
async getMoney() {
|
let data = await api.getMoney();
|
if (data.status === 0) {
|
data.data.forEach(item => {
|
if (item.accectType == "US") this.usM = item;
|
else if (item.accectType == "TW") this.twM = item;
|
else if (item.accectType == "IN") this.inM = item;
|
else if (item.accectType == "HK") this.hkM = item;
|
});
|
}
|
},
|
// 划转上下调换
|
onSwap() {
|
let a = this.cValue,
|
b = this.dValue;
|
this.cValue = b;
|
this.dValue = a;
|
},
|
// 选择
|
onSelect(action) {
|
this.cValue = action;
|
},
|
// 选择
|
onSelect1(action) {
|
this.dValue = action;
|
},
|
async submit() {
|
let opt = {
|
fromType: this.cValue.value,
|
toType: this.dValue.value,
|
amt: this.moneyRevise
|
};
|
let data = await api.transfer(opt);
|
if (data.status === 0) {
|
Toast.success(this.$t(data.msg));
|
this.getMoney();
|
}else{
|
Toast.fail(this.$t(data.msg));
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
/deep/ .van-nav-bar__content {
|
height: 65px;
|
}
|
/deep/ .van-cell{
|
background: none;
|
}
|
|
/deep/ .van-nav-bar__title {
|
font-family: "DINPro";
|
width: 100%;
|
height: 1.17333em;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-style: normal;
|
font-weight: 700;
|
font-size: 0.48em;
|
color: #14181f;
|
}
|
.transfer_new {
|
padding: 0rem 0.25em 0.5em 0.25em;
|
width: 100%;
|
min-height: 100vh;
|
background: #fff;
|
font-size: 10vw;
|
.transfer_a {
|
font-size: 0.4em;
|
padding-top: 1em;
|
}
|
.butn {
|
width: 100%;
|
margin-top: 40px;
|
height: 60px;
|
border-radius: 8px;
|
background: #c4d600;
|
border: none;
|
}
|
.butn2 {
|
border-radius: 8px;
|
background: #c4d600;
|
border: none;
|
}
|
|
.card {
|
background: #f7f7f7;
|
padding: 2em 1.2em;
|
border-radius: 0.5em;
|
font-size: 0.4em;
|
border: none;
|
|
.lv {
|
color: #c4d600;
|
}
|
}
|
|
.swap {
|
position: absolute;
|
top: 55%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 1em;
|
}
|
|
.hint {
|
font-size: 0.35em;
|
margin-bottom: 150px;
|
|
span {
|
color: #333;
|
}
|
}
|
|
.label_but {
|
color: #333;
|
}
|
|
.transfer_label {
|
font-size: 0.4em;
|
}
|
}
|
</style>
|
