<template>
|
<div class="main flex flex-col items-center">
|
|
<order-nav class="w-full mb-20 bg-white" :title="$t('广告历史记录')" />
|
<div class="w-full">
|
<van-tabs v-model="form.direction" @change="handleChange">
|
<van-tab :title="$t('全部')" name="">
|
</van-tab>
|
<van-tab :title="$t('购买')" name="buy">
|
</van-tab>
|
<van-tab :title="$t('出售')" name="sell">
|
</van-tab>
|
</van-tabs>
|
</div>
|
<div style="overflow-y: auto; flex: 1; width: 100%">
|
<van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
|
v-model="isLoading" @refresh="onRefresh">
|
<template v-if="list.length !== 0">
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
:finished-text="$t('没有更多了')"
|
@load="onLoad">
|
<div class="flex-1 w-full bg-grey box-border px-32 py-32 overflow-y ">
|
|
<div @click="$router.push({
|
path: '/advertiserHistory/detail',
|
query: {
|
id: item.id
|
}
|
})" class="bg-white rounded-xl mb-32 " v-for="(item,index) in list" :key="'AD' + index">
|
<div class="flex justify-between items-center px-28 pt-26 ">
|
<div>
|
<span :class="item.direction === 'sell' ? 'text-red' : 'text-green'" class="font-400 mr-10">{{item.direction === 'sell' ? $t('出售') : $t('购买')}}</span>
|
<span class="font-500 font-32 mr-10">{{item.symbol.toUpperCase()}}</span>
|
<span class="font-400 font-32 mr-10">{{$t('用')}}</span>
|
<span class="font-500 font-32">{{item.currency}}</span>
|
</div>
|
<div class="flex ">
|
<div v-if="!item.on_sale" class="text-grey bg-grey px-12 py-6 font-24" >{{$t('已下架')}}</div>
|
<div v-if="item.on_sale" class="bg-grey px-12 py-6 font-24" :class="{grey : checked }">{{$t('已上架')}}</div>
|
<van-switch class="ml-28" disabled v-model="item.on_sale" size="24" />
|
</div>
|
</div>
|
<div class="px-28 pb-26">
|
<div class="mt-34">
|
<span class="font-600 font-32 mr-18">{{ $store.state.home.currency.currency_symbol }}</span>
|
<span class="font-700 font-52">{{item.symbol_value}}</span>
|
</div>
|
<div class="flex justify-between mt-30">
|
<span class="font-400 font-28 text-grey">{{$t('交易总额')}}</span>
|
<span class="font-600 font-28">{{item.symbol_value * item.coin_amount}} {{item.symbol}}</span>
|
</div>
|
<div class="flex justify-between mt-30">
|
<span class="font-400 font-28 text-grey">{{$t('限额')}}</span>
|
<span class="font-600 font-28">{{item.investment_min + ' - ' + item.investment_max + ' ' + item.currency}}</span>
|
</div>
|
<div class="flex justify-between items-center mt-64">
|
<div class="flex items-center">
|
<div class="w-7 h-29 col mr-9"></div>
|
<span class="mr-19">{{item.pay_type_name}}</span>
|
</div>
|
<img @click="$router.push(item.path)" class="w-44 h-44" src="@/assets/image/otc/buy/Group 2630.png" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</template>
|
<template v-if="list.length === 0 && loading === false && isLoading === false" >
|
<div class="mt-160">
|
<van-empty
|
class="custom-image"
|
:image="require('@/assets/image/otc/nodatas.png')"
|
:description="$t('暂无历史广告')">
|
</van-empty>
|
</div>
|
</template>
|
</van-pull-refresh>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import listLoadMixins from '@/utils/list-load-mixins'
|
import {getMyadvertHistoryList} from '@/API/otc'
|
import Vue from 'vue'
|
import {Cell, Empty, Icon, List, PullRefresh, Switch, Tab, Tabs, Toast} from 'vant'
|
import OrderNav from "@/components/order-nav/OrderNav";
|
Vue.use(Tab)
|
Vue.use(Tabs)
|
export default {
|
components: {
|
[Icon.name]: Icon,
|
[Switch.name]: Switch,
|
[Cell.name]: Cell,
|
[Empty.name]: Empty,
|
[List.name]: List,
|
[Toast.name]: Toast,
|
[PullRefresh.name]: PullRefresh,
|
OrderNav,
|
},
|
mixins: [listLoadMixins],
|
data() {
|
return {
|
form: {
|
direction: '',
|
language: this.$i18n.locale
|
}
|
}
|
},
|
created() {
|
this.get()
|
},
|
methods: {
|
handleChange() {
|
this.onRefresh()
|
},
|
linkToBack() {
|
this.$router.go(-1)
|
},
|
get() { // 获取数据的方法需要自定义
|
Toast.loading()
|
getMyadvertHistoryList(this.form).then(res => {
|
Toast.clear()
|
//console.log('我的历史广告', res)
|
res.forEach((item) => {
|
item.on_sale === 1 ? item.on_sale = true : item.on_sale = false
|
})
|
this.handleData(res)
|
})
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.van-tabs {
|
width: 828px;
|
}
|
}
|
.main {
|
// padding: 0 30px;
|
height: 100%;
|
color: #868d9a;
|
.p-li {
|
padding-bottom: 44px;
|
}
|
.bor {
|
border-bottom: 1px solid #484756;
|
}
|
.pd-t {
|
padding-top: 40px;
|
}
|
}
|
.nav {
|
display: flex;
|
align-items: center;
|
font-size: 33px;
|
font-weight: bold;
|
color: #21262f;
|
padding: 30px 40px;
|
border-bottom: 1px solid #484756;
|
img {
|
width: 32px;
|
height: 32px;
|
margin-right: 264px;
|
}
|
}
|
</style>
|
