From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/views/quotes/List.vue | 97 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 90 insertions(+), 7 deletions(-)
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index 55bed5d..58d092a 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -1,23 +1,52 @@
<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();
+
+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']);
@@ -28,7 +57,16 @@
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)
@@ -45,10 +83,55 @@
}
})
//#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) {
--
Gitblit v1.9.3