fix(music-detail): show global like/collect counts on music detail page
This commit is contained in:
@@ -54,6 +54,16 @@ public class MusicDTO {
|
|||||||
*/
|
*/
|
||||||
private Long playCount;
|
private Long playCount;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点赞数
|
||||||
|
*/
|
||||||
|
private Integer likeCount;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 收藏数
|
||||||
|
*/
|
||||||
|
private Integer collectCount;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 歌手列表
|
* 歌手列表
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -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());
|
||||||
|
|
||||||
|
|||||||
@@ -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 || '操作失败')
|
||||||
|
|||||||
Reference in New Issue
Block a user