点赞

src/api/index.ts

@@ -220,10 +220,21 @@ export function fetchComments<T>(data: any) {
 
 export function fetchLikeComment<T>(userId: any, id: any) {
     return post<T>({
-        url: 'comment​/like',
+        url: '/comment/like',
         data: {
             userId: userId,
             targetId: id
         }
     })
 }
+
+
+export function fetchLikeMoments<T>(userId: any, id: any) {
+    return post<T>({
+        url: '/moments/like',
+        data: {
+            userId: userId,
+            targetId: id
+        }
+    })
+}

src/components/common/CommentInfo.vue

@@ -24,7 +24,8 @@
 import { NThing, NAvatar } from 'naive-ui'
 import { LikeBtn } from '@/components/common'
 import avatar from '@/assets/common-avatar.png'
-import {fetchLikeComment} from '@/api'
+import { fetchLikeComment } from '@/api'
+import { useUserStore } from '@/store'
 
 const props = defineProps({
     info: {
@@ -34,8 +35,15 @@ const props = defineProps({
         }
     }
 })
+const emit = defineEmits(['update:info'])
 
-function like(){
-
+const userStore = useUserStore()
+function like() {
+    fetchLikeComment(userStore.userInfo.id, props.info.id).then(res => {
+        emit('update:info', {
+            ...props.info,
+            commentLikeCount: props.info.commentLikeCount + 1
+        })
+    })
 }
 </script>

src/components/common/LikeBtn.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="flex items-center" @click.prevent="like()">
-        <img class="w-[24px] animate__animated" ref="imgRef" src="@/assets/icon_dianzhan.png" alt="" />
-        <span class="text-[#797A8A] text-xs">
+    <div class="flex items-center" @click.stop="like()">
+        <img class="w-[24px] animate__animated" ref="imgRef" :src="liked ? likePreImg : likeImg" alt="" />
+        <span class="text-[#797A8A] text-xs" :class="{ 'text-[#FF3F71]': liked }">
             <slot></slot>
         </span>
     </div>
@@ -10,6 +10,10 @@
 <script setup lang="ts">
 import '@/styles/animate.css'
 import { ref } from 'vue'
+import likePreImg from '@/assets/icon_dianzhan-pre.png'
+import likeImg from '@/assets/icon_dianzhan.png'
+
+const liked = ref(false)
 
 interface Emit {
     (ev: 'like'): void
@@ -24,6 +28,7 @@ function like() {
             imgRef.value.className = imgRef.value.className.replace(/ animate__tada/, '')
         }, 800)
     }
+    liked.value = true
     emit('like')
 }
 </script>

src/components/common/MomentInfo.vue

@@ -2,7 +2,7 @@
     <n-thing @click="goDetail">
         <template #avatar>
             <n-avatar
-                @click.prevent="goAgent"
+                @click.stop="goAgent"
                 v-if="chatRole.pic"
                 class="!block"
                 round
@@ -65,10 +65,13 @@ import { LikeBtn } from '@/components/common'
 import { formatDistanceToNow, isToday, format } from 'date-fns'
 import zhCN from 'date-fns/locale/zh-CN'
 import { getColor } from '@/plugins/TabColors'
+import { fetchLikeMoments } from '@/api'
+import { useUserStore } from '@/store'
 
 interface Emit {
     (ev: 'goDetail', id: number | null): void
     (ev: 'goAgent', id: number | null): void
+    (ev: 'update:info', data: any): void
 }
 
 const props = defineProps({
@@ -116,7 +119,15 @@ function goAgent() {
     emit('goAgent', props.info.userId)
 }
 
-function like() {}
+const userStore = useUserStore()
+function like() {
+    fetchLikeMoments(userStore.userInfo.id, props.info.id).then(res => {
+        emit('update:info', {
+            ...props.info,
+            momentsLikeCount: props.info.momentsLikeCount + 1
+        })
+    })
+}
 </script>
 <style lang="less" scoped>
 :deep(.n-thing-header-wrapper) {

src/components/common/MomentsDetailPannel.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="px-5">
             <div class="bg-white mt-[12px] p-4 rounded-lg dark:bg-[#20223C]">
-                <moment-info @goAgent="goAgent" :info="moments" :isList="false"></moment-info>
+                <moment-info @goAgent="goAgent" v-model:info="moments" :isList="false"></moment-info>
             </div>
         </div>
 
@@ -20,7 +20,7 @@
                 :key="index"
                 ref="commentRef"
             >
-                <comment-info :info="item"></comment-info>
+                <comment-info v-model:info="list[index]"></comment-info>
             </div>
 
             <div class="loading flex items-center justify-center opacity-0" ref="loadingRef">加载中</div>

src/components/common/MomentsPannel.vue

@@ -24,7 +24,7 @@
             class="moment-box bg-white mt-[12px] p-4 rounded-lg dark:bg-[#20223C]"
             :class="{ 'moment-center': showList[index] }"
         >
-            <moment-info @goDetail="goDetail" @goAgent="goAgent" isList :info="item"></moment-info>
+            <moment-info @goDetail="goDetail" @goAgent="goAgent" isList v-model:info="list[index]"></moment-info>
         </div>
         <div class="loading flex items-center justify-center opacity-0" ref="loadingRef">加载中</div>
     </div>