搜索页面接口联调

 /*
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-25 14:01:25
+ * @LastEditTime: 2024-10-25 16:49:54
  * @FilePath: /hager/src/api/hager.js
  * @Description: 文件描述
  */
@@ -23,6 +23,7 @@ const Api = {
   EDIT_USER: '/srv/?a=user&type=edit_user',
   GET_CODE: '/srv/?a=user&type=get_code',
   EDIT_PASSWORD: '/srv/?a=user&type=edit_password',
+  SEARCH: '/srv/?a=search',
 };
 
 export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
@@ -49,3 +50,4 @@ export const getUserInfoAPI = (params) => fn(fetch.get(Api.GET_USER, params));
 export const editUserInfoAPI = (params) => fn(fetch.post(Api.EDIT_USER, params));
 export const getCodeAPI = (params) => fn(fetch.post(Api.GET_CODE, params));
 export const editPasswordAPI = (params) => fn(fetch.post(Api.EDIT_PASSWORD, params));
+export const searchAPI = (params) => fn(fetch.get(Api.SEARCH, params));

 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-25 14:21:41
+ * @LastEditTime: 2024-10-25 16:57:33
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -367,7 +367,9 @@ export default {
       $('body').css('overflow', 'auto');
     },
     goToSearch () {
-      this.updateURL()
+      if (this.keyword) {
+        this.updateURL()
+      }
     },
     updateURL() {
       const currentKeyword = this.$route.query.keyword;

 <!--
  * @Date: 2024-10-20 16:57:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-25 15:39:59
+ * @LastEditTime: 2024-10-25 17:39:23
  * @FilePath: /hager/src/views/search.vue
  * @Description: 文件描述
 -->
@@ -11,30 +11,34 @@
       <div class="search-title">与“{{ keyword }}”相关的搜索结果</div>
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane name="product">
-          <div slot="label" class="customer-label">产品&nbsp;&nbsp;<span>2</span></div>
+          <div slot="label" class="customer-label">产品&nbsp;&nbsp;<span>{{ count_product }}</span></div>
           <div class="search-product-list">
             <div :class="['search-product-item', is_xs ? 'xs' : '']" v-for="(item, index) in product_list" :key="index">
-              <div :class="['search-product-item-img', is_xs ? 'xs' : '']" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
-              <p @click="goToDetail(item)" class="search-product-item-title">{{ item.title }}</p>
+              <div :class="['search-product-item-img', is_xs ? 'xs' : '']" :style="{ 'background-image': 'url('+ item.cover +')' }"></div>
+              <p @click="goToDetail(item)" class="search-product-item-title">{{ item.product_name }}</p>
             </div>
           </div>
           <div style="height: 5rem;"></div>
         </el-tab-pane>
         <el-tab-pane name="solution">
-          <div slot="label" class="customer-label">解决方案&nbsp;&nbsp;<span>3</span></div>
-          <div style="margin-top: 1rem;" v-for="(item, index) in news_list" :key="index">
+          <div slot="label" class="customer-label">解决方案&nbsp;&nbsp;<span>{{ count_solution }}</span></div>
+          <div style="margin-top: 1rem;" v-for="(item, index) in solution_list" :key="index">
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item>首页</el-breadcrumb-item>
+              <el-breadcrumb-item>解决方案</el-breadcrumb-item>
+            </el-breadcrumb>
             <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
-              <div class="search-news-title" v-html="highlightKeyword(keyword, item.title)"></div>
-              <div class="search-news-content" v-html="highlightKeyword(keyword, item.content)"></div>
+              <div class="search-news-title" v-html="highlightKeyword(keyword, item.solution_name)"></div>
+              <div class="search-news-content" v-html="highlightKeyword(keyword, item.solution_description)"></div>
               <div class="search-news-more">
-                <div class="search-news-more-btn" @click="goTo(item.id)">MORE</div>
+                <div class="search-news-more-btn" @click="goToCase(item.id)">MORE</div>
               </div>
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane name="success">
-          <div slot="label" class="customer-label">成功案例&nbsp;&nbsp;<span>3</span></div>
-          <div style="margin-top: 1rem;" v-for="(item, index) in news_list" :key="index">
+        <el-tab-pane name="case">
+          <div slot="label" class="customer-label">成功案例&nbsp;&nbsp;<span>{{ count_case }}</span></div>
+          <div style="margin-top: 1rem;" v-for="(item, index) in case_list" :key="index">
             <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
               <div class="search-news-title" v-html="highlightKeyword(keyword, item.title)"></div>
               <div class="search-news-content" v-html="highlightKeyword(keyword, item.content)"></div>
@@ -45,23 +49,29 @@
           </div>
         </el-tab-pane>
         <el-tab-pane name="news">
-          <div slot="label" class="customer-label">新闻&nbsp;&nbsp;<span>3</span></div>
+          <div slot="label" class="customer-label">新闻&nbsp;&nbsp;<span>{{ count_news }}</span></div>
           <div style="margin-top: 1rem;" v-for="(item, index) in news_list" :key="index">
-            <!-- <el-breadcrumb separator="/">
+            <el-breadcrumb separator="/">
               <el-breadcrumb-item>首页</el-breadcrumb-item>
               <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
-            </el-breadcrumb> -->
+            </el-breadcrumb>
             <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
-              <div class="search-news-title" v-html="highlightKeyword(keyword, item.title)"></div>
-              <div class="search-news-content" v-html="highlightKeyword(keyword, item.content)"></div>
+              <div class="search-news-title" v-html="highlightKeyword(keyword, item.post_title)"></div>
+              <div class="search-news-content" v-html="highlightKeyword(keyword, item.post_excerpt)"></div>
               <div class="search-news-more">
-                <div class="search-news-more-btn" @click="goTo(item.id)">MORE</div>
+                <div class="search-news-more-btn" @click="goToNews(item.id)">MORE</div>
               </div>
             </div>
           </div>
         </el-tab-pane>
       </el-tabs>
     </hager-box>
+    <hager-box v-if="activeName === 'news'">
+      <hager-load-more v-if="news_page <= news_max_page" @click.native="getMore"></hager-load-more>
+    </hager-box>
+    <hager-box v-if="activeName === 'case'">
+      <hager-load-more v-if="case_page <= case_max_page" @click.native="getMore"></hager-load-more>
+    </hager-box>
   </div>
 </template>
 
@@ -70,6 +80,8 @@ import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import $ from 'jquery';
 import objectFitImages from 'object-fit-images';
+import { searchAPI } from '@/api/hager';
+import hagerLoadMore from '@/components/hagerLoadMore.vue';
 
 export default {
   components: { hagerBox },
@@ -78,37 +90,29 @@ export default {
     return {
       activeName: 'product',
       keyword: this.$route.query.keyword,
-      news_list: [{
-        id: '123',
-        title: '海格电气全新智能型hw+空气断路器重磅上市',
-        content: '11 月 24 日，海格电气在惠州举办了 2023 海格匠心之旅暨 hw+ 全系列新品发布会,面向中国市场正式推出了全新一代智能型 hw+ 空气断路器。海格电气管理层及员工代表，行业客户及合作伙伴等齐聚惠州工厂，共同见证海格电气新一代',
-      }, {
-        id: '456',
-        title: '里程碑时刻！海格电气首台全新一代HW+空气断路器',
-        content: '全新一代HW+空气断路器的整机下线，标志着海格电气在低压配电领域的进一步技术升级。作为海格电气在中国市场重磅推出的里程碑式产品，全新一代HW+空气断路器为大型建筑复杂、高负荷的用电需求提供高质量解决方案。',
-      }],
-      product_list: [{
-        id: '',
-        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
-        title: 'acb hw 空气断路器'
-      }, {
-        id: '',
-        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
-        title: 'acb hw 空气断路器'
-      }, {
-        id: '',
-        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
-        title: 'acb hw 空气断路器'
-      }],
-      is_end: false
+      news_list: [],
+      case_list: [],
+      count_news: 0,
+      count_case: 0,
+      count_product: 0,
+      count_solution: 0,
+      product_list: [],
+      solution_list: [],
+      news_page: 1,
+      case_page: 1,
+      limit: 10,
+      news_max_page: 0,
+      case_max_page: 0,
     }
   },
   watch: {
     '$route.query.keyword': function(newKeyword) {
       this.keyword = newKeyword || '';
+      this.getList();
     },
   },
-  mounted () {
+  async mounted () {
+    this.getList();
     objectFitImages(this.$el); // 对当前组件的 DOM 元素应用
     if (this.is_xs) { // 自适应模式下，左右箭头的颜色修改
       this.modifyTabColor();
@@ -137,19 +141,84 @@ export default {
         }, 100);
       })
     },
+    async getList () {
+      const { code, data } = await searchAPI({ keyword: this.keyword });
+      if (code) {
+        this.count_news = data.count_news;
+        this.count_case = data.count_case;
+        this.count_product = data.count_product;
+        this.count_solution = data.count_solution;
+        this.product_list = data.product;
+        this.solution_list = data.solution;
+      }
+    },
+    async getNewsList (type = '', page) {
+      const { code, data } = await searchAPI({ keyword: this.keyword, type, page, limit: this.limit });
+      if (code) {
+        this.news_list = data.list;
+        this.news_max_page = data.max_page;
+      }
+    },
+    async getCaseList (type = '', page) {
+      const { code, data } = await searchAPI({ keyword: this.keyword, type, page, limit: this.limit });
+      if (code) {
+        this.case_list = data.list;
+        this.case_max_page = data.max_page;
+      }
+    },
+    async getMoreNewsList (type = '', page) {
+      const { code, data } = await searchAPI({ keyword: this.keyword, type, page, limit: this.limit });
+      if (code) {
+        this.news_list = this.news_list.concat(data.list);
+      }
+    },
+    async getMoreCaseList (type = '', page) {
+      const { code, data } = await searchAPI({ keyword: this.keyword, type, page, limit: this.limit });
+      if (code) {
+        this.case_list = this.case_list.concat(data.list);
+      }
+    },
     handleClick(tab, event) {
-      console.log(tab, event);
+      switch (tab.name) {
+        case 'product':
+          this.getList();
+          break;
+        case 'case':
+          this.getList();
+          break;
+        case 'case':
+          this.case_page = 1;
+          this.case_max_page = 0;
+          this.getCaseList(tab.name, this.case_page);
+          break;
+        case 'news':
+          this.news_page = 1;
+          this.news_max_page = 0;
+          this.getNewsList(tab.name, this.news_page);
+          break;
+      }
+
+    },
+    getMore () {
+      if (this.activeName === 'case') {
+        this.case_page += 1;
+        this.getMoreCaseList(this.activeName, this.case_page);
+      }
+      if (this.activeName === 'news') {
+        this.news_page += 1;
+        this.getMoreNewsList(this.activeName, this.news_page);
+      }
     },
     highlightKeyword (keyword, text) {
       // 创建一个正则表达式来查找关键词
       var regex = new RegExp(`(${keyword})`, 'gi');
 
       // 用 <span> 标签替换匹配到的关键词并加上高亮类
-      var highlightedText = text.replace(regex, '<span style="color: #00ABE5;">$1</span>');
+      var highlightedText = text?.replace(regex, '<span style="color: #00ABE5;">$1</span>');
 
       return highlightedText;
     },
-    goTo (id) {
+    goToNews (id) {
       this.$router.push({
         path: '/news/detail',
         query: {
@@ -164,6 +233,22 @@ export default {
           id: v.id
         }
       });
+    },
+    goToCase (id) {
+      this.$router.push({
+        path: '/solution/detail',
+        query: {
+          id: id
+        }
+      });
+    },
+    goToSolution (v) { // 跳转产品详情
+      this.$router.push({
+        path: '/product/detail',
+        query: {
+          id: v.id
+        }
+      });
     }
   }
 }
@@ -225,8 +310,8 @@ export default {
 
     .search-news-wrapper {
       margin: 1.5rem 0;
+      border-bottom: 1px solid #ECECEC;
       &.xs {
-        border-bottom: 1px solid #ECECEC;
       }
       .search-news-title {
         font-size: 1.15rem;