feat(music): 添加点赞功能- 在 MusicList 组件中添加点赞按钮,用于切换歌曲点赞状态

- 在 MusicPlayer 组件中添加点赞按钮,用于切换当前播放歌曲的点赞状态
- 实现 toggleLike 方法,用于切换歌曲点赞状态并更新 UI
- 引入 Pointer 图标用于点赞按钮- 添加点赞相关的 API 调用
This commit is contained in:
ikmkj
2025-07-26 00:13:50 +08:00
parent a37a47bdab
commit bd26319b91
2 changed files with 64 additions and 4 deletions

View File

@@ -101,6 +101,16 @@
</el-tooltip>
</div>
<div class="like-button" v-if="currentMusic" style="margin-right: 15px;">
<el-tooltip :content="currentMusic.liked ? '取消点赞' : '点赞'" placement="top">
<el-button circle @click="toggleLike">
<el-icon>
<component :is="currentMusic.liked ? 'Pointer' : 'Pointer'" />
</el-icon>
</el-button>
</el-tooltip>
</div>
<div class="playlist-toggle">
<el-tooltip content="播放列表" placement="top">
<el-button circle @click="togglePlaylist">
@@ -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)