feat: finish home top func

* add router helper file
* imporve code

src/assets/css/fakeqqmusic.css

@@ -748,6 +748,7 @@
   transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1);
 }
 .mod_cover__icon_play {
+  cursor: pointer;
   position: absolute;
   left: 50%;
   top: 50%;

src/common/routerHelper.js

+import Router from "@/router";
+
+export function gotoSongDetail(id) {
+  if (id && id != 0)
+    Router.push({
+      path: "/musicLibrary/songDetail",
+      query: { id: id }
+    });
+}
+
+export function gotoSongerDetail(id) {
+  if (id && id != 0)
+    Router.push({
+      path: "/musicLibrary/songerDetail",
+      query: { id: id }
+    });
+}
+
+export function gotoPlaylistDetail(id) {
+  if (id && id != 0)
+    Router.push({
+      path: "/musicLibrary/playlistDetail",
+      query: { id: id }
+    });
+}
+
+export function gotoAlbumDetail(id) {
+  if (id && id != 0)
+    Router.push({
+      path: "/musicLibrary/albumDetail",
+      query: { id: id }
+    });
+}

src/common/utils.js

 export * from "./storeHelper";
 export * from "./apiHelper";
+export * from "./routerHelper";
 
 export function isDef(v) {
   return v !== undefined && v !== null;

src/components/common/DetailSonglist.vue

@@ -22,7 +22,7 @@
           <div class="songlist__number">{{ idx + 1 }}</div>
           <div class="songlist__songname">
             <span class="songlist__songname_txt">
-              <a :title="song.name" @click="gotoSongDeail(song.id)">
+              <a :title="song.name" @click="gotoSongDetail(song.id)">
                 {{ song.name }}<span class="songlist__song_txt"></span>
               </a>
             </span>
@@ -59,6 +59,11 @@
 
 <script>
 import ModListMenu from "components/common/ModListMenu";
+import {
+  gotoSongDetail,
+  gotoSongerDetail,
+  gotoAlbumDetail,
+} from "common/utils";
 export default {
   props: {
     songs: {
@@ -71,27 +76,9 @@ export default {
     },
   },
   methods: {
-    gotoSongDeail(id) {
-      if (id && id != 0)
-        this.$router.push({
-          path: "/musicLibrary/songDetail",
-          query: { id: id },
-        });
-    },
-    gotoSongerDetail(id) {
-      if (id && id != 0)
-        this.$router.push({
-          path: "/musicLibrary/songerDetail",
-          query: { id: id },
-        });
-    },
-    gotoAlbumDetail(id) {
-      if (id && id != 0)
-        this.$router.push({
-          path: "/musicLibrary/albumDetail",
-          query: { id: id },
-        });
-    },
+    gotoSongDetail,
+    gotoSongerDetail,
+    gotoAlbumDetail,
   },
   components: {
     ModListMenu,

src/components/common/HomeTop.vue

@@ -11,7 +11,10 @@
         >
           <div class="toplist__box">
             <div id="toplist__bg" :class="'toplist__bg' + idx"></div>
-            <i class="mod_cover__icon_play js_play_toplist"></i>
+            <i
+              class="mod_cover__icon_play js_play_toplist"
+              @click="playSonglist(toplist)"
+            ></i>
             <i class="toplist__line"></i>
             <h3 class="toplist__hd">
               <a href="javascript:;" class="toplist__tit"
@@ -26,16 +29,19 @@
                   <a
                     href="javascript:;"
                     class="js_song"
-                    :data-id="toplist.tracks[songIdx - 1].id"
-                    @click="gotoSongDetail(toplist.tracks[songIdx - 1].id)"
+                    :data-id="toplist[songIdx - 1].id"
+                    @click="gotoSongDetail(toplist[songIdx - 1].id)"
                   >
-                    {{ parseSongName(toplist.tracks[songIdx - 1].name) }}
+                    {{ toplist[songIdx - 1].name }}
                   </a>
                 </div>
                 <div class="toplist__artist">
-                  <a href="javascript:;">{{
-                    parseArtistsName(toplist.tracks[songIdx - 1].ar)
-                  }}</a>
+                  <a
+                    @click="
+                      gotoSongerDetail(toplist[songIdx - 1].artists[0].id)
+                    "
+                    >{{ toplist[songIdx - 1].artistsText }}</a
+                  >
                 </div>
               </li>
             </ul>
@@ -47,7 +53,13 @@
 </template>
 
 <script>
-import { getTopList, toplistTypes } from "api";
+import { getPlaylistDetial, getSongDetail, toplistTypes } from "api";
+import {
+  createSongs,
+  gotoSongDetail,
+  gotoSongerDetail,
+  playSonglist,
+} from "common/utils";
 
 export default {
   data() {
@@ -62,28 +74,18 @@ export default {
   },
   methods: {
     updateTopList(toplistType) {
-      getTopList(toplistType).then((res) => {
-        //console.log(res);
-        this.toplists.push(res.data.playlist);
-      });
-    },
-    parseSongName(name) {
-      return name;
-    },
-    parseArtistsName(nameList) {
-      let l = [];
-      for (let i of nameList) {
-        l.push(i.name);
-      }
-      let name = l.join("/");
-      return name;
-    },
-    gotoSongDetail(id) {
-      this.$router.push({
-        path: "/musicLibrary/songDetail",
-        query: { id: id },
+      getPlaylistDetial(toplistType).then((res) => {
+        let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
+        getSongDetail(trackIds).then((res) => {
+          let songs = createSongs(res.data.songs);
+          console.log(songs);
+          this.toplists.push(songs);
+        });
       });
     },
+    gotoSongDetail,
+    gotoSongerDetail,
+    playSonglist,
   },
 };
 </script>

src/components/common/RecommendedBar.vue

@@ -65,7 +65,12 @@
 
 <script>
 import { getPlayList, getPlaylistDetial, getSongDetail } from "api";
-import { processCount, createSong, playSonglist } from "common/utils";
+import {
+  processCount,
+  createSong,
+  playSonglist,
+  gotoPlaylistDetail,
+} from "common/utils";
 
 export default {
   data() {
@@ -126,12 +131,7 @@ export default {
         });
       });
     },
-    gotoPlaylistDetail(id) {
-      this.$router.push({
-        path: "/musicLibrary/playlistDetail",
-        query: { id: id },
-      });
-    },
+    gotoPlaylistDetail,
   },
 };
 </script>

src/views/musicLibrary/NewDisc.vue

@@ -80,7 +80,7 @@
 <script>
 import TypeSelectSubBar from "components/common/TypeSelectSubBar";
 import { albumAreas, getTopAlbum } from "api";
-import { createAlbums } from "common/utils";
+import { createAlbums, gotoAlbumDetail } from "common/utils";
 
 export default {
   data() {
@@ -121,12 +121,7 @@ export default {
       console.log(v);
       this.page = v;
     },
-    gotoAlbumDetail(id) {
-      this.$router.push({
-        path: "/musicLibrary/albumDetail",
-        query: { id: id },
-      });
-    },
+    gotoAlbumDetail,
   },
   watch: {
     page(newPage) {

src/views/musicLibrary/Songers.vue

@@ -29,7 +29,7 @@
             href="javascript:;"
             class="singer_list_txt__link js_singer"
             :title="item.name"
-            @click="gotoSongerDetail({ id: item.id })"
+            @click="gotoSongerDetail(item.id)"
             >{{ item.name }}</a
           >
         </li>
@@ -67,6 +67,7 @@
 
 <script>
 import { getSongers, songerInitials, songerTypes, songerAreas } from "api";
+import { gotoSongerDetail } from "common/utils";
 
 import TypeSelectBar from "components/common/TypeSelectBar";
 import TypeSelectSubBar from "components/common/TypeSelectSubBar";
@@ -131,9 +132,7 @@ export default {
         this.updateArtists();
       }
     },
-    gotoSongerDetail(query) {
-      this.$router.push({ path: "/musicLibrary/songerDetail", query: query });
-    },
+    gotoSongerDetail,
   },
   components: {
     TypeSelectBar,