feat: 新增分享歌曲功能

sl1673495 · Aug 21, 2019 · 4737597 · 4737597
1 parent 1189088
commit 4737597
Show file tree

Hide file tree

Showing 22 changed files with 255 additions and 80 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,7 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="//at.alicdn.com/t/font_777085_o3jdopcr36.css"
+      href="//at.alicdn.com/t/font_777085_olo1renx22p.css"
     />
     <!-- 百度统计 -->
     <script>

diff --git a/src/App.vue b/src/App.vue
@@ -4,6 +4,7 @@
     <Player />
     <MiniPlayer />
     <Playlist />
+    <ShareReader />
   </div>
 </template>
 
@@ -12,14 +13,15 @@ import Layout from "@/layout"
 import MiniPlayer from "@/components/mini-player"
 import Playlist from "@/components/playlist"
 import Player from "@/components/player"
+import ShareReader from "@/components/share-reader"
 
 export default {
   metaInfo() {
     return {
       title: "欢迎来到sshPlayer"
     }
   },
-  components: { Layout, MiniPlayer, Playlist, Player }
+  components: { Layout, MiniPlayer, Playlist, Player, ShareReader }
 }
 </script>
 

diff --git a/src/api/discovery.js b/src/api/discovery.js
@@ -7,4 +7,4 @@ export const getNewSongs = () => request.get('/personalized/newsong')
 export const getPersonalized = params =>
   request.get(`/personalized`, { params })
 
-export const getFirstMv = limit => request.get(`/mv/first?limit=${limit}`)
+export const getPersonalizedMv = () => request.get(`/personalized/mv`)
diff --git a/src/components/mini-player.vue b/src/components/mini-player.vue
@@ -1,3 +1,4 @@
+// 底部播放栏组件
 <template>
   <div
     class="mini-player"
@@ -45,15 +46,25 @@
         class="icon"
         type="prev"
       />
-      <div
-        @click="togglePlaying"
-        class="play-icon"
+      <el-popover
+        :value="isPlayErrorPromptShow"
+        placement="top"
+        trigger="manual"
+        width="160"
       >
-        <Icon
-          :size="24"
-          :type="playIcon"
-        />
-      </div>
+        <p>请点击开始播放。</p>
+        <div
+          @click="togglePlaying"
+          class="play-icon"
+          slot="reference"
+        >
+          <Icon
+            :size="24"
+            :type="playIcon"
+          />
+        </div>
+      </el-popover>
+
       <Icon
         :size="24"
         @click="next"
@@ -127,15 +138,22 @@
 </template>
 
 <script type="text/ecmascript-6">
-import { mapState, mapMutations, mapGetters, mapActions } from "@/store/helper/music"
-import Storage from 'good-storage'
-import { VOLUME_KEY, playModeMap } from '@/utils'
+import {
+  mapState,
+  mapMutations,
+  mapGetters,
+  mapActions
+} from "@/store/helper/music"
+import Storage from "good-storage"
+import { VOLUME_KEY, playModeMap } from "@/utils"
 
