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