feat: 更新歌手数据加载逻辑,首页添加周杰伦歌手信息常驻

This commit is contained in:
alger
2025-04-25 23:10:02 +08:00
parent bbc1bb7436
commit 30695149d6
2 changed files with 42 additions and 14 deletions
+39 -13
View File
@@ -100,7 +100,7 @@
@click="handleArtistClick(item.id)" @click="handleArtistClick(item.id)"
> >
<div <div
:style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))" :style="setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))"
class="recommend-singer-item-bg" class="recommend-singer-item-bg"
></div> ></div>
<div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"> <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
@@ -159,7 +159,7 @@ import { IDayRecommend } from '@/type/day_recommend';
import { Playlist } from '@/type/list'; import { Playlist } from '@/type/list';
import type { IListDetail } from '@/type/listDetail'; import type { IListDetail } from '@/type/listDetail';
import { SongResult } from '@/type/music'; import { SongResult } from '@/type/music';
import type { IHotSinger } from '@/type/singer'; import type { Artist, IHotSinger } from '@/type/singer';
import { import {
getImgUrl, getImgUrl,
isMobile, isMobile,
@@ -167,6 +167,8 @@ import {
setAnimationDelay, setAnimationDelay,
setBackgroundImg setBackgroundImg
} from '@/utils'; } from '@/utils';
import { getArtistDetail } from '@/api/artist';
import { cloneDeep } from 'lodash';
const userStore = useUserStore(); const userStore = useUserStore();
const playerStore = usePlayerStore(); const playerStore = usePlayerStore();
@@ -246,21 +248,49 @@ const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
}; };
onMounted(async () => { onMounted(async () => {
await loadData(); loadNonUserData();
}); });
const loadData = async () => { const JayChouId = 6452;
const loadArtistData = async () => {
try { try {
// 获取每日推荐 const { data: artistData }: { data: { data: { artist: Artist } } } = await getArtistDetail(JayChouId);
try { console.log('artistData', artistData);
if (hotSingerData.value) {
// 将周杰伦数据放在第一位
hotSingerData.value.artists = [artistData.data.artist, ...hotSingerData.value.artists];
}
} catch (error) {
console.error('获取周杰伦数据失败:', error);
}
}
// 加载不需要登录的数据
const loadNonUserData = async () => {
try {
// 获取每日推荐
try {
const { const {
data: { data: dayRecommend } data: { data: dayRecommend }
} = await getDayRecommend(); } = await getDayRecommend();
dayRecommendData.value = dayRecommend as unknown as IDayRecommend; dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
} catch (error) { } catch (error) {
console.error('error', error); console.error('获取每日推荐失败:', error);
} }
// 获取热门歌手
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
hotSingerData.value = singerData;
await loadArtistData();
} catch (error) {
console.error('加载热门歌手数据失败:', error);
}
};
// 加载需要登录的数据
const loadUserData = async () => {
try {
if (userStore.user) { if (userStore.user) {
const { data: playlistData } = await getUserPlaylist(userStore.user?.userId); const { data: playlistData } = await getUserPlaylist(userStore.user?.userId);
// 确保最多只显示4个歌单,并按播放次数排序 // 确保最多只显示4个歌单,并按播放次数排序
@@ -268,12 +298,8 @@ const loadData = async () => {
.sort((a, b) => b.playCount - a.playCount) .sort((a, b) => b.playCount - a.playCount)
.slice(0, 4); .slice(0, 4);
} }
// 获取热门歌手
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
hotSingerData.value = singerData;
} catch (error) { } catch (error) {
console.error('error', error); console.error('加载用户数据失败:', error);
} }
}; };
@@ -394,7 +420,7 @@ const loadFullPlaylist = async (trackIds: { id: number }[], initialSongs: SongRe
// 监听登录状态 // 监听登录状态
watchEffect(() => { watchEffect(() => {
if (userStore.user) { if (userStore.user) {
loadData(); loadUserData();
} }
}); });
+3 -1
View File
@@ -4,7 +4,7 @@ export interface IHotSinger {
artists: Artist[]; artists: Artist[];
} }
interface Artist { export interface Artist {
name: string; name: string;
id: number; id: number;
picId: number; picId: number;
@@ -29,4 +29,6 @@ interface Artist {
identifyTag?: any; identifyTag?: any;
alg?: any; alg?: any;
fansCount?: any; fansCount?: any;
cover?: string;
avatar?: string;
} }