From 0a38dd10a5390745f7e95f6e57ee6a58c5692de7 Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Fri, 19 Feb 2021 20:01:29 +0800
Subject: [PATCH] update: some page add play func

---
 src/common/storeHelper.js                 | 13 +++++++++++++
 src/common/utils.js                       |  2 ++
 src/components/content/RecommendedBar.vue |  5 ++---
 src/views/musicLibrary/AlbumDetail.vue    | 15 +++++++++++----
 src/views/musicLibrary/Ranking.vue        | 19 +++++++++----------
 5 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 src/common/storeHelper.js

diff --git a/src/common/storeHelper.js b/src/common/storeHelper.js
new file mode 100644
index 0000000..57644c7
--- /dev/null
+++ b/src/common/storeHelper.js
@@ -0,0 +1,13 @@
+import Store from "@/store";
+
+// 替换播放列表，并播放
+export function playSonglist(list) {
+  Store.commit("music/setPlaylist", list);
+  Store.dispatch("music/startSong", list[0]);
+}
+
+// 将歌曲添加到列表尾部，并播放该歌曲
+export function playTheSong(song) {
+  Store.dispatch("music/addToPlaylist", song);
+  Store.dispatch("music/startSong", song);
+}
diff --git a/src/common/utils.js b/src/common/utils.js
index d60cb6a..986452c 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -1,3 +1,5 @@
+export * from "./storeHelper";
+
 export function processCount(count) {
   if (count > 10000000) {
     return (count / 10000000).toFixed(2) + "亿";
diff --git a/src/components/content/RecommendedBar.vue b/src/components/content/RecommendedBar.vue
index d76635a..db49c9f 100644
--- a/src/components/content/RecommendedBar.vue
+++ b/src/components/content/RecommendedBar.vue
@@ -65,7 +65,7 @@
 
 <script>
 import { getPlayList, getPlaylistDetial, getSongDetail } from "api";
-import { processCount, createSong } from "common/utils";
+import { processCount, createSong, playSonglist } from "common/utils";
 
 export default {
   data() {
@@ -122,8 +122,7 @@ export default {
             });
           });
           console.log(songs);
-          this.$store.commit("music/setPlaylist", songs);
-          this.$store.dispatch("music/startSong", songs[0]);
+          playSonglist(songs);
         });
       });
     },
diff --git a/src/views/musicLibrary/AlbumDetail.vue b/src/views/musicLibrary/AlbumDetail.vue
index caf2815..69d1563 100644
--- a/src/views/musicLibrary/AlbumDetail.vue
+++ b/src/views/musicLibrary/AlbumDetail.vue
@@ -43,9 +43,9 @@
         </ul>
 
         <div class="data__actions" role="toolbar">
-          <a class="mod_btn_green js_all_play"
-            ><i class="mod_btn_green__icon_play"></i>播放全部</a
-          >
+          <a class="mod_btn_green js_all_play" @click="playAll">
+            <i class="mod_btn_green__icon_play"></i>播放全部
+          </a>
 
           <a
             href="javascript:;"
@@ -106,6 +106,7 @@
                     <a
                       class="list_menu__item list_menu__play js_play"
                       title="播放"
+                      @click="playOne(idx)"
                     >
                       <i class="list_menu__icon_play"></i>
                       <span class="icon_txt">播放</span>
@@ -308,7 +309,7 @@
 
 <script>
 import { getAlbum } from "api";
-import { createSong } from "common/utils";
+import { createSong, playSonglist, playTheSong } from "common/utils";
 
 export default {
   data() {
@@ -355,6 +356,12 @@ export default {
         console.log(this.songs);
       });
     },
+    playAll() {
+      playSonglist(this.songs);
+    },
+    playOne(id) {
+      playTheSong(this.songs[id]);
+    },
   },
 };
 </script>
diff --git a/src/views/musicLibrary/Ranking.vue b/src/views/musicLibrary/Ranking.vue
index 1a48450..019b6e4 100644
--- a/src/views/musicLibrary/Ranking.vue
+++ b/src/views/musicLibrary/Ranking.vue
@@ -81,7 +81,7 @@
             ><i class="toplist_switch__arrow_prev sprite"></i
             ><i class="icon_txt">上一期</i></a
           >
-          <span class="toplist_switch__data js_chosed_week">2021-02-13</span>
+          <!-- <span class="toplist_switch__data js_chosed_week">2021-02-13</span> -->
           <a
             href="javascript:;"
             class="toplist_switch__btn js_next_week"
@@ -161,6 +161,7 @@
                   class="songlist__icon songlist__icon_mv sprite"
                   rel="noopener"
                   title="MV"
+                  :style="{ display: song.mvId == 0 ? 'none' : '' }"
                   ><span class="icon_txt">MV</span></a
                 >
 
@@ -168,11 +169,7 @@
                   class="songlist__songname_txt"
                   style="visibility: visible"
                 >
-                  <a
-                    class="songlist__cover album_name"
-                    data-albummid="002pDbf73FEsT9"
-                    data-albumid="1080467"
-                  >
+                  <a class="songlist__cover album_name">
                     <img
                       class="songlist__pic"
                       style="display: block; visibility: visible"
@@ -189,6 +186,7 @@
                     href="javascript:;"
                     class="list_menu__item list_menu__play js_play"
                     title="播放"
+                    @click="playOne(idx)"
                   >
                     <i class="list_menu__icon_play"></i>
                     <span class="icon_txt">播放</span>
@@ -247,7 +245,7 @@
 
 <script>
 import { getPlaylistDetial, getSongDetail } from "api";
-import { isDef, createSong } from "common/utils";
+import { isDef, createSong, playSonglist, playTheSong } from "common/utils";
 
 export default {
   data() {
@@ -332,9 +330,10 @@ export default {
       else return "icon_rank_down";
     },
     playAll() {
-      this.$store.commit("music/setPlaylist", this.listDatas);
-      this.$store.dispatch("music/startSong", this.listDatas[0]);
-      //this.$store.commit("music/setCurrentSong", songs[0]);
+      playSonglist(this.listDatas);
+    },
+    playOne(id) {
+      playTheSong(this.listDatas[id]);
     },
   },
   watch: {
-- 
GitLab