mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-24 16:27:23 +08:00
✨ feat: 更新歌手数据加载逻辑,首页添加周杰伦歌手信息常驻
This commit is contained in:
@@ -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();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user