<template>
|
<div class="quotes-list-wrap">
|
<!-- 头部：All / Spot / Futures + 搜索图标 -->
|
<div class="quotes-header">
|
<div class="quotes-header-tabs">
|
<span
|
v-for="(tab, idx) in headerTabs"
|
:key="idx"
|
class="quotes-header-tab"
|
:class="{ 'quotes-header-tab--active': headerActive === idx }"
|
@click="headerActive = idx"
|
>
|
{{ tab }}
|
</span>
|
</div>
|
<div class="quotes-header-search" @click="onSearchClick">
|
<van-icon name="search" size="22" />
|
</div>
|
</div>
|
<div class="quotes-list pb-60 pl-5 pr-5" id="cryptos">
|
<list-quatation :listData="qList" :tabActive="2" :tabShow="false" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onBeforeUnmount } from 'vue';
|
import { useStore } from "vuex";
|
import { useRouter } from 'vue-router';
|
import { useI18n } from 'vue-i18n';
|
import { _getHomeList } from '@/service/cryptos.api'
|
import { TIME_OUT } from "@/config";
|
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
|
|
const { t } = useI18n();
|
const router = useRouter();
|
const store = useStore();
|
|
const headerActive = ref(2);
|
const headerTabs = computed(() => [t('全部'), t('现货'), t('永续')]);
|
|
const onSearchClick = () => {
|
router.push('/optional/search');
|
};
|
|
//#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-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 16px 20px 16px 16px;
|
background: #f0f0f0;
|
}
|
|
.quotes-header-tabs {
|
display: flex;
|
align-items: center;
|
gap: 24px;
|
}
|
|
.quotes-header-tab {
|
font-size: 16px;
|
color: #999;
|
cursor: pointer;
|
font-weight: 500;
|
}
|
|
.quotes-header-tab--active {
|
color: #5e2bc8;
|
font-weight: 600;
|
}
|
|
.quotes-header-search {
|
color: #999;
|
cursor: pointer;
|
padding: 4px;
|
}
|
|
.quotes-list {
|
min-height: 100vh;
|
|
:deep(.active) {
|
background-color: $bg_yellow;
|
border-radius: 3rem;
|
}
|
}
|
</style>
|
