<template>
|
<div class="quotes-list pt-5 pb-60 pl-5 pr-5" id="cryptos">
|
|
<Head></Head>
|
<list-quatation :listData="qList" />
|
</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();
|
console.log("aaaaaaaaaaa");
|
|
//#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----------------------------------------------
|
</script>
|
<style lang="scss" scoped>
|
.quotes-list {
|
// background: $mainbgWhiteColor;
|
min-height: 100vh;
|
|
:deep(.active) {
|
background-color: $bg_yellow;
|
border-radius: 3rem;
|
}
|
}
|
</style>
|
