fix: rating
This commit is contained in:
@@ -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) => {
|
export const topicItemCommentList = async (topicId, itemId, page = 1) => {
|
||||||
return request({
|
return request({
|
||||||
|
|||||||
@@ -26,6 +26,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
import ActionBadge from "@/components/ActionBadge/ActionBadge.vue";
|
import ActionBadge from "@/components/ActionBadge/ActionBadge.vue";
|
||||||
|
import { topicItemCommentLike } from "@/api/topicItem";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
comment: {
|
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);
|
const currentLikes = ref(props.comment.likes || 0);
|
||||||
|
let isLiking = false; // 防抖标志
|
||||||
|
|
||||||
watch(() => props.comment.likes, (newVal) => {
|
watch(() => props.comment.likes, (newVal) => {
|
||||||
currentLikes.value = 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;
|
isLiked.value = !isLiked.value;
|
||||||
if (isLiked.value) {
|
if (isLiked.value) {
|
||||||
currentLikes.value += 1;
|
currentLikes.value += 1;
|
||||||
// 震动反馈增加交互感
|
|
||||||
uni.vibrateShort({ type: 'light' });
|
uni.vibrateShort({ type: 'light' });
|
||||||
} else {
|
} else {
|
||||||
currentLikes.value -= 1;
|
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>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -220,6 +220,7 @@ const getCommentsData = async () => {
|
|||||||
time: formatDate(item.createdAt) || '刚刚', // 如果后端返回了时间字段可以替换
|
time: formatDate(item.createdAt) || '刚刚', // 如果后端返回了时间字段可以替换
|
||||||
content: item.content,
|
content: item.content,
|
||||||
likes: item.likeCount || 0,
|
likes: item.likeCount || 0,
|
||||||
|
isLiked: item.isLiked || false,
|
||||||
badge: '', // 预留徽章字段
|
badge: '', // 预留徽章字段
|
||||||
badgeIcon: '',
|
badgeIcon: '',
|
||||||
userAction: item.userAction || "" // 夯/顶级/人上人/NPC/拉
|
userAction: item.userAction || "" // 夯/顶级/人上人/NPC/拉
|
||||||
|
|||||||
Reference in New Issue
Block a user