Update func

* can add song to playlist.
* can show playlist rule.
* can show playlist update time.
* remove some dubug info.
* modify loading status.
* add login step.
* add login timeout warning.

Plan.md

@@ -20,23 +20,24 @@
    - 未登陆时登陆按钮
    - 关注页面
    - 粉丝页面
+   - 个人信息显示
 6. 排行榜页面
    - 按钮功能
    - [x] 转跳
    - [x] 标题展示
+   - [x] 榜单规则显示
+   - [x] 能去到 MV 页面
 7. mv 列表页
    - [x] 无限滚动
    - [x] mv 详情播放页
 8. 大功能条
    - [x] 播放
    - [x] 收藏
-   - 分享
-   - 添加
 9. 小功能条
    - [x] 播放
    - [x] 下载
    - [x] 分享
-   - 添加
+   - [x] 添加
 10. [x] 懒加载
 
 - [ ] 样式调整

src/api/playlist.js

@@ -25,6 +25,12 @@ export const getCatList = () => requset.get("/playlist/catlist");
 /* 登陆后使用 */
 export const getUserPlaylists = id => requset.get(`/user/playlist?uid=${id}`);
 
+/* 需要登陆
+op: 从歌单增加单曲为 add, 删除为 del
+pid: 歌单 id tracks: 歌曲 id,可多个,用逗号隔开 */
+export const changePlaylist = params =>
+  requset.get("/playlist/tracks", { params: params });
+
 /* 收藏/取消收藏歌单
  * 登陆后使用
  * t : 类型,1:收藏,2:取消收藏 id : 歌单 id */

src/assets/css/base.scss

@@ -55,3 +55,10 @@ h6 {
   background-color: #31c27c;
   color: #fff;
 }
+
+.el-loading-mask {
+    height: 100%;
+}
+.el-loading-spinner .path {
+    stroke: #31c27c;
+}

src/components/common/Banner.vue

@@ -3,7 +3,6 @@
     indicator-position="outside"
     type="card"
     height="350px"
-    v-loading="bannerLoading"
     v-if="banners.length > 0"
   >
     <el-carousel-item
