添加评论功能

nuxt.config.js

@@ -82,7 +82,8 @@ module.exports = {
     src: '~/plugins/browser.js',
     ssr: false
   },
-  { src: '~/plugins/vue-js-modal', mode: 'client' }
+  { src: '~/plugins/vue-js-modal', mode: 'client' },
+  { src: '~/plugins/vue-toasted', mode: 'client' }
   ],
 
   /*

package.json

@@ -25,7 +25,8 @@
     "moment": "^2.27.0",
     "nuxt": "^2.12.2",
     "vditor": "^3.3.3",
-    "vue-js-modal": "^2.0.0-rc.3"
+    "vue-js-modal": "^2.0.0-rc.3",
+    "vue-toasted": "^1.1.28"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^2.0.0",

pages/post/_id.vue

@@ -24,7 +24,7 @@
       .reward(@click="reward") 打赏
     .comment(id="comment")
       .comment-title 交流区
-        span(v-if="comments.length") ({{commentAmount}})
+        span(v-if="comments.length") ({{ commentAmount }})
       .comment-item(v-for="(item, index) in comments", :id="'comment_ID_' + item.comment_ID", :key="index")
         .comment-avatar
           img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + item.user_id")
@@ -35,6 +35,8 @@
           .comment-info {{ item.comment_date }}
             span.reply(@click="reply(item.comment_ID, null, true)" v-if="replyLastID === null && item.comment_ID === replyID") 取消回复
             span.reply(@click="reply(item.comment_ID, null)" v-else) 回复
+            span.reply(@click="check(item.comment_ID)" v-if="item.comment_approved === '0' && visitorInfo.manage") 通过审核
+            span.reply(@click="check(item.comment_ID, 2)" v-else-if="visitorInfo.manage") 设为垃圾评论
         .comment-item(v-for="(i, inx) in item.children", :id="'comment_ID_' + i.comment_ID", :key="inx", style="margin-top: 15px; margin-left: 50px; background-color: #eeeeee; border-radius: 4px;")
           .comment-avatar
             img(:src="i.comment_author_avatar_url ? i.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + i.user_id")
@@ -45,6 +47,8 @@
             .comment-info {{ i.comment_date }}
               span.reply(@click="reply(item.comment_ID, i.comment_ID)" v-if="replyLastID !== i.comment_ID") 回复
               span.reply(@click="reply(item.comment_ID, i.comment_ID, true)" v-else) 取消回复
+              span.reply(@click="check(i.comment_ID)" v-if="i.comment_approved === '0' && visitorInfo.manage") 通过审核
+              span.reply(@click="check(i.comment_ID, 2)" v-else-if="visitorInfo.manage") 设为垃圾评论
       p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容
       .comment-default-commit
         .login(v-if="!visitorToken", @click="login")
@@ -508,6 +512,27 @@ export default {
         })
       }
     },
+    async check (ID, type) {
+      const { data } = await this.$axios({
+        method: 'post',
+        url: process.env.baseURL + '/comments/check',
+        headers: {
+          Authorization: 'Bearer ' + this.visitorToken
+        },
+        data: {
+          ID,
+          type
+        }
+      })
+
+      if (data.status === 1) {
+        this.getCommentWithVisitorInfo(this.postID)
+        this.$toasted.show(type === 2 ? '已删除' : '已通过', {
+          position: 'top-center',
+          duration: 5000
+        })
+      }
+    },
     async getCommentWithVisitorInfo (postID) {
       // 获取评论
       const tmp = await this.$axios({

plugins/vue-toasted.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Toasted from 'vue-toasted'
+
+Vue.use(Toasted)

yarn.lock

@@ -8947,6 +8947,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://mirrors.huaweicloud.com/repository/npm/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-toasted@^1.1.28:
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.28.tgz#dbabb83acc89f7a9e8765815e491d79f0dc65c26"
+  integrity sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw==
+
 vue@^2.6.11:
   version "2.6.11"
   resolved "https://mirrors.huaweicloud.com/repository/npm/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"