修复了一些已知问题

修复了一些已知问题

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,
+      comments: state => state.comment.list.data,
-      isFetchingComment: state => state.comment.fetching,
+      isFetchingComment: state => state.comment.list.fetching,
-      isPostingComment: state => state.comment.posting,
+      // 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() {

pages/chats/_account.vue

@@ -8,7 +8,7 @@
         <el-button type="primary" :loading="loading" @click="send" plain>发送</el-button>
       </el-col>
       <el-col style="margin-top: 2rem;" id="messagesContent">
-        <el-col v-for="message in Array.prototype.reverse.call(messages)" :key="message.dataId">
+        <el-col v-for="message in messages" :key="message.dataId">
           <el-col v-if="message.from === user.account">
             <el-col :span="22" style="text-align: right;">
               <div class="from-message">
@@ -167,6 +167,9 @@ export default {
         content: await _ts.contentEditor.getHTML()
       }
       _ts.messages.push(message);
+      _ts.messages.sort((a, b) => {
+        return b.dataId - a.dataId;
+      });
       _ts.contentEditor.setValue('')
       _ts.$axios.$post('/api/openai/chat', {
         message: message.content
@@ -178,6 +181,9 @@ export default {
           dataId: new Date().getTime(),
           content: res[0].message.content
         });
+        _ts.messages.sort((a, b) => {
+          return b.dataId - a.dataId;
+        });
       });
     }
   },

pages/index.vue

@@ -20,7 +20,7 @@ export default {
   },
   watch: {
     '$route'(to, from) {
-      if (from.query.page && to.query.page) {
+      if ((to.query.page || 1) !== (from.query.page || 1)) {
         this.$router.go()
       }
     }

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,
+    list: {
-    posting: false,
+      fetching: false,
-    data: getDefaultListData()
+      data: getDefaultListData()
+    }
   }
 }
 
 export const mutations = {
   // 请求列表
   updateListFetching(state, action) {
-    state.fetching = action
+    state.list.fetching = action
   },
   updateListData(state, action) {
-    state.data =  {
+    state.list.data = action
-      data: action,
-      pagination: {
-        page: 1
-      }
-    }
   },
   clearListData(state) {
-    state.data = getDefaultListData()
+    state.list.data = getDefaultListData()
   },
 
   // 发布评论
@@ -59,28 +55,23 @@ export const mutations = {
 }
 
 export const actions = {
-  fetchList({ commit, rootState }, params = {}) {
+  fetchList({ commit, state }, 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())
     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)