歌手链接

src/App.vue

@@ -98,7 +98,7 @@ body {
   // padding: 0;
   font-size: 15px;
   color: #333;
-  line-height: 1.3;
+  // line-height: 1.3;
   overflow-y: hidden;
 
   img {

src/components/ArtistsSpan.vue

@@ -0,0 +1,20 @@
+<script setup>
+
+</script>
+<template>
+  <template v-for="(ar, idx) of artists" key="idx">
+    <span
+      @click="$router.push('/songer/' + ar.id)"
+      style="margin-right: 4px; cursor: pointer"
+      >{{ ar.name }}</span
+    >
+  </template>
+</template>
+
+<script>
+export default {
+  props: ["artists"],
+};
+</script>
+
+<style></style>

src/store/index.js

@@ -7,6 +7,7 @@ export default createStore({
     settings: {
       currentRoute: "/discover/recommend", //当前路由
       songId: 0, //歌曲id
+      lastPlayed: [], //最近播放
     },
     caches: {},
     theme: {

src/views/common/SongCtrl.vue

@@ -16,7 +16,7 @@ const { settings } = store.state;
 const audioEl = ref("");
 const playing = ref(false);
 let currentTime = 0;
-let lastPause = Date.now()
+let lastPause = Date.now();
 
 onMounted(() => {
   audioEl.value.addEventListener("play", onPlay);
@@ -55,13 +55,17 @@ const play = async (id, im = true) => {
   console.log(id);
   await getSongUrl(id)
     .then((res) => {
-      audioEl.value.src = res.data.data[0].url;
+      if (null !== res.data.data[0].url) {
-      store.commit("saveSettings", {
+        audioEl.value.src = res.data.data[0].url;
-        songId: id,
+        store.commit("saveSettings", {
-      });
+          songId: id,
-      if (im) {
+        });
-        audioEl.value.play();
+        pubsub.publish('zp.getSongInfo', {id})
-        playing.value = true;
+
+        if (im) {
+          audioEl.value.play();
+          playing.value = true;
+        }
       }
     })
     .catch((err) => {
@@ -78,8 +82,8 @@ const resume = async () => {
   if (audioEl.value.readyState) {
     //如果暂停过了5分钟，需要再次载入歌曲
     // console.log(Date.now() - lastPause);
-    if((Date.now() - lastPause) > 1000 * 60 * 5){ 
+    if (Date.now() - lastPause > 1000 * 60 * 5) {
-      console.log('暂停过了5分钟，再次载入歌曲');
+      console.log("暂停过了5分钟，再次载入歌曲");
       await play(settings.songId, false);
       audioEl.value.currentTime = currentTime;
     }

src/views/common/SongInfo.vue

@@ -12,6 +12,7 @@ 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(true);
 const info = reactive({
@@ -26,7 +27,7 @@ const songInfo = (id) => {
     .then((res) => {
       showInfo.value = true;
       info.name = res.data.songs[0].name;
-      info.artists = res.data.songs[0].ar[0].name;
+      info.artists = res.data.songs[0].ar;
       info.albumPicUrl = res.data.songs[0].al.picUrl;
     })
     .catch((err) => {});
@@ -44,7 +45,7 @@ function zpTime(time) {
 // totalTime.value = zpTime(12345)
 const psToken = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
-    case "zp.play":
+    case "zp.getSongInfo":
       songInfo(data.id);
       break;
     case "zp.progress":
@@ -70,7 +71,9 @@ onUnmounted(() => {
     <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 class="song-author">
+          <ArtistsSpan :artists="info.artists" />
+        </div>
       </div>
 
       <div class="song-time">

src/views/discover/Recommend.vue

@@ -59,20 +59,21 @@
                 type="primary"
               >
                 <n-icon>
-                  <Play @click="play(song.id)"/>
+                  <Play @click="play(song.id)" />
                 </n-icon>
               </n-button>
             </div>
             <div class="title">
               <span class="name">
                 {{ song.name }}
-                <span class="alias">{{
+                <span class="alias"><template
-                  songAlias(song.alias)
+                  v-for="(al, idx) in song.alias"
-                }}</span>
+                > {{al}}
+                </template></span>
+              </span>
+              <span class="artist">
+                <ArtistsSpan :artists="song.artists"/>
               </span>
-              <span class="artist">{{
-                songArtists(song.artists)
-              }}</span>
             </div>
             <span class="icon"></span>
           </div>
@@ -110,7 +111,7 @@
           <div class="mv-c2-list">
             <div class="play-mv">
               <div>
-                 <img :src="mv.picUrl" />
+                <img :src="mv.picUrl" />
               </div>
               <n-button
                 text
@@ -209,13 +210,14 @@ import {
   getTopSong,
   getPersonalizedMV,
 } from "@/network/discover";
-import pubsub from 'pubsub-js'
+import pubsub from "pubsub-js";
+import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
 const store = useStore();
 
-const play=(id)=>{
+const play = (id) => {
-  pubsub.publish('zp.play', {id, im: true})
+  pubsub.publish("zp.play", { id, im: true });
-}
+};
 
 //#region 初始载入数据
 //轮播图片
@@ -233,7 +235,7 @@ let topSongs = ref([]);
 getTopSong()
   .then((res) => {
     topSongs.value = res.data.data.filter((item, index) => {
-      return index < 10;
+      return index < 20;
     });
     // console.log(topSongs.value);
   })
@@ -310,32 +312,31 @@ getPersonalizedMV()
   border-radius: 6px;
 
   .play-mv {
-
     img {
       width: 100%;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
     }
-    button{
+    button {
       display: none;
     }
 
-    .start-play-bg{
+    .start-play-bg {
       font-size: 38px;
       position: absolute;
       right: 0px;
       bottom: 42px;
       color: rgba(255, 255, 255, 0.8);
     }
-    .start-play{
+    .start-play {
       font-size: 25px;
       position: absolute;
       right: 5px;
       bottom: 48px;
     }
 
-    &:hover{
+    &:hover {
-      button{
+      button {
         display: block;
       }
     }
@@ -365,25 +366,24 @@ getPersonalizedMV()
   border-radius: 4px;
   border: 1px solid #eee;
 
-
   img {
     width: 60px;
     border-radius: 4px;
   }
 
-  .start-play-bg{
+  .start-play-bg {
     font-size: 30px;
     position: absolute;
     left: 16px;
-    top: 17px;
+    top: 16px;
     color: rgba(255, 255, 255, 0.8);
   }
 
-  .start-play{
+  .start-play {
     font-size: 16px;
     position: absolute;
     left: 24px;
-    top: 24px;
+    top: 23px;
   }
 
   .title {