diff --git a/music-qianduan/src/components/MusicList.vue b/music-qianduan/src/components/MusicList.vue index 3534b3e..d443405 100644 --- a/music-qianduan/src/components/MusicList.vue +++ b/music-qianduan/src/components/MusicList.vue @@ -100,7 +100,8 @@ 添加到播放列表 下一首播放 - 下载音乐 + 添加到我的歌单 + 下载音乐 下载歌词 音乐详情 分享 @@ -115,13 +116,30 @@ + + + +
+
    +
  • + {{ playlist.name }} +
  • +
+ +
+
@@ -130,7 +148,9 @@ import { ref, computed, watch } from 'vue' import { useRouter } from 'vue-router' import { VideoPlay, VideoPause, Star, More, InfoFilled, Pointer } from '@element-plus/icons-vue' import { usePlayerStore } from '../stores/player' +import { useUserStore } from '../stores/user' import { toggleCollectMusic, toggleLikeMusic } from '../api/music' +import { getUserPlaylist, addMusicToPlaylist } from '../api/playlist' import { ElMessage, ElMessageBox } from 'element-plus' const props = defineProps({ @@ -171,6 +191,7 @@ const router = useRouter() // 使用本地状态来代替直接绑定到props const localCurrentPage = ref(props.currentPage) const localPageSize = ref(props.pageSize) +const pageSizes = [10, 20, 50, 100] // 添加分页大小选项 // 监听props变化,更新本地状态 watch(() => props.currentPage, (newVal) => { @@ -182,6 +203,52 @@ watch(() => props.pageSize, (newVal) => { }) const playerStore = usePlayerStore() +const userStore = useUserStore() + +const userPlaylists = ref([]) +const loadingUserPlaylists = ref(false) +const isAddToPlaylistDialogVisible = ref(false) +const currentMusicToAdd = ref(null) + +// 获取用户创建的歌单 +const fetchUserPlaylists = async () => { + if (!userStore.isLoggedIn) { + userPlaylists.value = [] + return + } + loadingUserPlaylists.value = true + try { + // 获取用户所有歌单,这里设置一个比较大的size + const res = await getUserPlaylist(1, 200) + if (res.code === 200) { + userPlaylists.value = res.data.records || res.data.list || [] + } else { + ElMessage.error(res.message || '获取您的歌单失败') + } + } catch (error) { + console.error('获取用户歌单失败:', error) + ElMessage.error('获取您的歌单失败') + } finally { + loadingUserPlaylists.value = false + } +} + +// 将音乐添加到歌单 +const handleAddToPlaylist = async (music, playlistId) => { + if (!music || !playlistId) return + try { + const res = await addMusicToPlaylist(playlistId, music.id) + if (res.code === 200 && res.data) { + ElMessage.success(`已将《${music.name}》添加到歌单`) + isAddToPlaylistDialogVisible.value = false + } else { + ElMessage.error(res.message || '添加失败') + } + } catch (error) { + console.error('添加到歌单失败:', error) + ElMessage.error('添加失败,请稍后重试') + } +} // 跳转到音乐详情页 const goToMusicDetail = (id) => { @@ -262,6 +329,11 @@ const handleCommand = (command, music) => { ElMessage.success('已添加到播放列表') } break + case 'showAddToPlaylistDialog': + currentMusicToAdd.value = music + fetchUserPlaylists() + isAddToPlaylistDialogVisible.value = true + break case 'share': ElMessage.info('分享功能开发中') break @@ -318,6 +390,29 @@ const handleCurrentChange = (page) => {