You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
5.6 KiB
145 lines
5.6 KiB
<template>
|
|
<div class="wallet-page">
|
|
<secondary-nav></secondary-nav>
|
|
<div class="container">
|
|
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4">
|
|
<div class="h3">{{$t('wallet.transfer')}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<inner-transfer :coinName.sync="coinName" :showHistoryLink="false" :isRestCoin="true"></inner-transfer>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="panel-box bg-panel">
|
|
<div class="heading d-flex justify-content-between align-items-center">
|
|
<div class="h6">{{$t('wallet.transferDescription')}}</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<ul>
|
|
<li class="mb-2">1.{{$t('wallet.handlingFee')}}。</li>
|
|
<!-- <li class="mb-2">2.{{$t('wallet.onlyForeignExchange',{name:'USDT'})}}。</li>
|
|
<li class="mb-2">3.{{$t('wallet.onlySustainable',{name:'BTC'})}}。</li>
|
|
<li class="mb-2">4.{{$t('wallet.inCase1',{name:'USDT'})}}。</li> -->
|
|
<li class="mb-2">2.{{$t('wallet.inCase2',{name:'USDT'})}}。</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 mt15">
|
|
<div class="markets-pair-list">
|
|
<ul class="nav nav-pills" id="pills-tab" role="tablist">
|
|
<li class="nav-item" v-if="coinName">
|
|
<a class="nav-link active" data-toggle="pill" href @click.prevent="isCondition=true" role="tab" aria-selected="false">{{coinName}} {{$("transfer.transferRecord")}}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="pill" href @click.prevent="isCondition=false" role="tab" aria-selected="false">{{ $t("wallet.allTransfer") }}</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="tab1" role="tabpanel">
|
|
<table class="table stripe">
|
|
<thead>
|
|
<tr>
|
|
<th>{{$t('wallet.assets')}}</th>
|
|
<th>{{$t('wallet.transferQuantity')}}</th>
|
|
<th>{{$t('wallet.direction')}}</th>
|
|
<th>{{$t('wallet.date')}}</th>
|
|
<th class="text-right">{{$t('wallet.status')}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in transferRecords" :key="item.id" v-if="seek(item)">
|
|
<td>
|
|
<img src="../../assets/img/icon/1.png" alt="eth" />
|
|
{{ item.coin_name }}
|
|
</td>
|
|
<td>{{ item.amount }}</td>
|
|
<td>{{ $t(`wallet.${item.draw_out_direction}`) }} -> {{ $t(`wallet.${item.into_direction}`) }}</td>
|
|
<td>{{ item.datetime|parseTime }}</td>
|
|
<td class="text-right">
|
|
<!--1 成功 2 失败 -->
|
|
<span class="fail" v-if="item.status == Globals.Status.Transfer.FAIL">{{$t('wallet.error')}}</span>
|
|
<span class="success" v-else-if="item.status == Globals.Status.Transfer.SUCCESS">{{$t('wallet.success')}}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import InnerTransfer from "../components/inner-transfer.vue";
|
|
import Wallet from "@/api/wallet";
|
|
export default {
|
|
components: {
|
|
InnerTransfer
|
|
},
|
|
data() {
|
|
return {
|
|
transferRecords: [],
|
|
isCondition: false, // 用于tab切换 默认不条件切换
|
|
coinName: '',
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
|
|
coinName(val, oldVal) {
|
|
// 第一次选择币种 手动添加条件
|
|
if (val && !oldVal) this.isCondition = true;
|
|
|
|
// 清空币种时 默认查询所有
|
|
if (!val && oldVal) this.isCondition = false;
|
|
},
|
|
|
|
isCondition(val) {
|
|
console.log(val)
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
|
|
// 过滤查找当前币种的记录
|
|
seek(item) {
|
|
return !this.isCondition || item.coin_name === this.coinName;
|
|
},
|
|
|
|
getTransferRecords() {
|
|
Wallet.transferRecord()
|
|
.then(data => {
|
|
this.transferRecords = data.data;
|
|
})
|
|
.catch(err => {});
|
|
}
|
|
},
|
|
created() {
|
|
this.getTransferRecords();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.table {
|
|
tr {
|
|
td {
|
|
cursor: default !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
.success{
|
|
color: #77B992;
|
|
}
|
|
</style>
|
|
|