feat(news/search): 增加搜索资讯功能

1. 修改 'loadmore' 组件初始化判断;
2. 增加 '搜索资讯功能'

src/components/loadMore.vue

@@ -302,7 +302,7 @@ export default {
         if (typeof this.onLoadMore === 'function') {
           this.scEl.onscroll = this.handleScrolling();
         }
-        if (!this.fulled()) {
+        if (typeof this.onRefresh === 'function' && !this.fulled()) {
           this.beforeRefresh();
         }
       });

src/page/news/news.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-news">
     <head-top :go-back='true' title='资讯' :append='true'>
-      <router-link to='serach' append tag='svg' slot='append'>
+      <router-link to='search' append tag='svg' slot='append'>
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-search"></use>
       </router-link>
     </head-top>

src/page/news/newsSearch.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="p-news-search">
+    <head-top :go-back='true' :append='true' title='搜索资讯'>
+      <div slot='append' class="head-top-cancel" @click='beforeSearch'>搜索</div>
+      <div slot='title' class="p-news-search-input">
+        <input type="text" v-model='keyword' @keypress='beforeSearch($event)'>
+      </div>
+    </head-top>
+    <div></div>
+    <load-more
+    ref='loadmore'
+    :onRefresh='topEvent'
+    :onLoadMore='onLoadMore'
+    class="p-news-search-body">
+      <news-item
+      v-for='news in list'
+      v-if='news.id'
+      :key='news.id'
+      :news='news'
+      />
+    </load-more>
+  </div>
+</template>
+<script>
+import newsItem from './components/newsItem.vue';
+export default {
+  name: 'news-search',
+  components: {
+    newsItem
+  },
+  data() {
+    return {
+      keyword: '',
+      list: []
+    };
+  },
+  computed: {
+    after() {
+      const len = this.list.length;
+      return len > 0 ? this.list[len - 1].id : 0;
+    },
+    topEvent() {
+      const len = this.keyword.length;
+      return len > 0 ? this.onRefresh : null;
+    }
+  },
+  methods: {
+    beforeSearch(e) {
+      if (!this.keyword) return;
+      const type = e.type;
+      switch (type) {
+        case 'click':
+          return this.onRefresh();
+        case 'keypress':
+          return e.keyCode === 13 && this.onRefresh();
+      }
+    },
+    onRefresh() {
+      if (!this.keyword) {
+        return this.$refs.loadmore.topEnd(!1);
+      }
+      this.$http
+        .get(`/news`, {
+          params: {
+            limit: 15,
+            key: this.keyword
+          }
+        })
+        .then(({ data } = []) => {
+          this.list = data;
+          this.$refs.loadmore.topEnd(!(data.length < 15));
+        });
+    },
+    onLoadMore() {
+      if (!this.keyword) {
+        return this.$refs.loadmore.bottomEnd(true);
+      }
+      this.$http
+        .get(`/news`, {
+          params: {
+            limit: 15,
+            key: this.keyword,
+            after: this.after
+          }
+        })
+        .then(({ data } = []) => {
+          data.length > 0 && (this.list = [...this.list, ...this.data]);
+          this.$refs.loadmore.bottomEnd(data.length < 15);
+        });
+    }
+  }
+};
+</script>
+<style lang='less' src='./style/newsSearch.less'>
+
+</style>

src/page/news/style/newsSearch.less

@@ -0,0 +1,15 @@
+.p-news-search {
+  &-input {
+    width: 120%;
+    margin-left: -13%;
+    input {
+      color: #59b6d7;
+      padding: 10px;
+      width: 530px;
+      height: 55px;
+      font-size: 32px;
+      border-radius: 10px;
+      background-color: #ebebeb;
+    }
+  }
+}

src/routers/news.js

@@ -1,4 +1,6 @@
 const news = () => import(/* webpackChunkName: 'news' */ '../page/news/news');
+const newsSearch = () =>
+  import(/* webpackChunkName: 'news' */ '../page/news/newsSearch');
 export default [
   {
     path: '/news',
@@ -8,5 +10,14 @@ export default [
       keepAlive: true,
       requiresAuth: true
     }
+  },
+  {
+    path: '/news/search',
+    component: newsSearch,
+    meta: {
+      title: '搜索',
+      keepAlive: true,
+      requiresAuth: true
+    }
   }
 ];