<template>
|
<v-page>
|
<view style="">
|
<v-header>
|
<template #title>
|
<view >
|
{{ $t("transfer.a8") }}
|
<!-- <span class="color-theme-1">{{ coin }}</span> -->
|
</view>
|
</template>
|
<template #right>
|
<v-link to="/pages/transfer/bill" style="margin-top:6px">
|
<van-icon class="fn-20 m-t-xs" color="#fff" name="todo-list-o" />
|
</v-link>
|
</template>
|
</v-header>
|
</view>
|
<main class="">
|
<view style="height: 90px"></view>
|
<!-- <view style="height: var(--status-bar-height)"></view> -->
|
<!-- <view class="top">
|
<view style="height: var(--status-bar-height)"></view>
|
</view> -->
|
<view class="panel-box m-x-md rounded p-md bg-panel-3 box-shadow">
|
<v-picker :list="fromList" v-model="form.from_account" class="from item border-b p-y-xs p-l-md">
|
<view class="label fn-sm color-gray-6">{{ $t("transfer.a9") }}</view>
|
<view class="select d-flex align-center" style="margin-top: 5px;">
|
<span class="fn-lg color-light">{{
|
accountMap[form.from_account]
|
}}</span>
|
<van-icon class="m-l-xs fn-lg" name="arrow" />
|
</view>
|
</v-picker>
|
<v-picker :list="toList" v-model="form.to_account" class="to item p-y-xs p-l-md">
|
<view class="label fn-sm color-gray-6">{{ $t("transfer.b0") }}</view>
|
<view class="select d-flex align-center" style="margin-top: 5px;">
|
<span class="fn-lg color-light">{{
|
accountMap[form.to_account]
|
}}</span>
|
<van-icon class="m-l-xs fn-lg" name="arrow" />
|
</view>
|
</v-picker>
|
<view class=""></view>
|
<view class="exchange d-flex justify-center align-center bg-panel-3 box-shadow link-active"
|
@click="swap">
|
<van-icon style="transform:rotateZ(90deg)" class="fn-22 color-light" name="exchange" />
|
</view>
|
</view>
|
<v-picker :list="coinList" v-model="form.coin_name" range-label="coin_name" range-value="coin_name"
|
class="">
|
<view class="m-md p-md d-flex rounded bg-panel-3 box-shadow">
|
<view class="flex-fill">{{ $t("transfer.b1") }}</view>
|
<view class="color-light">{{ form.coin_name }}</view>
|
<van-icon class="m-l-xs" name="arrow" />
|
</view>
|
</v-picker>
|
<view class="m-md p-md rounded bg-panel-3 box-shadow">
|
<view class="label fn-sm d-flex justify-between">
|
<view>{{ $t("transfer.b1") }}</view>
|
<view class=" fn-sm">{{ $t("transfer.b2") }}：{{ activeCoin.usable_balance }}</view>
|
</view>
|
<view class="m-t-md">
|
<v-input placeholder="0.000" v-model="form.amount" class="fn-20">
|
<template #right>
|
<view class="d-flex fn-md">
|
<view class="m-r-xs">{{ form.coin_name }}</view>
|
<view class="border-l color-buy p-l-xs" @click="change">{{ $t("transfer.b3") }}</view>
|
</view>
|
</template>
|
</v-input>
|
</view>
|
|
</view>
|
|
</main>
|
<view class="m-x-md">
|
<!-- <view class=" rounded-md ">
|
<v-button class="w-max m-y-md rounded-xs" block type="red" ref="btn" @click="fundsTransfer">
|
{{ $t("common.confirm") }}</v-button>
|
</view>
|
-->
|
<view @click="fundsTransfer" style="border-radius: 10px;
|
border: 1px solid #f3b644;color: #f3b644;line-height: 38px;height: 38px;
|
font-size: 16px;
|
font-style: normal;
|
font-weight: 400;
|
box-shadow: 0px 4px 9px 0px rgba(23, 138, 255, 0.20); text-align: center; border-radius: 6px;margin: auto;">
|
{{$t('common.confirm')}}
|
</view>
|
</view>
|
</v-page>
|
</template>
|
<script>
|
import Wallet from "@/api/wallet";
|
import {
|
mapGetters
|
} from "vuex";
|
import lodash from "lodash";
|
export default {
|
data() {
|
return {
|
coinList: [],
|
accountsList: [],
|
//
|
accountMap: {},
|
// 转换映射列表
|
transferList: {},
|
form: {
|
from_account: 1,
|
to_account: 2,
|
amount: ''
|
},
|
activeCoin: {},
|
};
|
},
|
computed: {
|
fromList() {
|
return Object.keys(this.transferList).map((item) => {
|
return {
|
label: this.accountMap[item],
|
value: item,
|
};
|
});
|
},
|
toList() {
|
if (!this.transferList[this.form.from_account]) return [];
|
return this.transferList[this.form.from_account].map((item) => {
|
return {
|
label: this.accountMap[item],
|
value: item,
|
};
|
});
|
},
|
...mapGetters(["themeStyle"]),
|
},
|
watch: {
|
// 切换取默认值
|
["form.from_account"](n) {
|
if (!this.transferList[n].includes(this.form.to_account)) {
|
this.form.to_account = this.transferList[n][0];
|
}
|
|
this.getUserCoinAssets();
|
},
|
coinList() {
|
if (!this.coinList.includes(this.form.coin_name)) {
|
if (this.coinList[0]) {
|
this.form.coin_name = this.coinList[0].coin_name;
|
} else {
|
this.form.coin_name = "";
|
}
|
}
|
},
|
},
|
methods: {
|
// 互换位置
|
swap() {
|
[this.form.from_account, this.form.to_account] = [
|
this.form.to_account,
|
this.form.from_account,
|
];
|
},
|
// 划转
|
fundsTransfer() {
|
Wallet.transfer(this.form)
|
.then(() => {
|
this.$toast.success(this.$t("transfer.b4"));
|
this.form.amount = "";
|
this.getUserCoinAssets();
|
})
|
.catch(() => {});
|
},
|
// 获取划转币种
|
getUserCoinAssets: lodash.debounce(function() {
|
Wallet.coinList({
|
from_account: this.form.from_account,
|
to_account: this.form.to_account,
|
})
|
.then((res) => {
|
this.coinList = res.data;
|
if (this.coinList[0]) {
|
this.form.coin_name = this.coinList[0].coin_name;
|
this.getBalance();
|
}
|
})
|
.catch(() => {});
|
}, 300),
|
// 获取划转类型
|
accounts() {
|
Wallet.accounts().then((res) => {
|
this.accountsList = res.data;
|
// 生成map
|
this.accountsList.forEach((item) => {
|
this.accountMap[item.id] = item.name;
|
});
|
// 生成映射 (谁转换谁)
|
this.transferList = {};
|
this.accountsList.forEach((item) => {
|
let sourceId = this.accountsList.find(
|
(item) => item.account == "UserWallet"
|
).id; //账户资产 可以转其他的资金，其他资金不能 转账户资产
|
if (sourceId != item.id) {
|
this.transferList[item.id] = [sourceId];
|
if (!this.transferList[sourceId]) this.transferList[sourceId] = [];
|
this.transferList[sourceId].push(item.id);
|
}
|
});
|
this.getUserCoinAssets();
|
});
|
},
|
// 获取余额
|
getBalance: lodash.debounce(function() {
|
let data = {
|
account: this.form.from_account,
|
coin_name: this.form.coin_name,
|
};
|
Wallet.getBalance(data).then((res) => {
|
this.activeCoin = res.data;
|
});
|
}),
|
change() {
|
this.form.amount = this.activeCoin.usable_balance
|
}
|
},
|
created() {
|
this.accounts()
|
|
// var fun=lodash.throttle((e)=>{
|
// console.log(1,e)
|
// },1000)
|
// setInterval(() => {
|
// fun(2)
|
// }, 60);
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.nav-head {
|
position: absolute;
|
left: 0;
|
width: 100%;
|
|
// background: transparent;
|
&::after {
|
border: none;
|
}
|
}
|
|
.top {
|
// background: linear-gradient(180deg, #c86b49, $theme-1);
|
height: 150px;
|
}
|
|
.panel-box {
|
margin-top: -70px;
|
position: relative;
|
|
.line {
|
position: absolute;
|
height: 100%;
|
width: 1px;
|
background: $border-color;
|
transform: scale(0.5);
|
top: 0;
|
|
&::before,
|
&::after {
|
content: "";
|
display: inline-block;
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 12px;
|
height: 12px;
|
border-radius: 50%;
|
}
|
|
&::before {
|
top: 0;
|
background: $blue;
|
}
|
|
&::after {
|
bottom: 0;
|
background: $red;
|
}
|
}
|
|
.exchange {
|
position: absolute;
|
right: $padding-sm;
|
top: 50%;
|
height: 40px;
|
width: 40px;
|
border-radius: 50%;
|
transform: translateY(-50%);
|
}
|
}
|
</style>
|
