<template>
|
<div class="quotes pb-108">
|
<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 tablist-rap"
|
>
|
<div class="flex items-center inp-wrp">
|
<!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
|
<div class="inputBoxbg 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>
|
<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: "USDT", 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");
|
}
|
}
|
|
.inp-wrp {
|
height: 6.75rem;
|
margin: 2rem 0;
|
.items-center {
|
padding: 0 1rem;
|
}
|
.rounded-full {
|
height: 6.75rem;
|
border-radius: 1rem;
|
}
|
}
|
.quotes {
|
padding: 24px 0 24px 0;
|
:deep(.van-tab) {
|
width: 10rem;
|
flex: none;
|
}
|
:deep(.van-tab--active) {
|
min-width: 150px;
|
text-align: center;
|
padding: 18px 0px;
|
border-radius: 4px;
|
position: relative;
|
// color: #f7b328 !important;
|
font-size: 38px !important;
|
font-weight: 700;
|
.van-tab__text {
|
font-size: 38px !important;
|
}
|
}
|
:deep(.van-tabs__line) {
|
background-color: #f7b328 !important;
|
width: 5.5rem !important;
|
}
|
}
|
.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>
|
