feat:新增帖子详情页面点赞的功能 (#76)

CloudStriver · Feb 21, 2024 · ea74dde · ea74dde
1 parent c716780
commit ea74dde
Showing 1 changed file with 41 additions and 4 deletions.
diff --git a/src/views/posts/post.vue b/src/views/posts/post.vue
@@ -30,10 +30,18 @@
                     </section>
                     <footer class="detail-footer">
                         <div class="situation">
-                            <div class="like">
+                            <div 
+                                class="like"
+                                v-if="!postDetail.liked"
+                                @click="likePost()"
+                            >
                                 <i class="iconfont icon-a-dianzan2"></i>
                                 <div>点赞 {{ postDetail.likeCount }}</div>
                             </div>
+                            <div class="liked" v-if="postDetail.liked">
+                                <i class="iconfont icon-a-dianzan2"></i>
+                                <div>已点赞 {{ postDetail.likeCount }}</div>
+                            </div>
                             <div class="remark">
                                 <i class="iconfont icon-a-xiaoxi1"></i>
                                 <div>评论 {{ postDetail.commentCount }}</div>
@@ -85,7 +93,7 @@ import { turnTime } from '@/utils/public'
 import { ref, onMounted, computed } from 'vue'
 import type { responseGetPost } from './utils'
 import router from '@/router'
-import { successMsg } from '@/utils/message'
+import { errorMsg, successMsg } from '@/utils/message'
 
 const store = useStore()
 const myUserId = ref('')
@@ -116,6 +124,28 @@ onMounted(() => {
     getPost()
 })
 
+const likePost = () => {
+    if (myUserId.value === '') {
+        errorMsg('请先登录')
+        return
+    }
+    else if (myUserId.value === postDetail.value.author.userId) {
+        errorMsg('不能给自己点赞')
+        return
+    }
+    else {
+        post('/relation/createRelation', {
+            toId: postId,
+            toType: 4,
+            relationType: 1
+        })
+        .then(() => {
+            postDetail.value.liked = true
+            postDetail.value.likeCount++
+        })
+    }
+}
+
 const deletePost = () => {
     isShowDeletePost.value = true
     isShowSetting.value = false
@@ -171,8 +201,6 @@ const getMyUserId = () => {
     else {
         myUserId.value = ''
     }
-    console.log(myUserId.value);
-    
 }
 
 const getPost = () => {
@@ -400,6 +428,7 @@ const getPost = () => {
                         display: flex;
 
                         .like, 
+                        .liked,
                         .remark,
                         .collect,
                         .share,
@@ -414,6 +443,14 @@ const getPost = () => {
                                 margin-right: 5px;
                             }
                         }
+
+                        .liked {
+                            color: #6d99ec;
+                            font-weight: 600;
+                        }
+                        .liked:hover {
+                            color: #494848;
+                        }
                     }
                 }
             }