✨ 隐藏评论功能

components/common/comment/main.vue

@@ -40,20 +40,23 @@
               <el-avatar v-show="!comment.commenter.userAvatarURL"
                          src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
             </el-col>
-            <el-col :xs="21" :sm="23" :xl="23">
+            <el-col :xs="21" :sm="23" :xl="23" style="padding-bottom: 10px;" v-if="comment.status === 0">
               <el-col style="margin-left: 1rem;">
                 <el-col v-show="comment.commentOriginalCommentId">
                   <el-col :span="16">
                     <el-link rel="nofollow" @click="onRouter('user', comment.commenter.userAccount)" :underline="false"
                              class="text-default">{{ comment.commenter.userNickname }}
                     </el-link>
-                    <small class="text-default" style="margin: 0 0.2rem">回复了</small><span style="font-weight: bold;"> {{comment.commentOriginalAuthorNickname}}</span>
+                    <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 rel="nofollow" :underline="false" title="查看原评论"
                              @click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)"><i
-                      class="el-icon-reading"></i> 查看原评论</el-link>
+                      class="el-icon-reading"></i> 查看原评论
-                    <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain" style="margin-left: 5px;">
+                    </el-link>
+                    <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain"
+                            style="margin-left: 5px;">
                       作者
                     </el-tag>
                   </el-col>
@@ -65,7 +68,8 @@
                     </el-link>
                   </el-col>
                   <el-col :span="8" class="text-right" style="padding-right: 1rem;">
-                    <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain" style="margin-left: 5px;">
+                    <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain"
+                            style="margin-left: 5px;">
                       作者
                     </el-tag>
                   </el-col>
@@ -81,7 +85,33 @@
               </el-col>
               <el-col :span="8" v-if="user" class="text-right" style="margin-bottom: 0.5rem;">
                 <el-link rel="nofollow" :underline="false" title="评论" @click.native="replyComment(comment)"><i
-                  class="el-icon-s-comment"></i> 评论</el-link>
+                  class="el-icon-s-comment"></i> 评论
+                </el-link>
+              </el-col>
+            </el-col>
+            <el-col :xs="21" :sm="23" :xl="23" style="padding-bottom: 10px;" v-else>
+              <el-col style="margin-left: 1rem;">
+                <el-col :span="16">
+                  <el-link rel="nofollow" @click="onRouter('user', comment.commenter.userAccount)" :underline="false"
+                           class="text-default">{{ comment.commenter.userNickname }}
+                  </el-link>
+                </el-col>
+                <el-col :span="8" class="text-right" style="padding-right: 1rem;">
+                  <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain"
+                          style="margin-left: 5px;">
+                    作者
+                  </el-tag>
+                </el-col>
+              </el-col>
+              <el-col style="padding: 1rem;">
+                <el-col>
+                  <div class="vditor-reset comment-content">
+                    <small>内容不相关已被隐藏！</small>
+                  </div>
+                </el-col>
+              </el-col>
+              <el-col :span="16" style="padding-left: 1rem;">
+                <el-link rel="nofollow" :underline="false" class="text-default">{{ comment.timeAgo }}</el-link>
               </el-col>
             </el-col>
           </el-card>
@@ -89,7 +119,7 @@
             margin-top: 0.3rem;border-radius: 0.5rem;cursor: pointer;display: none;">
             <el-col v-show="comment.commentOriginalCommentId" :span="2">
               <p>
-                <span>{{comment.commentOriginalAuthorNickname}} :</span>
+                <span>{{ comment.commentOriginalAuthorNickname }} :</span>
               </p>
             </el-col>
             <el-col v-show="comment.commentOriginalCommentId" :span="20">
@@ -103,10 +133,10 @@
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
 
-  export default {
+export default {
   name: "Comment",
   props: {
     fetching: {
@@ -254,9 +284,7 @@
           url: this.tokenURL.URL,
           linkToImgUrl: this.tokenURL.linkToImageURL,
           token: this.tokenURL.token,
-            filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
-            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-            replace('/\\s/g', '')
         },
         height: data.height,
         counter: 102400,
@@ -400,7 +428,7 @@
         if (element) {
           let actualTop = element.offsetTop;
           let current = element.offsetParent;
-            while (current !== null){
+          while (current !== null) {
             actualTop += current.offsetTop;
             current = current.offsetParent;
           }
@@ -419,7 +447,7 @@
   destroyed() {
     this.$store.commit('comment/clearListData')
   }
-  }
+}
 </script>
 
 <style scoped>