From b3f7609494b39d62ec0f68de7dafdaac5b0d4e7e Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Tue, 26 May 2026 10:01:46 +0800
Subject: [PATCH] fix: rating

---
 api/topicItem.js                       | 10 ++++++++
 components/CommentItem/CommentItem.vue | 32 ++++++++++++++++++++++----
 pages/rating/detail.vue                |  1 +
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/api/topicItem.js b/api/topicItem.js
index 6455182..617f6f6 100644
--- a/api/topicItem.js
+++ b/api/topicItem.js
@@ -18,6 +18,16 @@ export const topicItemComment = async (data) => {
   });
 };
 
+// 评论点赞
+// data = { commentId: 'xxx' }
+export const topicItemCommentLike = async (data) => {
+  return request({
+    url: "/api/rating/topic/comment/item/like",
+    method: "POST",
+    data,
+  });
+};
+
 // 获取评论列表
 export const topicItemCommentList = async (topicId, itemId, page = 1) => {
   return request({
diff --git a/components/CommentItem/CommentItem.vue b/components/CommentItem/CommentItem.vue
index 6221b53..510afb5 100644
--- a/components/CommentItem/CommentItem.vue
+++ b/components/CommentItem/CommentItem.vue
@@ -26,6 +26,7 @@
 <script setup>
 import { ref, watch } from 'vue';
 import ActionBadge from "@/components/ActionBadge/ActionBadge.vue";
+import { topicItemCommentLike } from "@/api/topicItem";
 
 const props = defineProps({
   comment: {
@@ -35,23 +36,46 @@ const props = defineProps({
   }
 });
 
-const isLiked = ref(false);
+const isLiked = ref(props.comment.isLiked || false);
 const currentLikes = ref(props.comment.likes || 0);
+let isLiking = false; // 防抖标志
 
 watch(() => props.comment.likes, (newVal) => {
   currentLikes.value = newVal;
 });
 
-const handleLike = () => {
+watch(() => props.comment.isLiked, (newVal) => {
+  isLiked.value = newVal || false;
+});
+
+const handleLike = async () => {
+  if (isLiking) return;
+  isLiking = true;
+
+  // 乐观更新 UI
   isLiked.value = !isLiked.value;
   if (isLiked.value) {
     currentLikes.value += 1;
-    // 震动反馈增加交互感
     uni.vibrateShort({ type: 'light' });
   } else {
     currentLikes.value -= 1;
   }
-  // TODO: 如果需要，可以抛出事件给父组件去调用点赞接口
+
+  try {
+    // 调用点赞接口 (点赞和取消点赞为同一个接口)
+    await topicItemCommentLike({ commentId: props.comment.id });
+  } catch (error) {
+    // 接口调用失败，回滚 UI 状态
+    isLiked.value = !isLiked.value;
+    if (isLiked.value) {
+      currentLikes.value += 1;
+    } else {
+      currentLikes.value -= 1;
+    }
+    uni.showToast({ title: '操作失败', icon: 'none' });
+  } finally {
+    isLiking = false;
+  }
 };
 </script>
 
diff --git a/pages/rating/detail.vue b/pages/rating/detail.vue
index 158b726..dd4b20d 100644
--- a/pages/rating/detail.vue
+++ b/pages/rating/detail.vue
@@ -220,6 +220,7 @@ const getCommentsData = async () => {
       time: formatDate(item.createdAt) || '刚刚', // 如果后端返回了时间字段可以替换
       content: item.content,
       likes: item.likeCount || 0,
+      isLiked: item.isLiked || false,
       badge: '', // 预留徽章字段
       badgeIcon: '',
       userAction: item.userAction || "" // 夯/顶级/人上人/NPC/拉