From 0bbc2558a54d58ba9a1d7727ec7038f93f98db1e Mon Sep 17 00:00:00 2001
From: alger <liuliujjjjasd@foxmail.com>
Date: Fri, 8 Oct 2021 17:16:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5=E6=AD=8C?=
 =?UTF-8?q?=E5=8D=95cat=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/list.ts                   | 17 +++++++--
 src/components/PlaylistType.vue   | 11 ++++++
 src/components/common/MPop.vue    | 41 ++++++++++++++++++++++
 src/layout/components/PlayBar.vue |  3 +-
 src/views/list/index.vue          | 57 +++++++++++++++++++++++++------
 src/views/user/index.vue          |  5 +++
 6 files changed, 120 insertions(+), 14 deletions(-)
 create mode 100644 src/components/common/MPop.vue

diff --git a/src/api/list.ts b/src/api/list.ts
index d873be5..096cbbe 100644
--- a/src/api/list.ts
+++ b/src/api/list.ts
@@ -1,5 +1,5 @@
 import request from "@/utils/request";
-import { IList, IRecommendList } from "@/type/list";
+import { IList } from "@/type/list";
 import type { IListDetail } from "@/type/listDetail";
 
 interface IListByTagParams {
@@ -8,14 +8,27 @@ interface IListByTagParams {
   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<IRecommendList>("/personalized", { params: { limit } });
+  return request.get("/personalized", { params: { limit } });
 }
 
 // 获取歌单详情
diff --git a/src/components/PlaylistType.vue b/src/components/PlaylistType.vue
index 4fb52fc..745a8c6 100644
--- a/src/components/PlaylistType.vue
+++ b/src/components/PlaylistType.vue
@@ -9,6 +9,7 @@
                     :class="setAnimationClass('animate__bounceIn')"
                     :style="setAnimationDelay(index <= 13 ? index : index - 13)"
                     v-if="isShowAllPlaylistCategory || index <= 13"
+                    @click="handleClickPlaylistType(item.name)"
                 >{{ item.name }}</span>
             </template>
             <div
@@ -32,6 +33,7 @@ import { onMounted, ref } from "vue";
 import { getPlaylistCategory } from "@/api/home";
 import type { IPlayListSort } from "@/type/playlist";
 import { setAnimationDelay, setAnimationClass } from "@/utils";
+import { useRoute, useRouter } from "vue-router";
 // 歌单分类
 const playlistCategory = ref<IPlayListSort>();
 // 是否显示全部歌单分类
@@ -43,6 +45,15 @@ const loadPlaylistCategory = async () => {
     playlistCategory.value = data;
 };
 
+const router = useRouter();
+const handleClickPlaylistType = (type: any) => {
+    router.push({
+        path: "/list",
+        query: {
+            type: type,
+        }
+    });
+};
 // 页面初始化
 onMounted(() => {
     loadPlaylistCategory();
diff --git a/src/components/common/MPop.vue b/src/components/common/MPop.vue
new file mode 100644
index 0000000..a17a278
--- /dev/null
+++ b/src/components/common/MPop.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+
+const props = defineProps({
+  showPop: {
+    type: Boolean,
+    default: false
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+})
+
+const musicFullClass = computed(() => {
+  if (props.showPop) {
+    return setAnimationClass('animate__fadeInUp')
+  } else {
+    return setAnimationClass('animate__fadeOutDown')
+  }
+})
+
+</script>
+
+<template>
+  <div class="pop-page" v-show="props.showPop" :class="musicFullClass">
+    <i class="iconfont icon-icon_error close" v-if="props.showClose" @click="close()"></i>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.pop-page {
+  height: 800px;
+  @apply relative;
+  .close {
+    @apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index 6a62214..90b5192 100644
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -187,7 +187,8 @@ const onAudio = (audio: any) => {
         allTime.value = audio.duration
 
         if (audio.currentTime >= audio.duration) {
-            store.commit("setPlayMusic", false);
+            // store.commit("setPlayMusic", false);
+            audio.play()
         }
         // 获取音量
         audioVolume.value = audio.volume
diff --git a/src/views/list/index.vue b/src/views/list/index.vue
index 8038192..f3c8b58 100644
--- a/src/views/list/index.vue
+++ b/src/views/list/index.vue
@@ -1,19 +1,16 @@
 <script lang="ts" setup>
-import { getRecommendList, getListDetail } from '@/api/list'
-import { computed, onMounted, ref } from 'vue';
+import { getRecommendList, getListDetail, getListByTag, getListByCat } from '@/api/list'
+import { computed, onMounted, ref, watch } from 'vue';
 import type { IRecommendList, IRecommendItem } from "@/type/list";
 import type { IListDetail } from "@/type/listDetail";
 import { setAnimationClass, setAnimationDelay } from "@/utils";
 import SongItem from "@/components/common/SongItem.vue";
+import { useRoute, useRouter } from 'vue-router';
 
 
 
-const recommendList = ref<IRecommendList>()
+const recommendList = ref()
 const showMusic = ref(false)
-onMounted(async () => {
-  const { data } = await getRecommendList()
-  recommendList.value = data
-})
 
 const recommendItem = ref<IRecommendItem>()
 const listDetail = ref<IListDetail>()
@@ -27,6 +24,39 @@ const closeMusic = () => {
   showMusic.value = false
 }
 
+const route = useRoute();
+const listTitle = ref(route.query.type || "歌单列表");
+
+const loadList = async (type: any) => {
+  const params = {
+    cat: type || '',
+    limit: 30,
+    offset: 0
+  }
+  const { data } = await getListByCat(params);
+  recommendList.value = data.playlists
+}
+
+if (route.query.type) {
+  loadList(route.query.type)
+} else {
+  getRecommendList().then((res: { data: { result: any; }; }) => {
+    recommendList.value = res.data.result
+  })
+}
+
+watch(
+  () => route.query,
+  async newParams => {
+    const params = {
+      tag: newParams.type || '',
+      limit: 30,
+      before: 0
+    }
+    loadList(newParams.type);
+  }
+)
+
 const musicFullClass = computed(() => {
   if (recommendItem.value) {
     return setAnimationClass('animate__fadeInUp')
@@ -66,18 +96,22 @@ const formatDetail = computed(() => (detail: any) => {
 
 <template>
   <div class="list-page">
+    <!-- 歌单列表 -->
     <n-layout class="recommend" :native-scrollbar="false" @click="showMusic = false">
-      <div class="recommend-title" :class="setAnimationClass('animate__bounceInLeft')">歌单推荐</div>
-      <div class="recommend-list">
+      <div
+        class="recommend-title"
+        :class="setAnimationClass('animate__bounceInLeft')"
+      >{{ listTitle }}</div>
+      <div class="recommend-list" v-if="recommendList">
         <div
           class="recommend-item"
-          v-for="(item,index) in recommendList?.result"
+          v-for="(item,index) in recommendList"
           :class="setAnimationClass('animate__bounceIn')"
           :style="setAnimationDelay(index, 30)"
           @click.stop="selectRecommendItem(item)"
         >
           <div class="recommend-item-img">
-            <img :src="item.picUrl + '?param=200y200'" alt />
+            <img :src="(item.picUrl || item.coverImgUrl) + '?param=200y200'" />
             <div class="top">
               <div class="play-count">{{ formatNumber(item.playCount) }}</div>
               <i class="iconfont icon-videofill"></i>
@@ -91,6 +125,7 @@ const formatDetail = computed(() => (detail: any) => {
     <div class="music-page" v-show="showMusic" :class="musicFullClass">
       <i class="iconfont icon-icon_error music-close" @click="closeMusic()"></i>
       <div class="music-title">{{ recommendItem?.name }}</div>
+      <!-- 歌单歌曲列表 -->
       <n-layout class="music-list" :native-scrollbar="false">
         <div
           v-for="(item, index) in listDetail?.playlist.tracks"
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 3946ee8..a3b278b 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -5,6 +5,7 @@ import { getUserDetail, getUserPlaylist } from "@/api/user";
 import type { IUserDetail } from "@/type/user";
 import { ref } from "vue";
 import { setAnimationClass, setAnimationDelay } from "@/utils";
+import MPop from "@/components/common/MPop.vue";
 
 const store = useStore()
 const router = useRouter()
@@ -67,6 +68,10 @@ loadPage()
         </div>
       </div>
     </div>
+
+    <MPop :show-pop="true">
+      <div>aaaaaaaaaaaaaaaaaa</div>
+    </MPop>
   </div>
 </template>