diff --git a/music-qianduan/src/views/Singer.vue b/music-qianduan/src/views/Singer.vue index b4011cb..850d099 100644 --- a/music-qianduan/src/views/Singer.vue +++ b/music-qianduan/src/views/Singer.vue @@ -4,7 +4,7 @@ import { useRouter } from 'vue-router' import { useUserStore } from '../stores/user' import { ElMessage } from 'element-plus' import { Search } from '@element-plus/icons-vue' -import { getSingerList, getHotSinger, toggleCollectSinger } from '../api/singer' +import { getSingerList, getHotSinger, isSingerCollected, collectSinger, uncollectSinger } from '../api/singer' import { getSingerTypeList } from '../api/singerType' import { processImageUrl } from '../utils/imageUtils' @@ -81,6 +81,7 @@ const fetchSingers = async () => { ...singer, avatar: processImageUrl(singer.avatar) })) + updateSingerStatuses(singers.value) } else { ElMessage.error(res.message || '获取歌手列表失败') } @@ -105,6 +106,7 @@ const fetchHotSingers = async () => { ...singer, avatar: processImageUrl(singer.avatar) })) + updateSingerStatuses(hotSingers.value) } else { ElMessage.error(res.message || '获取热门歌手失败') } @@ -141,7 +143,7 @@ const viewSingerDetail = (id) => { } // 收藏/取消收藏歌手 -const toggleCollect = async (id, event) => { +const toggleCollect = async (singer, event) => { event.stopPropagation() if (!userStore.isLoggedIn) { @@ -151,14 +153,16 @@ const toggleCollect = async (id, event) => { } try { - const res = await toggleCollectSinger(id) + let res + if (singer.collected) { + res = await uncollectSinger(singer.id) + } else { + res = await collectSinger(singer.id) + } + if (res.code === 200) { - // 更新收藏状态 - const singer = singers.value.find(s => s.id === id) - if (singer) { - singer.collected = !singer.collected - ElMessage.success(singer.collected ? '收藏成功' : '已取消收藏') - } + singer.collected = !singer.collected + ElMessage.success(singer.collected ? '收藏成功' : '已取消收藏') } else { ElMessage.error(res.message || '操作失败') } @@ -168,6 +172,25 @@ const toggleCollect = async (id, event) => { } } +// 更新歌手收藏状态 +const updateSingerStatuses = async (list) => { + if (!userStore.isLoggedIn || !list || list.length === 0) { + return + } + + const promises = list.map(singer => isSingerCollected(singer.id)) + try { + const results = await Promise.all(promises) + results.forEach((res, index) => { + if (res.code === 200) { + list[index].collected = res.data + } + }) + } catch (error) { + console.error('批量获取歌手收藏状态失败:', error) + } +} + // 格式化粉丝数 const formatFans = (count) => { if (count < 10000) { @@ -236,7 +259,7 @@ onMounted(() => { circle :icon="singer.collected ? 'StarFilled' : 'Star'" :type="singer.collected ? 'warning' : 'primary'" - @click="(event) => toggleCollect(singer.id, event)" + @click="(event) => toggleCollect(singer, event)" > @@ -269,7 +292,7 @@ onMounted(() => { circle :icon="singer.collected ? 'StarFilled' : 'Star'" :type="singer.collected ? 'warning' : 'primary'" - @click="(event) => toggleCollect(singer.id, event)" + @click="(event) => toggleCollect(singer, event)" >