<template>
|
<div class="quotes pb-108">
|
<div class="header-box">
|
<div class="tabs-box">
|
<div
|
v-for="item in tabList"
|
:key="item.id"
|
:class="`${active === item.id ? 'active-tabls' : ''}`"
|
@click="active = item.id"
|
>
|
{{ item.text }}
|
</div>
|
</div>
|
<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">
|
<input
|
style="padding-left: 10px; max-width: 130px"
|
type="text"
|
v-model="keywords"
|
:placeholder="$t('搜索币种')"
|
class="h-full flex-1 search-input border-none bg-none"
|
@input="onInput"
|
/>
|
<img
|
src="@/assets/3x/资源 22@3x.png"
|
alt="logo"
|
class="w-32 h-32 mx-16"
|
/>
|
</div>
|
</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>
|
</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,
|
},
|
mounted() {
|
this.NEW_CION_LIST();
|
},
|
async created() {
|
this.keywords = this.$route.query.inputdata;
|
// console.log(this.inputdata, "this.inputdata");
|
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",
|
newcoinArr: "home/newcoinArr",
|
}),
|
},
|
data() {
|
const arr = [];
|
for (let i = 0; i < 10; i++) {
|
arr.push({ id: i });
|
}
|
return {
|
inputdata: "",
|
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], "NEW_CION_LIST"),
|
listSort(val) {
|
this.sortVal = val;
|
},
|
async fetchQoutes() {
|
console.log(this.coinList, "======");
|
// 现货/合约
|
if (!this.coinList.length) {
|
await this.SET_COIN_LIST();
|
}
|
const coins = this.coinList.map((item) => item.symbol);
|
const mainArray = coins.filter((item) => !this.newcoinArr.includes(item));
|
const data = await _getHomeList(mainArray.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 {
|
padding-top: 50px;
|
position: relative;
|
box-sizing: border-box;
|
width: 100%;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
.sousuo {
|
position: fixed;
|
right: 0;
|
top: 0;
|
z-index: 9999;
|
}
|
}
|
|
.quotes ::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
.quotes ::v-deep .van-sticky {
|
display: none;
|
}
|
|
.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;
|
}
|
}
|
|
.header-box {
|
position: fixed;
|
top: 0;
|
left: 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
z-index: 999;
|
background-color: #fff;
|
.tabs-box {
|
display: flex;
|
color: #9691fa;
|
font-weight: 400;
|
flex: 1;
|
justify-content: space-between;
|
padding-left: 70px;
|
padding-right: 20px;
|
|
.active-tabls {
|
color: #807cf7;
|
font-weight: 900;
|
}
|
}
|
}
|
</style>
|
