fix(music-detail): show global like/collect counts on music detail page

This commit is contained in:
root
2026-03-08 14:09:10 +08:00
parent 6f0e59cd28
commit 24eb4ec5d6
3 changed files with 35 additions and 1 deletions

View File

@@ -54,6 +54,16 @@ public class MusicDTO {
*/ */
private Long playCount; private Long playCount;
/**
* 点赞数
*/
private Integer likeCount;
/**
* 收藏数
*/
private Integer collectCount;
/** /**
* 歌手列表 * 歌手列表
*/ */

View File

@@ -650,6 +650,10 @@ public class MusicServiceImpl implements MusicService {
MusicDTO musicDTO = new MusicDTO(); MusicDTO musicDTO = new MusicDTO();
BeanUtils.copyProperties(music, musicDTO); BeanUtils.copyProperties(music, musicDTO);
// 兜底互动计数,避免前端出现 null
musicDTO.setLikeCount(music.getLikeCount() != null ? music.getLikeCount() : 0);
musicDTO.setCollectCount(music.getCollectCount() != null ? music.getCollectCount() : 0);
// 确保专辑字段正确复制 // 确保专辑字段正确复制
musicDTO.setAlbum(music.getAlbum()); musicDTO.setAlbum(music.getAlbum());

View File

@@ -54,6 +54,16 @@
<span class="label">发行日期</span> <span class="label">发行日期</span>
<span class="value">{{ music.releaseDate || '-' }}</span> <span class="value">{{ music.releaseDate || '-' }}</span>
</div> </div>
<div class="meta-item">
<span class="label">点赞数</span>
<span class="value">{{ music.likeCount ?? 0 }}</span>
</div>
<div class="meta-item">
<span class="label">收藏数</span>
<span class="value">{{ music.collectCount ?? 0 }}</span>
</div>
</div> </div>
<div class="music-actions"> <div class="music-actions">
@@ -321,7 +331,11 @@ const fetchMusicDetail = async () => {
const res = await getMusicById(id) const res = await getMusicById(id)
if (res.code === 200) { if (res.code === 200) {
if (res.data) { if (res.data) {
music.value = res.data music.value = {
...res.data,
likeCount: res.data.likeCount ?? 0,
collectCount: res.data.collectCount ?? 0
}
// 获取音乐状态 // 获取音乐状态
fetchMusicStatus() fetchMusicStatus()
} else { } else {
@@ -543,6 +557,12 @@ const toggleCollect = async () => {
if (res.code === 200) { if (res.code === 200) {
// 后端直接返回了最新的收藏状态 (true/false),直接赋值即可 // 后端直接返回了最新的收藏状态 (true/false),直接赋值即可
music.value.collected = res.data music.value.collected = res.data
// 仅在操作成功时同步更新本地收藏数
if (music.value.collected) {
music.value.collectCount = (music.value.collectCount || 0) + 1
} else {
music.value.collectCount = Math.max(0, (music.value.collectCount || 0) - 1)
}
ElMessage.success(res.message || (music.value.collected ? '收藏成功' : '已取消收藏')) ElMessage.success(res.message || (music.value.collected ? '收藏成功' : '已取消收藏'))
} else { } else {
ElMessage.error(res.message || '操作失败') ElMessage.error(res.message || '操作失败')