<template>
|
<div class="exchangeHistory">
|
<assets-head :title="$t('闪兑历史')" :back-func="backFunc" />
|
<van-tabs v-model="active">
|
<van-tab :title="$t('闪兑')"></van-tab>
|
</van-tabs>
|
<div class="px-32 mt-70">
|
<div class="flex items-center">
|
<div class="flex-1">
|
<div class="list-tab flex">
|
<!-- <div class="tab-item flex active items-center justify-center">{{ $t('历史委托') }}</div> -->
|
<!-- <div class="tab-item flex items-center justify-center">{{ $t('当前委托') }}</div> -->
|
</div>
|
</div>
|
<!-- <div>
|
<img src="../../assets/image/exchange/icon_7.png" @click="show = true" class="w-24 h-30" />
|
</div> -->
|
</div>
|
<div class="flex justify-between text-grey font-35 my-21">
|
<span>{{ $t('从') }}</span>
|
<span>{{ $t('至') }}</span>
|
</div>
|
<van-list v-model="loading" :finished="finished" :finished-text="$t('已经全部加载完毕')" @load="onLoad"
|
:loading-text="$t('加载中...')" :offset="130">
|
<ul class="flex flex-col">
|
<li v-for="item in list" :key="item.id" class="flex flex-col">
|
<p class="flex justify-between font-35 textColor">
|
<span>{{ item.amount }} {{ item.symbol.toUpperCase() }}</span>
|
<span>{{ item.amount_to.toFixed(5) }} {{ item.symbol_to.toUpperCase() }}</span>
|
</p>
|
<p class="flex justify-between font-30 text-grey mt-19 mb-45">
|
<span>{{ item.create_time }}</span>
|
<span class="flex items-center">
|
<i :class="{
|
'btnMain': item.state === 'submitted',
|
'bg-red': item.state === 'canceled',
|
'bg-green': item.state === 'created',
|
}" class="block w-16 h-16 mr-10 rounded-full"></i>
|
{{ status[item.state] }}</span>
|
</p>
|
</li>
|
</ul>
|
</van-list>
|
</div>
|
<van-popup :style="{ background: '#242424', height: '100%' }" closeable v-model="show" position="right"
|
:close-on-click-overlay="false" @close="onClose">
|
<div class="px-30 py-30 pop-box">
|
<div class="title">{{ $t('筛选') }}</div>
|
<div class="text">{{ $t('日期') }}</div>
|
<div class="mt-30 flex">
|
<van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
|
:placeholder="$t('开始日期')" @click="showPicker = true" />
|
<van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
|
:placeholder="$t('结束日期')" @click="showPicker = true" />
|
</div>
|
<div class="text">{{ $t('钱包') }}</div>
|
<div class="mt-30 flex">
|
<van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
|
:placeholder="$t('选择钱包')" @click="showSelect = true" />
|
</div>
|
<div class="text">{{ $t('币种') }}</div>
|
<div class="mt-30 flex">
|
<van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
|
:placeholder="$t('选择币种')" @click="showSelect = true" />
|
</div>
|
<div class="h-100 rounded flex justify-between box-border items-center mt-50 mb-48 text-white w-full">
|
<p class="w-360 h-80 rounded flex justify-center items-center bgDark" @click="show = false">
|
{{ $t('重置') }}</p>
|
<p class="w-360 h-80 rounded btnMain text-white flex justify-center items-center">
|
{{ $t('搜索') }}</p>
|
</div>
|
</div>
|
</van-popup>
|
<van-popup v-model="showPicker" position="bottom">
|
<van-datetime-picker type="time" @cancel="showPicker = false" />
|
</van-popup>
|
<van-action-sheet v-model="showSelect" :actions="actions" />
|
</div>
|
</template>
|
|
<script>
|
import { List, Tab, Tabs, Popup, Field, DatetimePicker, ActionSheet } from 'vant';
|
import { _exchangeHistory } from '@/API/fund.api';
|
import assetsHead from "@/components/assets-head";
|
export default {
|
components: {
|
assetsHead,
|
[List.name]: List,
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs,
|
[Popup.name]: Popup,
|
[Field.name]: Field,
|
[DatetimePicker.name]: DatetimePicker,
|
[ActionSheet.name]: ActionSheet,
|
},
|
data() {
|
return {
|
loading: true,
|
finished: false,
|
pageSize: 10,
|
page_no: 1,
|
list: [],
|
status: {
|
submitted: this.$t('已提交'),
|
canceled: this.$t('已撤销'),
|
created: this.$t('已完成')
|
},
|
active: 0,
|
show: false,
|
value: '',
|
showPicker: false,
|
showSelect: false,
|
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
}
|
},
|
created() {
|
this.onLoad()
|
|
},
|
methods: {
|
backFunc() {
|
console.log('backFunc', this.$route.query)
|
if (this.$route.query.type / 1 === 1) {
|
this.$router.push({
|
path: '/funds',
|
query: {
|
tab: 1
|
}
|
})
|
} else if (this.$route.query.type / 1 === 0) {
|
this.$router.push({
|
path: '/funds',
|
query: {
|
tab: 0
|
}
|
})
|
} else {
|
this.$router.go(-1)
|
}
|
},
|
onLoad() { // 加载数据
|
this.loading = true
|
_exchangeHistory(this.page_no).then(data => {
|
this.page_no = this.page_no + 1
|
this.list = [...this.list, ...data]
|
this.loading = false
|
if (data.length < this.pageSize) {
|
this.finished = true
|
} else {
|
this.page_no++
|
}
|
})
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
onClose() {
|
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.exchangeHistory {
|
width: 100%;
|
min-height: 100vh;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
box-sizing: border-box;
|
|
::v-deep .van-nav-bar {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-nav-bar__title {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-tab {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
|
|
|
.list-tab {
|
.tab-item {
|
width: 180px;
|
height: 70px;
|
background: #1D2439;
|
border-radius: 20px;
|
font-size: 26px;
|
color: #fff;
|
margin-right: 20px;
|
}
|
|
.active {
|
color: #1194F7 !important;
|
|
@include themify() {
|
background: themed("btn_background1");
|
}
|
|
}
|
}
|
|
|
|
.pop-box {
|
.title {
|
color: #fff;
|
font-size: 34px;
|
font-weight: bold;
|
margin-top: 10px;
|
}
|
|
.text {
|
color: #818181;
|
margin-top: 30px;
|
|
}
|
}
|
|
.input-box {
|
background: #262D47;
|
font-size: 28px;
|
}
|
|
.bgDark {
|
background: #242424;
|
}
|
|
.btnMain {
|
background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
|
}
|
|
::v-deep .van-cell::after {
|
border-bottom: none;
|
}
|
</style>
|
