feat: playlist page add paging function

* modify css style of some pages.

src/assets/css/fakeqqmusic.scss

@@ -12,6 +12,7 @@ $black: #000;
   h4,
   h5,
   h6,
+  dd
   p {
     margin: 0;
     padding: 0;
@@ -672,6 +673,10 @@ $black: #000;
   font-size: 14px;
 }
 
+.mod_list_menu {
+  font-size: 0;
+  height: 36px;
+}
 .mod_songlist {
   font-size: 14px;
   overflow: hidden;
@@ -760,50 +765,6 @@ $black: #000;
   white-space: nowrap;
   font-size: 14px;
 }
-.icon_rank_popular {
-  width: 15px;
-  height: 15px;
-  margin-top: 27px;
-  background-position: 0 -60px;
-}
-.icon_rank_up {
-  width: 14px;
-  height: 13px;
-  margin-top: 28px;
-  background-position: 0 0;
-}
-.icon_rank_down {
-  width: 14px;
-  height: 13px;
-  margin-top: 28px;
-  background-position: 0 -15px;
-}
-.icon_rank_keep {
-  width: 14px;
-  height: 3px;
-  margin-top: 38px;
-  background-position: 0 -30px;
-}
-.icon_rank_new {
-  width: 23px;
-  height: 8px;
-  margin-top: 36px;
-  background-position: 0 -40px;
-}
-.icon_rank_down,
-.icon_rank_keep,
-.icon_rank_new,
-.icon_rank_popular,
-.icon_rank_re,
-.icon_rank_up {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  background-image: url(../img/icon_rank.png);
-}
-.icon_txt {
-  font: 0/0 a;
-}
 .songlist__songname {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -855,9 +816,50 @@ $black: #000;
   right: 10px;
   margin-top: -18px;
 }
