<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">{{
|
$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"
|
>
|
<template #reference>
|
<div>{{ cValue.text }}</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 }}</div>
|
<span style="margin-left: 1em;">{{ dValue.currency }}</span>
|
</div>
|
<div class="mt-1">
|
<van-popover
|
v-model="showPopover1"
|
trigger="click"
|
:actions="actions"
|
@select="onSelect1"
|
>
|
<template #reference>
|
<div>{{ dValue.text }}</div>
|
</template>
|
</van-popover>
|
</div>
|
</div>
|
|
<img src="@/assets/img/transfer.png" class="swap" @click="onSwap" />
|
</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, // 划转金额
|
maxMoneyRevise: 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
|
};
|
},
|
computed: {
|
moneyReviseTo() {
|
return this.moneyRevise * 7;
|
}
|
},
|
created() {
|
this.cValue = this.actions[0]; // 默认值
|
this.dValue = this.actions[1]; // 默认值
|
this.getMoney();
|
},
|
methods: {
|
// 获取账户金额
|
async getMoney() {
|
let data = await api.getMoney();
|
if (data.status === 0) {
|
data.data.forEach(item=>{
|
// if(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();
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
/deep/ .van-nav-bar__content {
|
height: 65px;
|
}
|
|
/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;
|
.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;
|
}
|
|
.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>
|