@@ -27,7 +26,6 @@ import { getBanner } from "api";
 export default {
   data() {
     return {
-      bannerLoading: true,
       banners: [],
     };
   },
@@ -39,7 +37,6 @@ export default {
       getBanner()
         .then((res) => {
           this.banners = res.data.banners;
-          this.bannerLoading = false;
         })
         .catch((err) => console.log(err));
     },

src/components/common/HomeTop.vue

 <template>
-  <div class="toplist_main">
+  <div class="toplist_main" v-loading="loading">
     <h1 class="list">排行榜</h1>
     <div class="home_toplist">
       <ul class="toplist__list js_list">
@@ -60,6 +60,7 @@ import {
 export default {
   data() {
     return {
+      loading: true,
       toplists: [],
       toplistTypes,
     };
@@ -76,6 +77,7 @@ export default {
         getSongDetail(trackIds).then((res) => {
           let songs = createSongs(res.data.songs);
           this.toplists.push(songs);
+          this.loading = false;
         });
       });
     },

src/components/common/LoginOpt.vue

@@ -34,7 +34,7 @@
         <a class="popup_user_data__cover_link">
           <img
             onerror="this.src=\'//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000\';this.onerror=null;"
-            class="popup_user_data__cover js_user_img"
+            class="popup_user_data__cover"
             style="background-color: gray"
             :src="$store.state.user.user.avatarUrl"
           />
@@ -53,7 +53,7 @@
       </div>
       <div class="popup_user_toolbar">
         <div class="popup_user_toolbar__item">
-          <div class="popup_user_toolbar__tit js_msgcenterdiv">
+          <div class="popup_user_toolbar__tit">
             <a>评论通知</a>
           </div>
         </div>
@@ -81,7 +81,7 @@
   >
     <div class="popup__hd">
       <h2 class="popup__tit">
-        <a class="popup__tit_item current" style="">扫码登陆</a>
+        <a class="popup__tit_item current" style="font-size: 25px">扫码登陆</a>
       </h2>
     </div>
     <a class="popup__close" title="关闭" @click="hiddenLoginPopup"
@@ -99,6 +99,11 @@
         frameborder="0"
       />
     </div>
+    <el-steps :active="active" finish-status="success" align-center>
+      <el-step title="扫码" icon="el-icon-full-screen"></el-step>
+      <el-step title="等待确认" icon="el-icon-thumb"></el-step>
+      <el-step title="成功登陆" icon="el-icon-star-off"></el-step>
+    </el-steps>
   </div>
   <div
     class="mod_popup_mask"
@@ -114,13 +119,18 @@ import {
   getLoginStatus,
   logout,
   getUserLikeSongs,
+  getUserPlaylists,
 } from "api";
+import { createPlaylist } from "common/utils";
+import { ElMessage } from "element-plus";
+
 export default {
   data() {
     return {
       isShowLoginPopup: false,
       isShowPopup: false,
       qrurl: "",
+      active: 0,
     };
   },
   mounted() {
@@ -138,7 +148,8 @@ export default {
       });
     },
     checkScanState(key) {
-      let timer = setInterval(async () => {
+      if (this.timer) clearInterval(this.timer);
+      this.timer = setInterval(async () => {
         let res = await getLoginQrScanState(key);
         //console.log(res);
         let code = res.data.code;
@@ -146,16 +157,18 @@ export default {
         switch (code) {
           case 800:
             console.log("二维码过期");
+            ElMessage.warning("二维码过期， 请关闭重新打开");
             clearInterval(timer);
             break;
           case 801:
             break;
           case 802:
             console.log("已扫描");
+            this.active = 1;
             break;
           case 803:
-            clearInterval(timer);
-            this.isShowLoginPopup = false;
+            clearInterval(this.timer);
+            this.active = 2;
             this.getLoginStatus();
             break;
           default:
@@ -174,6 +187,20 @@ export default {
             let ids = res.data.ids;
             this.$store.commit("user/setLikelist", ids);
           });
+          getUserPlaylists(profile.userId).then((res) => {
+            let list = res.data.playlist;
+            let lists = [];
+            list.map((l) => {
+              if (l.creator.userId == profile.userId)
+                lists.push(createPlaylist(l));
+            });
+            this.$store.commit("user/setCreatedList", lists);
+          });
+          // 成功登陆
+          this.active = 3;
+          setTimeout(() => {
+            this.isShowLoginPopup = false;
+          }, 1000);
         }
       });
     },
@@ -189,6 +216,7 @@ export default {
     },
     hiddenLoginPopup() {
       this.isShowLoginPopup = false;
+      if (this.timer) clearInterval(this.timer);
     },
     showUserPopup() {
       this.isShowPopup = true;
@@ -351,9 +379,6 @@ a:hover {
 .popup__tit_item {
   margin: 0 60px;
 }
-.popup__tit_item.current {
-  color: #31c27c;
-}
 
 .popup__close {
   position: absolute;
@@ -375,7 +400,7 @@ a:hover {
 .popup_login.large .popup__bd {
   position: relative;
   overflow: hidden;
-  height: 348px;
+  height: 238px;
 }
 .popup_login.large iframe {
   position: absolute;

src/components/common/ModListMenu.vue

 <template>
   <div class="mod_list_menu">
-    <a
-      class="list_menu__item list_menu__play js_play"
-      title="播放"
-      @click="play"
-    >
+    <a class="list_menu__item list_menu__play" title="播放" @click="play">
       <i class="list_menu__icon_play"></i>
       <span class="icon_txt">播放</span>
     </a>
     <a
-      class="list_menu__item list_menu__add js_fav"
+      class="list_menu__item list_menu__add"
       title="添加到歌单"
       aria-haspopup="true"
     >
-      <i class="list_menu__icon_add"></i>
-      <span class="icon_txt">添加到歌单</span>
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link">
+          <i class="list_menu__icon_add"></i>
+          <span class="icon_txt">添加到歌单</span>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu v-if="createdList.length > 0">
+            <el-dropdown-item
+              icon="el-icon-circle-plus-outline"
+              v-for="item in createdList"
+              :key="item.id"
+              @click="addToList(song.id, item.id)"
+            >
+              {{ item.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+          <el-dropdown-menu v-else>
+            <el-dropdown-item> 请先登陆 </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </a>
     <a
-      class="list_menu__item list_menu__down js_down"
+      class="list_menu__item list_menu__down"
       title="下载"
       aria-haspopup="true"
       v-if="kind == 0"
@@ -27,7 +42,7 @@
       <span class="icon_txt">下载</span>
     </a>
     <a
-      class="list_menu__item list_menu__share js_share"
+      class="list_menu__item list_menu__share"
       title="分享"
       aria-haspopup="true"
       @click="share"
@@ -42,7 +57,13 @@
 <script>
 import BlackTip from "components/common/BlackTip";
 import { playTheSong, playSonglist, createSongs, copyText } from "common/utils";
-import { getPlaylistDetial, getSongDetail, getAlbum, getSongUrl } from "api";
+import {
+  getPlaylistDetial,
+  getSongDetail,
+  getAlbum,
+  getSongUrl,
+  changePlaylist,
+} from "api";
 
 export default {
   data() {
@@ -60,6 +81,11 @@ export default {
     // 0: song, 1: album , 2: playlist
     kind: { default: 0 },
   },
+  computed: {
+    createdList() {
+      return this.$store.state.user.createdList;
+    },
+  },
   methods: {
     play() {
       switch (this.kind) {
@@ -97,6 +123,16 @@ export default {
         playSonglist(songs);
       });
     },
+    addToList(id, listId) {
+      changePlaylist({ op: "add", pid: listId, tracks: id }).then((res) => {
+        this.tip = "已成功添加至歌单";
+        this.ifShow = true;
+        if (this.timer) clearTimeout(this.timer);
+        setTimeout(() => {
+          this.ifShow = false;
+        }, 1000);
+      });
+    },
     share() {
       switch (this.kind) {
         case 0:
@@ -164,5 +200,10 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss">
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: #fff;
+  color: #31c27c;
+}
 </style>

src/components/common/RecommendedBar.vue

@@ -2,6 +2,7 @@
   <div
     class="mod_slide_box"
     style="position: relative; background-image: linear-gradient(#f5f5f5, #fff)"
+    v-loading="listLoading"
   >
     <div class="section_inner" style="z-index: 2">
       <h1 class="recommended_list">歌单推荐</h1>
@@ -16,7 +17,7 @@
         </a>
       </div>
 
-      <div class="mod_playlist mod_slide" v-loading="listLoading">
+      <div class="mod_playlist mod_slide">
         <ul
           class="playlist__list slide__list"
           :style="{ left: showNo ? '-100%' : '0' }"

src/main.js

@@ -16,7 +16,13 @@ import {
   ElCarousel,
   ElCarouselItem,
   ElPagination,
-  ElEmpty
+  ElEmpty,
+  ElPopover,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElStep,
+  ElSteps
 } from "element-plus";
 
 createApp(App)
@@ -32,4 +38,10 @@ createApp(App)
   .use(ElCarouselItem)
   .use(ElPagination)
   .use(ElEmpty)
+  .use(ElPopover)
+  .use(ElDropdown)
+  .use(ElDropdownMenu)
+  .use(ElDropdownItem)
+  .use(ElStep)
+  .use(ElSteps)
   .mount("#app");

src/store/module/user/mutations.js

@@ -14,5 +14,8 @@ export default {
   },
   addToLikelist(state, id) {
     state.likelist.push(id);
+  },
+  setCreatedList(state, list) {
+    state.createdList = list;
   }
 };

src/store/module/user/state.js

 export default {
   user: {},
   isLogged: false,
-  likelist: []
+  likelist: [],
+  createdList: []
 };

src/views/musicLibrary/Home.vue

 <template>
-  <div class="home-main">
+  <div class="home-main" v-loading="loading">
     <banner />
     <recommended-bar />
     <home-top />
@@ -12,6 +12,11 @@ import RecommendedBar from "components/common/RecommendedBar";
 import HomeTop from "components/common/HomeTop";
 
 export default {
+  data() {
+    return {
+      loading: false,
+    };
+  },
   components: {
     Banner,
     RecommendedBar,

src/views/musicLibrary/Ranking.vue

@@ -70,31 +70,33 @@
       <div class="toplist__hd_rk">
         <h1 class="toplist__tit1">{{ seletedTypeName }}</h1>
         <span class="toplist_switch">
-          <a class="toplist_switch__btn" style="display: none"
-            ><i class="toplist_switch__arrow_prev sprite"></i
-            ><i class="icon_txt">上一期</i></a
-          >
-          <!-- <span class="toplist_switch__data js_chosed_week">2021-02-13</span> -->
-          <a class="toplist_switch__btn" style="display: none"
-            ><i class="toplist_switch__arrow_next sprite"></i
-            ><i class="icon_txt">下一期</i></a
-          >
+          <span class="toplist_switch__data">{{ updateTime }}</span>
         </span>
-        <a class="toplist__rule js_desc">榜单规则</a>
+        <el-popover
+          placement="top-start"
+          :title="seletedTypeName"
+          :width="450"
+          trigger="hover"
+          :content="desc"
+        >
+          <template #reference>
+            <a class="toplist__rule">榜单规则</a>
+          </template>
+        </el-popover>
       </div>
       <div class="mod_songlist_toolbar">
         <a class="mod_btn_green js_all_play" @click="playSonglist(listDatas)"
           ><i class="mod_btn_green__icon_play"></i>播放全部</a
         >
-        <a class="mod_btn js_all_fav"
+        <!-- <a class="mod_btn js_all_fav"
           ><i class="mod_btn__icon_add"></i>添加到</a
-        >
-        <a class="mod_btn js_all_down"
+        > -->
+        <!-- <a class="mod_btn js_all_down"
           ><i class="mod_btn__icon_down"></i>下载</a
-        >
-        <a class="mod_btn js_batch"
+        > -->
+        <!-- <a class="mod_btn js_batch"
           ><i class="mod_btn__icon_batch"></i>批量操作</a
-        >
+        > -->
         <a class="mod_btn js_into_comment" href="#comment_box"
           ><i class="mod_btn__icon_comment"></i>评论{{
             "(" + processCount(commentCount) + ")"
@@ -153,6 +155,7 @@
                   rel="noopener"
                   title="MV"
                   :style="{ display: song.mvId == 0 ? 'none' : '' }"
+                  @click="gotoMvDetail(song.mvId)"
                   ><span class="icon_txt">MV</span></a
                 >
 
@@ -220,7 +223,9 @@ import {
   createSong,
   playSonglist,
   gotoSongDetail,
+  gotoMvDetail,
   processCount,
+  formatDate,
 } from "common/utils";
 
 export default {
@@ -233,6 +238,8 @@ export default {
       globalRankingtype,
       seletedTypeName: "飙升榜",
       seletedType: "19723756",
+      desc: "",
+      updateTime: "",
       listDatas: [],
       pageSize: 20,
       commentPage: 1,
@@ -255,6 +262,13 @@ export default {
     updatedTopList() {
       getPlaylistDetial(this.seletedType).then((res) => {
         //console.log(res);
+        // 获取榜单信息
+        this.desc = res.data.playlist.description;
+        this.updateTime = formatDate(
+          res.data.playlist.updateTime,
+          "yyyy-MM-dd"
+        );
+        // 获取榜单歌曲列表
         let trackIds = res.data.playlist.trackIds;
         let ids = trackIds.map(({ id }) => id);
         getSongDetail(ids).then((res) => {
@@ -306,9 +320,10 @@ export default {
     currentChange(v) {
       this.commentPage = v;
     },
+    processCount,
     playSonglist,
     gotoSongDetail,
-    processCount,
+    gotoMvDetail,
   },
   watch: {
     seletedType(newType) {