最近播放完成一半,差清除列表

src/views/common/SongCtrl.vue

@@ -12,7 +12,7 @@ import { getSongUrl } from "@/network/song";
 import pubsub from "pubsub-js";
 
 const store = useStore();
-const { settings } = store.state;
+// const { settings } = store.state;
 const audioEl = ref("");
 const playing = ref(false);
 let currentTime = 0;
@@ -23,9 +23,9 @@ onMounted(() => {
   audioEl.value.addEventListener("pause", onPause);
   audioEl.value.addEventListener("ended", onEnd);
 
-  if (settings.songId) {
+  if (store.state.settings.songId) {
     pubsub.publish("zp.play", {
-      id: settings.songId,
+      id: store.state.settings.songId,
       im: false,
     });
     // play(settings.songId, false)
@@ -60,12 +60,13 @@ const play = async (id, im = true) => {
         store.commit("saveSettings", {
           songId: id,
         });
-        pubsub.publish('zp.getSongInfo', {id})
+        pubsub.publish('zp.getSongInfo', {id: store.state.settings.songId, im})
 
         if (im) {
           audioEl.value.play();
           playing.value = true;
         }
+
       }
     })
     .catch((err) => {
@@ -84,11 +85,12 @@ const resume = async () => {
     // console.log(Date.now() - lastPause);
     if (Date.now() - lastPause > 1000 * 60 * 5) {
       console.log("暂停过了5分钟，再次载入歌曲");
-      await play(settings.songId, false);
+      await play(store.state.settings.songId, false);
       audioEl.value.currentTime = currentTime;
     }
     audioEl.value.play();
     playing.value = true;
+    pubsub.publish('zp.getSongInfo', {id: store.state.settings.songId, im: true})
   }
 };
 

src/views/common/SongInfo.vue

@@ -5,7 +5,9 @@ import {
   reactive,
   toRef,
   toRefs,
+  toRaw,
 } from "vue";
+import {useStore} from 'vuex'
 import { NAvatar } from "naive-ui";
 import pubsub from "pubsub-js";
 import { getSongDetial } from "@/network/song";
@@ -14,6 +16,7 @@ import 'dayjs/locale/zh-cn'
 import duration from 'dayjs/plugin/duration'
 import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
+const store = useStore()
 const showInfo = ref(false);
 const info = reactive({
   name: "",
@@ -22,13 +25,20 @@ const info = reactive({
 });
 
 //#region 取得歌曲信息
-const songInfo = (id) => {
+const songInfo = (id, im) => {
   getSongDetial(id)
     .then((res) => {
       showInfo.value = true;
       info.name = res.data.songs[0].name;
       info.artists = res.data.songs[0].ar;
       info.albumPicUrl = res.data.songs[0].al.picUrl;
+      if(im){
+        store.commit('savePlayed', {...{
+          id,
+          date: Date.now(),
+        }, ...toRaw(info)})
+        console.log('savePlayed');
+      }
     })
     .catch((err) => {});
 };
@@ -46,7 +56,7 @@ function zpTime(time) {
 const psToken = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.getSongInfo":
-      songInfo(data.id);
+      songInfo(data.id, data.im);
       break;
     case "zp.progress":
       totalTime.value = zpTime(data.total * 1000)