lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-18 11:37:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 添加每日推荐 样式， 请求等大量优化

Browse Source
This commit is contained in:
alger
2024-05-22 12:07:48 +08:00
parent c6f1e0b233
commit 32b39c7927
23 changed files with 409 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/search/index.vue
+33 -22
View File
@@ -19,30 +19,32 @@
<!-- 搜索到的歌曲列表 -->
<n-layout class="search-list" :class="setAnimationClass('animate__fadeInUp')" :native-scrollbar="false">
<div class="title">{{ hotKeyword }}</div>
<div class="search-list-box">
<template v-if="searchDetail">
<div
v-for="(item, index) in searchDetail?.songs"
:key="item.id"
:class="setAnimationClass('animate__bounceInRight')"
:style="setAnimationDelay(index, 50)"
>
<song-item :item="item" @play="handlePlay" />
</div>
<template v-for="(list, key) in searchDetail">
<template v-if="key.toString() !== 'songs'">
<div
v-for="(item, index) in list"
:key="item.id"
:class="setAnimationClass('animate__bounceInRight')"
:style="setAnimationDelay(index, 50)"
>
<SearchItem :item="item" />
</div>
<n-spin :show="searchDetailLoading">
<div class="search-list-box">
<template v-if="searchDetail">
<div
v-for="(item, index) in searchDetail?.songs"
:key="item.id"
:class="setAnimationClass('animate__bounceInRight')"
:style="setAnimationDelay(index, 50)"
>
<song-item :item="item" @play="handlePlay" />
</div>
<template v-for="(list, key) in searchDetail">
<template v-if="key.toString() !== 'songs'">
<div
v-for="(item, index) in list"
:key="item.id"
:class="setAnimationClass('animate__bounceInRight')"
:style="setAnimationDelay(index, 50)"
>
<SearchItem :item="item" />
</div>
</template>
</template>
</template>
</template>
</div>
</div>
</n-spin>
</n-layout>
</div>
</template>
@@ -59,10 +61,15 @@ import SongItem from '@/components/common/SongItem.vue';
import type { IHotSearch } from '@/type/search';
import { setAnimationClass, setAnimationDelay } from '@/utils';
defineOptions({
name: 'Search',
});
const route = useRoute();
const router = useRouter();
const searchDetail = ref<any>();
const searchType = ref(Number(route.query.type) || 1);
const searchDetailLoading = ref(false);
// 热搜列表
const hotSearchData = ref<IHotSearch>();
@@ -93,6 +100,8 @@ const loadSearch = async (keywords: any) => {
hotKeyword.value = keywords;
searchDetail.value = undefined;
if (!keywords) return;
searchDetailLoading.value = true;
const { data } = await getSearch({ keywords, type: searchType.value });
const songs = data.result.songs || [];
@@ -111,6 +120,8 @@ const loadSearch = async (keywords: any) => {
songs,
albums,
};
searchDetailLoading.value = false;
};
loadSearch(route.query.keyword);