feat(music): 添加点赞功能- 在 MusicList 组件中添加点赞按钮,用于切换歌曲点赞状态
- 在 MusicPlayer 组件中添加点赞按钮,用于切换当前播放歌曲的点赞状态 - 实现 toggleLike 方法,用于切换歌曲点赞状态并更新 UI - 引入 Pointer 图标用于点赞按钮- 添加点赞相关的 API 调用
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user