-.mod_list_menu {
-  font-size: 0;
-  height: 36px;
+
+.icon_rank_popular {
+  width: 15px;
+  height: 15px;
+  margin-top: 27px;
+  background-position: 0 -60px;
+}
+.icon_rank_up {
+  width: 14px;
+  height: 13px;
+  margin-top: 28px;
+  background-position: 0 0;
+}
+.icon_rank_down {
+  width: 14px;
+  height: 13px;
+  margin-top: 28px;
+  background-position: 0 -15px;
+}
+.icon_rank_keep {
+  width: 14px;
+  height: 3px;
+  margin-top: 38px;
+  background-position: 0 -30px;
+}
+.icon_rank_new {
+  width: 23px;
+  height: 8px;
+  margin-top: 36px;
+  background-position: 0 -40px;
+}
+.icon_rank_down,
+.icon_rank_keep,
+.icon_rank_new,
+.icon_rank_popular,
+.icon_rank_re,
+.icon_rank_up {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  background-image: url(../img/icon_rank.png);
+}
+.icon_txt {
+  font: 0/0 a;
 }
 
 /*
@@ -1266,6 +1268,13 @@ img .playlist__pic {
   border: 1px solid #ddd;
   z-index: 99;
 }
+.popup_data_detail__cont {
+  max-height: 400px;
+  font-size: 14px;
+  line-height: 22px;
+  margin: 30px 5px 30px 10px;
+  overflow-y: auto;
+}
 .popup_data_detail__cont p,
 .popup_data_detail__tit {
   margin: 0 24px 0 19px;

src/views/musicLibrary/AlbumDetail.vue

@@ -93,12 +93,9 @@ export default {
     toggleShowMoreInfo() {
       this.moreInfo = !this.moreInfo;
     },
-    playAll() {
-      playSonglist(this.songs);
-    },
     cardClick(v) {
       if (v == "all") {
-        this.playAll();
+        playSonglist(this.songs);
       }
     },
   },
@@ -111,16 +108,7 @@ export default {
 </script>
 
 <style scoped>
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
 li,
-ol,
-p,
 ul {
   margin: 0;
   margin-right: 0px;
@@ -136,12 +124,4 @@ ul {
   overflow: hidden;
   font-size: 14.3px;
 }
-
-.popup_data_detail__cont {
-  max-height: 400px;
-  font-size: 14px;
-  line-height: 22px;
-  margin: 30px 5px 30px 10px;
-  overflow-y: auto;
-}
 </style>

src/views/musicLibrary/Classified.vue

@@ -236,8 +236,7 @@ export default {
         let lists = createPlaylists(res.data.playlists);
         this.playlists = lists;
         this.allLength = res.data.total;
-        console.log(res.data);
-        console.log(lists);
+        //console.log(res.data);
       });
     },
     playTheList(id) {
@@ -277,7 +276,6 @@ export default {
       if (this.selectedType != type) this.selectedType = type;
       if (idx) {
         this.showMoreIdx = idx;
-        this.playlistTpyes[this.showMoreIdx].showMore = false;
       }
     },
     deleteSeleted() {

src/views/musicLibrary/MV.vue

@@ -17,7 +17,7 @@
       <div class="mod_part_detail">
         <div class="part_detail__hd">
           <h2 class="part_detail__tit js_lib_title">全部MV</h2>
-          <div class="part_switch" aria-label="排列方式">
+          <div class="part_switch">
             <a
               class="part_switch__item part_switch__item--left"
               :class="
@@ -113,7 +113,9 @@ export default {
   data() {
     return {
       mvLoading: true,
+      limit: 20,
       page: 1,
+      allLength: 0,
       more: true,
       order: mvOrder.NEW.dataId,
       orders: mvOrder,
@@ -129,12 +131,18 @@ export default {
   },
   methods: {
     updateMv() {
-      let limit = 20;
-      getAllMV(limit, this.page, this.order, this.selectArea, this.selectType)
+      getAllMV(
+        this.limit,
+        this.page,
+        this.order,
+        this.selectArea,
+        this.selectType
+      )
         .then((res) => {
           console.log(res);
           this.mvs = res.data.data;
           this.mvLoading = false;
+          this.allLength = res.data.count;
         })
         .catch((err) => console.log(err));
     },
@@ -162,6 +170,9 @@ export default {
         this.updateMv();
       }
     },
+    currentChange(v) {
+      this.page = v;
+    },
     processCount,
   },
   components: {
@@ -172,14 +183,7 @@ export default {
 </script>
 
 <style scoped>
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 li,
-p,
 ul {
   margin: 0;
   padding: 0;

src/views/musicLibrary/PlaylistDetail.vue

@@ -25,7 +25,7 @@
             style="display: "
             >[更多]</a
           > -->
-          <a href="javascript:;" class="btn_edit js_edit" style="display: none">
+          <a class="btn_edit js_edit" style="display: none">
             <i class="icon_txt">编辑</i>
           </a>
         </div>
@@ -96,11 +96,8 @@ export default {
         });
       });
     },
-    playAll() {
-      playSonglist(this.songs);
-    },
     cardClick(v) {
-      if (v == "all") this.playAll();
+      if (v == "all") playSonglist(this.songs);
     },
   },
   components: {
@@ -111,11 +108,4 @@ export default {
 </script>
 
 <style scoped>
-.mod_songlist {
-  font-size: 14px;
-  overflow: hidden;
-}
-.mod_songlist {
-  padding-bottom: 60px;
-}
 </style>

src/views/musicLibrary/Ranking.vue

@@ -12,7 +12,7 @@
             :class="
               item.dataId == seletedType ? 'toplist_nav__link--current' : ''
             "
-            @click="onSelectType(item.dataId)"
+            @click="onSelectType(item)"
             >{{ item.name }}</a
           >
         </dd>
@@ -29,7 +29,7 @@
             :class="
               item.dataId == seletedType ? 'toplist_nav__link--current' : ''
             "
-            @click="onSelectType(item.dataId)"
+            @click="onSelectType(item)"
             >{{ item.name }}</a
           >
         </dd>
@@ -46,7 +46,7 @@
             :class="
               item.dataId == seletedType ? 'toplist_nav__link--current' : ''
             "
-            @click="onSelectType(item.dataId)"
+            @click="onSelectType(item)"
             >{{ item.name }}</a
           >
         </dd>
@@ -63,7 +63,7 @@
             :class="
               item.dataId == seletedType ? 'toplist_nav__link--current' : ''
             "
-            @click="onSelectType(item.dataId)"
+            @click="onSelectType(item)"
             >{{ item.name }}</a
           >
         </dd>
@@ -72,7 +72,7 @@
 
     <div class="mod_toplist">
       <div class="toplist__hd_rk">
-        <h1 class="toplist__tit1">飙升榜</h1>
+        <h1 class="toplist__tit1">{{ seletedTypeName }}</h1>
         <span class="toplist_switch">
           <a
             href="javascript:;"
@@ -250,6 +250,7 @@ export default {
         { name: "日本Oricon", dataId: "60131" },
         { name: "法国 NRJ Vos Hits 周榜", dataId: "27135204" },
       ],
+      seletedTypeName: "飙升榜",
       seletedType: "19723756",
       listDatas: [],
     };
@@ -258,8 +259,9 @@ export default {
     this.updatedTopList();
   },
   methods: {
-    onSelectType(id) {
-      this.seletedType = id;
+    onSelectType(type) {
+      this.seletedType = type.dataId;
+      this.seletedTypeName = type.name;
     },
     formatTime(duration) {
       return formatTime(duration);
@@ -327,44 +329,20 @@ export default {
   font-size: 14px;
   line-height: 1.5;
 }
+a.hover {
+  color: #31c27c;
+}
 dd,
-dt,
 h1,
 ul,
-li,
-h2 {
+li {
   margin: 0;
   padding: 0;
 }
 
-a {
-  font-family: poppin, Tahoma, Arial, 微软雅黑, sans-serif;
-}
-input,
-select,
-textarea,
-th {
-  color: #000;
-  background-color: #fff;
-  font-size: 14px;
-  line-height: 1.5;
-  font-family: poppin, Tahoma, Arial, 微软雅黑, sans-serif;
-  font-family: Tahoma, Arial, 微软雅黑, sans-serif/9;
-}
-
 /*overwrite*/
 .mod_btn,
 .mod_btn_green {
-  border-radius: 2px;
-  font-size: 14px;
-  margin-right: 6px;
-  padding: 0 23px;
-  height: 38px;
-  line-height: 38px;
-  display: inline-block;
-  white-space: nowrap;
-  box-sizing: border-box;
-  overflow: hidden;
   text-align: left;
 }
 .songlist__item {
@@ -419,7 +397,4 @@ th {
   text-align: center;
   color: #999;
 }
-a.hover {
-  color: #31c27c;
-}
 </style>