feat(components): 评论组件增加分页

components/common/comment/main.vue

@@ -33,7 +33,7 @@
         后发布评论
       </el-col>
       <el-col>
-        <el-col :key="comment.idComment" v-for="comment in comment.data">
+        <el-col :key="comment.idComment" v-for="comment in comments.list">
           <el-card :id="'comment-' + comment.idComment" style="margin-top: 1rem;">
             <el-col :sm="1" :xl="1" :xs="3">
               <el-avatar :src="comment.commenter.userAvatarURL" v-show="comment.commenter.userAvatarURL"></el-avatar>
@@ -131,6 +131,19 @@
             </el-col>
           </el-col>
         </el-col>
+        <el-col>
+          <div class="vertical-container text-center">
+            <el-pagination :hide-on-single-page="true"
+                           layout="prev, pager, next"
+                           :page-size="comments.pageSize"
+                           :current-page="comments.pageNum"
+                           :total="comments.total"
+                           prev-text="上一页"
+                           next-text="下一页"
+                           @current-change="currentChange">
+            </el-pagination>
+          </div>
+        </el-col>
       </el-col>
     </el-col>
   </el-row>
@@ -155,23 +168,19 @@ export default {
     title: {
       type: String,
       default: ''
-    },
-    postId: {
-      type: Number,
-      required: true
     }
   },
   fetch() {
-    let {store} = this.$nuxt.context
+    let {store, params, query} = this.$nuxt.context
     return Promise.all([
-      store.dispatch('comment/fetchList', {post_id: this.postId})
+      store.dispatch('comment/fetchList', {post_id: params.article_id, page: query.page})
     ])
   },
   computed: {
     ...mapState({
-      comment: state => state.comment.data,
-      isFetchingComment: state => state.comment.fetching,
-      isPostingComment: state => state.comment.posting,
+      comments: state => state.comment.list.data,
+      isFetchingComment: state => state.comment.list.fetching,
+      // isPostingComment: state => state.comment.posting,
       constants: state => state.global.constants,
       language: state => state.global.language,
       isMobile: state => state.global.isMobile,
@@ -200,7 +209,8 @@ export default {
       loading: false,
       commentOriginalCommentId: 0,
       commentAuthorAvatar: '',
-      commentTitle: ''
+      commentTitle: '',
+      postId: 0
     }
   },
   methods: {
@@ -384,10 +394,19 @@ export default {
     },
     isAuthor(commentAuthorId) {
       return this.authorId === commentAuthorId;
+    },
+    currentChange(page) {
+      this.$router.push({
+        path: `/article/${this.postId}`,
+        query: {
+          page: page
+        }
+      })
     }
   },
   async mounted() {
     let _ts = this;
+    _ts.$set(_ts, 'postId', _ts.$route.params.article_id);
     _ts.$store.commit('setActiveMenu', 'post-article');
     if (_ts.loggedIn) {
       const responseData = await _ts.$axios.$get('/api/upload/token');
@@ -450,6 +469,11 @@ export default {
       if (isFetching) {
         this.cancelCommentReply()
       }
+    },
+    '$route'(to, from) {
+      if ((to.query.page || 1) !== (from.query.page || 1)) {
+        this.$fetch()
+      }
     }
   },
   destroyed() {

pages/article/_article_id.vue

@@ -145,7 +145,7 @@
     </el-col>
     <el-col>
       <comment-box :fetching="isFetching" :title="article.articleTitle"
-                   :post-id="routeArticleId" :authorId="article.articleAuthorId" @gotoLogin="gotoLogin"></comment-box>
+                   :authorId="article.articleAuthorId" @gotoLogin="gotoLogin"></comment-box>
     </el-col>
     <el-col>
       <el-dialog :visible.sync="dialogVisible">
@@ -207,9 +207,6 @@ export default {
     },
     isAdmin() {
       return this.$auth.hasScope('admin') || this.$auth.hasScope('blog_admin');
-    },
-    routeArticleId() {
-      return Number(this.$route.params.article_id);
     }
   },
   head() {

store/comment.js

@@ -9,34 +9,30 @@ export const LIKE_COMMENT_API_PATH = '/like/comment'
 
 const getDefaultListData = () => {
   return {
-    data: [],
+    comments: [],
     pagination: {}
   }
 }
 
 export const state = () => {
   return {
-    fetching: false,
-    posting: false,
-    data: getDefaultListData()
+    list: {
+      fetching: false,
+      data: getDefaultListData()
+    }
   }
 }
 
 export const mutations = {
   // 请求列表
   updateListFetching(state, action) {
-    state.fetching = action
+    state.list.fetching = action
   },
   updateListData(state, action) {
-    state.data =  {
-      data: action,
-      pagination: {
-        page: 1
-      }
-    }
+    state.list.data = action
   },
   clearListData(state) {
-    state.data = getDefaultListData()
+    state.list.data = getDefaultListData()
   },
 
   // 发布评论
@@ -59,28 +55,23 @@ export const mutations = {
 }
 
 export const actions = {
-  fetchList({ commit, rootState }, params = {}) {
-    // const { SortType } = rootState.global.constants
-
-    // 修正参数
-    // params = Object.assign(
-    //   {
-    //     page: 1,
-    //     per_page: 88
-    //   },
-    //   params
-    // )
-
-    // const isRestart = params.page === 1
-    // const isDescSort = params.sort === SortType.Desc
-
-    // 清空数据
-    // isRestart && commit('updateListData', getDefaultListData())
-    // commit('updateListData', getDefaultListData())
+  fetchList({ commit, state }, params = {}) {
+    // 清空已有数据
     commit('updateListFetching', true)
+    let currentData = JSON.parse(JSON.stringify(state)).list.data
+    if (Number(params.page) === currentData.pageNum) {
+      commit('updateListFetching', false)
+      return
+    }
+    let data = {
+      page: params.page || 1
+    }
+    commit('updateListData', getDefaultListData())
 
     return this.$axios
-      .$get(COMMENT_API_PATH + `${params.post_id}/comments`)
+      .$get(COMMENT_API_PATH + `${params.post_id}/comments`, {
+        params: data
+      })
       .then(response => {
         // isDescSort && response.result.data.reverse()
         commit('updateListData', response)