player

src/App.vue

@@ -1,30 +1,30 @@
 <template>
   <div id="app">
-    <layout-header/>
-    <layout-aside/>
-    <layout-article/>
-    <layout-footer/>
+    <layout-header />
+    <layout-aside />
+    <layout-article />
+    <layout-footer />
   </div>
 </template>
 <script>
-import LayoutHeader from "layout/Header"
-import LayoutAside from "layout/Aside"
-import LayoutArticle from "layout/Article"
-import LayoutFooter from "layout/Footer"
+import LayoutHeader from "layout/Header";
+import LayoutAside from "layout/Aside";
+import LayoutArticle from "layout/Article";
+import LayoutFooter from "layout/Footer";
 export default {
-  name:'App',
-  components:{
+  name: "App",
+  components: {
     LayoutHeader,
     LayoutAside,
     LayoutArticle,
-    LayoutFooter
-  }
-}
+    LayoutFooter,
+  },
+};
 </script>
 
 <style lang="less">
-@import url('./styles/index.css');
-#app{
+@import url("./styles/index.css");
+#app {
   width: 100%;
   height: 100vh;
   overflow: hidden;

src/layout/Article.vue

@@ -3,6 +3,13 @@
     <keep-alive include="AllMV">
       <router-view />
     </keep-alive>
+    <b-loading
+      icon="vbestui-iconfont icon-loading2"
+      size="large"
+      fix
+      v-show="isLoading"
+      :color="getLoadingColor"
+    />
   </div>
 </template>
 <script>
@@ -17,6 +24,19 @@ export default {
         `${this.program + "article-" + this.theme}`,
       ];
     },
+    isLoading() {
+      return this.$store.state.isloading;
+    },
+    getLoadingColor() {
+      let color = "";
+      color =
+        this.theme == "dark"
+          ? "var(--main-color)"
+          : this.theme == "green"
+          ? "var(--green-main-color)"
+          : "";
+      return color;
+    },
   },
 };
 </script>

src/main.js

@@ -15,9 +15,10 @@ Vue.use(VueLazyLoad,{
 })
 
 import global from './utils/global'
-
 Vue.use(global)
 
+Vue.prototype.$bus=new Vue()
+
 new Vue({
   router,
   store,

src/mixin/global/play-music.js

@@ -0,0 +1,59 @@
+import { _getMusicUrl } from "network/detail"
+import { Song } from "player/init-songs";
+export const playMusic = {
+    methods: {
+        /**全局音乐播放方法
+         * @param this.musicList 音乐列表
+         * 
+         * musicList 暂存音乐列表
+         * playList  处理后的音乐播放列表
+         */
+        PlayMusic(index = 0) {
+            let path = this.$route.path;
+
+            let musicList;
+            if (this.musicList.length >= 200) {
+                musicList = this.musicList.slice(0, 199);
+            }
+            else musicList = this.musicList;
+            let url = null,
+                currentLength = 0;
+            let playList = [];
+            for (let i = 0, length = musicList.length; i < length; i++) {
+                _getMusicUrl(musicList[i].id).then(res => {
+                    url = res.data.data[0].url;
+                    /**Song 构造函数参数：1.下标、2.歌曲、3.歌曲路径、4.歌曲id */
+                    let song = new Song(i, musicList[i], url, musicList[i].id);
+                    playList.push(song);
+                    currentLength++;
+                    if (i == musicList.length - 1) {
+                        console.log(playList);
+                        this.$bus.$emit("playMusic", playList, index, path, musicList);
+
+                    }
+                });
+                // let getLyric = _getLyric(musicList[i].id).then(res => {
+                //     console.log(musicList[i].id);
+                //     lyric = res.data.tlyric.lyric;
+                //     console.log(lyric);
+                //     return lyric;
+                // });
+                // Promise.all([getUrl, getLyric])
+                //     .then(results => {
+                //         let song = new Song(i, musicList[i], results[0], results[1]);
+                //         Song.push(song);
+                //         currentLength++;
+                //         /**每次完成两个网络请求都判断是否满足要求，满足才发送事件 */
+
+                //         if (i == musicList.length - 1) {
+
+                //             this.$bus.$emit("playMusic", Song, index, path,musicList);
+                //         }
+                //     })
+                //     .catch(err => {
+                //         this.$Message.warning('数据加载中，请稍等');
+                //     });
+            }
+        },
+    }
+}

src/network/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
-// import $store from '@/store/index' 
-let ajaxTimer=0; 
+import $store from '@/store/index'
+let ajaxTimer = 0;
 export function request(config) {
-    // $store.commit('showLoading');
+    $store.commit('showLoading');
     const install = axios.create({
         baseURL: 'http://localhost:3000',
         timeOut: 5000
@@ -15,9 +15,10 @@ export function request(config) {
     });
     install.interceptors.response.use(data => {
         ajaxTimer--;
-        // if(ajaxTimer==0)$store.commit('hiddenLoading');
+        if (ajaxTimer == 0) $store.commit('hiddenLoading');
         return data;
     }, err => {
+        $store.commit('hiddenLoading');
         return err;
     });
     return install(config);