diff --git a/music-qianduan/src/views/SingerDetail.vue b/music-qianduan/src/views/SingerDetail.vue index cf519bf..10da0d2 100644 --- a/music-qianduan/src/views/SingerDetail.vue +++ b/music-qianduan/src/views/SingerDetail.vue @@ -3,9 +3,9 @@ import { ref, onMounted, computed, onUnmounted } from 'vue' // 添加 onUnmounte import { useRoute, useRouter } from 'vue-router' import { usePlayerStore } from '../stores/player' import { useUserStore } from '../stores/user' -import { ElMessage } from 'element-plus' +import { ElMessage, ElMessageBox } from 'element-plus' import { getSingerById, toggleCollectSinger } from '../api/singer' -import { getCommentList, addComment } from '../api/comment' +import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment' import { processImageUrl } from '../utils/imageUtils' import { processMusicUrl, getMusicBySinger } from '../api/music' import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具 @@ -212,6 +212,30 @@ const submitComment = async () => { } } +// 删除评论 +const deleteComment = async (commentId) => { + try { + await ElMessageBox.confirm('确定要删除这条评论吗?', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }) + + const res = await apiDeleteComment(commentId) + if (res.code === 200) { + comments.value = comments.value.filter(c => c.id !== commentId) + ElMessage.success('评论已删除') + } else { + ElMessage.error(res.message || '删除失败') + } + } catch (error) { + if (error !== 'cancel') { + console.error('删除评论失败:', error) + ElMessage.error('删除失败,请稍后重试') + } + } +} + // 格式化时间 @@ -410,6 +434,7 @@ onUnmounted(() => { 发表评论 +
@@ -417,7 +442,19 @@ onUnmounted(() => {
-
{{ comment.user.username }}
+
+
{{ comment.user.username }}
+
+ + 删除 + +
+
{{ comment.content }}
{{ comment.createTime }}
@@ -563,9 +600,15 @@ onUnmounted(() => { flex: 1; } +.comment-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 5px; +} + .comment-user { font-weight: bold; - margin-bottom: 5px; } .comment-text {