From 6cbf51de668dfb6ea0089ce1fc1b4428d417ad87 Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Sat, 20 Feb 2021 00:33:25 +0800
Subject: [PATCH] feat: add ModListMenu component

---
 src/components/common/ModListMenu.vue   | 59 +++++++++++++++++++++++++
 src/views/musicLibrary/AlbumDetail.vue  | 52 +++-------------------
 src/views/musicLibrary/Ranking.vue      | 54 +++-------------------
 src/views/musicLibrary/SongerDetail.vue | 43 +++---------------
 4 files changed, 79 insertions(+), 129 deletions(-)
 create mode 100644 src/components/common/ModListMenu.vue

diff --git a/src/components/common/ModListMenu.vue b/src/components/common/ModListMenu.vue
new file mode 100644
index 0000000..a1666b4
--- /dev/null
+++ b/src/components/common/ModListMenu.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="mod_list_menu">
+    <a
+      class="list_menu__item list_menu__play js_play"
+      title="播放"
+      @click="play"
+    >
+      <i class="list_menu__icon_play"></i>
+      <span class="icon_txt">播放</span>
+    </a>
+    <a
+      class="list_menu__item list_menu__add js_fav"
+      title="添加到歌单"
+      aria-haspopup="true"
+    >
+      <i class="list_menu__icon_add"></i>
+      <span class="icon_txt">添加到歌单</span>
+    </a>
+    <a
+      class="list_menu__item list_menu__down js_down"
+      title="下载"
+      aria-haspopup="true"
+    >
+      <i class="list_menu__icon_down"></i>
+      <span class="icon_txt">下载</span>
+    </a>
+    <a
+      class="list_menu__item list_menu__share js_share"
+      title="分享"
+      aria-haspopup="true"
+    >
+      <i class="list_menu__icon_share"></i>
+      <span class="icon_txt">分享</span>
+    </a>
+  </div>
+</template>
+
+<script>
+import { playTheSong } from "common/utils";
+export default {
+  props: {
+    song: {
+      type: Object,
+      default: {},
+    },
+  },
+  methods: {
+    play() {
+      if (this.song) {
+        playTheSong(this.song);
+      }
+      console.log(this.song);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/musicLibrary/AlbumDetail.vue b/src/views/musicLibrary/AlbumDetail.vue
index 283d88d..1e05d56 100644
--- a/src/views/musicLibrary/AlbumDetail.vue
+++ b/src/views/musicLibrary/AlbumDetail.vue
@@ -102,48 +102,9 @@
                   <span class="songlist__songname_txt">
                     <a :title="song.name">{{ song.name }}</a>
                   </span>
-                  <div class="mod_list_menu">
-                    <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>
-                    </a>
-                    <a
-                      href="javascript:;"
-                      class="list_menu__item list_menu__add js_fav"
-                      title="添加到歌单"
-                      aria-haspopup="true"
-                      data-target="menu_add"
-                    >
-                      <i class="list_menu__icon_add"></i>
-                      <span class="icon_txt">添加到歌单</span>
-                    </a>
-
-                    <a
-                      href="javascript:;"
-                      class="list_menu__item list_menu__down js_down"
-                      title="下载"
-                      aria-haspopup="true"
-                      data-target="menu_down"
-                    >
-                      <i class="list_menu__icon_down"></i>
-                      <span class="icon_txt">下载</span>
-                    </a>
 
-                    <a
-                      href="javascript:;"
-                      class="list_menu__item list_menu__share js_share"
-                      title="分享"
-                      aria-haspopup="true"
-                      data-aria="menu_share"
-                    >
-                      <i class="list_menu__icon_share"></i>
-                      <span class="icon_txt">分享</span>
-                    </a>
-                  </div>
+                  <!-- mod list menu -->
+                  <mod-list-menu :song="song" />
                 </div>
                 <div class="songlist__artist">
                   <a :title="song.artistsText" class="singer_name">{{
@@ -308,8 +269,9 @@
 </template>
 
 <script>
+import ModListMenu from "components/common/ModListMenu";
 import { getAlbum } from "api";
-import { createSong, playSonglist, playTheSong } from "common/utils";
+import { createSong, playSonglist } from "common/utils";
 
 export default {
   data() {
@@ -359,9 +321,9 @@ export default {
     playAll() {
       playSonglist(this.songs);
     },
-    playOne(id) {
-      playTheSong(this.songs[id]);
-    },
+  },
+  components: {
+    ModListMenu,
   },
 };
 </script>
diff --git a/src/views/musicLibrary/Ranking.vue b/src/views/musicLibrary/Ranking.vue
index 6e5634d..711bb29 100644
--- a/src/views/musicLibrary/Ranking.vue
+++ b/src/views/musicLibrary/Ranking.vue
@@ -181,49 +181,8 @@
                     {{ song.name }}
                   </a>
                 </span>
-                <div class="mod_list_menu">
-                  <a
-                    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>
-                  </a>
-                  <a
-                    href="javascript:;"
-                    class="list_menu__item list_menu__add js_fav"
-                    title="添加到歌单"
-                    aria-haspopup="true"
-                    data-target="menu_add"
-                  >
-                    <i class="list_menu__icon_add"></i>
-                    <span class="icon_txt">添加到歌单</span>
-                  </a>
-
-                  <a
-                    href="javascript:;"
-                    class="list_menu__item list_menu__down js_down"
-                    title="VIP下载"
-                    aria-haspopup="true"
-                    data-target="menu_down"
-                  >
-                    <i class="list_menu__icon_down_vip"></i>
-                    <span class="icon_txt">VIP下载</span>
-                  </a>
-
-                  <a
-                    href="javascript:;"
-                    class="list_menu__item list_menu__share js_share"
-                    title="分享"
-                    aria-haspopup="true"
-                    data-aria="menu_share"
-                  >
-                    <i class="list_menu__icon_share"></i>
-                    <span class="icon_txt">分享</span>
-                  </a>
-                </div>
+                <!-- mod list menu -->
+                <mod-list-menu :song="song" />
               </div>
 
               <div class="songlist__artist" title="陆海涛">
@@ -244,8 +203,9 @@
 </template>
 
 <script>
+import ModListMenu from "components/common/ModListMenu";
 import { getPlaylistDetial, getSongDetail } from "api";
-import { isDef, createSong, playSonglist, playTheSong } from "common/utils";
+import { isDef, createSong, playSonglist } from "common/utils";
 
 export default {
   data() {
@@ -332,15 +292,15 @@ export default {
     playAll() {
       playSonglist(this.listDatas);
     },
-    playOne(id) {
-      playTheSong(this.listDatas[id]);
-    },
   },
   watch: {
     seletedType(newType) {
       this.updatedTopList();
     },
   },
+  components: {
+    ModListMenu,
+  },
 };
 </script>
 
diff --git a/src/views/musicLibrary/SongerDetail.vue b/src/views/musicLibrary/SongerDetail.vue
index ecbbaf1..0c61737 100644
--- a/src/views/musicLibrary/SongerDetail.vue
+++ b/src/views/musicLibrary/SongerDetail.vue
@@ -121,44 +121,9 @@
                       <span class="songlist__song_txt"></span>
                     </a>
                   </span>
-                  <div class="mod_list_menu">
-                    <a
-                      class="list_menu__item list_menu__play js_play"
-                      title="播放"
-                    >
-                      <i class="list_menu__icon_play"></i>
-                      <span class="icon_txt">播放</span>
-                    </a>
-                    <a
-                      href="javascript:;"
-                      class="list_menu__item list_menu__add js_fav"
-                      title="添加到歌单"
-                      aria-haspopup="true"
-                    >
-                      <i class="list_menu__icon_add"></i>
-                      <span class="icon_txt">添加到歌单</span>
-                    </a>
-
-                    <a
-                      href="javascript:;"
-                      class="list_menu__item list_menu__down js_down"
-                      title="VIP下载"
-                      aria-haspopup="true"
-                    >
-                      <i class="list_menu__icon_down_vip"></i>
-                      <span class="icon_txt">VIP下载</span>
-                    </a>
 
-                    <a
-                      href="javascript:;"
-                      class="list_menu__item list_menu__share js_share"
-                      title="分享"
-                      aria-haspopup="true"
-                    >
-                      <i class="list_menu__icon_share"></i>
-                      <span class="icon_txt">分享</span>
-                    </a>
-                  </div>
+                  <!-- mod list menu -->
+                  <mod-list-menu :song="song" />
                 </div>
                 <div class="songlist__album">
                   <a :title="song.albumName">{{ song.albumName }}</a>
@@ -291,6 +256,7 @@
 </template>
 
 <script>
+import ModListMenu from "components/common/ModListMenu";
 import {
   getUserDetail,
   getSongerDetail,
@@ -390,6 +356,9 @@ export default {
       playSonglist(this.hotSongs);
     },
   },
+  components: {
+    ModListMenu,
+  },
 };
 </script>
 
-- 
GitLab