初始化

src/views/common/SongInfo.vue

@@ -0,0 +1,115 @@
+<script setup>
+import {
+  ref,
+  onUnmounted,
+  reactive,
+  toRef,
+  toRefs,
+} from "vue";
+import { NAvatar } from "naive-ui";
+import pubsub from "pubsub-js";
+import { getSongDetial } from "@/network/song";
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import duration from 'dayjs/plugin/duration'
+
+const showInfo = ref(true);
+const info = reactive({
+  name: "",
+  artists: "",
+  albumPicUrl: "",
+});
+
+//#region 取得歌曲信息
+const songInfo = (id) => {
+  getSongDetial(id)
+    .then((res) => {
+      showInfo.value = true;
+      info.name = res.data.songs[0].name;
+      info.artists = res.data.songs[0].ar[0].name;
+      info.albumPicUrl = res.data.songs[0].al.picUrl;
+    })
+    .catch((err) => {});
+};
+//#endregion
+
+//#region 处理消息订阅
+let totalTime = ref("03:13");
+let currTime = ref("00:03");
+
+dayjs.extend(duration)
+function zpTime(time) {
+  return dayjs.duration(time).format('mm:ss')
+}
+// totalTime.value = zpTime(12345)
+const psToken = pubsub.subscribe("zp", (msg, data) => {
+  switch (msg) {
+    case "zp.play":
+      songInfo(data.id);
+      break;
+    case "zp.progress":
+      totalTime.value = zpTime(data.total * 1000)
+      currTime.value = zpTime(data.progress * 1000)
+      break;
+  }
+});
+//卸载组件
+onUnmounted(() => {
+  pubsub.unsubscribe(psToken);
+});
+//#endregion
+</script>
+
+<template>
+  <div id="songInfo">
+    <NAvatar
+      :size="40"
+      v-show="showInfo"
+      :src="info.albumPicUrl"
+    ></NAvatar>
+    <div class="song" v-show="showInfo">
+      <div class="w-song">
+        <div class="song-name">{{ info.name }}</div>
+        <div class="song-author">{{ info.artists }}</div>
+      </div>
+
+      <div class="song-time">
+        <span class="played-time">{{ currTime }}</span>/<span class="total-time">{{ totalTime }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+#songInfo {
+  flex: 3;
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+
+  .song {
+    padding-left: 6px;
+    display: flex;
+    flex-direction: column;
+    .w-song {
+      display: flex;
+      align-items: center;
+      .song-author {
+        margin-left: 4px;
+        color: #aaa;
+        font-size: 13px;
+        
+      }
+    }
+    .song-time {
+      color: #aaa;
+      font-size: 13px;
+      font-family: Courier, monospace;
+    }
+  }
+}
+</style>