14 changed files with 235 additions and 38 deletions
@ -0,0 +1,142 @@ |
|||
<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('common.flashswap')}}</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('common.illustrate')}}</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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue