feat(PlaylistDetail): 优化评论数显示逻辑

- 在获取评论列表时,将评论总数更新到 playlist 对象中
- 添加 formattedCommentCount 计算属性,用于格式化评论数显示
- 在评论数大于 99 时显示为 "99+",避免数字过长
- 更新模板中评论数的显示,使用 formattedCommentCount 替代原始值
This commit is contained in:
ikmkj
2025-07-28 23:47:42 +08:00
parent c30f275f54
commit 28a5f451ca

View File

@@ -117,6 +117,9 @@ const fetchComments = async () => {
const res = await getCommentList(playlistId.value, 2, 1, 20) // targetType 2 表示歌单
if (res.code === 200) {
comments.value = res.data.list || res.data.records || []
if (playlist.value && res.data.total !== undefined) {
playlist.value.commentCount = res.data.total
}
} else {
ElMessage.error(res.message || '获取评论列表失败')
}
@@ -396,6 +399,17 @@ const formatTime = (seconds) => {
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
// 格式化评论数
const formattedCommentCount = computed(() => {
if (!playlist.value || playlist.value.commentCount === undefined) {
return 0;
}
if (playlist.value.commentCount > 99) {
return '99+';
}
return playlist.value.commentCount;
});
// 格式化播放次数
const formatPlayCount = (count) => {
if (count < 10000) {
@@ -525,7 +539,7 @@ onUnmounted(() => {
<div class="playlist-stats">
<span>收藏数{{ playlist.collectCount }}</span>
<el-divider direction="vertical" />
<span>评论数{{ playlist.commentCount }}</span>
<span>评论数{{ formattedCommentCount }}</span>
</div>
<div class="playlist-desc">{{ playlist.description }}</div>
@@ -569,7 +583,7 @@ onUnmounted(() => {
/>
</el-tab-pane>
<el-tab-pane :label="`评论(${playlist.commentCount || 0})`">
<el-tab-pane :label="`评论(${formattedCommentCount})`">
<!-- 评论输入框 -->
<div class="comment-input">
<el-input