产品中心产品搜索框逻辑优化

 <!--
 <!--
  * @Date: 2024-09-27 16:53:09
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-29 14:03:32
+ * @LastEditTime: 2024-10-29 14:25:29
  * @FilePath: /hager/src/views/product/index.vue
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -16,12 +16,12 @@
         </el-breadcrumb>
         </el-breadcrumb>
       </div>
       </div>
       <hager-h1 v-if="!is_search" :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
       <hager-h1 v-if="!is_search" :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
-      <hager-h1 v-else :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
+      <hager-h1 v-else :title="'与“' + search_keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
       <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
       <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
         <el-col :span="6">
         <el-col :span="6">
           <div class="product-nav-wrapper">
           <div class="product-nav-wrapper">
             <div class="product-nav-title">按产品类别查找</div>
             <div class="product-nav-title">按产品类别查找</div>
-            <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="keyword" @change="goToSearch"></el-input>
+            <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_keyword" @change="goToSearch"></el-input>
             <el-collapse v-model="activeNames" @change="handleChange">
             <el-collapse v-model="activeNames" @change="handleChange">
               <el-collapse-item v-for="(item, index) in cate_list" :key="index" :title="item.category_name" :name="item.category_name">
               <el-collapse-item v-for="(item, index) in cate_list" :key="index" :title="item.category_name" :name="item.category_name">
                 <div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.product_name }}</div>
                 <div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.product_name }}</div>
@@ -65,7 +65,7 @@ export default {
   mixins: [mixin.init],
   mixins: [mixin.init],
   data () {
   data () {
     return {
     return {
-      keyword: '',
+      search_keyword: this.$route.query.search_keyword,
       activeNames: [],
       activeNames: [],
       parent_name: '',
       parent_name: '',
       category_name: '',
       category_name: '',
@@ -94,7 +94,7 @@ export default {
   },
   },
   computed: {
   computed: {
     is_search () {
     is_search () {
-      return this.$route.query.keyword;
+      return this.$route.query.search_keyword;
     }
     }
   },
   },
   watch: {
   watch: {
@@ -103,7 +103,7 @@ export default {
       if (old !== val) {
       if (old !== val) {
         this.getMain();
         this.getMain();
       }
       }
-    }
+    },
   },
   },
   methods: {
   methods: {
     handleChange(val) {
     handleChange(val) {
@@ -117,14 +117,18 @@ export default {
       });
       });
     },
     },
     async getMain () {
     async getMain () {
-      const { code, data } = await getProductCateAPI( {cid: this.$route.query.id});
+      const { code, data } = await getProductCateAPI( {cid: this.$route.query.id });
       if (code) {
       if (code) {
         let info = data[0];
         let info = data[0];
         this.parent_name = info.parent_name;
         this.parent_name = info.parent_name;
         this.category_name = info.category_name;
         this.category_name = info.category_name;
         this.category_name_en = info.category_name_en;
         this.category_name_en = info.category_name_en;
-        this.product_list = info.list;
-        //
+        if (!this.search_keyword) {
+          this.product_list = info.list;
+        } else {
+          this.goToSearch()
+        }
+        // 获取当前类别的内容
         this.getCurrentCate(info.category_parent);
         this.getCurrentCate(info.category_parent);
       }
       }
     },
     },
@@ -139,28 +143,30 @@ export default {
       }
       }
     },
     },
     async goToSearch () {
     async goToSearch () {
-      if (this.keyword) { // 产品有值时操作
-        const { code, data } = await getProductSearchAPI({ keyword: this.keyword });
-        if (code) {
-          this.product_list = data;
-          //
-          this.$router.replace({
-            path: this.$route.path,
-            query: {
-              ...this.$route.query,
-              keyword: this.keyword
-            }
-          });
-        }
+      const { code, data } = await getProductSearchAPI({ keyword: this.search_keyword });
+      if (code) {
+        this.product_list = data;
+      }
+      if (this.search_keyword) { // 产品有值时操作
+        //
+        this.$router.replace({
+          path: this.$route.path,
+          query: {
+            ...this.$route.query,
+            search_keyword: this.search_keyword
+          }
+        });
       } else { // 清空搜索值，还原
       } else { // 清空搜索值，还原
-        this.$router.push({
-          path: '/product/index',
+        this.getMain();
+        // 清空搜索值
+        this.$router.replace({
+          path: this.$route.path,
           query: {
           query: {
-            id: this.$route.query.id,
+            ...this.$route.query,
+            search_keyword: ''
           }
           }
-        })
+        });
       }
       }
-
     },
     },
   }
   }
 }
 }