| | |
|---|
| | | <template> |
|---|
| | | <div class="quotes-list pt-5 pb-60 pl-5 pr-5" id="cryptos"> |
|---|
| | | |
|---|
| | | <Head></Head> |
|---|
| | | <list-quatation :listData="qList" :tabActive="2" /> |
|---|
| | | <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"; |
|---|
| | | import Head from './components/head.vue' |
|---|
| | | |
|---|
| | | const { t } = useI18n(); |
|---|
| | | const router = useRouter(); |
|---|
| | | const store = useStore(); |
|---|
| | | console.log("aaaaaaaaaaa"); |
|---|
| | | |
|---|
| | | 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']); |
|---|
| | | |
|---|
| | |
|---|
| | | if (!(list instanceof Array)) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | qList.value = list; |
|---|
| | | |
|---|
| | | // 通过关键字进行筛选 |
|---|
| | | 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) |
|---|
| | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | //#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 { |
|---|
| | | background: $mainbgWhiteColor; |
|---|
| | | min-height: 100vh; |
|---|
| | | |
|---|
| | | :deep(.active) { |
|---|
