From ecd7a56df03e6285c553f435ae8764f532b8429b Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Mon, 1 Jan 2024 00:06:52 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=93?=
 =?UTF-8?q?=E8=BE=91=E5=88=97=E8=A1=A8=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/list.ts                      | 79 +++++++++++++++-------------
 src/components/MusicList.vue         |  9 ++--
 src/components/RecommendAlbum.vue    | 17 ++++++
 src/components/common/SearchItem.vue | 22 +++++++-
 src/components/common/SongItem.vue   |  1 +
 src/hooks/MusicHook.ts               |  2 +-
 src/store/index.ts                   |  2 +-
 src/views/list/index.vue             |  2 +-
 src/views/search/index.vue           |  1 -
 src/views/user/index.vue             |  2 +-
 10 files changed, 90 insertions(+), 47 deletions(-)

diff --git a/src/api/list.ts b/src/api/list.ts
index 096cbbe..bceb4fb 100644
--- a/src/api/list.ts
+++ b/src/api/list.ts
@@ -1,37 +1,42 @@
-import request from "@/utils/request";
-import { IList } from "@/type/list";
-import type { IListDetail } from "@/type/listDetail";
-
-interface IListByTagParams {
-  tag: string;
-  before: number;
-  limit: number;
-}
-
-interface IListByCatParams {
-  cat: string;
-  offset: number;
-  limit: number;
-}
-
-// 根据tag 获取歌单列表
-export function getListByTag(params: IListByTagParams) {
-  return request.get<IList>("/top/playlist/highquality", { params: params });
-}
-
-// 根据cat 获取歌单列表
-export function getListByCat(params: IListByCatParams) {
-  return request.get("/top/playlist", {
-    params: params,
-  });
-}
-
-// 获取推荐歌单
-export function getRecommendList(limit: number = 30) {
-  return request.get("/personalized", { params: { limit } });
-}
-
-// 获取歌单详情
-export function getListDetail(id: number | string) {
-  return request.get<IListDetail>("/playlist/detail", { params: { id } });
-}
+import request from "@/utils/request";
+import { IList } from "@/type/list";
+import type { IListDetail } from "@/type/listDetail";
+
+interface IListByTagParams {
+  tag: string;
+  before: number;
+  limit: number;
+}
+
+interface IListByCatParams {
+  cat: string;
+  offset: number;
+  limit: number;
+}
+
+// 根据tag 获取歌单列表
+export function getListByTag(params: IListByTagParams) {
+  return request.get<IList>("/top/playlist/highquality", { params: params });
+}
+
+// 根据cat 获取歌单列表
+export function getListByCat(params: IListByCatParams) {
+  return request.get("/top/playlist", {
+    params: params,
+  });
+}
+
+// 获取推荐歌单
+export function getRecommendList(limit: number = 30) {
+  return request.get("/personalized", { params: { limit } });
+}
+
+// 获取歌单详情
+export function getListDetail(id: number | string) {
+  return request.get<IListDetail>("/playlist/detail", { params: { id } });
+}
+
+// 获取专辑内容
+export function getAlbum(id: number | string) {
+  return request.get("/album", { params: { id } });
+}
\ No newline at end of file
diff --git a/src/components/MusicList.vue b/src/components/MusicList.vue
index 08eb5ea..db438b6 100644
--- a/src/components/MusicList.vue
+++ b/src/components/MusicList.vue
@@ -2,11 +2,11 @@
   <n-drawer :show="show" height="70vh" placement="bottom" :drawer-style="{ backgroundColor: 'transparent' }">
     <div class="music-page">
       <i class="iconfont icon-icon_error music-close" @click="close"></i>
-      <div class="music-title">{{ musicList?.name }}</div>
+      <div class="music-title">{{ name }}</div>
       <!-- 歌单歌曲列表 -->
       <div class="music-list">
         <n-scrollbar >
-          <div v-for="(item, index) in musicList?.tracks" :key="item.id" :class="setAnimationClass('animate__bounceInUp')"
+          <div v-for="(item, index) in songList" :key="item.id" :class="setAnimationClass('animate__bounceInUp')"
             :style="setAnimationDelay(index, 100)">
             <SongItem :item="formatDetail(item)" @play="handlePlay" />
           </div>
@@ -28,7 +28,8 @@ const store = useStore()
 
 const props = defineProps<{
   show: boolean;
-  musicList: Playlist;
+  name: string;
+  songList: any[]
 }>()
 const emit = defineEmits(['update:show'])
 
@@ -45,7 +46,7 @@ const formatDetail = computed(() => (detail: any) => {
 })
 
 const handlePlay = (item: any) => {
-  const tracks = props.musicList?.tracks || []
+  const tracks = props.songList || []
   const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
   store.commit('setPlayList', tracks)
 }
diff --git a/src/components/RecommendAlbum.vue b/src/components/RecommendAlbum.vue
index ef0f189..7362447 100644
--- a/src/components/RecommendAlbum.vue
+++ b/src/components/RecommendAlbum.vue
@@ -8,6 +8,7 @@
                     class="recommend-album-list-item"
                     :class="setAnimationClass('animate__backInUp')"
                     :style="setAnimationDelay(index, 100)"
+                    @click="handleClick(item)"
                 >
                     <n-image
                         class="recommend-album-list-item-img"
