pri-playlist

src/components/content/user/Login.vue

@@ -35,7 +35,7 @@
           <p>{{pwdMessage}}</p>
         </div>
         <div class="from-item">
-          <b-button background="var(--light-main-color)" color="#fff" class="log" @click="login">登陆</b-button>
+          <b-button background="var(--main-color)" color="#fff" class="log" @click="login">登陆</b-button>
         </div>
         <div class="from-item">
           <div class="register">注册</div>
@@ -67,6 +67,7 @@ export default {
           this.$parent.hiddleLogin();
           localStorage.setItem('cookie',res.data.cookie);
           localStorage.setItem('avatar',res.data.profile.avatarUrl);
+          localStorage.setItem('uid',res.data.profile.userId)
           // this.$bus.$emit("pullResource", res.data.cookie);
         }
       });
@@ -130,9 +131,6 @@ export default {
   bottom: 0;
   margin: auto;
 }
-.son img {
-  width: 100%;
-}
 
 .from-item {
   width: 60%;
@@ -164,7 +162,7 @@ p {
   margin-right: 35px;
 }
 .phone {
-  color: var(--light-main-color);
+  color: var(--main-color);
   font-size: 64px;
 }
 </style>

src/layout/Aside.vue

@@ -5,23 +5,33 @@
         :menu="menuList"
         vertical
         item-width="100%"
+        item-height="50px"
         :text-color="theme == 'dark' ? 'var(--dark-text-color)' : ''"
         :active-color="getActiveColor"
       ></b-menu>
-      <div class="my-music-list" v-if="false">
+      <div class="my-music-list" @mouseenter="handleRefresh" v-if="playList.length">
         <p class="title">创建的歌单</p>
-        <ul class="my-music-list-main">
-          <li></li>
-        </ul>
+        <scroll class="aside-scroll" ref="scroll">
+          <ul class="my-music-list-main">
+            <li v-for="(item, index) in playList" :key="index" @click="enterMusicListDetail(index)">
+              <img :src="item.cover" alt="" />
+              <div class="my-music-list-main-name">{{ item.name }}</div>
+            </li>
+          </ul>
+        </scroll>
       </div>
     </div>
   </div>
 </template>
 <script>
 import { theme } from "mixin/global/theme.js";
+import { forcible } from "mixin/components/forcible-refresh";
+import { _getSongList, PlayList } from "network/user";
+import Scroll from "common/scroll/Scroll";
 export default {
   name: "LayoutAside",
-  mixins: [theme],
+  mixins: [theme, forcible],
+  components: { Scroll },
   data() {
     return {
       menuList: [
@@ -41,14 +51,15 @@ export default {
           icon: "iconfont icon-mansingle",
           content: "歌手",
         },
-        { link: "/mv-list", icon: "iconfont icon-MV", content: "全部MV" },
+        { link: "/mv", icon: "iconfont icon-shipin", content: "MV" },
+        // { link: "/mv-list", icon: "iconfont icon-MV", content: "全部MV" },
         {
           link: "/new-songs",
           icon: "iconfont icon-musicnoteeighth",
           content: "最新音乐",
         },
-        { link: "/mv", icon: "iconfont icon-shipin", content: "最新MV" },
       ],
+      playList: [],
     };
   },
   computed: {
@@ -58,6 +69,42 @@ export default {
         `${this.program + "aside-" + this.theme}`,
       ];
     },
+    getUserId() {
+      return this.$store.getters.getUserId;
+    },
+  },
+  methods: {
+    getPriPlayList() {
+      this.playList=[];
+      _getSongList(this.getUserId).then((res) => {
+        let playlist = res.data.playlist;
+        for (let i in playlist) {
+          let playList = new PlayList(playlist[i]);
+          this.playList.push(playList);
+          if (i == playlist.length - 1) {
+            // localStorage目前只能存储字符串，想存储复杂类型可行要使用JSON.stringify(this.playList)格式转换
+            localStorage.setItem("playList", JSON.stringify(this.playList));
+          }
+        }
+      });
+    },
+    /**进入歌单详情 */
+    enterMusicListDetail(index){
+        this.$router.push("/musiclistdetail/" + this.playList[index].id+"/"+new Date().getTime());
+      }
+  },
+  created() {
+    /**首先从本地存储获取歌单，没有则请求数据 */
+    if (localStorage.getItem("playList")) {
+      this.playList = JSON.parse(localStorage.getItem("playList"));
+    } else {
+      if (this.getUserId) this.getPriPlayList();
+    }
+  },
+  watch: {
+    getUserId() {
+      this.getPriPlayList();
+    },
   },
 };
 </script>
