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)