完成全站搜索页面

components/header.vue

@@ -13,6 +13,7 @@
           class="search-input"
           v-model="searchVal"
           placeholder="SEARCH"
+          @keydown.enter="search"
         >
         </b-form-input>
       </div>
@@ -27,6 +28,7 @@
             class="search-input"
             v-model="searchVal"
             placeholder="SEARCH"
+            @keydown.enter="search"
           >
           </b-form-input>
           <img 
@@ -69,8 +71,21 @@ export default {
       searchVal: '',
     }
   },
+  watch: {
+    '$route.query.str': {
+      handler(val) {
+        this.searchVal = val;
+      },
+      immediate: true
+    }
+  },
   computed: {
     ...mapState(['menuTree'])
+  },
+  methods: {
+    search() {
+      this.$router.push({ path: '/search-result', query: { str: this.searchVal } })
+    }
   }
 }
 </script>

components/seo-pagination.vue

@@ -42,6 +42,7 @@ export default {
     '$route': {
       handler(val) {
         this.currentPage = val.query[this.pageKey] || 1
+        this.queryStr = ''
         for (let key in val.query) {
           if (key!==this.pageKey) {
             this.queryStr = `${this.queryStr}&${key}=${val.query[key]}`

locales/en.json

@@ -30,7 +30,8 @@
     "search": "Search",
     "next": "Next",
     "prev": "Prev",
-    "submitSuccess": "Submit success"
+    "submitSuccess": "Submit success",
+    "fulltextsearch": "Full text search"
   },
   "menu": {
     "Home": "Home",

locales/zh.json

@@ -30,7 +30,8 @@
     "search": "搜索",
     "next": "下一个",
     "prev": "上一个",
-    "submitSuccess": "提交成功"
+    "submitSuccess": "提交成功",
+    "fulltextsearch": "全站搜索"
   },
   "menu": {
     "Home": "首页",

pages/inquiry.vue

@@ -176,7 +176,7 @@
 <script>
 
 export default {
-  name: 'feedback',
+  name: 'inquiry',
   data() {
     return {
       dataForm: {

pages/search-result.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+    <div class="container">
+      <section class="article-page-list">
+        <nuxt-link 
+          class="article-page-item box_shadow row mt-4" 
+          :to="`/${jumpUrl(item.dataType)}/${item.id}?catgId=${item.catgId}`"
+          v-for="item in pordObj.records"
+          :key="item.id"
+        >
+          <b-img 
+            class="col-md-4"
+            :src="item.mainPic"
+            :alt="item.title"
+          >
+          </b-img>
+          <article class="col-md-8">
+            <h3 class="title text-ellipsis">
+              {{ item.title }}
+            </h3>
+            <p class="article-page-content text-ellipsis" v-html="item.description"></p>
+            <div>
+              <span>{{ item.createTime }}</span>
+              <img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
+            </div>
+          </article>
+        </nuxt-link>
+
+        <SeoPagination class="mt-4" :total="pordObj.total" />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'search-result',
+  watchQuery: ['str','pageNum'],
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('common.fulltextsearch'),
+        img: require('../assets/image/banner/aboutus-banner.png')
+      }
+    }
+  },
+  async asyncData({$axios, query}) {
+    console.log(query.str);
+    const params = {
+      pageNum: query.pageNum || 1,
+      pageSize: 10,
+      text: query.str
+    }
+    let {data: pordObj} = await $axios('/web/searchText', {params})
+
+    return {
+      pordObj
+    }
+  },
+  methods: {
+    jumpUrl(val) {
+      const routeMap = {
+        'news': 'article-page', // 文章栏目
+        'product': 'products' // 产品栏目
+      }
+      
+      return routeMap[val]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.article-page-list {
+  box-sizing: border-box;
+  .article-page-item {
+    margin: 0;
+    height: min-content;
+    min-height: 12.875rem;
+    border: 1px solid #e6e8ec;
+    article {
+      padding: 1.125rem;
+      font-size: .875rem;
+      .title {
+        margin-top: .9375rem;
+        color: #212222;
+        font-size: .875rem;
+      }
+      .article-page-content {
+        margin: 1.25rem 0;
+        height: 5rem;
+        color: #878b90;
+      	-webkit-line-clamp: 4;
+      }
+      >div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #878b90;
+        img {
+          width: 1.6875rem;
+          height: 1rem;
+        }
+      }
+    }
+  }
+}
+
+</style>