重开一个组件再写当前播放...

src/views/common/SongCtrl.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useStore } from "vuex";
-import { NButton, NIcon, NSpace } from "naive-ui";
+import { NButton, NIcon, NSpace, useMessage } from "naive-ui";
 import PlayCircle from "@/assets/svgs/PlayCircle.svg";
 import PlaySkipForward from "@/assets/svgs/PlaySkipForward.svg";
 import PlaySkipBack from "@/assets/svgs/PlaySkipBack.svg";
@@ -12,6 +12,7 @@ import { getSongUrl } from "@/network/song";
 import pubsub from "pubsub-js";
 
 const store = useStore();
+const message = useMessage();
 // const { settings } = store.state;
 const audioEl = ref("");
 const playing = ref(false);
@@ -46,38 +47,42 @@ const onPause = () => {
   console.log("onPause");
 };
 const onEnd = () => {
-  playNext(1)
+  playNext(1);
   // playing.value = false;
   currentTime = 0;
   console.log("下一首...");
 };
 
+//上、下一首
 const playNext = async (step) => {
-  let { songId, playingList, playMode , playing} = store.state.settings;
+  let { songId, playingList, playMode, playing } =
+    store.state.settings;
   let idx = playingList.findIndex((item) => item.id == songId);
-  console.log(idx);
+  // console.log(idx);
   switch (playMode) {
-    case 0:
+    case 0: //顺序
       idx += step;
       if (idx > playingList.length - 1) return;
-      if (idx < 0) return 
+      if (idx < 0) return;
       break;
-    case 1:
+    case 1: //循环
       idx += step;
       if (idx > playingList.length - 1) idx = 0;
       if (idx < 0) idx = playingList.length - 1;
       break;
-    case 2:
+    case 2: //单曲循环
       break;
-    case 3:
+    case 3: //随机
+      if (playingList.length <= 1) return; //只有一首歌
+      const i = Math.floor(Math.random() * (playingList.length - 1));
+      if (i >= idx) idx = i+1;
+      else idx = i;
       break;
   }
-  console.log(idx);
-  play(playingList[idx].id, playing)
+  // console.log(idx);
+  play(playingList[idx].id, playing);
 };
 
-const playPrev = async (id, im = true) => {};
-
 const previous = async () => {
   playNext(-1);
 };
@@ -152,11 +157,13 @@ watch(playing, (val, old) => {
   if (val === true) {
     interval = setInterval(() => {
       // console.log(audioEl.value.duration);
-      currentTime = audioEl.value.currentTime;
-      pubsub.publish("zp.progress", {
-        progress: audioEl.value.currentTime,
-        total: audioEl.value.duration,
-      });
+      if (audioEl.value) {
+        currentTime = audioEl.value.currentTime;
+        pubsub.publish("zp.progress", {
+          progress: audioEl.value.currentTime,
+          total: audioEl.value.duration,
+        });
+      } else clearInterval(interval);
     }, 200);
   } else {
     clearInterval(interval);