<template>
|
<div class="quotes pb-108">
|
<div class="px-32 py-13 flex items-center">
|
<!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
|
<div class="inputBoxbg h-60 w-full rounded-full flex items-center">
|
<img src="@/assets/image/icon-search.png" alt="logo" class="w-32 h-32 mx-16" />
|
<input type="text" v-model="keywords" :placeholder="$t('搜索币种')"
|
class="h-full flex-1 search-input border-none bg-none" @input="onInput" />
|
</div>
|
</div>
|
<van-tabs v-model="active" swipeable :animated="isAnimated" sticky shrink :beforeChange="beforeChange">
|
<van-tab :title="item.text" v-for="item in tabList" :key="item.id" :name="item.id" class="broder-r-grey px-32 ">
|
<list-quatation class="quotesQuatation" @listSort="listSort" :showMore="false" :list-data="item.data"
|
:tabActive="active">
|
<div class="flex border-t-grey items-center bg-white px-32 h-100 w-full font-24" v-if="active === 1">
|
<p class="w-160 h-44 rounded bg-grey text-center mr-20 flex justify-center items-center"
|
style="background: #EAECEF; padding: 0 5px">
|
{{ $t('现货/合约') }}</p>
|
<!-- <p class="w-80 h-44 rounded text-center text-grey flex justify-center items-center">合约</p> -->
|
</div>
|
</list-quatation>
|
<div v-if="!item.data.length" class="flex flex-col justify-center items-center pt-185">
|
<img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
|
<p class="textColor">{{ $t('暂无数据') }}</p>
|
</div>
|
</van-tab>
|
</van-tabs>
|
<Footer></Footer>
|
</div>
|
</template>
|
|
<script>
|
import { Tab, Tabs } from 'vant'
|
import ListQuatation from "@/components/list-quotation";
|
import { _myCoins, _getHomeList } from '@/API/home.api'
|
import { mapGetters, mapActions } from "vuex";
|
import { SET_COIN_LIST } from '@/store/const.store'
|
export default {
|
name: 'PageQoutes',
|
components: {
|
ListQuatation,
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs
|
},
|
async created() {
|
this.active = this.$route.query.active / 1
|
if (this.userInfo.token) {
|
const list = await _myCoins() // 获取我的自选
|
this.myList = list.map(item => item.symbol) // 获取
|
}
|
await this.fetchQoutes()
|
},
|
computed: {
|
...mapGetters({ coinList: 'home/coinList', userInfo: 'user/userInfo' }),
|
},
|
data() {
|
const arr = []
|
for (let i = 0; i < 10; i++) {
|
arr.push({ id: i })
|
}
|
return {
|
tabList: [
|
{ id: 1, text: this.$t('自选'), data: arr, loading: true },
|
{ id: 2, text: this.$t('现货'), data: arr, loading: true },
|
{ id: 3, text: this.$t('合约'), data: arr, loading: true }
|
],
|
keywords: '', // 搜索关键字
|
filterData: [],
|
myList: [],
|
active: 1,
|
|
timeout: null,
|
inputTimeout: null,
|
duration: 1000,
|
isAnimated: false,
|
sortVal: 0
|
}
|
},
|
methods: {
|
...mapActions('home', [SET_COIN_LIST]),
|
listSort(val) {
|
this.sortVal = val
|
},
|
async fetchQoutes() { // 现货/合约
|
if (!this.coinList.length) {
|
await this.SET_COIN_LIST()
|
}
|
const coins = this.coinList.map(item => item.symbol)
|
const data = await _getHomeList(coins.join(','))
|
console.log(data)
|
this.tabList[0]['data'] = data.filter(item => this.myList.includes(item.symbol))
|
this.tabList[1]['data'] = data
|
this.tabList[2]['data'] = data
|
if (this.keywords) { // 过滤数据
|
this.getFilterData()
|
}
|
if (this.timeout) {
|
clearTimeout(this.timeout)
|
this.timeout = null
|
}
|
console.log(this.tabList[1])
|
//排序
|
if (this.sortVal == 1) {
|
|
this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.sortLetterList("symbol"))
|
this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.sortLetterList("symbol"))
|
this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.sortLetterList("symbol"))
|
}
|
if (this.sortVal == 2) {
|
this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.sortLetterTwoList("symbol"))
|
this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.sortLetterTwoList("symbol"))
|
this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.sortLetterTwoList("symbol"))
|
}
|
if (this.sortVal == 3) {
|
this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("close", "ask"))
|
this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("close", "ask"))
|
this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("close", "ask"))
|
}
|
if (this.sortVal == 4) {
|
this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("close"))
|
this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("close"))
|
this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("close"))
|
}
|
if (this.sortVal == 5) {
|
this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("change_ratio"))
|
this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("change_ratio"))
|
this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("change_ratio"))
|
}
|
if (this.sortVal == 6) {
|
this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("change_ratio", "ask"))
|
this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("change_ratio", "ask"))
|
this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("change_ratio", "ask"))
|
}
|
this.timeout = setTimeout(() => {
|
this.fetchQoutes()
|
}, this.duration)
|
},
|
//字母排序
|
sortLetterList(propertyName) {
|
return function sortList(object1, object2) {
|
const value1 = object1[propertyName];
|
const value2 = object2[propertyName];
|
if (value2 < value1) {
|
return 1;
|
}
|
if (value2 > value1) {
|
return -1;
|
}
|
return 0;
|
};
|
},
|
sortLetterTwoList(propertyName) {
|
return function sortList(object1, object2) {
|
const value1 = object1[propertyName];
|
const value2 = object2[propertyName];
|
if (value2 > value1) {
|
return 1;
|
}
|
if (value2 < value1) {
|
return -1;
|
}
|
return 0;
|
};
|
},
|
//数字排序
|
orderListAsc(filed, type = "asc") {
|
return (a, b) => {
|
if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
|
return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
|
};
|
},
|
getFilterData() { // 过滤后的数据
|
const index = this.active / 1 - 1
|
console.log(index)
|
this.tabList[index]['data'] = this.tabList[index]['data'].filter(item => item.symbol.includes(this.keywords.toLocaleLowerCase()))
|
},
|
back() {
|
this.$router.go(-1)
|
},
|
onInput() { // 输入
|
if (this.inputTimeout) {
|
clearTimeout(this.inputTimeout)
|
this.inputTimeout = null
|
}
|
this.inputTimeout = setTimeout(() => {
|
this.getFilterData()
|
}, 50)
|
},
|
beforeChange() {
|
this.keywords = ''
|
return true
|
},
|
startTimeout() {
|
this.clearTimeout()
|
this.fetchQoutes()
|
},
|
clearTimeout() {
|
if (this.timeout) {
|
clearTimeout(this.timeout)
|
this.timeout = null
|
}
|
}
|
},
|
async activated() {
|
console.log('sss')
|
this.startTimeout()
|
if (this.userInfo.token) {
|
const list = await _myCoins() // 获取我的自选
|
this.myList = list.map(item => item.symbol) // 获取
|
}
|
this.tabList[0].text = this.$t('自选')
|
this.tabList[1].text = this.$t('现货')
|
this.tabList[2].text = this.$t('合约')
|
},
|
deactivated() {
|
this.clearTimeout()
|
},
|
beforeDestroy() {
|
this.clearTimeout()
|
if (this.inputTimeout) {
|
clearTimeout(this.inputTimeout)
|
this.inputTimeout = null
|
}
|
},
|
beforeRouteEnter(to, from, next) {
|
next(vm => {
|
vm.isAnimated = true;
|
})
|
}
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.search-input {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.quotes {
|
box-sizing: border-box;
|
width: 100%;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.quotes ::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.quotes ::v-deep .van-tab--active {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.inputBoxbg {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
}
|
|
.quotesQuatation .van-cell {
|
@include themify() {
|
background: themed("main_background") !important;
|
}
|
}
|
</style>
|
