优化next页面，删除无用代码

src/components/Player.vue

@@ -174,9 +174,9 @@ export default {
   },
   methods: {
     ...mapMutations([
-      "updateShuffleStatus",
       "updatePlayerList",
       "turnOnShuffleMode",
+      "turnOffShuffleMode",
       "updatePlayerState",
       "updateRepeatStatus",
       "updateLikedSongs",
@@ -211,8 +211,7 @@ export default {
     },
     shuffle() {
       if (this.player.shuffle === true) {
-        this.updateShuffleStatus(false);
+        this.turnOffShuffleMode();
-        this.updatePlayerList(this.player.notShuffledList);
       } else {
         this.turnOnShuffleMode();
       }

src/store/actions.js

@@ -7,12 +7,6 @@ export default {
     getTrackDetail(basicTrack.id).then((data) => {
       let track = data.songs[0];
       track.sort = basicTrack.sort;
-      console.log(track);
-
-      if (track.playable === false) {
-        dispatch("nextTrack");
-        return;
-      }
 
       let time = state.howler.seek();
       scrobble({
@@ -27,6 +21,11 @@ export default {
       updateMediaSessionMetaData(track);
       document.title = `${track.name} · ${track.ar[0].name} - YesPlayMusic`;
 
+      if (track.playable === false) {
+        dispatch("nextTrack");
+        return;
+      }
+
       commit(
         "replaceMP3",
         `https://music.163.com/song/media/outer/url?id=${track.id}`

src/store/mutations.js

@@ -25,9 +25,6 @@ export default {
   updateListInfo(state, info) {
     state.player.listInfo = info;
   },
-  updateShuffleStatus(state, status) {
-    state.player.shuffle = status;
-  },
   updateRepeatStatus(state, status) {
     state.player.repeat = status;
   },
@@ -66,13 +63,24 @@ export default {
       return track;
     });
   },
+  turnOffShuffleMode(state) {
+    state.player.shuffle = false;
+    state.player.list = JSON.parse(
+      JSON.stringify(state.player.notShuffledList)
+    );
+    state.player.currentTrack.sort = state.player.list.find(
+      (t) => t.id === state.player.currentTrack.id
+    ).sort;
+  },
   shuffleTheListBeforePlay(state) {
+    state.player.notShuffledList = JSON.parse(
+      JSON.stringify(state.player.list)
+    );
     let newSorts = shuffleAList(state.player.list);
     state.player.list = state.player.list.map((track) => {
       track.sort = newSorts[track.id];
       return track;
     });
-    console.table(state.player.list);
   },
   updateUser(state, user) {
     state.settings.user = user;

src/views/album.vue

@@ -131,11 +131,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations([
+    ...mapMutations(["appendTrackToPlayerList"]),
-      "updatePlayerList",
-      "appendTrackToPlayerList",
-      "shuffleTheList",
-    ]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     playAlbumByID(id, trackID = "first") {
       if (this.tracks.find((t) => t.playable !== false) === undefined) {

src/views/artist.vue

@@ -140,11 +140,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations([
+    ...mapMutations(["appendTrackToPlayerList"]),
-      "updatePlayerList",
-      "appendTrackToPlayerList",
-      "shuffleTheList",
-    ]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     loadData(id, next = undefined) {
       getArtist(id).then((data) => {

src/views/next.vue

@@ -29,7 +29,6 @@ export default {
   data() {
     return {
       tracks: [],
-      showTracks: [],
     };
   },
   computed: {
@@ -37,6 +36,9 @@ export default {
     currentTrack() {
       return this.player.currentTrack;
     },
+    playerShuffle() {
+      return this.player.shuffle;
+    },
     sortedTracks() {
       function compare(property) {
         return function(obj1, obj2) {
@@ -45,16 +47,21 @@ export default {
           return value1 - value2;
         };
       }
-      let tracks = this.tracks
+      return this.tracks
         .filter((t) => t.sort > this.player.currentTrack.sort)
         .sort(compare("sort"));
-      return tracks;
     },
   },
   watch: {
     currentTrack() {
       this.loadTracks();
     },
+    playerShuffle() {
+      this.tracks = this.tracks.map((t) => {
+        t.sort = this.player.list.find((t2) => t.id === t2.id).sort;
+        return t;
+      });
+    },
   },
   methods: {
     ...mapActions(["playTrackOnListByID"]),
@@ -97,101 +104,4 @@ h1 {
   margin-bottom: 18px;
   cursor: default;
 }
-
-.track-list {
-  user-select: none;
-  .track {
-    display: flex;
-    align-items: center;
-
-    padding: 8px;
-    border-radius: 12px;
-    img {
-      border-radius: 8px;
-      height: 56px;
-      margin-right: 20px;
-    }
-    .title-and-artist {
-      flex: 1;
-      display: flex;
-      .container {
-        display: flex;
-        flex-direction: column;
-      }
-      .title {
-        font-size: 18px;
-        font-weight: 600;
-        color: rgba(0, 0, 0, 0.88);
-        cursor: default;
-      }
-      .artist {
-        margin-top: 2px;
-        font-size: 13px;
-        color: rgba(0, 0, 0, 0.68);
-        a {
-          span {
-            margin-right: 3px;
-            color: rgba(0, 0, 0, 0.8);
-          }
-          &:hover {
-            text-decoration: underline;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-    .album {
-      flex: 1;
-      display: flex;
-      .container {
-        display: flex;
-        flex-direction: column;
-        &:hover {
-          text-decoration: underline;
-          cursor: pointer;
-        }
-      }
-      font-size: 16px;
-      color: rgba(0, 0, 0, 0.88);
-    }
-    .time {
-      font-size: 16px;
-      width: 50px;
-      cursor: default;
-      display: flex;
-      justify-content: flex-end;
-      margin-right: 10px;
-      font-variant-numeric: tabular-nums;
-    }
-    &:hover {
-      transition: all 0.3s;
-      background: #f5f5f7;
-    }
-  }
-  .track.playing {
-    background: #eaeffd;
-    .title,
-    .time,
-    .album {
-      color: #335eea;
-    }
-    .artist {
-      color: rgba(51, 94, 234, 0.88);
-    }
-  }
-  .track.disable {
-    img {
-      filter: grayscale(1) opacity(0.6);
-    }
-    .title,
-    .artist,
-    .time,
-    .album {
-      color: rgba(0, 0, 0, 0.28);
-    }
-    &:hover {
-      background: none;
-    }
-  }
-}
 </style>