联调产品中心搜索功能

hookehuyr
Commit db11ba4cb39dbeee3a5676b30fe395df6c7d56c1 db11ba4c 1 parent 478a620d
Showing 2 changed files with 44 additions and 7 deletions
src/api/hager.js
src/views/product/index.vue
--- a/src/api/hager.js
View file @db11ba4
+++ b/src/api/hager.js
View file @db11ba4
 /*
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 16:23:08
+ * @LastEditTime: 2024-10-24 09:34:46
  * @FilePath: /hager/src/api/hager.js
  * @Description: 文件描述
  */
@@ -14,11 +14,19 @@ const Api = {
   HOME: '/srv/?a=home',
   PRODUCT_CATE: '/srv/?a=cate&type=product',
   PRODUCT_INFO: '/srv/?a=detail&type=product',
+  PRODUCT_SEARCH: '/srv/?a=cate&type=product_search',
 };
 export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
+
 export const newsAPI = (params) => fn(fetch.get(Api.NEWS, params));
+
 export const getNewsDetailAPI = (params) => fn(fetch.get(Api.NEWS_DETAIL, params));
+
 export const getHomeAPI = (params) => fn(fetch.get(Api.HOME, params));
+
 export const getProductCateAPI = (params) => fn(fetch.get(Api.PRODUCT_CATE, params));
+
 export const getProductInfoAPI = (params) => fn(fetch.get(Api.PRODUCT_INFO, params));
+
+export const getProductSearchAPI = (params) => fn(fetch.get(Api.PRODUCT_SEARCH, params));
--- a/src/views/product/index.vue
View file @db11ba4
+++ b/src/views/product/index.vue
View file @db11ba4
 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 15:56:41
+ * @LastEditTime: 2024-10-24 10:01:46
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="product-index">
     <hager-box>
-      <div style="margin-top: 1.5rem;">
+      <div v-if="!is_search" style="margin-top: 1.5rem;">
         <el-breadcrumb separator="/">
           <el-breadcrumb-item>所有产品</el-breadcrumb-item>
           <el-breadcrumb-item>{{ parent_name }}</el-breadcrumb-item>
           <el-breadcrumb-item>{{ category_name }}</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
-      <hager-h1 :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>
       <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
         <el-col :span="6">
           <div class="product-nav-wrapper">
             <div class="product-nav-title">按产品类别查找</div>
-            <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
+            <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="keyword" @change="goToSearch"></el-input>
             <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">
                 <div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.product_name }}</div>
@@ -57,14 +58,14 @@
 import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import hagerH1 from '@/components/common/hagerH1.vue';
-import { getProductCateAPI } from "@/api/hager.js";
+import { getProductCateAPI, getProductSearchAPI } from "@/api/hager.js";
 export default {
   components: { hagerBox, hagerH1 },
   mixins: [mixin.init],
   data () {
     return {
-      search_input: '',
+      keyword: '',
       activeNames: [],
       parent_name: '',
       category_name: '',
@@ -90,6 +91,11 @@ export default {
   async mounted () {
     this.getMain();
   },
+  computed: {
+    is_search () {
+      return this.$route.query.keyword;
+    }
+  },
   watch: {
     // 监听路由参数变化时，更新输入框的值
     async '$route.query.id' (val, old) {
@@ -131,6 +137,29 @@ export default {
         })
       }
     },
+    async goToSearch () {
+      if (this.keyword) { // 产品有值时操作
+        const { code, data } = await getProductSearchAPI({ keyword: this.keyword });
+        if (code) {
+          this.product_list = data;
+          this.$router.push({
+            path: '/product/index',
+            query: {
+              id: this.$route.query.id,
+              keyword: this.keyword
+            }
+          })
+        }
+      } else { // 清空搜索值，还原
+        this.$router.push({
+          path: '/product/index',
+          query: {
+            id: this.$route.query.id,
+          }
+        })
+      }
+
+    },
   }
 }
 </script>