From 09ab4901d880b11aab00c1e0b635dfe7452002d5 Mon Sep 17 00:00:00 2001
From: Huangzhe <huang.ze@ebiz-digits.com>
Date: Wed, 28 May 2025 13:30:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(search):=20=E4=BC=98=E5=8C=96=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E5=8A=9F=E8=83=BD=E5=B9=B6=E8=B0=83=E6=95=B4=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 Search 组件的 @change 事件改为 @search 事件
- 实现搜索框无值时清空 keyword 并重新加载列表的功能
- 优化 fetchTemplate 方法，使用 keyword 替代 searchValue.value
---
 src/views/Home/components/Market/Index.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/views/Home/components/Market/Index.vue b/src/views/Home/components/Market/Index.vue
index 518a60a..4aad981 100644
--- a/src/views/Home/components/Market/Index.vue
+++ b/src/views/Home/components/Market/Index.vue
@@ -2,7 +2,7 @@
   <section class="market-container">
     <!-- 模板 -->
     <div class="market">
-      <search v-model:value="searchValue" @change="fetchTemplate"></search>
+      <search v-model:value="searchValue" @search="fetchTemplate"></search>
       <van-tabs
         v-model:active="active"
         style="margin-top: 15px"
@@ -44,7 +44,7 @@
   </section>
 </template>
 <script setup lang="ts">
-import { ref } 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';
@@ -59,6 +59,16 @@ const marketInfo = ref([]);
 const marketItem = ref();
 // 当前的搜索指
 const searchValue = ref('');
+let keyword = '';
+
+/**
+ * 如果这个搜索框没有值，默认清空 keyword, 然后重新加载列表
+ */
+watch(searchValue, (value) => {
+  !value && (keyword = '');
+  getMarketInfo(active.value);
+});
+
 const getTableList = async () => {
   const res = await getListScene();
   if (res.data.code === 0) {
@@ -75,6 +85,8 @@ const getMarketInfo = async (item: string | number, title?: string) => {
   if (data) {
     const params = {
       page: 1,
+      // 此字段无法脱离组件使用
+      keyword,
       per_page: 10,
       group_id: 0,
       is_public: 1,
@@ -97,8 +109,8 @@ const getMarketInfo = async (item: string | number, title?: string) => {
  * @param keyword 搜索关键词
  */
 function fetchTemplate() {
-  // const { templates } = fetchSearchResult(searchValue.value);
-  // searchResult.value = templates;
+  keyword = searchValue.value;
+  getMarketInfo(marketIndex.value);
 }
 </script>