119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<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'
|
|
import ArtistsSpan from "@/components/ArtistsSpan.vue";
|
|
|
|
const showInfo = ref(false);
|
|
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;
|
|
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.getSongInfo":
|
|
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">
|
|
<ArtistsSpan :artists="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>
|