feat(music): search

src/components/search/Suggest.vue

@@ -1,14 +1,15 @@
 <!--
  * @Author: NineNan
  * @Date: 2021-08-03 22:06:39
- * @LastEditTime: 2021-08-04 23:50:16
+ * @LastEditTime: 2021-08-05 22:49:46
  * @LastEditors: Please set LastEditors
  * @Description: suggest
  * @FilePath: /study_vue03/src/components/search/Suggest.vue
 -->
 <template>
   <article
     class="suggest"
+    ref="rootRef"
     v-loading="isShowLoading"
     v-no-result[noResultText]="isShowNoResult"
   >
@@ -39,7 +40,7 @@
   </article>
 </template>
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, nextTick, ref, watch } from "vue";
 // api
 import { search } from "@/api/search";
 import { processSongs } from "@/api/song";
@@ -73,16 +74,24 @@ export default defineComponent({
     const hasMore = ref(true);
     const page = ref(1);
     const noResultText = ref("抱歉，暂无搜索结果");
+    const manualLoading = ref(false);
+
     const isShowLoading = computed(() => !singer.value && !songs.value.length);
     const isShowNoResult = computed(
       () => !singer.value && !songs.value.length && !hasMore.value
     );
     const isShowPullUpLoading = computed(
       () => hasMore.value && isPullUpLoad.value
     );
+    const preventPullUpLoad = computed(
+      () => isShowLoading.value || manualLoading.value
+    );
 
     // hooks
-    const { rootRef, isPullUpLoad } = usePullUpLoad(searchMore);
+    const { rootRef, isPullUpLoad, scroll } = usePullUpLoad(
+      searchMore,
+      preventPullUpLoad
+    );
 
     watch(
       () => props.query,
@@ -95,20 +104,6 @@ export default defineComponent({
       }
     );
 
-    async function searchMore() {
-      if (!hasMore.value) {
-        return;
-      }
-      page.value++;
-      const response = await search<ISearchResult>(
-        props.query,
-        page.value,
-        props.isShowSinger
-      );
-      songs.value = songs.value.concat(await processSongs(response.songs));
-      hasMore.value = response.hasMore;
-    }
-
     /**
      * 重置数据
      */
@@ -118,11 +113,11 @@ export default defineComponent({
       songs.value = [];
       hasMore.value = true;
     };
-
     /**
      * 搜索数据
      */
     const searchData = async () => {
+      if (!props.query) return;
       const response = await search<ISearchResult>(
         props.query,
         page.value,
@@ -132,13 +127,44 @@ export default defineComponent({
       songs.value = await processSongs(response.songs);
       singer.value = response.singer;
       hasMore.value = response.hasMore;
-      console.log("response :>> ", response);
+
+      await nextTick();
+      await makeItScrollAble();
     };
+    /**
+     * 搜索更多
+     */
+    async function searchMore() {
+      if (!hasMore.value || !props.query) {
+        return;
+      }
+      page.value++;
+      const response = await search<ISearchResult>(
+        props.query,
+        page.value,
+        props.isShowSinger
+      );
+      songs.value = songs.value.concat(await processSongs(response.songs));
+      hasMore.value = response.hasMore;
+
+      await nextTick();
+      await makeItScrollAble();
+    }
+
+    async function makeItScrollAble() {
+      if (scroll.value) {
+        if (scroll.value?.maxScrollY >= -1) {
+          manualLoading.value = true;
+          await searchMore();
+          manualLoading.value = false;
+        }
+      }
+    }
 
-    const selectSong = (song: any) => {
+    const selectSong = (song: ISingerDetailsInfo) => {
       emit("select-song", song);
     };
-    const selectSinger = (singer: any) => {
+    const selectSinger = (singer: ISingerInfo) => {
       emit("select-singer", singer);
     };
 

src/helpers/constant.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: NineNan
  * @Date: 2021-05-11 22:42:52
- * @LastEditTime: 2021-07-19 22:58:00
+ * @LastEditTime: 2021-08-05 22:55:59
  * @LastEditors: Please set LastEditors
  * @Description: constant
  * @FilePath: /study_vue03/src/helpers/constant.ts

src/hooks/use-pull-up-load.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: NineNan
  * @Date: 2021-08-04 22:53:30
- * @LastEditTime: 2021-08-04 23:34:38
+ * @LastEditTime: 2021-08-05 22:32:59
  * @LastEditors: Please set LastEditors
  * @Description: use-pull-up-load
  * @FilePath: /study_vue03/src/hooks/use-pull-up-load.ts
@@ -22,7 +22,10 @@ export interface IUsePullUpLoad {
   isPullUpLoad: Ref<boolean>;
 }
 
-export default function usePullUpLoad(requestData: () => void): IUsePullUpLoad {
+export default function usePullUpLoad(
+  requestData: () => void,
+  preventPullUpLoad: Ref<boolean>
+): IUsePullUpLoad {
   const scroll = ref<IBScroll>();
   const rootRef = ref<HTMLElement | null>(null);
   const isPullUpLoad = ref(false);
@@ -40,6 +43,11 @@ export default function usePullUpLoad(requestData: () => void): IUsePullUpLoad {
     scrollVal.on("pullingUp", pullingUpHandler);
 
     async function pullingUpHandler() {
+      if (preventPullUpLoad.value) {
+        scrollVal.finishPullUp();
+        return;
+      }
+
       isPullUpLoad.value = true;
       await requestData();
       scrollVal.finishPullUp();

src/router/modules/music.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: NineNan
  * @Date: 2021-05-17 22:55:24
- * @LastEditTime: 2021-08-02 22:37:15
+ * @LastEditTime: 2021-08-05 23:13:17
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /study_vue03/src/router/modules/music.ts
@@ -32,6 +32,16 @@ const music: RouteRecordRaw = {
       path: "search",
       name: "search",
       component: () => import("@/views/music/search/index.vue"),
+      children: [
+        {
+          path: ":mid",
+          name: "SearchSingerDetails",
+          component: () => import("@/views/singer-details/index.vue"),
+          meta: {
+            title: "歌手详情",
+          },
+        },
+      ],
     },
     {
       path: "ranking-list",

src/store/modules/music.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: NineNan
  * @Date: 2021-06-06 17:53:36
- * @LastEditTime: 2021-08-03 21:59:17
+ * @LastEditTime: 2021-08-05 23:01:38
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /study_vue03/src/store/modules/music.ts
@@ -224,6 +224,38 @@ const actions = {
     context.commit(SET_CURRENT_INDEX, 0);
     context.commit(SET_PLAYING_STATUE, false);
   },
+  /**
+   * 添加并播放歌曲
+   * @param context
+   * @param song
+   */
+  addSong(
+    context: ActionContext<IMusicStore, IMusicStore>,
+    song: ISingerDetailsInfo
+  ): void {
+    const playList = state.playList.slice();
+    const sequenceList = state.sequenceList.slice();
+    let currentIndex = state.currentIndex;
+    const playIndex = findIndex(playList, song);
+
+    if (playIndex !== -1) {
+      currentIndex = playIndex;
+    } else {
+      playList.push(song);
+      currentIndex = playList.length - 1;
+    }
+
+    const sequenceIndex = findIndex(sequenceList, song);
+    if (sequenceIndex === -1) {
+      sequenceList.push(song);
+    }
+
+    context.commit(SET_PLAYLIST, playList);
+    context.commit(SET_SEQUENCE_LIST, sequenceList);
+    context.commit(SET_CURRENT_INDEX, currentIndex);
+    context.commit(SET_PLAYING_STATUE, true);
+    context.commit(SET_FULL_SCREEN, true);
+  },
 };
 
 function findIndex(

src/views/music/search/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: NineNan
  * @Date: 2021-05-17 23:00:01
- * @LastEditTime: 2021-08-03 22:53:25
+ * @LastEditTime: 2021-08-05 23:16:10
  * @LastEditors: Please set LastEditors
  * @Description: search
  * @FilePath: /study_vue03/src/views/search/index.vue
@@ -27,8 +27,21 @@
       </section>
     </article>
     <article class="search-result" v-show="query">
-      <suggest :query="query"></suggest>
+      <suggest
+        :query="query"
+        @select-song="selectSong"
+        @select-singer="selectSinger"
+      ></suggest>
     </article>
+    <Suspense>
+      <template #default>
+        <router-view v-slot="{ Component }">
+          <transition appear name="slide">
+            <component :is="Component" :singer="selectedSinger" />
+          </transition>
+        </router-view>
+      </template>
+    </Suspense>
   </main>
 </template>
 <script lang="ts">
@@ -39,11 +52,17 @@ import Suggest from "@/components/search/Suggest.vue";
 import { getHotKeys } from "@/api/search";
 import { Ref, ref, watch } from "vue";
 // types
-import { IHotKey } from "@/types/index";
+import { IHotKey, ISingerDetailsInfo, ISingerInfo } from "@/types/index";
+import { useStore } from "@/store";
+import { useRouter } from "vue-router";
+import { CACHE_SINGER_INFO } from "@/helpers/constant";
 export interface ISearch {
   query: Ref<string>;
   hotKeys: Ref<IHotKey[]>;
   addQuery: (key: string) => void;
+  selectSong: (song: ISingerDetailsInfo) => void;
+  selectSinger: (singer: ISingerInfo) => void;
+  selectedSinger: Ref<ISingerInfo | null>;
 }
 
 export default {
@@ -53,12 +72,11 @@ export default {
     suggest: Suggest,
   },
   setup(): ISearch {
+    const store = useStore();
+    const router = useRouter();
     const query = ref("");
     const hotKeys = ref<IHotKey[]>([]);
-
-    watch(query, (newQuery) => {
-      console.log("newQuery :>> ", newQuery);
-    });
+    let selectedSinger = ref<ISingerInfo | null>(null);
 
     getHotKeys<{ hotKeys: IHotKey[] }>().then((res) => {
       hotKeys.value = res.hotKeys;
@@ -67,11 +85,33 @@ export default {
     const addQuery = (key: string) => {
       query.value = key;
     };
+    /**
+     * 添加播放歌曲
+     */
+    const selectSong = (song: ISingerDetailsInfo) => {
+      store.dispatch("addSong", song);
+    };
+    /**
+     * 选择歌手
+     */
+    const selectSinger = (singer: ISingerInfo) => {
+      selectedSinger.value = singer;
+      store.commit(CACHE_SINGER_INFO, singer);
+      router.push({
+        name: "SearchSingerDetails",
+        params: {
+          mid: singer.mid,
+        },
+      });
+    };
 
     return {
       query,
       hotKeys,
+      selectedSinger,
       addQuery,
+      selectSong,
+      selectSinger,
     };
   },
 };