refactor: reformat HomeTop, MusicLibrary

src/api/index.js

 import { requset } from "./base";
 
 export * from "./data";
-export * from "./songer";
 export * from "./toplist";
+export * from "./playlist";
+export * from "./song";
+export * from "./songer";
 export * from "./mv";
 
 export const getBanner = () => requset.get("/banner?type=0");
@@ -10,15 +12,3 @@ export const getBanner = () => requset.get("/banner?type=0");
 export const getUserDetail = id => requset.get(`/user/detail?uid=${id}`);
 
 export const getCatList = () => requset.get("(/playlist/catlist");
-
-export const getPlayList = (limit, page, cat) => {
-  let order = "hot";
-  let offset = (parseInt(page) - 1) * limit;
-  let params = {
-    limit: limit,
-    offset: offset,
-    cat: cat,
-    order: order
-  };
-  return requset.get("/top/playlist", { params: params });
-};

src/api/playlist.js

+import { requset } from "./base";
+
+export const getPlayList = (limit, page, cat) => {
+  let order = "hot";
+  let offset = (parseInt(page) - 1) * limit;
+  let params = {
+    limit: limit,
+    offset: offset,
+    cat: cat,
+    order: order
+  };
+  return requset.get("/top/playlist", { params: params });
+};
+
+export const getPlaylistDetial = id => requset.get(`playlist/detail?id=${id}`);
+
+export const getPlaylistDynamicDetial = id =>
+  requset.get(`/playlist/detail/dynamic?id=${id}`);

src/api/song.js

+import { requset } from "./base";
+
+export const getSong = id => requset.get(`/song/url?id=${id}`);

src/common/utils.js

