添加关键字检索

添加搜索结果页

src/components/foots/index.vue

@@ -18,6 +18,11 @@
         <p class="itemBox itemBox1">
           <span class="item">{{ infos.title && infos.title.name }}{{ infos.title && infos.title.value }}</span>
         </p>
+        <p class="itemBox itemBox1">
+          <el-input size="mini" placeholder="请输入关键字" v-model="searchName" class="search">
+            <el-button @click="btnSearch" slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </p>
       </div>
     </div>
   </div>
@@ -39,6 +44,7 @@ export default {
   },
   data() {
     return {
+      searchName: '',
       url: require('../../assets/sign.png'),
       gaurl: require('../../assets/gwab.png'),
       waurl: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=22010502000421',
@@ -52,6 +58,10 @@ export default {
     ...mapActions(['websiteQuery']),
     signClick(url) {
       window.open(url);
+    },
+    async btnSearch() {
+      sessionStorage.setItem('search', this.searchName);
+      this.$router.push('/searchList');
     }
   }
 };
@@ -60,11 +70,15 @@ export default {
 <style lang="scss" scoped>
 .foots {
   width: 100%;
-  height: 200px;
+  height: 230px;
   background-color: #0063b4;
   color: #fff;
+  .search {
+    width: 30%;
+    // margin: 0 auto;
+  }
   .main {
-    width: 45%;
+    width: 50%;
     display: flex;
     margin: 0 auto;
     padding-top: 2%;

src/router/index.js

@@ -38,6 +38,11 @@ const routes = [
     path: '/list/:code',
     name: 'list',
     component: () => import('../views/list.vue')
+  },
+  {
+    path: '/searchList',
+    name: 'searchList',
+    component: () => import('../views/searchList.vue')
   }
 ];
 

src/store/index.js

@@ -11,7 +11,8 @@ const api = {
   contentsFetch: '/api/cms/contents/fetch',
   pagesFetch: '/api/cms/pages/fetch',
   imgNewsFetch: '/api/cms/imgnews/fetch',
-  sourceQuery: '/api/code/dictionary/query'
+  sourceQuery: '/api/code/dictionary/query',
+  search: '/api/cms/contents/search'
 };
 
 const state = () => ({
@@ -26,10 +27,16 @@ const state = () => ({
   contentsItem: null,
   pagesItem: null,
   upwindow: [],
-  dict: {}
+  dict: {},
+  searchList: []
 });
 
 const actions = {
+  async search ({ commit }, { search }) {
+    const res = await $axios.get(api.search, { search });
+    commit('searchQuery', res);
+    return res;
+  },
   async sourceQuery ({ commit }) {
     const res = await $axios.get(api.sourceQuery, { parentCode: 'source' });
     commit('sourceQuery', res);
@@ -105,6 +112,9 @@ const actions = {
 };
 
 const mutations = {
+  searchQuery(state, payload) {
+    state.searchList = payload.data;
+  },
   sourceQuery(state, payload) {
     state.dict.source = payload.data;
   },

src/views/searchList.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="list">
+    <div class="listHome">
+      <div class="box" v-if="searchList.length > 0">
+        <div class="text" v-for="(item, index) in searchList" :key="index">
+          <el-image class="jt" :src="icon"></el-image>
+          <div class="title" @click="newClick(item)">{{ item.title }}</div>
+          <span class="date">{{ item.date | dates }}</span>
+        </div>
+      </div>
+      <el-divider v-else>暂无数据</el-divider>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'searchList',
+  components: {},
+  computed: {
+    ...mapState(['searchList'])
+  },
+  data() {
+    return {
+      icon: require('../assets/jt.png')
+    };
+  },
+  async mounted() {
+    const searchName = sessionStorage.getItem('search');
+    await this.search({ search: searchName });
+  },
+  methods: {
+    ...mapActions(['search']),
+    // 列表点击
+    newClick(e) {
+      this.$router.push(`/details/${e._id}`);
+    }
+  },
+  filters: {
+    dates(e) {
+      return moment(e).format('YYYY-MM-DD');
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.divider {
+  width: 70%;
+  margin: 5% auto;
+}
+.list {
+  width: 60%;
+  margin: 0 auto;
+  margin-bottom: 5%;
+  .listHome {
+    width: 100%;
+    display: flex;
+    .listBoxLeft {
+      width: 20%;
+      margin-top: 3%;
+      margin-right: 5%;
+    }
+    .box, .isnewbox {
+      width: 100%;
+      margin-top: 3%;
+    }
+    .box {
+      .text {
+          display: flex;
+          width: 100%;
+          margin-bottom: 5px;
+          border-bottom: 1px dashed #999;
+          .jt {
+            width: 10px;
+            height: 10px;
+            vertical-align: middle;
+            margin-top: 2%;
+            margin-left: 5px;
+          }
+          .title {
+            margin-left: 5px;
+            cursor: pointer;
+            width: 85%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 20px;
+            line-height: 55px;
+            font-weight: 500;
+            font-family: '宋体';
+          }
+          .date {
+            width: 10%;
+            color: #999;
+            line-height: 2em;
+            font-size: 14px;
+            text-align: right;
+            line-height: 55px;
+          }
+        }
+    }
+  }
+  .pagination {
+    margin-bottom: 5%;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.titlebox {
+  display: flex;
+  width: 100%;
+  border-bottom: 1px dashed #999;
+  flex-wrap: wrap;
+  .left {
+    width: 50%;
+    line-height: 38px;
+    .text {
+      margin-left: 5px;
+    }
+  }
+  .left span:hover {
+    color: #018dff ;
+    cursor: pointer;
+  }
+}
+</style>