<template>
|
<div class="quotes-list pt-5 pb-40 pl-5 pr-5" id="cryptos">
|
|
<Head></Head>
|
|
<div class="tabs flex justify-start items-center textColor1">
|
<div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key">
|
{{ i.name }}
|
</div>
|
</div>
|
|
<list-quatation :listData="qList" :tabActive="tab" />
|
</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 { useI18n } from "vue-i18n";
|
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
|
import Head from './components/head.vue'
|
|
const store = useStore();
|
const { t } = useI18n()
|
|
//#region 行情数据----------------------------------------
|
let qList = 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
|
}
|
qList.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----------------------------------------------
|
|
// tab切换
|
const tab = ref(1)
|
const tabList = [
|
{ name: t('永续合约'), key: 1 },
|
{ name: t('现货'), key: 2 },
|
]
|
</script>
|
<style lang="scss" scoped>
|
.quotes-list {
|
// background: $mainbgWhiteColor;
|
min-height: 100vh;
|
|
:deep(.active) {
|
background-color: $bg_yellow;
|
// border-radius: 3rem;
|
}
|
|
.tabs {
|
font-size: 1.8rem;
|
margin-bottom: -2rem;
|
margin-top: 2rem;
|
|
&>div {
|
margin-right: 2rem;
|
}
|
}
|
}
|
</style>
|
