feat(news): Add news-list

src/components/HeadTop.vue

@@ -210,12 +210,13 @@ export default {
     top: 50%;
     transform: translateY(-50%);
     font-size: 32px;
-    .v-icon {
+    .v-icon,
+    svg {
       width: 40px;
       height: 40px;
       margin-right: 4px;
       margin-left: -4px;
-      + .v-icon {
+      + & {
         margin-left: 10px;
       }
     }

src/page/news/components/newsFilter.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="[prefixCls, {showAll}]">
+    <div :class="`${prefixCls}--head`">
+      <span>点击以编辑</span>
+      <div>
+        <button @click='onOk'>{{ editing ? '完成' : '编辑' }}</button>
+        <button @click='showEditor'>收起</button>
+      </div>
+    </div>
+    <div :class="`${prefixCls}--list__wrap`">
+      <div :class="`${prefixCls}--switch`" @click='showEditor' v-show='!showAll'>
+        <svg>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-arrow-r"></use>
+        </svg>
+      </div>
+      <span :class="`${prefixCls}--list__label`">我的订阅</span>
+      <div :class="[`${prefixCls}--list`, { editing }]">
+        <div 
+        :class="[`${prefixCls}--list__item`, { active: ~~(currentCate.id) === 0  }]" 
+        @click="chooseCate($event, {id: 0, name:'推荐'})"
+        >推荐</div>
+        <div :class="[`${prefixCls}--list__item`, { active: myCate.id === currentCate.id }]" v-for='myCate in myCates' @click='chooseCate($event, myCate)' :key='`myCate-${myCate.id}`'>{{ myCate.name }}</div>
+      </div>
+    </div>
+    <div :class="`${prefixCls}--list__wrap`" v-show='showAll'>
+      <span :class="`${prefixCls}--list__label`">更多订阅</span>
+      <div :class="`${prefixCls}--list`">
+        <div :class="[`${prefixCls}--list__item`]" v-for='cate in moreCates' @click='chooseCate($event, cate)' :key='`moreCate-${cate.id}`'>{{ cate.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const prefixCls = 'news__filter';
+export default {
+  name: 'NewsFilter',
+  data() {
+    return {
+      prefixCls,
+      editing: false,
+      showAll: false,
+
+      myCates: [],
+      moreCates: [],
+
+      currentCate: {
+        id: 0,
+        name: '推荐'
+      }
+    };
+  },
+
+  watch: {
+    editing(val) {},
+    showAll(val) {
+      !val && (this.editing = !1);
+    }
+  },
+  methods: {
+    showEditor() {
+      this.showAll = !this.showAll;
+    },
+    onOk() {
+      if (this.editing) {
+        this.editing = false;
+        const follows = this.myCates.map(c => c.id).join(',');
+        this.$http.patch('/news/categories/follows', {
+          follows
+        });
+        this.showAll = false;
+        this.$emit('onOk', this.myCates);
+      } else {
+        this.editing = true;
+      }
+    },
+    chooseCate(e, cate) {
+      if (this.showAll) {
+        if (this.editing) {
+          const index = this.myCates.findIndex(c => c.id === cate.id);
+          if (index > -1) {
+            this.moreCates.push(cate);
+            this.myCates.splice(index, 1);
+          } else {
+            const index2 = this.moreCates.findIndex(c => c.id === cate.id);
+            this.myCates.push(cate);
+            this.moreCates.splice(index2, 1);
+          }
+        } else {
+          this.editing = true;
+        }
+      } else {
+        if (cate.id !== this.currentCate.id) {
+          const { target: el } = e;
+          this.currentCate = { ...cate, el };
+          this.$emit('change', this.currentCate);
+        }
+      }
+    },
+    async fetchCates() {
+      const {
+        data: { my_cates: myCates, more_cates: moreCates } = {}
+      } = await this.$http.get('/news/cates');
+      this.myCates = myCates ? [...myCates] : [];
+      this.moreCates = moreCates ? [...moreCates] : [];
+    }
+  },
+
+  mounted() {
+    this.fetchCates();
+  }
+};
+</script>
+<style lang='less' src='../style/newsFilter.less'>
+
+</style>

src/page/news/components/newsItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="news-detail">
+    <div class="news-detail--body">
+      <h2>{{ title }}</h2>
+      <p>
+        <i class="news-cate">{{ cate }}</i>
+        <span>作者 {{ author }}</span><span>・{{ hits }}浏览</span><span>・{{ time | time2tips }}</span>
+      </p>
+    </div>
+    <div class="news-detail--poster" v-if='image'>
+      <img v-lazyload="image" alt="">
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: 'news-item',
+  props: ['news'],
+  data() {
+    return {
+      hits: 0,
+      cate: null,
+      image: null,
+      title: null,
+      author: null,
+      time: ''
+    };
+  },
+  methods: {
+    formatData() {
+      const {
+        hits = 0,
+        author = '',
+        image = {},
+        title = '',
+        created_at: createdAt,
+        category = {}
+      } = this.news;
+      this.hits = hits;
+      this.title = title;
+      this.author = author;
+      this.time = createdAt;
+      this.cate = category.name;
+      this.image = image ? `/api/v2/files/${image.id}` : null;
+    }
+  },
+  mounted() {
+    this.formatData();
+  }
+};
+</script>
+<style lang='less' src='../style/newsItem.less'>
+
+</style>

src/page/news/news.vue

@@ -1,11 +1,86 @@
 <template>
-    <div>
-        news page
-    </div>
+  <div class="p-news">
+    <head-top :go-back='true' title='资讯' :append='true'>
+      <router-link to='serach' append tag='svg' slot='append'>
+        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-search"></use>
+      </router-link>
+    </head-top>
+    <news-filter @change='onCateChange'></news-filter>
+    <load-more 
+    class="p-news--body"
+    :onRefresh='onRefresh'
+    :onLoadMore='onLoadMore'
+    ref='loadmore'
+    >
+      <news-item
+      v-for='news in list'
+      v-if='news.id'
+      :key='news.id'
+      :news='news'
+      />
+    </load-more>
+  </div>
 </template>
-
 <script>
-    export default {
-      name: 'newsIndex'
+import newsItem from './components/newsItem.vue';
+import newsFilter from './components/newsFilter';
+export default {
+  name: 'news-index',
+  components: {
+    newsItem,
+    newsFilter
+  },
+  data() {
+    return {
+      list: [],
+      currentCate: 0
+    };
+  },
+  computed: {
+    after() {
+      const len = this.list.length;
+      return len > 0 ? this.list[len - 1].id : 0;
+    }
+  },
+  methods: {
+    onCateChange({ id = 0 } = {}) {
+      this.list = [];
+      this.currentCate = id;
+      this.$refs.loadmore.beforeRefresh();
+    },
+    onRefresh() {
+      // GET /news
+      const params =
+        this.currentCate === 0
+          ? { limit: 10, recommend: 1 }
+          : { limit: 10, cate_id: this.currentCate };
+
+      this.$http
+        .get('/news', {
+          params
+        })
+        .then(({ data = [] } = {}) => {
+          this.list = data;
+          this.$refs.loadmore.topEnd(!(data.length < 10));
+        });
+    },
+    onLoadMore() {
+      const params =
+        this.currentCate === 0
+          ? { limit: 10, recommend: 1, after: this.after }
+          : { limit: 10, cate_id: this.currentCate, after: this.after };
+      this.$http
+        .get('/news', {
+          params
+        })
+        .then(({ data = [] } = {}) => {
+          this.list = [...this.list, ...data];
+          this.$refs.loadmore.bottomEnd(data.length < 10);
+        });
     }
-</script>
+  }
+};
+</script>
+<style lang="less" src='./style/news.less'>
+
+</style>

src/page/news/style/news.less

@@ -0,0 +1,17 @@
+.p-news {
+  &--nav {
+    display: flex;
+    position: fixed;
+    top: 90px;
+    padding-top: 0 !important;
+    width: 100%;
+    height: 85px;
+    border-bottom: 1px solid #ededed; /*no*/
+    background-color: #fff;
+  }
+
+  &--body {
+    padding-top: 90+85px;
+  }
+}
+