feat(feed): 新增"动态点赞列表"

1. 新增动态点赞列表 #378

src/page/article/ArticleLikes.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="m-art-likes">
+    <header class="m-pos-r" style="padding-top: 0.9rem">
+      <div class="m-pos-f m-box m-justify-bet m-aln-center m-head-top m-bb1 m-main">
+        <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+          <svg class='m-style-svg m-svg-def' @click='goBack'>
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+          </svg>
+        </div>
+        <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">点赞列表</div>
+        <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end"></div>
+      </div>
+    </header>
+    <main>
+      <jo-load-more
+      ref="loadmore"
+      :autoLoad="false"
+      @onRefresh="onRefresh"
+      @onLoadMore="onLoadMore">
+        <user-item v-for="({ user, id }, index) in likes" :key="`likes-${id}-${user.id}-${index}`" :user="user" />
+      </jo-load-more>
+    </main>
+  </div>
+</template>
+<script>
+import UserItem from "@/components/UserItem.vue";
+export default {
+  name: "likes",
+  components: {
+    UserItem
+  },
+  data() {
+    return {
+      likes: [],
+      maxId: 0
+    };
+  },
+  computed: {
+    type() {
+      return this.$route.meta.type;
+    },
+    article() {
+      return this.$route.params.article;
+    },
+    url() {
+      // 动态  GET /feeds/:feed/likes
+      // 资讯  GET /news/:news/likes
+      // 帖子  GET /plus-group/group-posts/:post/likes
+
+      switch (this.type) {
+        case "feed":
+          return `/feeds/${this.article}/likes`;
+        case "news":
+          return `/news/${this.article}/likes`;
+        case "post":
+          return `/plus-group/group-posts/${this.article}/likes`;
+      }
+    }
+  },
+  methods: {
+    goBack() {
+      window.history.length <= 1
+        ? this.$router.push(`/feeds/${this.article}`)
+        : this.$router.go(-1);
+    },
+    onRefresh(callback) {
+      //  名称    类型       描述
+      //  limit   Integer   获取条数，默认 20
+      //  after   Integer   id 获取之后数据，默认 0
+      this.$http
+        .get(this.url, {
+          params: {
+            limit: 15
+          }
+        })
+        .then(({ data = [] }) => {
+          this.likes = data;
+          data.length > 0 && (this.maxId = data[data.length - 1].id);
+          callback(data.length < 15);
+        });
+    },
+    onLoadMore() {
+      this.$http
+        .get(this.url, {
+          params: {
+            limit: 15,
+            after: this.maxId
+          }
+        })
+        .then(({ data = [] }) => {
+          this.likes = [...this.likes, ...data];
+          data.length > 0 && (this.maxId = data[data.length - 1].id);
+          callback(data.length < 15);
+        });
+    }
+  },
+  mounted() {
+    this.$refs.loadmore.beforeRefresh();
+  }
+};
+</script>

src/page/feed/feedDetail.vue

@@ -28,6 +28,7 @@
   <!-- 内容 -->
   <main class="m-flex-shrink1 m-flex-grow1 m-art m-main">
     <div class="m-art-body">
+      <h2 v-if="title">{{ title }}</h2>
       <video
         v-if="!!video"
         class="feed-detail-video"
@@ -51,8 +52,8 @@
       <p class="m-text-box" v-html="formatBody(feedContent)"></p>
     </div>
     <div class="m-box m-aln-center m-justify-bet m-art-foot">
-      <div class="m-flex-grow1 m-flex-shrink1 m-box m-aln-center m-art-like-list">
-        <template v-if='likeCount > 0'>
+      <div class="m-flex-grow1 m-flex-shrink1 m-art-like-list">
+        <router-link tag="div" class="m-box m-aln-center" to="likers" append v-if='likeCount > 0'>
           <ul class="m-box m-flex-grow0 m-flex-shrink0">
             <li 
             :key="id"
@@ -64,7 +65,7 @@
             </li>
           </ul>
           <span>{{ likeCount | formatNum }}人点赞</span>
-        </template>
+        </router-link>
       </div>
       <div class="m-box-model m-aln-end m-art-info">
         <span>发布于{{ time | time2tips }}</span>
@@ -152,6 +153,9 @@ export default {
     video_file() {
       return this.video ? `/api/v2/files/${this.video.video_id}` : false;
     },
+    title() {
+      return this.feed.title;
+    },
     cover_file() {
       return this.video ? `/api/v2/files/${this.video.video_id}` : false;
     },

src/routers/feed.js

@@ -1,6 +1,8 @@
 const feed = () => import(/* webpackChunkName: 'feed' */ "../page/feed/feed");
 const feedDetail = () =>
   import(/* webpackChunkName: 'feed' */ "../page/feed/feedDetail");
+const likes = () =>
+  import(/* webpackChunkName: 'feed' */ "@/page/article/ArticleLikes.vue");
 export default [
   {
     name: "feeds",
@@ -24,5 +26,13 @@ export default [
     path: "/feeds/:feedID(\\d+)",
     component: feedDetail,
     meta: { title: "动态详情", keepAlive: true }
+  },
+  {
+    path: "/feeds/:article(\\d+)/likers",
+    component: likes,
+    meta: {
+      title: "点赞列表",
+      type: "feed"
+    }
   }
 ];