feat:讨论点赞切换切图
This commit is contained in:
parent
fbe2060425
commit
7aa5257cbd
@ -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) => {
|
||||||
comment.likes = (comment.likes || 0) + 1
|
console.log('🔄 点赞操作:', {
|
||||||
message.success('点赞成功!')
|
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;
|
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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user