diff --git a/music-qianduan/src/api/playlist.js b/music-qianduan/src/api/playlist.js index 6ec2abd..8a497f4 100644 --- a/music-qianduan/src/api/playlist.js +++ b/music-qianduan/src/api/playlist.js @@ -286,6 +286,24 @@ export function deletePlaylist(id) { return api.delete(`/playlist/${id}`) } +/** + * 收藏歌单 + * @param {number} id 歌单ID + * @returns {Promise} + */ +export function collectPlaylist(id) { + return api.post(`/playlist/${id}/collect`) +} + +/** + * 取消收藏歌单 + * @param {number} id 歌单ID + * @returns {Promise} + */ +export function uncollectPlaylist(id) { + return api.delete(`/playlist/${id}/collect`) +} + /** * 收藏/取消收藏歌单 * @param {number} id 歌单ID @@ -294,9 +312,9 @@ export function deletePlaylist(id) { */ export function toggleCollectPlaylist(id, isCollected) { if (isCollected) { - return api.delete(`/playlist/${id}/collect`) + return uncollectPlaylist(id) } else { - return api.post(`/playlist/${id}/collect`) + return collectPlaylist(id) } } diff --git a/music-qianduan/src/views/Playlist.vue b/music-qianduan/src/views/Playlist.vue index a5d73be..f1b6a73 100644 --- a/music-qianduan/src/views/Playlist.vue +++ b/music-qianduan/src/views/Playlist.vue @@ -4,7 +4,7 @@ import { useRouter } from 'vue-router' import { useUserStore } from '../stores/user' import { ElMessage } from 'element-plus' import { Search } from '@element-plus/icons-vue' -import { getPlaylistList, getHotPlaylist, toggleCollectPlaylist } from '../api/playlist' +import { getPlaylistList, getHotPlaylist, toggleCollectPlaylist, isPlaylistCollected, uncollectPlaylist, collectPlaylist } from '../api/playlist' import { getPlaylistTypeList } from '../api/playlistType' const router = useRouter() @@ -89,6 +89,7 @@ const fetchPlaylists = async () => { if (res.code === 200) { playlists.value = res.data.list || res.data.records || [] total.value = res.data.total || 0 + updatePlaylistStatuses(playlists.value) } else { ElMessage.error(res.message || '获取歌单列表失败') } @@ -107,6 +108,7 @@ const fetchHotPlaylists = async () => { const res = await getHotPlaylist(8) // 获取8个热门歌单 if (res.code === 200) { hotPlaylists.value = res.data || [] + updatePlaylistStatuses(hotPlaylists.value) } else { ElMessage.error(res.message || '获取热门歌单失败') } @@ -143,7 +145,7 @@ const viewPlaylistDetail = (id) => { } // 收藏/取消收藏歌单 -const toggleCollect = async (id) => { +const toggleCollect = async (playlist) => { if (!userStore.isLoggedIn) { ElMessage.warning('请先登录') router.push('/login') @@ -151,14 +153,16 @@ const toggleCollect = async (id) => { } try { - const res = await toggleCollectPlaylist(id) + let res + if (playlist.collected) { + res = await uncollectPlaylist(playlist.id) + } else { + res = await collectPlaylist(playlist.id) + } + if (res.code === 200) { - // 更新收藏状态 - const playlist = playlists.value.find(p => p.id === id) - if (playlist) { - playlist.collected = !playlist.collected - ElMessage.success(playlist.collected ? '收藏成功' : '已取消收藏') - } + playlist.collected = !playlist.collected + ElMessage.success(playlist.collected ? '收藏成功' : '已取消收藏') } else { ElMessage.error(res.message || '操作失败') } @@ -168,6 +172,25 @@ const toggleCollect = async (id) => { } } +// 更新歌单收藏状态 +const updatePlaylistStatuses = async (list) => { + if (!userStore.isLoggedIn || !list || list.length === 0) { + return + } + + const promises = list.map(playlist => isPlaylistCollected(playlist.id)) + try { + const results = await Promise.all(promises) + results.forEach((res, index) => { + if (res.code === 200) { + list[index].collected = res.data + } + }) + } catch (error) { + console.error('批量获取歌单收藏状态失败:', error) + } +} + // 格式化播放次数 const formatPlayCount = (count) => { if (count < 10000) { @@ -246,7 +269,7 @@ onMounted(() => { circle :icon="playlist.collected ? 'StarFilled' : 'Star'" :type="playlist.collected ? 'warning' : ''" - @click.stop="toggleCollect(playlist.id)" + @click.stop="toggleCollect(playlist)" > @@ -290,7 +313,7 @@ onMounted(() => { circle :icon="playlist.collected ? 'StarFilled' : 'Star'" :type="playlist.collected ? 'warning' : ''" - @click.stop="toggleCollect(playlist.id)" + @click.stop="toggleCollect(playlist)" > diff --git a/music-qianduan/src/views/SingerDetail.vue b/music-qianduan/src/views/SingerDetail.vue index a5edf66..277cf30 100644 --- a/music-qianduan/src/views/SingerDetail.vue +++ b/music-qianduan/src/views/SingerDetail.vue @@ -195,7 +195,13 @@ const toggleCollect = async () => { } try { - const res = await toggleCollectSinger(singerId.value, isCollected.value) + let res + if (isCollected.value) { + res = await uncollectSinger(singerId.value) + } else { + res = await collectSinger(singerId.value) + } + if (res.code === 200) { isCollected.value = !isCollected.value // 更新收藏数