From 285238cf5f4596fe9fe97b5d85b1e1f3ef8a41a4 Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Sat, 26 Jul 2025 14:27:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(playlist):=20=E4=BC=98=E5=8C=96=E6=AD=8C?= =?UTF-8?q?=E5=8D=95=E6=94=B6=E8=97=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 collectPlaylist 和 uncollectPlaylist 函数，分别用于收藏和取消收藏歌单- 重构 toggleCollectPlaylist 函数，使用新增的两个函数实现收藏和取消收藏 - 在 Playlist组件中实现批量更新歌单收藏状态的功能 - 优化收藏按钮点击逻辑，根据歌单的 collected 属性决定是收藏还是取消收藏 --- music-qianduan/src/api/playlist.js | 22 ++++++++++- music-qianduan/src/views/Playlist.vue | 45 +++++++++++++++++------ music-qianduan/src/views/SingerDetail.vue | 8 +++- 3 files changed, 61 insertions(+), 14 deletions(-) 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 // 更新收藏数