+const DEFAULT_VOLUME = 0.75
 export default {
   data() {
     return {
+      isPlayErrorPromptShow: false,
       songReady: false,
-      volume: Storage.get(VOLUME_KEY, 1),
+      volume: Storage.get(VOLUME_KEY, DEFAULT_VOLUME)
     }
   },
   mounted() {
@@ -151,11 +169,18 @@ export default {
     ready() {
       this.songReady = true
     },
-    play() {
+    async play() {
       if (this.songReady) {
-        this.audio.play().catch(() => {
+        try {
+          await this.audio.play()
+          if (this.isPlayErrorPromptShow) {
+            this.isPlayErrorPromptShow = false
+          }
+        } catch (error) {
+          // 提示用户手动播放
+          this.isPlayErrorPromptShow = true
           this.setPlayingState(false)
-        })
+        }
       }
     },
     pause() {
@@ -187,7 +212,9 @@ export default {
     },
     onChangePlayMode() {
       const modeKeys = Object.keys(playModeMap)
-      const currentModeIndex = modeKeys.findIndex(key => playModeMap[key].code === this.playMode)
+      const currentModeIndex = modeKeys.findIndex(
+        key => playModeMap[key].code === this.playMode
+      )
       const nextIndex = (currentModeIndex + 1) % modeKeys.length
       const nextModeKey = modeKeys[nextIndex]
       const nextMode = playModeMap[nextModeKey]
@@ -200,9 +227,15 @@ export default {
       this.setPlayerShow(!this.isPlayerShow)
     },
     goGitHub() {
-      window.open('https://github.com/sl1673495/vue-netease-music')
+      window.open("https://github.com/sl1673495/vue-netease-music")
     },
-    ...mapMutations(["setCurrentTime", "setPlayingState", "setPlayMode", "setPlaylistShow", "setPlayerShow"]),
+    ...mapMutations([
+      "setCurrentTime",
+      "setPlayingState",
+      "setPlayMode",
+      "setPlaylistShow",
+      "setPlayerShow"
+    ]),
     ...mapActions(["startSong"])
   },
   watch: {
@@ -259,11 +292,19 @@ export default {
       return Math.min(this.currentTime / durationSecond, 1) || 0
     },
     playControlIcon() {
-      return this.isPlayerShow ? 'shrink' : 'open'
+      return this.isPlayerShow ? "shrink" : "open"
     },
-    ...mapState(["currentSong", "currentTime", "playing", "playMode", "isPlaylistShow", "isPlaylistPromptShow", "isPlayerShow"]),
+    ...mapState([
+      "currentSong",
+      "currentTime",
+      "playing",
+      "playMode",
+      "isPlaylistShow",
+      "isPlaylistPromptShow",
+      "isPlayerShow"
+    ]),
     ...mapGetters(["prevSong", "nextSong"])
-  },
+  }
 }
 </script>
 
@@ -361,6 +402,7 @@ export default {
 
     .play-icon {
       @include flex-center();
+      position: relative;
       width: 45px;
       height: 45px;
       margin: 0 16px;

diff --git a/src/components/player.vue b/src/components/player.vue
@@ -374,9 +374,6 @@ export default {
       this.setPlayerShow(false)
     }
   },
-  beforeDestroy() {
-    this.removeListener()
-  },
   components: {
     Comments
   }

diff --git a/src/components/share-reader.vue b/src/components/share-reader.vue
@@ -0,0 +1,42 @@
+<script type="text/ecmascript-6">
+import { isDef, createSong } from "@/utils"
+import { getSearch } from "@/api"
+import { mapActions, mapMutations } from "@/store/helper/music"
+
+export default {
+  created() {
+    this.$watch("$route.query.shareMusicId", async shareMusicId => {
+      if (isDef(shareMusicId)) {
+        const {
+          result: { songs }
+        } = await getSearch({
+          keywords: shareMusicId,
+          limit: 1
+        })
+
+        if (Array.isArray(songs) && songs.length) {
+          const [song] = songs
+          const { id, mvid, name, alias, artists, duration, album } = song
+          const createdSong = createSong({
+            id,
+            name,
+            alias,
+            artists,
+            duration,
+            mvId: mvid,
+            albumName: album.name,
+            albumId: album.id
+          })
+
+          await this.startSong(createdSong)
+          this.setPlayerShow(true)
+        }
+      }
+    })
+  },
+  methods: {
+    ...mapMutations(["setPlayerShow"]),
+    ...mapActions(["startSong"])
+  }
+}
+</script>
diff --git a/src/components/song-table.vue b/src/components/song-table.vue
@@ -2,8 +2,7 @@
 <script>
 import ElTable from "element-ui/lib/table"
 import { mapMutations, mapActions, mapState } from "@/store/helper/music"
-import { pad, notify, goMvWithCheck } from "@/utils"
-import { getMvDetail } from "@/api"
+import { pad, goMvWithCheck } from "@/utils"
 
 export default {
   props: {
@@ -93,6 +92,7 @@ export default {
                       onClick={onGoMv}
                       type="mv"
                       color="theme"
+                      size={24}
                     />
                   ) : null}
 

diff --git a/src/layout/index.vue b/src/layout/index.vue
@@ -21,7 +21,7 @@
 <script type="text/ecmascript-6">
 import LayoutHeader from "./header"
 import LayoutMenu from "./menu"
-import { topRoutes } from "@/router"
+import { layoutCenterPaths } from "@/router"
 import { mapState } from "@/store/helper/music"
 
 export default {
@@ -34,7 +34,7 @@ export default {
   },
   computed: {
     routerViewCls() {
-      return topRoutes.find(({ path }) => path === this.$route.path)
+      return layoutCenterPaths.find(path => path === this.$route.path)
         ? "router-view-center"
         : ""
     },

diff --git a/src/layout/menu.vue b/src/layout/menu.vue
@@ -14,18 +14,18 @@
         <ul class="menu-list">
           <router-link
             :key="index"
-            :to="item.to"
+            :to="item.path"
             active-class="menu-item-active"
             class="menu-item"
             tag="li"
             v-for="(item, index) in menu.children"
           >
             <Icon
               :size="16"
-              :type="item.icon"
+              :type="item.meta.icon"
               class="iconfont"
             />
-            <span class="menu-title">{{item.title}}</span>
+            <span class="menu-title">{{item.meta.title}}</span>
           </router-link>
         </ul>
       </div>
@@ -35,51 +35,32 @@
 
 <script type="text/ecmascript-6">
 import User from "@/components/user"
-import { mapState as mapUserState, mapGetters as mapUserGetters } from '@/store/helper/user'
+import {
+  mapState as mapUserState,
+  mapGetters as mapUserGetters
+} from "@/store/helper/user"
+import { menuRoutes } from "@/router"
 
 export default {
   data() {
     return {
       menus: [
         {
-          type: 'root',
-          children: [{
-            title: "发现音乐",
-            icon: "music",
-            to: "/discovery"
-          },
-          {
-            title: "推荐歌单",
-            to: "/playlists",
-            icon: 'playlist-menu'
-          },
-          {
-            title: "最新音乐",
-            to: "/songs",
-            icon: 'yinyue'
-          }
-          ]
-        },
+          type: "root",
+          children: menuRoutes
+        }
       ]
     }
   },
   computed: {
     // 组合登录后的歌单
     menusWithPlaylist() {
-      return this.isLogin && this.userPlaylist.length
-        ? this.menus.concat({
-          type: 'playlist',
-          title: '收藏的歌单',
-          children: this.userPlaylist.map(({ id, name }) => ({
-            title: name,
-            to: `/playlist/${id}`,
-            icon: 'playlist-menu'
-          }))
-        })
+      return this.isLogin && this.userMenus.length
+        ? this.menus.concat(this.userMenus)
         : this.menus
     },
-    ...mapUserState(['userPlaylist']),
-    ...mapUserGetters(['isLogin'])
+    ...mapUserState(["userPlaylist"]),
+    ...mapUserGetters(["isLogin", "userMenus"])
   },
   components: {
     User
@@ -89,7 +70,7 @@ export default {
 
 <style lang="scss" scoped>
 .menu {
-  width: 220px;
+  width: 300px;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -105,6 +86,7 @@ export default {
 
       .menu-block-title {
         font-size: $font-size-sm;
+        color: var(--font-color-grey2);
         padding-left: 16px;
         margin-bottom: 8px;
       }

diff --git a/src/page/discovery/index.vue b/src/page/discovery/index.vue
@@ -1,3 +1,4 @@
+// 发现音乐页面
 <template>
   <div class="discovery">
     <div class="discovery-content">