feat(PlaylistDetail): 优化评论数显示逻辑
- 在获取评论列表时,将评论总数更新到 playlist 对象中 - 添加 formattedCommentCount 计算属性,用于格式化评论数显示 - 在评论数大于 99 时显示为 "99+",避免数字过长 - 更新模板中评论数的显示,使用 formattedCommentCount 替代原始值
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user