当前播放开发中...

src/views/common/SongCtrl.vue

@@ -33,7 +33,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  console.log("另外一个Unmounted");
+  // console.log("另外一个Unmounted");
   // audioEl.value.removeEventListener("play", onPlay);
   // audioEl.value.removeEventListener("pause", onPause);
   // audioEl.value.removeEventListener("ended", onEnd);
@@ -46,12 +46,46 @@ const onPause = () => {
   console.log("onPause");
 };
 const onEnd = () => {
-  playing.value = false;
+  playNext(1)
+  // playing.value = false;
   currentTime = 0;
-  console.log("onEnd");
+  console.log("下一首...");
 };
 
-const play = async (id, name, im = true) => {
+const playNext = async (step) => {
+  let { songId, playingList, playMode , playing} = store.state.settings;
+  let idx = playingList.findIndex((item) => item.id == songId);
+  console.log(idx);
+  switch (playMode) {
+    case 0:
+      idx += step;
+      if (idx > playingList.length - 1) return;
+      if (idx < 0) return 
+      break;
+    case 1:
+      idx += step;
+      if (idx > playingList.length - 1) idx = 0;
+      if (idx < 0) idx = playingList.length - 1;
+      break;
+    case 2:
+      break;
+    case 3:
+      break;
+  }
+  console.log(idx);
+  play(playingList[idx].id, playing)
+};
+
+const playPrev = async (id, im = true) => {};
+
+const previous = async () => {
+  playNext(-1);
+};
+const forward = async () => {
+  playNext(1);
+};
+
+const play = async (id, im = true) => {
   console.log(id);
   await getSongUrl(id)
     .then((res) => {
@@ -60,13 +94,16 @@ const play = async (id, name, im = true) => {
         store.commit("saveSettings", {
           songId: id,
         });
-        pubsub.publish('zp.getSongInfo', {id: store.state.settings.songId, im})
+        // console.log(audioEl.value.duration);
+        pubsub.publish("zp.getSongInfo", {
+          id: store.state.settings.songId,
+          im,
+        });
 
         if (im) {
           audioEl.value.play();
           playing.value = true;
         }
-
       }
     })
     .catch((err) => {
@@ -90,7 +127,10 @@ const resume = async () => {
     }
     audioEl.value.play();
     playing.value = true;
-    pubsub.publish('zp.getSongInfo', {id: store.state.settings.songId, im: true})
+    pubsub.publish("zp.getSongInfo", {
+      id: store.state.settings.songId,
+      im: true,
+    });
   }
 };
 
@@ -108,9 +148,10 @@ const favorite = () => {
 
 let interval;
 watch(playing, (val, old) => {
+  store.state.settings.playing = val;
   if (val === true) {
     interval = setInterval(() => {
-      // console.log(audioEl.value.currentTime);
+      // console.log(audioEl.value.duration);
       currentTime = audioEl.value.currentTime;
       pubsub.publish("zp.progress", {
         progress: audioEl.value.currentTime,
@@ -127,7 +168,7 @@ watch(playing, (val, old) => {
 const psToken = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.play":
-      play(data.id, data.name, data.im);
+      play(data.id, data.im);
       break;
     case "zp.setProgressScale":
       setProgressScale(data.scale);
@@ -149,7 +190,7 @@ onUnmounted(() => {
     id="songCtrl"
     align="center"
     :size="[6]"
-    style="padding-top: 2px;margin: 0 4px"
+    style="padding-top: 2px; margin: 0 4px"
   >
     <n-button circle @click="favorite">
       <template #icon>
@@ -158,7 +199,7 @@ onUnmounted(() => {
         </n-icon>
       </template>
     </n-button>
-    <n-button circle>
+    <n-button circle @click="previous">
       <template #icon>
         <n-icon>
           <PlaySkipBack />
@@ -194,7 +235,7 @@ onUnmounted(() => {
       <!-- </template> -->
     </n-button>
     <!-- <n-button circle color="#18a058"> -->
-    <n-button circle>
+    <n-button circle @click="forward">
       <template #icon>
         <n-icon>
           <PlaySkipForward />