From a73f0849dbda0d7b2da50f58d83306edfd56f04f Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Tue, 23 Feb 2021 05:23:37 +0800
Subject: [PATCH] feat: search result can play

* imporve components (DetailLists, ModListMenu)
---
 src/assets/css/fakeqqmusic.scss       |  15 +++
 src/components/common/DetailLists.vue | 147 +++++++-------------------
 src/components/common/ModListMenu.vue |  44 +++++++-
 3 files changed, 93 insertions(+), 113 deletions(-)

diff --git a/src/assets/css/fakeqqmusic.scss b/src/assets/css/fakeqqmusic.scss
index 8109442..1ee6106 100644
--- a/src/assets/css/fakeqqmusic.scss
+++ b/src/assets/css/fakeqqmusic.scss
@@ -1049,6 +1049,21 @@ $black: #000;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .mod_list_menu {
+    position: absolute;
+    left: 44%;
+    left: -9999px\9;
+    top: 19px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .playlist__item--current .mod_list_menu,
+  .playlist__item--hover .mod_list_menu {
+    opacity: 1;
+    left: 44%;
+    pointer-events: inherit;
+  }
 }
 
 .mod_lyric_list,
diff --git a/src/components/common/DetailLists.vue b/src/components/common/DetailLists.vue
index a9cb3b1..5a5719b 100644
--- a/src/components/common/DetailLists.vue
+++ b/src/components/common/DetailLists.vue
@@ -7,7 +7,13 @@
         <li class="playlist__header_other">{{ titles[kind][2] }}</li>
       </ul>
       <ul class="playlist__list">
-        <li class="playlist__item" v-for="l in lists" :key="l.id">
+        <li
+          class="playlist__item"
+          onmouseover="this.className=(this.className+' playlist__item--hover')"
+          onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
+          v-for="l in lists"
+          :key="l.id"
+        >
           <div class="playlist__cover" style="visibility: visible">
             <a class="js_album"
               ><img
@@ -20,9 +26,27 @@
           </div>
           <h4 class="playlist__title">
             <span class="playlist__title_txt">
-              <a class="js_album" :title="l.name">{{ l.name }}</a>
+              <a
+                class="js_album"
+                v-if="kind == 0"
+                :title="l.name"
+                @click="gotoAlbumDetail(l.id)"
+              >
+                {{ l.name }}
+              </a>
+              <a
+                class="js_album"
+                v-else-if="kind == 1"
+                :title="l.name"
+                @click="gotoPlaylistDetail(l.id)"
+              >
+                {{ l.name }}
+              </a>
             </span>
           </h4>
