修改了帮助中心搜索结果显示

src/components/HelpCenter.vue

@@ -12,7 +12,7 @@
           <h3>帮助中心</h3>
           <span>
             <input type="text" id="txtInput" placeholder="输入问题关键字" v-model="searchQuery">
-            <button id="search" @click="search" @input="onInput">搜索</button>
+            <button id="search" @click="search()">搜索</button>
             <!-- <input id="search" name value="搜索" onclick="sendSearchRequest()"> -->
           </span>
         </div>
@@ -37,9 +37,7 @@
                       <template #title>
                         <el-icon><Expand /></el-icon>
                         <span>{{ item.name }}</span>
-                        <!-- <i :class="{'el-sub-menu__icon-arrow': item.subList && item.subList.length > 0}"></i> -->
-                        <!-- <i v-if="item.subList && item.subList.length > 0" class="el-icon-arrow-down el-sub-menu__icon-arrow"></i> -->
-                        <i v-if="item.subList && item.subList.length > 0" class="el-icon-arrow-down"></i>
+                        <!-- <i v-if="item.subList && item.subList.length > 0" class="el-icon-arrow-down"></i> -->
                       </template>
                       
 
@@ -65,32 +63,36 @@
             </el-aside>
             
             <el-main>
-                <!-- <router-view :key="activeIndex"></router-view>              -->
-                <div class="contentBox" id="contentArea">
-                  <div class="dataList">
+                <div class="contentBox" id="contentArea" v-show="xs1"></div>
+                <div class="searchXS" v-show="xs2">
+                  <!-- <div class="searchXS" > -->
+                  <div class="dataList" v-show="result1">
                     <ul class="data">
-                      <!-- <li class="list" v-for="(data, index) in pagedData" :key=index>
-                        <h4 class="dataTitle">{{ data.title }}</h4>
-                        <p class="dataContent">{{ data.richContent }}</p>
-                      </li> -->
+                      <li class="list" v-for="(data, index) in pagedData" :key=index>
+                        <h4 class="dataTitle" :menuId="data.helpTypeId" @click="detailContent(data.helpTypeId)">{{ data.title }}</h4>
+                        <p class="dataContent">{{ getPlainText(data.richContent) }}</p>
+                      </li>
                     </ul>
                     <div class="pagin">
-                      <!-- <el-pagination
+                      <el-pagination
+                        @size-change="handleSizeChange"
+                        @current-change="handlePageChange"
                         :page-size="pageSize"
                         :current-page="currentPage"
-                        :total="pagedData.length"
-                        @current-change="handlePageChange"
-                      ></el-pagination> -->
+                        :total="totalData"
+                        layout="total, prev, pager, next, jumper"
+                      ></el-pagination>
                     </div>
                   </div>
+                  <div class="noData" v-show="result0">
+                    很抱歉，没有找到符合的记录，请更换关键词重新搜索！
+                  </div>
                 </div>
             </el-main>
           </el-container>
 
         </div>
-        <div class="boxFooter">
-
-        </div>
+        <!-- <div class="boxFooter"></div> -->
       </div>
     </div>
   </div>
@@ -98,67 +100,74 @@
 
 
 <script>