@@ -72,16 +119,20 @@ export default {
   }
   &-dark {
     background: var(--dark-aside-bg-color);
+    color: var(--dark-text-color);
   }
   &-green {
     background: var(--green-aside-bg-color);
   }
 }
 .menu {
-  height: 420px;
+  height: 300px;
+}
+.aside-scroll {
+  height: calc(100% - 300px -60px);
 }
 .my-music-list {
-  height: calc(100% - 420px);
+  height: calc(100% - 300px -60px);
   padding: 10px 0px;
   .title {
     font-size: 13px;
@@ -90,8 +141,21 @@ export default {
     list-style-type: none;
     padding-left: 20px;
     li {
-      height: 60px;
-      border: 1px solid red;
+      height: 30px;
+      font-size: 13px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      img {
+        height: 80%;
+        border-radius: 2px;
+      }
+    }
+    &-name {
+      padding: 0px 10px;
     }
   }
 }

src/network/request.js

@@ -12,7 +12,7 @@ export function request(config) {
         ajaxTimer++;
         return data;
     }, err => {
-        // $store.commit('hiddenLoading');
+        $store.commit('hiddenLoading');
         return err
     });
     install.interceptors.response.use(data => {

src/network/user.js

@@ -27,4 +27,12 @@ export function _getSongList(id){
             uid:id
         }
     })
+}
+
+export class PlayList{
+    constructor(playlist){
+        this.name=playlist.name;//为了方便menu使用
+        this.id=playlist.id;
+        this.cover=playlist.coverImgUrl;
+    }
 }

src/store/index.js

@@ -60,7 +60,14 @@ export default new Vuex.Store({
     /**获取网络请求状态 */
     getRequestType(state){
       return state.requestErr;
-    }
+    },
+    /**获取用户id */
+    getUserId(state){
+      if(localStorage.getItem('uid')){
+        state.uid=localStorage.getItem('uid');
+      }
+      return state.uid
+    },
   },
   actions: {
   },

src/views/artist-list/artist-category.vue

@@ -1,6 +1,6 @@
 <template>
   <scroll class="scroll" ref="scroll">
-    <div :class="[`${program + 'artist-category'}`]">
+    <div :class="[`${program + 'artist-category'}`]" @mouseenter="refresh">
       <div class="artist-category-menu">
         <div class="artist-category-menu-item">
           <div class="artist-category-menu-item-title">语种：</div>

src/views/mv/mv.vue

@@ -23,10 +23,10 @@
         </div>
       </div>
       <mv-list :mv-list="mvList" />
-      <h4>推荐MV</h4>
+      <h4 class="mv-h4">推荐MV</h4>
       <mv-list :mv-list="perMV" @refresh="handleRefresh" />
       <div class="mv-title">
-        <div class="mv-title">
+        <div class="mv-title-left">
           <h4>MV排行榜</h4>
         </div>
         <div class="mv-right">
@@ -46,7 +46,11 @@
           ></router-link>
         </div>
       </div>
-      <mv-rank-list :top-mv="topMv" @refresh="handleRefresh" />
+      <mv-rank-list
+        class="mv-rank-list"
+        :top-mv="topMv"
+        @refresh="handleRefresh"
+      />
     </div>
   </scroll>
 </template>
@@ -77,6 +81,10 @@ export default {
     this.getNewMv();
     this.Personalized();
     this.getTopMv();
+    this.$Notice.info({
+      title:'系统提示：',
+      desc:'点击更多按钮可查看全部MV哦~'
+    })
   },
   methods: {
     handleAreasClick(index) {
@@ -146,7 +154,7 @@ export default {
 .mv-title {
   display: flex;
   align-items: flex-end;
-  padding: 0px 10px;
+  padding: 0px 20px;
   position: relative;
   h4 {
     padding: 10px 0px;
@@ -164,7 +172,10 @@ a {
   color: inherit;
   text-decoration: none;
 }
-h4 {
+.mv-h4 {
   padding: 10px 20px;
 }
+.mv-rank-list {
+  padding: 0px 20px;
+}
 </style>