From 1de9b5b5390d809e83d4dd27322f5e9801bfdfd4 Mon Sep 17 00:00:00 2001
From: Huangzhe <huang.ze@ebiz-digits.com>
Date: Wed, 28 May 2025 20:06:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(Home):=20=E4=BC=98=E5=8C=96=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E5=B8=82=E5=9C=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除未使用的 imgMap 导入
- 添加市场列表数据存储到 sessionStorage
- 优化模板数据请求逻辑
- 修复搜索功能和分页问题
- 调整 throttle 函数调用
---
 src/components/MarketItem/MarketItem.vue   |  4 +-
 src/utils/utils.js                         |  2 +
 src/views/Home/components/Market/Index.vue | 47 +++++++++++++++++-----
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/components/MarketItem/MarketItem.vue b/src/components/MarketItem/MarketItem.vue
index 0a067a9..a6418bf 100644
--- a/src/components/MarketItem/MarketItem.vue
+++ b/src/components/MarketItem/MarketItem.vue
@@ -49,7 +49,6 @@ import { defineProps, onMounted, ref } from 'vue';
 import { deleteTemplate } from '@/api/home/index.js';
 import { showDialog, showFailToast, showSuccessToast } from 'vant';
 import { useRouter } from 'vue-router';
-import { imgMap } from '@/utils/imgMap';
 
 const router = useRouter();
 const { info, marketItem } = defineProps({
@@ -65,7 +64,8 @@ const { info, marketItem } = defineProps({
 });
 const userInfo = ref({ userName: '' });
 const toDetail = (item) => {
-  // return false
+  const marketList = JSON.parse(sessionStorage.getItem('marketList'));
+  const marketItem = marketList.find((market) => item.scene_code_info === market.code);
   router.push({
     path: '/templatePreview',
     query: {
diff --git a/src/utils/utils.js b/src/utils/utils.js
index f04c863..efbc32a 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -172,6 +172,8 @@ export function throttle(fn, wait) {
     const args = arguments;
     const now = Date.now();
     if (now - lastTime >= wait) {
+      console.log(`throttle`, now - lastTime);
+      
       fn.apply(context, args);
       lastTime = now;
     }
diff --git a/src/views/Home/components/Market/Index.vue b/src/views/Home/components/Market/Index.vue
index 002be47..d08ad79 100644
--- a/src/views/Home/components/Market/Index.vue
+++ b/src/views/Home/components/Market/Index.vue
@@ -10,7 +10,7 @@
         shrink
         duration="0"
         color="#6fb937"
-        @change="getMarketInfo"
+        @change="handleChangeTab"
       >
         <section>
           <van-tab v-for="(item, index) in marketList" :key="item.title" :title="item.h5Title">
@@ -46,13 +46,13 @@
   </section>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import MarketItem from '@/components/MarketItem/MarketItem.vue';
 import { getListScene, getSurveyTemplates } from '@/api/home';
 import Search from '@/components/Search/Index.vue';
 import { imgMap } from '@/utils/imgMap';
 import { throttle } from '@/utils/utils';
-import { index } from '@/views/HomeSearch/Hooks/useSurveySearch';
+import { functionsIn } from 'lodash';
 
 const searchParm = {
   index: 1
@@ -60,7 +60,7 @@ const searchParm = {
 const marketList = ref([]);
 const active = ref(null);
 const marketIndex = ref(0);
-const marketInfo = ref([]);
+const marketInfo = ref<any[]>([]);
 // 当前激活的 item 信息
 const marketItem = ref();
 // 当前的搜索指
@@ -72,28 +72,40 @@ let loadDataSingle = false;
  * 如果这个搜索框没有值，默认清空 keyword, 然后重新加载列表
  */
 watch(searchValue, (value) => {
-  !value && (keyword = '');
+  if (!value) {
+    keyword = '';
+    fetchTemplate();
+  }
 });
 
 const getTableList = async () => {
   const res = await getListScene();
+  // 将 tabs 数据存放到 sessionStorage 中
+  sessionStorage.setItem('marketList', JSON.stringify(res.data.data));
+
   if (res.data.code === 0) {
     marketList.value = res.data.data;
   }
 };
+
+watch(active, () => {
+  console.log(`active change`, active.value);
+});
+
+// 开始请求所有 table 的数据
 getTableList();
 
 const getMarketInfo = async (item: string | number, title?: string) => {
   marketIndex.value = item as number;
 
-  const data = marketList.value.filter((market, index) => item === index)[0];
+  const data = marketList.value[active.value];
 
   if (data) {
     const params = {
       page: searchParm.index,
       // 此字段无法脱离组件使用
       keyword,
-      per_page: 100,
+      per_page: 10,
       group_id: 0,
       is_public: 1,
       scene_code_info: data.code,
@@ -107,7 +119,8 @@ const getMarketInfo = async (item: string | number, title?: string) => {
     const { current_page, last_page } = meta;
 
     if (res.data.code === 0) {
-      marketInfo.value = res.data.data;
+      // marketInfo.value = res.data.data;
+      marketInfo.value = [...marketInfo.value, ...res.data.data];
     }
     // 获取对应的 item 信息
     marketItem.value = marketList.value.find((item) => item.h5Title === title);
@@ -122,6 +135,14 @@ const getMarketInfo = async (item: string | number, title?: string) => {
   }
 };
 
+/**
+ * 当 table 切换的时候, 重置当前的参数数据
+ */
+function handleChangeTab() {
+  searchParm.index = 1;
+  marketInfo.value = [];
+  searchData();
+}
 /**
  * 搜索模板
  * @param keyword 搜索关键词
@@ -129,11 +150,15 @@ const getMarketInfo = async (item: string | number, title?: string) => {
 function fetchTemplate() {
   // 当点击搜索的时候, 重置当前的参数数据
   keyword = searchValue.value;
-  searchParm.index = 1;
+  handleChangeTab();
+}
+/**
+ * 这个函数负责调用搜索
+ */
+function searchData() {
   getMarketInfo(marketIndex.value);
 }
-
-const debounceFn = throttle(getTableList, 2000);
+const debounceFn = throttle(searchData, 500);
 function loadData() {
   if (!loadDataSingle) return;
   debounceFn();