✨ feat: 完善播放列表问题 修复 滚动

src/layout/AppLayout.vue

@@ -68,7 +68,7 @@ const menus = store.state.menus;
         height: 100vh;
         &-content {
             @apply rounded-2xl pb-28 box-border;
-            height: calc(100vh - 60px);
+            height: 100vh;
         }
         &-page {
             margin: 20px 0;

src/layout/components/PlayBar.vue

@@ -82,11 +82,10 @@
 
 <script lang="ts" setup>
 import type { SongResult } from '@/type/music'
-import { secondToMinute, getImgUrl, getIsMc } from '@/utils'
+import { secondToMinute, getImgUrl } from '@/utils'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { setAnimationClass } from '@/utils'
-import { getParsingMusicUrl } from '@/api/music'
 import {
   loadLrc,
   nowTime,

src/store/index.ts

@@ -46,10 +46,18 @@ const mutations = {
     state.playList = playList
   },
   async nextPlay(state: State) {
+    if (state.playList.length === 0) {
+      state.play = true
+      return
+    }
     state.playListIndex = (state.playListIndex + 1) % state.playList.length
     await updatePlayMusic(state)
   },
   async prevPlay(state: State) {
+    if (state.playList.length === 0) {
+      state.play = true
+      return
+    }
     state.playListIndex =
       (state.playListIndex - 1 + state.playList.length) % state.playList.length
     await updatePlayMusic(state)

src/views/search/index.vue

@@ -38,7 +38,7 @@
                     :class="setAnimationClass('animate__bounceInRight')"
                     :style="setAnimationDelay(index, 50)"
                 >
-                    <SongItem :item="item" />
+                    <SongItem :item="item" @play="handlePlay"/>
                 </div>
             </template>
             </div>
@@ -52,10 +52,9 @@ import type { IHotSearch } from "@/type/search";
 import { getHotSearch } from "@/api/home";
 import { useRoute, useRouter } from "vue-router";
 import { setAnimationClass, setAnimationDelay } from "@/utils";
-import type { ISearchDetail } from "@/type/search";
 import { onMounted, ref, watch } from "vue";
 import SongItem from "@/components/common/SongItem.vue";
-
+import { useStore } from "vuex";
 
 const route = useRoute();
 const router = useRouter();
@@ -85,10 +84,8 @@ const clickHotKeyword = (keyword: string) => {
     // isHotSearchList.value = false;
 };
 
-
-
-
 const loadSearch = async (keyword: any) => {
+    hotKeyword.value = keyword;
     searchDetail.value = undefined;
     if (!keyword) return;
     const { data } = await getSearch(keyword);
@@ -112,6 +109,14 @@ watch(
         loadSearch(newParams.keyword);
     }
 )
+
+const store = useStore()
+
+const handlePlay = (item: any) => {
+  const tracks = searchDetail.value?.result.songs || []
+  const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
+  store.commit('setPlayList', tracks.slice(musicIndex))
+}
 </script>
 
 <style lang="scss" scoped>

src/views/user/index.vue

@@ -9,6 +9,7 @@ import { getListDetail } from '@/api/list'
 import SongItem from "@/components/common/SongItem.vue";
 import MusicList from "@/components/MusicList.vue";
 import type { Playlist } from '@/type/listDetail';
+import PlayBottom from "@/components/common/PlayBottom.vue";
 
 
 const store = useStore()
@@ -99,40 +100,46 @@ const handlePlay = (item: any) => {
 
         <div class="play-list" :class="setAnimationClass('animate__fadeInLeft')">
           <div class="play-list-title">创建的歌单</div>
-          <div
+          <n-scrollbar>
-            class="play-list-item"
+            <div
-            v-for="(item,index) in playList"
+              class="play-list-item"
-            :key="index"
+              v-for="(item,index) in playList"
-            @click="showPlaylist(item.id)"
+              :key="index"
-          >
+              @click="showPlaylist(item.id)"
-            <n-image
+            >
-              :src="getImgUrl( item.coverImgUrl, '')"
+              <n-image
-              class="play-list-item-img"
+                :src="getImgUrl( item.coverImgUrl, '')"
-              lazy
+                class="play-list-item-img"
-              preview-disabled
+                lazy
-            />
+                preview-disabled
-            <div class="play-list-item-info">
+              />
-              <div class="play-list-item-name">{{ item.name }}</div>
+              <div class="play-list-item-info">
-              <div class="play-list-item-count">{{ item.trackCount }}首，播放{{ item.playCount }}次</div>
+                <div class="play-list-item-name">{{ item.name }}</div>
+                <div class="play-list-item-count">{{ item.trackCount }}首，播放{{ item.playCount }}次</div>
+              </div>
             </div>
-          </div>
+            <PlayBottom/>
+          </n-scrollbar>
         </div>
       </div>
     </div>
     <div class="right" :class="setAnimationClass('animate__fadeInRight')">
-      <n-layout class="record-list" :native-scrollbar="false">
+      <div class="title">听歌排行</div>
-        <div class="title">听歌排行</div>
+      <div class="record-list">
-        <div
+        <n-scrollbar>
-          class="record-item"
+          <div
-          v-for="(item, index) in recordList"
+            class="record-item"
-          :key="item.song.id"
+            v-for="(item, index) in recordList"
-          :class="setAnimationClass('animate__bounceInUp')"
+            :key="item.song.id"
-          :style="setAnimationDelay(index, 50)"
+            :class="setAnimationClass('animate__bounceInUp')"
-        >
+            :style="setAnimationDelay(index, 50)"
-          <SongItem class="song-item" :item="formatDetail(item.song)" @play="handlePlay"/>
+          >
-          <div class="play-count">{{ item.playCount }}次</div>
+            <SongItem class="song-item" :item="formatDetail(item.song)" @play="handlePlay"/>
-        </div>
+            <div class="play-count">{{ item.playCount }}次</div>
-      </n-layout>
+          </div>
+          <PlayBottom/>
+        </n-scrollbar>
+      </div>
     </div>
     <MusicList v-if="list" v-model:show="isShowList" :music-list="list" />
   </div>
@@ -152,9 +159,9 @@ const handlePlay = (item: any) => {
     max-width: 600px;
     background-color: #0d0d0d;
     background-size: 100%;
-    @apply flex-1 rounded-2xl  overflow-hidden relative bg-no-repeat;
+    @apply flex-1 rounded-2xl  overflow-hidden relative bg-no-repeat h-full;
     .page {
-      @apply p-4  w-full z-10;
+      @apply p-4  w-full z-10 flex flex-col h-full;
       background-color: #0d0d0d66;
     }
     .user-name {
@@ -199,7 +206,7 @@ const handlePlay = (item: any) => {
 }
 
 .play-list {
-  @apply mt-4 py-4 px-2 rounded-xl;
+  @apply mt-4 py-4 px-2 rounded-xl flex-1 overflow-hidden;
   background-color: #000000;
   &-title {
     @apply text-lg text-white opacity-70;