@@ -10,3 +10,7 @@ export function processCount(count) {
 export function isDef(v) {
   return v !== undefined && v !== null;
 }
+
+export function genSongPlayUrl(id) {
+  return `https://music.163.com/song/media/outer/url?id=${id}.mp3`;
+}

src/components/common/Player.vue

@@ -5,15 +5,14 @@
       style="visibility: visible"
       id="auto-id-tpJNW0OTTZUKHGT6"
       :class="'m-playbar-' + (isLock ? 'lock' : 'unlock')"
-      @click="switchIsLock"
     >
       <div class="updn">
         <div class="left f-fl">
           <a
             href="javascript:;"
             class="btn"
-            hidefocus="true"
             data-action="lock"
+            @click="switchLock"
           ></a>
         </div>
         <div class="right f-fl"></div>
@@ -36,6 +35,8 @@
             data-action="play"
             class="ply j-flag"
             title="播放/暂停(p)"
+            :class="playing ? 'pas' : ''"
+            @click="togglePlay"
             >播放/暂停</a
           >
           <a
@@ -48,27 +49,21 @@
           >
         </div>
         <div class="head j-flag">
-          <img
-            src="https://p1.music.126.net/jnSajZlbE9ed8QGVlbwK0A==/109951165666607256.jpg?param=34y34"
-          />
-          <a href="/song?id=1815105886" hidefocus="true" class="mask"></a>
+          <img :src="currentSong.al.picUrl" />
+          <a hidefocus="true" class="mask"></a>
         </div>
         <div class="play">
           <div class="j-flag words">
             <a
               hidefocus="true"
-              href="/song?id=1815105886"
               class="f-thide name fc1 f-fl"
-              title="狐狸的童话"
-              >狐狸的童话</a
+              :title="currentSong.name"
+              >{{ currentSong.name }}</a
             >
             <span class="by f-thide f-fl">
               <span title="Santa_SA/马也_Crabbit">
-                <a class="" href="/artist?id=34230619" hidefocus="true">
-                  Santa_SA </a
-                >/
                 <a class="" href="/artist?id=13288861" hidefocus="true">
-                  马也_Crabbit
+                  {{ currentSong.ar.name }}
                 </a>
               </span>
             </span>
@@ -143,20 +138,94 @@
         </div>
       </div>
     </div>
+    <audio :src="currentSong.songUrl" ref="audio" />
   </div>
 </template>
 
 <script>
+import { isDef, genSongPlayUrl } from "common/utils";
+import { getSong } from "api";
+
 export default {
   data() {
     return {
       isLock: false,
+      songReady: false,
+      volume: 100,
     };
   },
+  mounted() {
+    console.log(this.audio);
+  },
   methods: {
-    switchIsLock() {
+    switchLock() {
+      console.log("lock");
       this.isLock = !this.isLock;
     },
+    ready() {
+      this.songReady = true;
+    },
+    end() {
+      this.next();
+    },
+    togglePlay() {
+      this.$store.commit("music/setPlayingState", !this.playing);
+    },
+    async play() {
+      console.log("play");
+      if (this.songReady) {
+        try {
+          await this.audio.play();
+        } catch (err) {
+          console.log(err);
+        }
+      }
+    },
+    pause() {
+      console.log("pause");
+      this.audio.pause();
+    },
+    prve() {
+      if (this.songReady)
+        this.$store.dispatch("music/startSong", this.prevSong);
+    },
+    next() {
+      if (this.songReady)
+        this.$store.dispatch("music/startSong", this.nextSong);
+    },
+    timeupdate() {},
+  },
+  computed: {
+    audio() {
+      return this.$refs.audio;
+    },
+    playing() {
+      return this.$store.state.music.playing;
+    },
+    hasCurrentSong() {
+      return isDef(this.currentSong.id);
+    },
+    currentSong() {
+      return this.$store.state.music.currentSong;
+    },
+    prevSong() {
+      return this.$store.getters.music.prevSong;
+    },
+    nextSong() {
+      return this.$store.getters.music.nextSong;
+    },
+  },
+  watch: {
+    currentSong(newSong, oldSong) {
+      console.log("new", newSong, "old", oldSong);
+      if (newSong.id != oldSong.id) {
+        this.currentSong.songUrl = genSongPlayUrl(newSong.id);
+      }
+    },
+    playing(newPlaying) {
+      console.log(newPlaying);
+      this.$nextTick(() => (newPlaying ? this.play : this.pause));
+    },
   },
 };
 </script>

src/components/content/HomeTop.vue

 <template>
-  <h1 class="list">排行榜</h1>
-  <div class="mod_toplist">
-    <ul class="toplist__list js_list">
+  <div class="toplist_main">
+    <h1 class="list">排行榜</h1>
+    <div class="mod_toplist">
+      <ul class="toplist__list js_list">
+        <li
+          class="toplist__item mod_cover"
+          v-for="(toplist, idx) in toplists"
+          :key="idx"
+          :class="'item' + (idx + 1)"
+        >
+          <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="toplist__line"></i>
+            <h3 class="toplist__hd">
+              <a href="javascript:;" class="toplist__tit"
+                >{{ toplist.name }}
+              </a>
+            </h3>
 
-      <li
-        class="toplist__item mod_cover"
-        v-for="(toplist, idx) in toplists" :key='idx'
-        :class="'item' + (idx + 1)">
-        <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="toplist__line"></i>
-          <h3 class="toplist__hd"><a href="javascript:;" class="toplist__tit">{{toplist.name}} </a></h3>
-
-          <ul class="toplist__songlist">
-
-            <li
-              class="toplist__song"
-              v-for="songIdx in 4" :key="songIdx">
-              <div class="toplist__number">{{songIdx}}</div>
-              <div class="toplist__songname">
-                <a href="javascript:;" class="js_song">
-                  {{parseSongName(toplist.tracks[(songIdx-1)].name)}}
-                </a>
-              </div>
-              <div class="toplist__artist">
-                <a href="javascript:;" >{{parseArtistsName(toplist.tracks[(songIdx-1)].ar)}}</a>
-              </div>
-            </li>
-
-          </ul>
-
-        </div>
-      </li>
-    </ul>
+            <ul class="toplist__songlist">
+              <li class="toplist__song" v-for="songIdx in 4" :key="songIdx">
+                <div class="toplist__number">{{ songIdx }}</div>
+                <div class="toplist__songname">
+                  <a href="javascript:;" class="js_song">
+                    {{ parseSongName(toplist.tracks[songIdx - 1].name) }}
+                  </a>
+                </div>
+                <div class="toplist__artist">
+                  <a href="javascript:;">{{
+                    parseArtistsName(toplist.tracks[songIdx - 1].ar)
+                  }}</a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -43,148 +47,151 @@ import { getTopList, toplistTypes } from "api";
 export default {
   data() {
     return {
-      toplists:[],
-      }
+      toplists: [],
+    };
   },
   mounted() {
-    for (let key in toplistTypes){
+    for (let key in toplistTypes) {
       this.updateTopList(toplistTypes[key]);
     }
   },
   methods: {
     updateTopList(toplistType) {
-      getTopList(toplistType).then(res =>{
-            console.log(res);
-            this.toplists.push(res.data.playlist)
-          })
+      getTopList(toplistType).then((res) => {
+        console.log(res);
+        this.toplists.push(res.data.playlist);
+      });
     },
     parseSongName(name) {
-      return name
+      return name;
     },
     parseArtistsName(nameList) {
-      let l = []
-      for (let i of nameList){
-        l.push(i.name)
+      let l = [];
+      for (let i of nameList) {
+        l.push(i.name);
       }
-      let name = l.join('/')
-      return name
+      let name = l.join("/");
+      return name;
     },
   },
-}
+};
 </script>
 
 <style>
-  .toplist__list {
-      font-size: 0;
-      margin-right: -20px;
-      color: #fff;
-      font-size: 14px;
-  }
-  .toplist__item {
-      display: inline-block;
-      width: 18%;
-  }
-  .toplist__box {
-      position: relative;
-      margin-right: 20px;
-      height: 500px;
-      overflow: hidden;
-  }
-  li {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-  }
-  #toplist__bg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 600px;
-  }
-  .toplist__bg0 {
-      background-image: linear-gradient(#e66754, #8888e5)
-  }
-  .toplist__bg1 {
-      background-image: linear-gradient(#987526, #1998e5)
-  }
-  .toplist__bg2{
-      background-image: linear-gradient(#335484, #3698e5)
-  }
-  .toplist__bg3{
-      background-image: linear-gradient(#7858e5, #654125)
-  }
-  .toplist__bg4 {
-      background-image: linear-gradient(#985632, #369852)
-  }
-
-  .toplist__item .toplist__bg{
-      transform: scale(1);
-      transition: transform .75s;
-  }
-  .toplist__hd {
-      position: absolute;
-      top: 50px;
-      left: 50%;
-      margin-left: -100px;
-      width: 200px;
-      text-align: center;
-      font-size: 100%;
-      color: #000;
+.toplist_main {
+  margin: 0 auto;
+  text-align: center;
+}
+.toplist__list {
+  font-size: 0;
+  margin-right: -20px;
+  color: #fff;
+  font-size: 14px;
+}
+.toplist__item {
+  display: inline-block;
+  width: 18%;
+}
+.toplist__box {
+  position: relative;
+  margin-right: 20px;
+  height: 500px;
+  overflow: hidden;
+}
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#toplist__bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 600px;
+}
+.toplist__bg0 {
+  background-image: linear-gradient(#e66754, #8888e5);
+}
+.toplist__bg1 {
+  background-image: linear-gradient(#987526, #1998e5);
+}
+.toplist__bg2 {
+  background-image: linear-gradient(#335484, #3698e5);
+}
+.toplist__bg3 {
+  background-image: linear-gradient(#7858e5, #654125);
+}
+.toplist__bg4 {
+  background-image: linear-gradient(#985632, #369852);
+}
 
-  }
-  .toplist__tit {
-      height: 36px;
-      line-height: 1;
-      font-size: 26px;
-      color: #fff;
-      font-weight: 400;
-  }
-  a {
-      text-decoration: none;
-  }
-  .toplist__hd::before {
-      content: "";
-      display: block;
-      width: 66px;
-      height: 22px;
-      margin: 0 auto 9px;
-      background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=c7310a1eb12fc9fce032314be79ad579);
-      background-position: 0 -300px;
-  }
-  .toplist__songlist {
-      position: absolute;
-      top: 188px;
-      left: 0px;
-      right: 300px;
-      white-space: nowrap;
-  }
-  .toplist__songlist a {
-      color: #fff;
-      font-size: 14px;
-  }
-  .toplist__song {
-      position: relative;
-      padding-left: 15px;
-      margin-bottom: 27px;
-  }
+.toplist__item .toplist__bg {
+  transform: scale(1);
+  transition: transform 0.75s;
+}
+.toplist__hd {
+  position: absolute;
+  top: 50px;
+  left: 50%;
+  margin-left: -100px;
+  width: 200px;
+  text-align: center;
+  font-size: 100%;
+  color: #000;
+}
+.toplist__tit {
+  height: 36px;
+  line-height: 1;
+  font-size: 26px;
+  color: #fff;
+  font-weight: 400;
+}
+a {
+  text-decoration: none;
+}
+.toplist__hd::before {
+  content: "";
+  display: block;
+  width: 66px;
+  height: 22px;
+  margin: 0 auto 9px;
+  background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=c7310a1eb12fc9fce032314be79ad579);
+  background-position: 0 -300px;
+}
+.toplist__songlist {
+  position: absolute;
+  top: 188px;
+  left: 0px;
+  right: 300px;
+  white-space: nowrap;
+}
+.toplist__songlist a {
+  color: #fff;
+  font-size: 14px;
+}
+.toplist__song {
+  position: relative;
+  padding-left: 15px;
+  margin-bottom: 27px;
+}
 /*.toplist__songname{*/
 /*overflow: hidden;*/
 /*text-overflow: ellipsis;*/
 /*}*/
-  .toplist__number {
-      position: absolute;
-      top: 0;
-      left: 0;
-  }
+.toplist__number {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 
-  .target-list:hover .arrow-btn{
-    opacity: 1;
-    transform: translateX(0);
-    transition-duration: .5s;
-  }
+.target-list:hover .arrow-btn {
+  opacity: 1;
+  transform: translateX(0);
+  transition-duration: 0.5s;
+}
 
-  .arrow-btn {
-    opacity: 0;
-  }
+.arrow-btn {
+  opacity: 0;
+}
 </style>

src/components/content/RecommendedBar.vue

 <template>
-  <h1 class="list">歌单推荐</h1>
-  <div class="target-bar">
-    <a
-      class="playlist"
-      href="javascript:;"
-      v-for="item in playlistType"
-      :key="item.key"
-      @click="onclick(item.key)"
-      >{{ item.title }}</a
-    >
-  </div>
+  <div class="recommended_main">
+    <h1 class="list">歌单推荐</h1>
+    <div class="target-bar">
+      <a
+        class="playlist"
+        href="javascript:;"
+        v-for="item in playlistType"
+        :key="item.key"
+        :class="item.key == selectType ? 'playlist__select' : ''"
+        @click="switchType(item.key)"
+        >{{ item.title }}</a
+      >
+    </div>
 
-  <div class="target-list" v-loading="listLoading">
-    <ul>
-      <li class="playlist__i" v-for="item in playList" :key="item.name">
-        <a class="js_playlist" href="" onclick="">
-          <img
-            class="playlist__pic"
-            :src="item.coverImgUrl"
-            onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';"
-            :alt="item.name"
-          />
-        </a>
-        <h4 class="">
-          <span class=""
-            ><a href="">{{ item.name }}</a></span
-          >
-        </h4>
-        <div class="">播放量：{{ processCount(item.playCount) }}</div>
-      </li>
-    </ul>
-    <!--  <div >
+    <div class="target-list" v-loading="listLoading">
+      <ul>
+        <li class="playlist__i" v-for="item in playList" :key="item.name">
+          <a class="js_playlist" @click="playTheList(item.id)">
+            <img
+              class="playlist__pic"
+              :src="item.coverImgUrl"
+              onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';"
+              :alt="item.name"
+            />
+          </a>
+          <h4 class="">
+            <span class=""
+              ><a href="">{{ item.name }}</a></span
+            >
+          </h4>
+          <div class="">播放量：{{ processCount(item.playCount) }}</div>
+        </li>
+      </ul>
+      <!--  <div >
       <a href="" class="arrow-btn arrow-btn-left"><i class="el-icon-arrow el-icon-arrow-left"></i></a> 
       <a href="" class="arrow-btn arrow-btn-right"><i class="el-icon-arrow el-icon-arrow-right"></i></a>
     </div> -->
-  </div>
-  <div
-    class="mod_slide_switch js_switch"
-    data-stat="y_new.index.playlist.pager"
-  >
-    <a
-      href="javascript:;"
-      tabindex="-1"
-      class="js_jump slide_switch__item slide_switch__item--current"
-      data-p="0"
-    >
-      <i class="slide_switch__bg"></i>
-      <i class="icon_txt">1</i>
-    </a>
-    <a
-      href="javascript:;"
-      tabindex="-1"
-      class="js_jump slide_switch__item"
-      data-p="1"
+    </div>
+    <div
+      class="mod_slide_switch js_switch"
+      data-stat="y_new.index.playlist.pager"
     >
-      <i class="slide_switch__bg"></i>
-      <i class="icon_txt">2</i>
-    </a>
+      <a
+        href="javascript:;"
+        tabindex="-1"
+        class="js_jump slide_switch__item slide_switch__item--current"
+        data-p="0"
+      >
+        <i class="slide_switch__bg"></i>
+        <i class="icon_txt">1</i>
+      </a>
+      <a
+        href="javascript:;"
+        tabindex="-1"
+        class="js_jump slide_switch__item"
+        data-p="1"
+      >
+        <i class="slide_switch__bg"></i>
+        <i class="icon_txt">2</i>
+      </a>
+    </div>
   </div>
 </template>
 
 <script>
-import { getPlayList } from "api";
+import { getPlayList, getPlaylistDetial } from "api";
 import { processCount } from "common/utils";
 
 export default {
   data() {
     return {
       listLoading: true,
+      selectType: "全部",
       playlistType: [
         { title: "为你推荐", key: "全部" },
         { title: "R&B/Soul", key: "R&B/Soul" },
@@ -93,12 +97,23 @@ export default {
         })
         .catch((err) => console.log(err));
     },
-    onclick(key) {
-      this.updatePlayList(key);
+    switchType(key) {
+      if (key != this.selectType) {
+        this.selectType = key;
+        this.updatePlayList(key);
+      }
     },
     processCount(count) {
       return processCount(count);
     },
+    playTheList(listId) {
+      getPlaylistDetial(listId).then((res) => {
+        console.log(res);
+        let playlist = res.data.playlist.tracks;
+        this.$store.commit("music/setPlaylist", playlist);
+        this.$store.commit("music/setCurrentSong", playlist[0]);
+      });
+    },
   },
 };
 </script>
@@ -115,6 +130,9 @@ export default {
   margin: 0 30px;
   text-decoration: none;
 }
+.playlist__select {
+  color: #31c27c;
+}
 .playlist:hover {
   color: #31c27c;
 }

src/store/helper/musci.js

-import { createNamespacedHelpers } from "vuex";
-
-export const {
-  mapState,
-  mapMutations,
-  mapGetters,
-  mapActions
-} = createNamespacedHelpers("music");

src/store/module/music/actions.js

 export default {
   async startSong({ commit, state }, rawSong) {
     const song = Object.assign({}, rawSong);
-    if (!song.img) {
-      if (song.albumId) {
-        song.img = await getSongImg(song.id, song.albumId);
-      }
-    }
+    //if (!song.img) {
+    //if (song.albumId) {
+    //song.img = await getSongImg(song.id, song.albumId);
+    //}
+    //}
     commit("setCurrentSong", song);
     commit("setPlayingState", true);
-    commit("setPlayHistory", playHistoryCopy);
   },
   clearCurrentSong({ commit }) {
     commit("setCurrentSong", {});

src/store/module/music/state.js

+import { playModeMap } from "common/config.js";
+
+export default {
+  currentSong: {},
+  currentTime: 0,
+  playing: false,
+  playMode: playModeMap.sequence.code,
+  volume: 100,
+  playlist: []
+};

src/views/MusicLibrary.vue

 <template>
-    <div>
-      <NavMenu/>
-      <router-view></router-view>
-    </div>
+  <div>
+    <nav-menu />
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
-import NavMenu from "components/common/NavMenu"
+import NavMenu from "components/common/NavMenu";
 
 export default {
-  name: 'MusicLibrary',
-  components: {NavMenu}
-}
-
+  name: "MusicLibrary",
+  components: { NavMenu },
+};
 </script>
 
 <style scoped>