点赞

src/components/common/CommentInfo.vue

@@ -13,7 +13,9 @@
                     <span class="text-xs text-[#797A8A]">16:00</span>
                     <span class="flex-1"></span>
                     <!-- <img src="@/assets/icon_pingjia.png" class="w-[24px]" alt="" /> -->
-                    <like-btn class="ml-[10px]" @like="like">{{ info.commentLikeCount }}</like-btn>
+                    <like-btn class="ml-[10px]" @like="like" :liked="info.isLiked">{{
+                        info.commentLikeCount
+                    }}</like-btn>
                 </div>
             </template>
         </n-thing>
@@ -40,10 +42,19 @@ const emit = defineEmits(['update:info'])
 const userStore = useUserStore()
 function like() {
     fetchLikeComment(userStore.userInfo.id, props.info.id).then(res => {
-        emit('update:info', {
-            ...props.info,
-            commentLikeCount: props.info.commentLikeCount + 1
-        })
+        if (props.info.isLiked) {
+            emit('update:info', {
+                ...props.info,
+                isLiked: false,
+                commentLikeCount: props.info.commentLikeCount - 1
+            })
+        } else {
+            emit('update:info', {
+                ...props.info,
+                isLiked: true,
+                commentLikeCount: props.info.commentLikeCount + 1
+            })
+        }
     })
 }
 </script>

src/components/common/LikeBtn.vue

@@ -13,7 +13,12 @@ import { ref } from 'vue'
 import likePreImg from '@/assets/icon_dianzhan-pre.png'
 import likeImg from '@/assets/icon_dianzhan.png'
 
-const liked = ref(false)
+const props = defineProps({
+    liked: {
+        type: Boolean,
+        default: false
+    }
+})
 
 interface Emit {
     (ev: 'like'): void
@@ -28,7 +33,6 @@ function like() {
             imgRef.value.className = imgRef.value.className.replace(/ animate__tada/, '')
         }, 800)
     }
-    liked.value = true
     emit('like')
 }
 </script>

src/components/common/MomentInfo.vue

@@ -20,7 +20,9 @@
         <template #header-extra> </template>
         <template #description>
             <div class="text-xs text-[#797A8A]" v-if="size == 'mini'">{{ timeStr }}</div>
-            <div class="text-xs text-[#797A8A]" v-else>1.5w+人聊过｜20个动态</div>
+            <div class="text-xs text-[#797A8A]" v-else>
+                {{ chatRole.chatted }}人聊过｜{{ chatRole.dynamicNumber }}个动态
+            </div>
             <n-space size="small" class="mt-2" v-if="size !== 'mini'">
                 <n-tag
                     :bordered="false"
@@ -52,7 +54,7 @@
                 <div v-if="size !== 'mini'">{{ timeStr }}</div>
                 <div class="flex-1"></div>
                 <img src="@/assets/icon_pingjia.png" v-if="isList" class="w-[24px]" alt="" />
-                <like-btn class="ml-[10px]" @like="like">{{ info.momentsLikeCount }}</like-btn>
+                <like-btn class="ml-[10px]" @like="like" :liked="info.isLiked">{{ info.momentsLikeCount }}</like-btn>
             </div>
         </template>
     </n-thing>
@@ -122,10 +124,19 @@ function goAgent() {
 const userStore = useUserStore()
 function like() {
     fetchLikeMoments(userStore.userInfo.id, props.info.id).then(res => {
-        emit('update:info', {
-            ...props.info,
-            momentsLikeCount: props.info.momentsLikeCount + 1
-        })
+        if (props.info.isLiked) {
+            emit('update:info', {
+                ...props.info,
+                isLiked: false,
+                momentsLikeCount: props.info.momentsLikeCount - 1
+            })
+        } else {
+            emit('update:info', {
+                ...props.info,
+                isLiked: true,
+                momentsLikeCount: props.info.momentsLikeCount + 1
+            })
+        }
     })
 }
 </script>

src/views/page/AgentView.vue

@@ -39,7 +39,9 @@
                             </template>
                             <template #header-extra> </template>
                             <template #description>
-                                <div class="text-xs text-[#797A8A]">1.5w+人聊过｜20个动态</div>
+                                <div class="text-xs text-[#797A8A]">
+                                    {{ chatRole.chatted }}人聊过｜{{ chatRole.dynamicNumber }}个动态
+                                </div>
                             </template>
                             <template #footer>
                                 <div>
@@ -145,7 +147,9 @@ const chatRole = ref({
     pic: '',
     name: '',
     labels: [],
-    describe: ''
+    describe: '',
+    chatted: 0,
+    dynamicNumber: 0
 })
 fetchGetChatRole(route.query.id).then((res: any) => {
     chatRole.value = res