feat:讨论点赞切换切图
This commit is contained in:
parent
fbe2060425
commit
7aa5257cbd
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user