mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-17 10:27:30 +08:00
✨ feat: 更新网易云音乐 API 版本，添加 B站视频搜索功能和播放器组件
This commit is contained in:
alger
@@ -40,33 +40,52 @@
|
||||
</div>
|
||||
<div v-loading="searchDetailLoading" 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="mb-3"
|
||||
:class="setAnimationClass('animate__bounceInRight')"
|
||||
:style="setAnimationDelay(index, 50)"
|
||||
>
|
||||
<search-item :item="item" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- B站视频搜索结果 -->
|
||||
<template v-if="searchType === SEARCH_TYPE.BILIBILI">
|
||||
<div
|
||||
v-for="(item, index) in searchDetail?.bilibili"
|
||||
:key="item.bvid"
|
||||
:class="setAnimationClass('animate__bounceInRight')"
|
||||
:style="setAnimationDelay(index, 50)"
|
||||
>
|
||||
<bilibili-item :item="item" @play="handlePlayBilibili" />
|
||||
</div>
|
||||
<div v-if="isLoadingMore" class="loading-more">
|
||||
<n-spin size="small" />
|
||||
<span class="ml-2">{{ t('search.loading.more') }}</span>
|
||||
</div>
|
||||
<div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
|
||||
</template>
|
||||
<!-- 原有音乐搜索结果 -->
|
||||
<template v-else>
|
||||
<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="mb-3"
|
||||
:class="setAnimationClass('animate__bounceInRight')"
|
||||
:style="setAnimationDelay(index, 50)"
|
||||
>
|
||||
<search-item :item="item" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="isLoadingMore" class="loading-more">
|
||||
<n-spin size="small" />
|
||||
<span class="ml-2">{{ t('search.loading.more') }}</span>
|
||||
</div>
|
||||
<div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
|
||||
</template>
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="isLoadingMore" class="loading-more">
|
||||
<n-spin size="small" />
|
||||
<span class="ml-2">{{ t('search.loading.more') }}</span>
|
||||
</div>
|
||||
<div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
|
||||
</template>
|
||||
<!-- 搜索历史 -->
|
||||
<template v-else>
|
||||
@@ -99,22 +118,29 @@
|
||||
</template>
|
||||
</div>
|
||||
</n-layout>
|
||||
<!-- 添加B站视频播放器组件 -->
|
||||
<bilibili-player v-model:show="showBilibiliPlayer" :bvid="currentBvid" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useDateFormat } from '@vueuse/core';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { getBilibiliProxyUrl, searchBilibili } from '@/api/bilibili';
|
||||
import { getHotSearch } from '@/api/home';
|
||||
import { getSearch } from '@/api/search';
|
||||
import BilibiliPlayer from '@/components/BilibiliPlayer.vue';
|
||||
import BilibiliItem from '@/components/common/BilibiliItem.vue';
|
||||
import SearchItem from '@/components/common/SearchItem.vue';
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { SEARCH_TYPE } from '@/const/bar-const';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSearchStore } from '@/store/modules/search';
|
||||
import type { IHotSearch } from '@/type/search';
|
||||
import type { IBilibiliSearchResult } from '@/types/bilibili';
|
||||
import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
|
||||
defineOptions({
|
||||
@@ -190,6 +216,10 @@ onMounted(() => {
|
||||
|
||||
const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
|
||||
|
||||
// 显示B站视频播放器
|
||||
const showBilibiliPlayer = ref(false);
|
||||
const currentBvid = ref('');
|
||||
|
||||
const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
|
||||
if (!keywords) return;
|
||||
|
||||
@@ -215,61 +245,98 @@ const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) =
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await getSearch({
|
||||
keywords: currentKeyword.value,
|
||||
type: type || searchType.value,
|
||||
limit: ITEMS_PER_PAGE,
|
||||
offset: page.value * ITEMS_PER_PAGE
|
||||
});
|
||||
// B站搜索
|
||||
if ((type || searchType.value) === SEARCH_TYPE.BILIBILI) {
|
||||
const response = await searchBilibili({
|
||||
keyword: currentKeyword.value,
|
||||
page: page.value + 1,
|
||||
pagesize: ITEMS_PER_PAGE
|
||||
});
|
||||
console.log('response', response);
|
||||
|
||||
const songs = data.result.songs || [];
|
||||
const albums = data.result.albums || [];
|
||||
const mvs = (data.result.mvs || []).map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.cover,
|
||||
playCount: item.playCount,
|
||||
desc: item.artists.map((artist: any) => artist.name).join('/'),
|
||||
type: 'mv'
|
||||
}));
|
||||
const bilibiliVideos = response.data.data.result.map((item: any) => ({
|
||||
id: item.aid,
|
||||
bvid: item.bvid,
|
||||
title: item.title,
|
||||
author: item.author,
|
||||
pic: getBilibiliProxyUrl(item.pic),
|
||||
duration: item.duration,
|
||||
pubdate: item.pubdate,
|
||||
description: item.description,
|
||||
view: item.play,
|
||||
danmaku: item.video_review
|
||||
}));
|
||||
|
||||
const playlists = (data.result.playlists || []).map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.coverImgUrl,
|
||||
playCount: item.playCount,
|
||||
desc: item.creator.nickname,
|
||||
type: 'playlist'
|
||||
}));
|
||||
if (isLoadMore && searchDetail.value) {
|
||||
// 合并数据
|
||||
searchDetail.value.bilibili = [...searchDetail.value.bilibili, ...bilibiliVideos];
|
||||
} else {
|
||||
searchDetail.value = {
|
||||
bilibili: bilibiliVideos
|
||||
};
|
||||
}
|
||||
|
||||
// songs map 替换属性
|
||||
songs.forEach((item: any) => {
|
||||
item.picUrl = item.al.picUrl;
|
||||
item.artists = item.ar;
|
||||
});
|
||||
albums.forEach((item: any) => {
|
||||
item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
|
||||
});
|
||||
|
||||
if (isLoadMore && searchDetail.value) {
|
||||
// 合并数据
|
||||
searchDetail.value.songs = [...searchDetail.value.songs, ...songs];
|
||||
searchDetail.value.albums = [...searchDetail.value.albums, ...albums];
|
||||
searchDetail.value.mvs = [...searchDetail.value.mvs, ...mvs];
|
||||
searchDetail.value.playlists = [...searchDetail.value.playlists, ...playlists];
|
||||
} else {
|
||||
searchDetail.value = {
|
||||
songs,
|
||||
albums,
|
||||
mvs,
|
||||
playlists
|
||||
};
|
||||
// 判断是否还有更多数据
|
||||
hasMore.value = bilibiliVideos.length === ITEMS_PER_PAGE;
|
||||
}
|
||||
// 音乐搜索
|
||||
else {
|
||||
const { data } = await getSearch({
|
||||
keywords: currentKeyword.value,
|
||||
type: type || searchType.value,
|
||||
limit: ITEMS_PER_PAGE,
|
||||
offset: page.value * ITEMS_PER_PAGE
|
||||
});
|
||||
|
||||
// 判断是否还有更多数据
|
||||
hasMore.value =
|
||||
songs.length === ITEMS_PER_PAGE ||
|
||||
albums.length === ITEMS_PER_PAGE ||
|
||||
mvs.length === ITEMS_PER_PAGE ||
|
||||
playlists.length === ITEMS_PER_PAGE;
|
||||
const songs = data.result.songs || [];
|
||||
const albums = data.result.albums || [];
|
||||
const mvs = (data.result.mvs || []).map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.cover,
|
||||
playCount: item.playCount,
|
||||
desc: item.artists.map((artist: any) => artist.name).join('/'),
|
||||
type: 'mv'
|
||||
}));
|
||||
|
||||
const playlists = (data.result.playlists || []).map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.coverImgUrl,
|
||||
playCount: item.playCount,
|
||||
desc: item.creator.nickname,
|
||||
type: 'playlist'
|
||||
}));
|
||||
|
||||
// songs map 替换属性
|
||||
songs.forEach((item: any) => {
|
||||
item.picUrl = item.al.picUrl;
|
||||
item.artists = item.ar;
|
||||
});
|
||||
albums.forEach((item: any) => {
|
||||
item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
|
||||
});
|
||||
|
||||
if (isLoadMore && searchDetail.value) {
|
||||
// 合并数据
|
||||
searchDetail.value.songs = [...searchDetail.value.songs, ...songs];
|
||||
searchDetail.value.albums = [...searchDetail.value.albums, ...albums];
|
||||
searchDetail.value.mvs = [...searchDetail.value.mvs, ...mvs];
|
||||
searchDetail.value.playlists = [...searchDetail.value.playlists, ...playlists];
|
||||
} else {
|
||||
searchDetail.value = {
|
||||
songs,
|
||||
albums,
|
||||
mvs,
|
||||
playlists
|
||||
};
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
hasMore.value =
|
||||
songs.length === ITEMS_PER_PAGE ||
|
||||
albums.length === ITEMS_PER_PAGE ||
|
||||
mvs.length === ITEMS_PER_PAGE ||
|
||||
playlists.length === ITEMS_PER_PAGE;
|
||||
}
|
||||
|
||||
page.value++;
|
||||
} catch (error) {
|
||||
@@ -332,6 +399,12 @@ const handlePlay = () => {
|
||||
const handleSearchHistory = (keyword: string) => {
|
||||
loadSearch(keyword, 1);
|
||||
};
|
||||
|
||||
// 处理B站视频播放
|
||||
const handlePlayBilibili = (item: IBilibiliSearchResult) => {
|
||||
currentBvid.value = item.bvid;
|
||||
showBilibiliPlayer.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user