From 3bf9644c512d06257095f7714491d396855efbb8 Mon Sep 17 00:00:00 2001
From: Shxuuer <a2711492759@163.com>
Date: Tue, 16 Apr 2024 13:10:43 +0800
Subject: [PATCH] feat(comment like): add comment like function

---
 src/components/Articles/CommentList.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/Articles/CommentList.vue b/src/components/Articles/CommentList.vue
index d52e5ae..9fc7f65 100644
--- a/src/components/Articles/CommentList.vue
+++ b/src/components/Articles/CommentList.vue
@@ -51,6 +51,9 @@
             </template>
 
             <template slot="actions">
+              <span @click="commentLike(item.id, item.me.like)">
+                <LikeOutlined :style="{color: item.me.like ? 'red' : '#8c8c8c'}"/> {{item.likes}}
+              </span>
               <span
                 v-if="item.user.id===user.id"
                 :disabled="btnCommentSubmitting"
@@ -73,7 +76,7 @@
             </template>
             <comment-list
               :id="id" :comments="comments" :pageSize="3" :parent="item.id"/>
-          </a-comment>
+            </a-comment>
         </a-list-item>
       </template>
     </a-list>
@@ -83,9 +86,11 @@
 <script>
 import axios from 'axios'
 import { mapGetters } from 'vuex'
+import { LikeOutlined } from '@ant-design/icons-vue'
 
 export default {
   name: 'CommentList',
+  components: { LikeOutlined },
   props: ['parent', 'pageSize', 'id'],
   data () {
     return {
@@ -104,6 +109,7 @@ export default {
       const result = []
       this.comments.forEach(item => {
         if (item.parent === this.parent) {
+          item.liked = this.doLikeHaveMe(item.id)
           result.push(item)
         }
       })
@@ -148,6 +154,20 @@ export default {
         await this.$store.commit('updateComments', this.id)
         this.commentsLoading = false
       })
+    },
+    /**
+     * 点赞评论
+     */
+    commentLike (id, liked) {
+      if (liked) {
+        axios.delete('/articles/comments/' + id + '/like').then(async (res) => {
+          this.$message.success('取消点赞成功')
+        })
+        return
+      }
+      axios.post('/articles/comments/' + id + '/like').then(async (res) => {
+        this.$message.success('点赞成功')
+      })
     }
   }
 }