diff --git a/music-qianduan/src/components/MusicList.vue b/music-qianduan/src/components/MusicList.vue index ea4151b..9d07f3c 100644 --- a/music-qianduan/src/components/MusicList.vue +++ b/music-qianduan/src/components/MusicList.vue @@ -72,6 +72,16 @@ + + + + import { ref, computed, watch } from 'vue' import { useRouter } from 'vue-router' -import { VideoPlay, VideoPause, Star, More, InfoFilled } from '@element-plus/icons-vue' +import { VideoPlay, VideoPause, Star, More, InfoFilled, Pointer } from '@element-plus/icons-vue' import { usePlayerStore } from '../stores/player' -import { toggleCollectMusic } from '../api/music' +import { toggleCollectMusic, toggleLikeMusic } from '../api/music' import { ElMessage } from 'element-plus' const props = defineProps({ @@ -147,7 +157,7 @@ const props = defineProps({ } }) -const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'collect-change']) +const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'collect-change', 'like-change']) const router = useRouter() @@ -202,6 +212,23 @@ const toggleCollect = async (music) => { } } +// 切换点赞状态 +const toggleLike = async (music) => { + try { + const res = await toggleLikeMusic(music.id) + if (res.code === 200) { + music.liked = !music.liked + ElMessage.success(music.liked ? '点赞成功' : '已取消点赞') + emit('like-change', music) + } else { + ElMessage.error(res.message || '操作失败') + } + } catch (error) { + console.error('点赞操作失败:', error) + ElMessage.error('操作失败,请稍后重试') + } +} + // 处理下拉菜单命令 const handleCommand = (command, music) => { switch (command) { diff --git a/music-qianduan/src/components/MusicPlayer.vue b/music-qianduan/src/components/MusicPlayer.vue index 8b09932..426cdde 100644 --- a/music-qianduan/src/components/MusicPlayer.vue +++ b/music-qianduan/src/components/MusicPlayer.vue @@ -101,6 +101,16 @@ +
+ + + + + + + +
+
@@ -290,7 +300,7 @@ import { processMusicUrl, toggleCollectMusic, getMusicStatus } from '../api/musi import { ElMessage } from 'element-plus' import { VideoPlay, VideoPause, Back, Right, List, Close, Delete, - Mute, VideoCamera, Microphone, Star, StarFilled, ArrowDown + Mute, VideoCamera, Microphone, Star, StarFilled, ArrowDown, Pointer } from '@element-plus/icons-vue' const router = useRouter() @@ -462,6 +472,29 @@ const toggleCollect = async () => { } } +// 点赞/取消点赞 +const toggleLike = async () => { + if (!userStore.isLoggedIn) { + ElMessage.warning('请先登录') + router.push('/login') + return + } + if (!currentMusic.value || !currentMusic.value.id) return + + try { + const res = await toggleLikeMusic(currentMusic.value.id) + if (res.code === 200) { + playerStore.updateCurrentMusicStatus({ liked: res.data }) + ElMessage.success(res.message || (res.data ? '点赞成功' : '已取消点赞')) + } else { + ElMessage.error(res.message || '操作失败') + } + } catch (error) { + console.error('点赞操作失败:', error) + ElMessage.error('操作失败,请稍后重试') + } +} + // 播放列表相关 const togglePlaylist = () => playerStore.setShowPlaylist(!showPlaylist.value) const playFromPlaylist = (index) => playerStore.playFromPlaylist(index)