-import { ref, watch, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-// import { ref, reactive } from 'vue'
+// import { ref, watch, onMounted } from 'vue'
+// import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
-// import $ from 'jquery'
-// import func from 'vue-editor-bridge'
+// import { useRoute } from 'vue-router';
+// import jsdom from 'jsdom';
 export default {
-  // props: {
-  //   query: String
-  // },
-  setup() {
-    const searchQuery = ref('')
-    const result = ref('')
-    const route = useRoute()
-  
-
-    onMounted(() => {
-      if (route.query.q) {
-        searchQuery.value = route.query.q
-        
-          search()
-          // fetchSearchResults()
-      }
-    })
-
-    watch(() => route.query.q, (newQuery) => {
-      if(newQuery) {
-        searchQuery.value = newQuery
-          search()
-          // fetchSearchResults()
-      }
-    })
-
-    const search = async () => {
-      try {
-        
-        const response = await axios.get(`https://www.aimzhu.com/operator/app/help-detail/listrelease?keywords=${searchQuery.value}`)
-        // alert(11)
-        // console.log(response.data);
-        
-        let searchContent = response.data
-        if (searchContent.length !== 0) {
-          document.getElementById('contentArea').innerHTML = response.data[0].richContent
-          // alert(11)
-        } else {
-          document.getElementById('contentArea').innerHTML = '很抱歉，没有找到符合的记录，请更换关键词重新搜索！'
-        }
-        
-      } catch (error) {
-        console.error(error)
-      }
-      
-    }
-    return {
-      searchQuery,
-      result,
-      // search
-      // onInput
-    };
+  props: {
+    searchQuery: String
   },
 
+  // setup() {
+  //   const searchQuery = ref('')
+  //   const result = ref('')
+  //   const route = useRoute()
+  
+
+  //   onMounted(() => {
+  //     if (route.query.q) {
+  //       searchQuery.value = route.query.q
+        
+  //         search()
+  //         console.log(searchQuery.value);
+  //         // fetchSearchResults()
+  //     }
+  //   })
+
+  //   watch(() => route.query.q, (newQuery) => {
+  //     if(newQuery) {
+  //       searchQuery.value = newQuery
+  //         search()
+  //         console.log(searchQuery.value);
+  //         // fetchSearchResults()
+  //     }
+  //   })
+
+  //   const search = async () => {
+  //     try {
+        
+  //       const response = await axios.get(`https://www.aimzhu.com/operator/app/help-detail/listpagerelease/10/1?keywords=${searchQuery.value}`)
+  //       // alert(11)
+  //       // console.log(response.data);
+        
+  //       this.xs1 = false
+  //       this.xs2 = true
+  //       this.pagedData = response.data.rows
+  //       this.totalData = response.data.total
+  //       if (this.totalData > 0) {
+  //         this.result0 = false
+  //         this.result1 = true
+  //       } else {
+  //         this.result0 = true
+  //         this.result1 = false
+  //       }
+  //       // console.log(this.searchQuery);
+        
+  //     } catch (error) {
+  //       console.error(error)
+  //     }
+      
+  //   }
+  //   return {
+  //     searchQuery,
+  //     result,
+  //     // search
+  //     // onInput
+  //   };
+  // },
+
   data() {
     return {
       number: 0,
@@ -168,9 +177,17 @@ export default {
       defaultOpeneds: [], 
       // 用于追踪每个子菜单的展开状态 
       // openedMenus: [],
-      pagedData: [],
+      totalData: null,
+      pagedData: '',
       currentPage: 1,
       pageSize: 10,
+      searchQuery: '',
+      xs1: true,
+      xs2: false,
+      res: false,
+      res0: false,
+      result0: false,
+      result1: false
     }
   },
   methods: {
@@ -178,20 +195,17 @@ export default {
       this.number = index  
     },
     menuIdContend (itemId0,itemHasDetail) {
-      // console.log(itemId);
+      document.querySelector('#txtInput').value = ''
+      this.xs1 = true
+      this.xs2 = false
       var contendId = itemId0
       var detail = itemHasDetail
       let contentBox = document.querySelector('.contentBox')
-      // var url = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId
-      // axios.get(url).then(response => {
-      //   var content = response.data[0].richContent
-      //   // console.log(content) 
-      //   contentBox.innerHTML = content 
-      // })
 
       if(detail === 1 ) {
         var url = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId
         axios.get(url).then(response => {
+          console.log(response.data)
           var content = response.data[0].richContent
           // console.log(content) 
           contentBox.innerHTML = content 
@@ -203,32 +217,66 @@ export default {
 
     },
 
-    search() {
-      var textInput = document.querySelector('#txtInput').value
-      // var pageSize = 10; 
-      // var currentPage = 1;
-      axios.get(`https://www.aimzhu.com/operator/app/help-detail/listrelease?keywords=${textInput}`)
-      // axios.get(`https://www.aimzhu.com/operator/app/help-detail/listpagerelease/${pageSize}/${currentPage}?keywords=${textInput}`)
+    getData ()  {
+      axios.get(`https://www.aimzhu.com/operator/app/help-detail/listpagerelease/${this.pageSize}/${this.currentPage}?keywords=${this.searchQuery}`)
       .then(response => {
-        // alert( response.data[0].richContent)
-        // console.log(response);
-        console.log(response.data.rows);
+          // console.log(response.data);
+          this.xs1 = false
+          this.xs2 = true
           this.pagedData = response.data.rows
-        let searchContent = response.data
-        if (searchContent.length !== 0) {
-          document.getElementById('contentArea').innerHTML = response.data[0].richContent
+          this.totalData = response.data.total
+          if (this.totalData > 0) {
+            this.result0 = false
+            this.result1 = true
           } else {
-          document.getElementById('contentArea').innerHTML = '很抱歉，没有找到符合的记录，请更换关键词重新搜索！'
+            this.result0 = true
+            this.result1 = false
           }
-        document.getElementById('contentArea').innerHTML = response.data[0].richContent
-        console.log(response.data);
+          console.log(this.searchQuery);
     
       })
       .catch(function (error) {
         console.log(error)
       })
+
+    },
+    search() {
+      this.currentPage = 1
+      this.getData()
+      // axios.get(`https://www.aimzhu.com/operator/app/help-detail/listrelease?keywords=${textInput}`)
     },
 
+    // pagedData1() {
+    //   const start = (this.currentPage - 1) * this.pageSize;
+    //   const end = this.currentPage * this.pageSize;
+    //   return this.pagedData.slice(start, end);
+    // },
+
+    updatePagination() {
+      this.pagedItems = this.pagedData.slice(
+        (this.currentPage - 1) * this.pageSize,
+        this.currentPage * this.pageSize
+      );
+    },
+
+    handlePageChange(page) {
+      this.currentPage = page;
+      // this.search();
+      this.getData()
+      // alert(this.currentPage)
+    },
+    handleSizeChange(newSize) {
+      this.pageSize = newSize;
+      this.currentPage = 1;
+      this.search();
+    },
+
+    getPlainText(richContent) {
+      // 使用正则表达式从richContent中提取纯文本内容
+      const regex = /<[^>]+>/gi; // 匹配所有richContent标签
+      const plainText = richContent.replace(regex, ''); // 替换掉所有richContent标签
+      return plainText;
+    },
 
     handleOpen(key, keyPath) {  
       // 只保留当前展开的菜单项索引  
@@ -248,15 +296,30 @@ export default {
       // }  
     }, 
 
+    detailContent(menId) {
+      this.xs1 = true
+      this.xs2 = false
+      var detailContentId = menId
+      let contentBox = document.querySelector('.contentBox')
+      var url = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + detailContentId
+      axios.get(url).then(response => {
+        // console.log(response.data[0].richContent);
+        contentBox.innerHTML = response.data[0].richContent
+      })
+    }
+    
   },
   mounted() {
+    document.querySelector('#txtInput').value = ''
+    this.xs1 = true
+    this.xs2 = false
     axios.get('https://www.aimzhu.com/operator/app/help-type/helpAllListrelease').then(response => {
-      console.log(response.data)
+      // console.log(response.data)
       // this.items = response.data.name
       this.items = response.data      
       
-      var textInput = document.querySelector('#txtInput').value
-      if(textInput === '') {
+      // var textInput = document.querySelector('#txtInput').value
+      // if(textInput === '') {
         // 默认渲染的数据
         let contendId0 = response.data[0].id
         let url0 = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId0
@@ -266,9 +329,9 @@ export default {
           let contentBox0 = document.querySelector('.contentBox')
           contentBox0.innerHTML = content0
         })
-      } else {
+      // } else {
 
-      }
+      // }
 
     })
     .catch(error => {
@@ -276,13 +339,6 @@ export default {
     });
     
   },
-  computed: {
-    pagedData() {
-      const start = (this.currentPage - 1) * this.pageSize;
-      const end = this.currentPage * this.pageSize;
-      return this.pagedData.slice(start, end);
-    },
-  },
   
 }
 </script>
@@ -342,8 +398,6 @@ export default {
   top: -200px;
   bottom: 50px;
   width: 1000px;
-  /* height: 750px; */
-  /* padding: 25px; */
   background-color: #FFF;
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -400,5 +454,45 @@ export default {
 #contentArea {
   line-height: 2.1;
 }
-
+.searchXS .dataList {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.searchXS .dataList li {
+  margin-bottom: 12px;
+  border-bottom: 1px solid #CCC;
+}
+.searchXS .dataList .list h4 {
+  /* margin-bottom: 6px; */
+  text-decoration: underline;
+  cursor: pointer;
+  color: #0095ff;
+}
+.searchXS .dataList .list h4:hover {
+  opacity: 0.7;
+}
+.searchXS .dataList .list p {
+  margin-bottom: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* position: relative; */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.searchXS .noData {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #CCC;
+  line-height: 40px; 
+  font-size: 16px;
+  color: #474747;
+  padding-left: 10px;
+}
+.searchXS .dataList .pagin {
+  position: absolute;
+  right: 10px;
+  margin-top: 20px;
+}
 </style>

src/components/KeFu.vue

@@ -12,6 +12,7 @@
           <div class="kefu-sub">
             <h4>客服中心</h4>
             <div class="kefu-search">
+              <!-- <input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery"> -->
               <input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery">
               <input type="submit" name value="搜索" id="search" @click="search">
             </div>
@@ -93,24 +94,36 @@
 </template>
 
 <script>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+// import { ref } from 'vue';
+// import { useRouter } from 'vue-router';
 export default {
-  setup() {
-    const searchQuery = ref('')
-    const router = useRouter()
+  // setup() {
+  //   const searchQuery = ref('')
+  //   const router = useRouter()
 
-    const search = () => {
-      router.push({
-        name: 'HelpCenter',
-        query: { q: searchQuery.value}
-      })
-    }
+  //   const search = () => {
+  //     router.push({
+  //       name: 'HelpCenter',
+  //       query: { q: searchQuery.value}
+  //     })
+  //   }
+  //   return {
+  //     searchQuery,
+  //     search
+  //   }
+  // }
+
+  data() {
     return {
-      searchQuery,
-      search
+      searchQuery: ''
+    };
+  },
+  methods: {
+    search() {
+      this.$router.push({ name: 'HelpCenter', query: { q: this.searchQuery } });
     }
   }
+
 }
 </script>
 

src/main.js

@@ -39,6 +39,7 @@ app.use(router)
 // app.use(ElementPlus)
 app.use(VueScrollTo)
 // app.use(VueAmazingUI)
+
 app.mount('#app')
 
 // createApp(App).mount('#app')