🎨 评论组件优化

components/common/comment/main.vue

@@ -44,14 +44,16 @@
               <el-col style="margin-left: 1rem;">
                 <el-col v-show="comment.commentOriginalCommentId">
                   <el-col :span="16">
-                    <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
+                    <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)"
+                             class="text-default"
                              rel="nofollow">{{ comment.commenter.userNickname }}
                     </el-link>
                     <small class="text-default" style="margin: 0 0.2rem">回复了</small><span
                     style="font-weight: bold;"> {{ comment.commentOriginalAuthorNickname }}</span>
                   </el-col>
                   <el-col :span="8" class="text-right" style="padding-right: 1rem;">
-                    <el-link :underline="false" @click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)" rel="nofollow"
+                    <el-link :underline="false"
+                             @click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)" rel="nofollow"
                              title="查看原评论"><i
                       class="el-icon-reading"></i> 查看原评论
                     </el-link>
@@ -63,7 +65,8 @@
                 </el-col>
                 <el-col v-show="!comment.commentOriginalCommentId">
                   <el-col :span="16">
-                    <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
+                    <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)"
+                             class="text-default"
                              rel="nofollow">{{ comment.commenter.userNickname }}
                     </el-link>
                   </el-col>
@@ -92,7 +95,8 @@
             <el-col :sm="23" :xl="23" :xs="21" style="padding-bottom: 10px;" v-else>
               <el-col style="margin-left: 1rem;">
                 <el-col :span="16">
-                  <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
+                  <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)"
+                           class="text-default"
                            rel="nofollow">{{ comment.commenter.userNickname }}
                   </el-link>
                 </el-col>
@@ -115,7 +119,7 @@
               </el-col>
             </el-col>
           </el-card>
-          <el-col :id="'original-' + comment.commentOriginalCommentId" style="background-color: #d9d9d9;padding-left: 1.5rem;
+          <el-col v-if="comment.commentOriginalCommentId" :id="'original-' + comment.commentOriginalCommentId" style="background-color: #d9d9d9;padding-left: 1.5rem;
             margin-top: 0.3rem;border-radius: 0.5rem;cursor: pointer;display: none;">
             <el-col :span="2" v-show="comment.commentOriginalCommentId">
               <p>
@@ -133,29 +137,21 @@
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
-  import apiConfig from '~/config/api.config';
+import apiConfig from '~/config/api.config';
 
-  export default {
+export default {
   name: "Comment",
   props: {
     fetching: {
       type: Boolean,
       default: false
     },
-      user: {
-        type: Object,
-        default: false
-      },
     authorId: {
       type: Number,
       default: false
     },
-      avatar: {
-        type: String,
-        default: ''
-      },
     title: {
       type: String,
       default: ''
@@ -165,6 +161,12 @@
       required: true
     }
   },
+  fetch() {
+    let {store} = this.$nuxt.context
+    return Promise.all([
+      store.dispatch('comment/fetchList', {post_id: this.postId})
+    ])
+  },
   computed: {
     ...mapState({
       comment: state => state.comment.data,
@@ -172,7 +174,9 @@
       isPostingComment: state => state.comment.posting,
       constants: state => state.global.constants,
       language: state => state.global.language,
-        isMobile: state => state.global.isMobile
+      isMobile: state => state.global.isMobile,
+      user: state => state.auth.user,
+      avatar: state => state.auth.user?.avatarUrl
     }),
     isFetching() {
       // 1. 宿主组件还在加载时，列表和 tool 都呈加载状态
@@ -357,17 +361,11 @@
           }
           _ts.contentEditor.setValue('');
           _ts.$set(_ts, 'drawer', false);
-            _ts.getComments();
+          _ts.$fetch()
         }
         _ts.$set(_ts, 'loading', false);
       })
     },
-      getComments() {
-        // 每次重新获取数据时都需要回到评论框顶部，因为都是新数据
-        this.$store.dispatch('comment/fetchList', {
-          post_id: this.postId
-        })
-      },
     gotoLogin() {
       this.$emit('gotoLogin');
     },
@@ -405,8 +403,8 @@
       // 评论渲染
       const previewElements = document.getElementsByClassName("comment-content");
       if (previewElements && previewElements.length > 0) {
-          for (let i in previewElements) {
+        for (let i = 0; i<previewElements.length; i++) {
-            let previewElement = previewElements[i];
+          const previewElement = previewElements[i];
           Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
           Vue.VditorPreview.highlightRender({
             "enable": true,
@@ -456,7 +454,7 @@
   destroyed() {
     this.$store.commit('comment/clearListData')
   }
-  }
+}
 </script>
 
 <style scoped>

pages/article/_article_id.vue

@@ -144,7 +144,7 @@
       </el-card>
     </el-col>
     <el-col>
-      <comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
+      <comment-box :fetching="isFetching" :title="article.articleTitle"
                    :post-id="routeArticleId" :authorId="article.articleAuthorId" @gotoLogin="gotoLogin"></comment-box>
     </el-col>
     <el-col>
@@ -179,12 +179,12 @@ export default {
   validate({params, store}) {
     return params.article_id && !isNaN(Number(params.article_id))
   },
-  fetch({store, params, error}) {
+  fetch() {
+    let {store, params, error} = this.$nuxt.context
     return Promise.all([
       store
         .dispatch('article/fetchDetail', params)
-        .catch(err => error({statusCode: 404})),
+        .catch(err => error({statusCode: 404}))
-      store.dispatch('comment/fetchList', {post_id: params.article_id})
     ])
   },
   computed: {

plugins/axios.js

@@ -23,8 +23,6 @@ export default function ({app, $axios, store, redirect}) {
           Message.error(message ? message : '服务异常')
         } else if (response.data.code === 401) {
           app.$auth.logout()
-        } else if (response.data.code === 402) {
-          app.$auth.strategy.token.reset()
         } else if (response.data.code === 404) {
           Message.error('操作失败，请稍后再试......')
         } else if (response.data.code === 500) {