feat:讨论点赞切换切图

This commit is contained in:
小张 2025-09-23 15:12:30 +08:00
parent fbe2060425
commit 7aa5257cbd

View File

@ -405,8 +405,11 @@
<div class="comment-footer">
<span class="comment-time">{{ comment.time }}</span>
<div class="discussion-comment-actions">
<button @click="likeComment(comment)" class="discussion-like-btn">
👍 {{ comment.likes || 0 }}
<button @click="likeComment(comment)" class="discussion-like-btn" :class="{ 'liked': comment.isLiked }">
<img :src="comment.isLiked ? '/opinion/赞_thumbs-up备份 2.png' : '/opinion/赞_thumbs-up.png'"
alt="点赞"
class="like-icon" />
{{ comment.likes || 0 }}
</button>
<span class="discussion-reply-text">回复</span>
</div>
@ -2789,7 +2792,12 @@ const loadDiscussionData = async (section: CourseSection) => {
//
const discussionData = response.data.result
if (discussionData && Array.isArray(discussionData)) {
discussionList.value = discussionData
//
discussionList.value = discussionData.map(comment => ({
...comment,
isLiked: false, //
likes: comment.likes || 0 //
}))
console.log('✅ 讨论数据加载完成,讨论数量:', discussionList.value.length)
} else {
console.warn('⚠️ 讨论数据格式异常:', discussionData)
@ -2827,6 +2835,7 @@ const submitDiscussionComment = () => {
content: newComment.value,
time: new Date().toLocaleString(),
likes: 0,
isLiked: false, //
replies: []
}
@ -2836,8 +2845,26 @@ const submitDiscussionComment = () => {
}
const likeComment = (comment: any) => {
comment.likes = (comment.likes || 0) + 1
message.success('点赞成功!')
console.log('🔄 点赞操作:', {
commentId: comment.id,
currentLiked: comment.isLiked,
currentLikes: comment.likes
})
//
if (comment.isLiked) {
//
comment.isLiked = false
comment.likes = Math.max((comment.likes || 0) - 1, 0)
message.success('取消点赞!')
console.log('✅ 取消点赞成功:', { likes: comment.likes, isLiked: comment.isLiked })
} else {
//
comment.isLiked = true
comment.likes = (comment.likes || 0) + 1
message.success('点赞成功!')
console.log('✅ 点赞成功:', { likes: comment.likes, isLiked: comment.isLiked })
}
}
// -
@ -9332,6 +9359,16 @@ onActivated(() => {
color: #1890FF;
}
.discussion-like-btn.liked {
color: #1890FF;
}
.discussion-like-btn .like-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
.discussion-reply-text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;