@@ -19,6 +20,7 @@
                 </div>
             </template>
         </div>
+       <MusicList v-model:show="showMusic" :name="albumName" :song-list="songList" />
     </div>
 </template>
 
@@ -27,6 +29,7 @@ import { getNewAlbum } from "@/api/home"
 import { ref, onMounted } from "vue";
 import type { IAlbumNew } from "@/type/album"
 import { setAnimationClass, setAnimationDelay, getImgUrl } from "@/utils";
+import { getAlbum } from "@/api/list";
 
 
 const albumData = ref<IAlbumNew>()
@@ -35,6 +38,20 @@ const loadAlbumList = async () => {
     albumData.value = data
 }
 
+const showMusic = ref(false)
+const songList = ref([])
+const albumName = ref('')
+
+const handleClick = async (item:any) => {
+  albumName.value = item.name
+  showMusic.value = true
+   const res = await getAlbum(item.id)
+    songList.value = res.data.songs.map((song:any)=>{
+      song.al.picUrl = song.al.picUrl || item.picUrl
+      return song
+    })
+}
+
 onMounted(() => {
     loadAlbumList()
 })
diff --git a/src/components/common/SearchItem.vue b/src/components/common/SearchItem.vue
index 69035e8..2a9ea6b 100644
--- a/src/components/common/SearchItem.vue
+++ b/src/components/common/SearchItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="search-item">
+  <div class="search-item" @click="handleClick">
     <div class="search-item-img">
       <n-image
         :src="getImgUrl(item.picUrl, 'album')"
@@ -11,20 +11,40 @@
       <div class="search-item-name">{{ item.name }}</div>
       <div class="search-item-artist">{{ item.desc}}</div>
     </div>
+
+    <MusicList v-model:show="showMusic" :name="item.name" :song-list="songList" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { getImgUrl } from '@/utils'
 import type {Album}  from '@/type/album'
+import { getAlbum } from '@/api/list';
 const props = defineProps<{
   item: {
     picUrl: string
     name: string
     desc: string
+    type: string
+    [key: string]: any
   }
 }>()
 
+const songList = ref([])
+
+const showMusic = ref(false)
+
+const handleClick = async () => {
+  showMusic.value = true
+  if(props.item.type === '专辑'){
+   const res = await getAlbum(props.item.id)
+    songList.value = res.data.songs.map((song:any)=>{
+      song.al.picUrl = song.al.picUrl || props.item.picUrl
+      return song
+    })
+  }
+}
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/common/SongItem.vue b/src/components/common/SongItem.vue
index de49fb4..b420c2c 100644
--- a/src/components/common/SongItem.vue
+++ b/src/components/common/SongItem.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="song-item" :class="{'song-mini': mini}">
     <n-image
+      v-if="item.picUrl "
       :src="getImgUrl( item.picUrl, '40y40')"
       class="song-item-img"
       lazy
diff --git a/src/hooks/MusicHook.ts b/src/hooks/MusicHook.ts
index d203867..e49c6c4 100644
--- a/src/hooks/MusicHook.ts
+++ b/src/hooks/MusicHook.ts
@@ -57,7 +57,7 @@ const loadLrc = async (playMusicId: number): Promise<void> => {
 }
 
 // 歌词矫正时间Correction time
-const correctionTime = ref(0)
+const correctionTime = ref(0.4)
 
 // 增加矫正时间
 const addCorrectionTime = (time: number) => {
diff --git a/src/store/index.ts b/src/store/index.ts
index e2b4b29..a638b8c 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -79,7 +79,7 @@ const getSongUrl = async (id: number) => {
   const { data } = await getMusicUrl(id)
   let url = ''
   try {
-    if (data.data[0].freeTrialInfo) {
+    if (data.data[0].freeTrialInfo || !data.data[0].url) {
       const res = await getParsingMusicUrl(id)
       url = res.data.data.url
     }
diff --git a/src/views/list/index.vue b/src/views/list/index.vue
index 8497c21..9d4fc9f 100644
--- a/src/views/list/index.vue
+++ b/src/views/list/index.vue
@@ -91,7 +91,7 @@ watch(
       </div>
       <PlayBottom/>
     </n-scrollbar>
-    <MusicList v-if="listDetail?.playlist" v-model:show="showMusic" :music-list="listDetail?.playlist" />
+    <MusicList v-if="listDetail?.playlist" v-model:show="showMusic" :name="listDetail?.playlist.name" :song-list="listDetail?.playlist.tracks" />
   </div>
 </template>
 
diff --git a/src/views/search/index.vue b/src/views/search/index.vue
index 64f3055..102cd99 100644
--- a/src/views/search/index.vue
+++ b/src/views/search/index.vue
@@ -123,7 +123,6 @@ const loadSearch = async (keywords: any) => {
       songs,
       albums
     }
-    console.log('searchDetail',searchDetail.value)
 };
 
 loadSearch(route.query.keyword);
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 7313e0b..b11af7a 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -145,7 +145,7 @@ const handlePlay = (item: any) => {
         </n-scrollbar>
       </div>
     </div>
-    <MusicList v-if="list" v-model:show="isShowList" :music-list="list" />
+    <MusicList v-if="list" v-model:show="isShowList" :name="list.name" :song-list="list.tracks" />
   </div>
 </template>