+          <!-- 功能条 -->
+          <mod-list-menu :id="l.id" :kind="kind + 1" />
+
           <div class="playlist__author">
             <a class="js_singer" v-if="kind == 0" :title="l.artistsText">{{
               l.artistsText
@@ -44,6 +68,9 @@
 </template>
 
 <script>
+import ModListMenu from "components/common/ModListMenu";
+import { gotoAlbumDetail, gotoPlaylistDetail } from "common/utils";
+
 export default {
   data() {
     return {
@@ -61,116 +88,18 @@ export default {
     // 0: album, 1: playlist
     kind: { default: 0 },
   },
+  methods: {
+    gotoAlbumDetail,
+    gotoPlaylistDetail,
+  },
+  components: {
+    ModListMenu,
+  },
 };
 </script>
 
 <style scoped>
-.mod_playlist_text {
-  zoom: 1;
-  font-size: 14px;
-}
-.mod_lyric_list,
-.mod_mv_list,
-.mod_playlist_text,
-.mod_songlist {
-  padding-bottom: 40px;
-}
-.mod_playlist_text .playlist__header {
-  height: 50px;
-  line-height: 50px;
-  background-color: #fbfbfd;
-  color: #999;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__header_author,
-.mod_playlist_text .playlist__header_name,
-.mod_playlist_text .playlist__header_number,
-.mod_playlist_text .playlist__number {
-  float: left;
-  padding-left: 20px;
-}
-.mod_playlist_text .playlist__header_name {
-  width: 57%;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__header_author {
-  width: 30%;
-}
-.mod_playlist_text .playlist__header_other,
-.mod_playlist_text .playlist__other {
-  width: 7.5%;
-}
-.mod_playlist_text .playlist__header_other,
-.mod_playlist_text .playlist__other {
-  float: right;
-  padding-right: 20px;
-  text-align: right;
-}
-.mod_playlist_text .playlist__item {
-  position: relative;
-  height: 70px;
-  line-height: 70px;
-  zoom: 1;
-  overflow: hidden;
-  clear: both;
-  font-size: 0;
-}
-.mod_playlist_text .playlist__cover {
-  float: left;
-  width: 50px;
-  height: 50px;
-  overflow: hidden;
-  margin-top: 10px;
-  padding-left: 20px;
-}
-.mod_playlist_text .playlist__pic {
-  height: 100%;
-  object-fit: cover;
-}
-.mod_playlist_text .playlist__pic {
-  display: block;
-  width: 100%;
-  min-height: 50px;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__number,
-.mod_playlist_text .playlist__other,
-.mod_playlist_text .playlist__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-}
-.mod_playlist_text .playlist__title {
-  width: 52.66667%;
-  font-weight: 400;
-  text-indent: 15px;
-  overflow: hidden;
-}
-.mod_playlist_text .playlist__title_txt {
-  float: left;
-  max-width: 90%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__count,
-.mod_playlist_text .playlist__number,
-.mod_playlist_text .playlist__title {
-  float: left;
-  height: 70px;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__header_author {
-  width: 30%;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__number,
-.mod_playlist_text .playlist__other,
-.mod_playlist_text .playlist__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
+a:hover {
+  color: #31c27c;
 }
 </style>
diff --git a/src/components/common/ModListMenu.vue b/src/components/common/ModListMenu.vue
index a1666b4..ada8bb9 100644
--- a/src/components/common/ModListMenu.vue
+++ b/src/components/common/ModListMenu.vue
@@ -20,6 +20,7 @@
       class="list_menu__item list_menu__down js_down"
       title="下载"
       aria-haspopup="true"
+      v-if="kind == 0"
     >
       <i class="list_menu__icon_down"></i>
       <span class="icon_txt">下载</span>
@@ -36,20 +37,55 @@
 </template>
 
 <script>
-import { playTheSong } from "common/utils";
+import { playTheSong, playSonglist, createSongs } from "common/utils";
+import { getPlaylistDetial, getSongDetail, getAlbum } from "api";
+
 export default {
   props: {
     song: {
       type: Object,
       default: {},
     },
+    id: { default: 0 },
+    // 0: song, 1: album , 2: playlist
+    kind: { default: 0 },
   },
   methods: {
     play() {
-      if (this.song) {
-        playTheSong(this.song);
+      switch (this.kind) {
+        case 0:
+          if (this.song) {
+            playTheSong(this.song);
+          }
+          console.log(this.song);
+          break;
+        case 1:
+          this.playAlbum(this.id);
+          break;
+        case 2:
+          this.playTheList(this.id);
+          break;
+        default:
+          console.log(this.kind);
       }
-      console.log(this.song);
+    },
+    playTheList(listId) {
+      getPlaylistDetial(listId).then((res) => {
+        let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
+        let songDetails = getSongDetail(trackIds.slice(0, 500)).then((res) => {
+          let songs = createSongs(res.data.songs);
+          //console.log(songs);
+          playSonglist(songs);
+        });
+      });
+    },
+    playAlbum(id) {
+      getAlbum(this.id).then((res) => {
+        let ds = res.data;
+        let songs = createSongs(ds.songs);
+        console.log(this.songs);
+        playSonglist(songs);
+      });
     },
   },
 };
-- 
GitLab