<template>
|
<div class="quotes-list pt-5 pb-60 pl-5 pr-5" id="cryptos">
|
|
<Head @search="onSearch"></Head>
|
<list-quatation :listData="qList" :tabActive="2" />
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onBeforeUnmount } from 'vue';
|
import { useStore } from "vuex";
|
import { _getHomeList } from '@/service/cryptos.api'
|
import { TIME_OUT } from "@/config";
|
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
|
import Head from './components/head.vue'
|
|
const store = useStore();
|
|
//#region 行情数据----------------------------------------
|
let qList = ref([])
|
let qListCope = ref([]) // 备份数据
|
let key = ref('') // 搜索关键词
|
let timeout = ref(null)
|
const coinArr = computed(() => store.getters['home/coinArr']);
|
|
const fetchQList = async () => { // 获取行情
|
const list = await _getHomeList(coinArr.value.join(',')).catch(() => {
|
})
|
|
if (!(list instanceof Array)) {
|
return
|
}
|
|
// 通过关键字进行筛选
|
if (key.value) {
|
qList.value = list.filter(item => {
|
return item.symbol_data.toLowerCase().includes(key.value.toLowerCase()) || item.name.toLowerCase().includes(key.value.toLowerCase())
|
})
|
} else {
|
qList.value = list
|
}
|
qListCope.value = list; // 备份数据
|
|
if (timeout.value) {
|
clearTimeout(timeout.value)
|
}
|
timeout.value = setTimeout(async () => {
|
await fetchQList()
|
}, TIME_OUT)
|
}
|
fetchQList()
|
|
onBeforeUnmount(() => {
|
if (timeout.value) {
|
clearInterval(timeout.value)
|
}
|
})
|
//#endregion----------------------------------------------
|
|
// 搜索
|
const onSearch = (val) => {
|
key.value = val
|
|
if (!val) {
|
qList.value = qListCope.value
|
return
|
}
|
let newList = qListCope.value.filter(item => {
|
return item.symbol_data.toLowerCase().includes(val.toLowerCase()) || item.name.toLowerCase().includes(val.toLowerCase())
|
})
|
qList.value = newList
|
}
|
</script>
|
<style lang="scss" scoped>
|
.quotes-list {
|
background: $mainbgWhiteColor;
|
min-height: 100vh;
|
|
:deep(.active) {
|
background-color: $bg_yellow;
|
border-radius: 3rem;
|
}
|
}
|
</style>
|
