没啥

index.html

@@ -6,7 +6,7 @@
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite App</title>
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_2685283_m5ii4umo6k8.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_2685283_qczwwfdwv9.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
   <style>
     :root {

src/layout/AppLayout.vue

@@ -12,16 +12,23 @@
                 </div>
             </div>
             <!-- 底部音乐播放 -->
-            <play-bar />
+            <play-bar v-if="isPlay" />
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
+import type { SongResult } from '@/type/music';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { AppMenu, PlayBar, SearchBar } from './components';
+
 const store = useStore();
+
+const playMusic = computed(() => store.state.playMusic as SongResult)
+const isPlay = computed(() => store.state.isPlay as boolean)
 const menus = store.state.menus;
+
 </script>
 
 <style lang="scss" scoped>

src/layout/components/PlayBar.vue

@@ -1,43 +1,98 @@
 <template>
-    <div class="music-play-bar" v-if="isPlay && playMusic">
+    <div class="music-play-bar">
         <img class="play-bar-img" :src="playMusic.picUrl" />
         <div class="music-content">
-            <div class="music-content-title">{{ playMusic.name }}</div>
-            <div class="music-content-name">{{ playMusic.song.artists[0].name }}</div>
+            <div class="music-content-title">
+                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ playMusic.song.name }}</n-ellipsis>
+            </div>
+            <div class="music-content-name">
+                <n-ellipsis class="text-ellipsis" line-clamp="1">
+                    <span
+                        v-for="(item,index) in playMusic.song.artists"
+                        :key="index"
+                    >{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
+                </n-ellipsis>
+            </div>
+        </div>
+        <div class="music-buttons">
+            <div>
+                <i class="iconfont icon-prev"></i>
+            </div>
+            <div class="music-buttons-play" @click="playMusicEvent">
+                <i class="iconfont icon" :class="playMusicUrl ? 'icon-stop' : 'icon-play'"></i>
+            </div>
+            <div>
+                <i class="iconfont icon-next"></i>
+            </div>
+        </div>
+        <div class="music-time">
+            <n-time :time="86400000" :to="86400000" format="mm:ss" />
+            <n-slider v-model:value="value" :step="0.1" />
+            <n-time :time="time" format="mm:ss" />
         </div>
-        <div class="music-time"></div>
         <!-- 播放音乐 -->
-        <audio :src="playMusicUrl" autoplay></audio>
+        <div ref="aaaaaaa">123123</div>
+        <audio ref="audio" :src="playMusicUrl" autoplay></audio>
         <n-button @click="playMusicEvent">playMusicEvent</n-button>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-import { useStore } from 'vuex';
 import type { SongResult } from "@/type/music";
-import { getMusicUrl } from '@/api/music';
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import { useStore } from 'vuex';
 
 const store = useStore();
+
 const playMusic = computed(() => store.state.playMusic as SongResult)
-console.log(playMusic.value);
+const isPlay = computed(() => store.state.isPlay as boolean)
+const playMusicUrl = computed(() => store.state.playMusicUrl as string)
+
+
+console.log(playMusicUrl.value);
+console.log(isPlay);
+
+// 获取音乐播放Dom
+const audio = ref<any>(null)
+const aaaaaaa = ref(null)
+
+
+
+onMounted(() => {
+    console.log(audio);
+    console.log(aaaaaaa);
+
+    watch(() => isPlay.value, (value, oldValue) => {
+        console.log(value);
+        if (value) {
+            audio.play()
+        } else {
+            audio.pause()
+        }
+    })
+})
+
+
+
+const time = new Date()
+
+const value = ref(0)
+
+
 
-const isPlay = computed(() => store.state.isPlay)
 
-const playMusicUrl = ref("");
 
 const playMusicEvent = async () => {
-    console.log(playMusic);
 
-    const { data } = await getMusicUrl(playMusic.value.id);
-    console.log(data);
-
-    playMusicUrl.value = data.data[0].url;
 }
 
 </script>
 
 <style lang="scss" scoped>
+.text-ellipsis {
+    width: 100%;
+}
+
 .music-play-bar {
     @apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
     background-color: #212121;
@@ -58,4 +113,26 @@ const playMusicEvent = async () => {
         @apply text-gray-400;
     }
 }
+
+.music-buttons {
+    @apply mx-6;
+    .iconfont {
+        @apply text-2xl hover:text-green-500 transition;
+    }
+    .icon {
+        @apply text-xl hover:text-white;
+    }
+    @apply flex items-center;
+    > div {
+        @apply cursor-pointer;
+    }
+    &-play {
+        @apply flex justify-center items-center w-12 h-12 rounded-full mx-4 hover:bg-green-500 transition;
+        background: #383838;
+    }
+}
+
+.music-time {
+    @apply flex flex-1;
+}
 </style>

src/store/index.ts

@@ -1,5 +1,6 @@
 import { createStore } from "vuex";
 import { SongResult } from "@/type/music";
+import { getMusicUrl } from "@/api/music";
 
 let state = {
   menus: [
@@ -21,6 +22,7 @@ let state = {
   ],
   isPlay: false,
   playMusic: {} as SongResult,
+  playMusicUrl: "",
 };
 
 let mutations = {
@@ -28,17 +30,21 @@ let mutations = {
     state.menus = menus;
   },
   setPlay(state: any, playMusic: SongResult) {
-    console.log(playMusic);
-
     state.playMusic = playMusic;
+    state.playMusicUrl = getSongUrl(playMusic.id);
   },
   setIsPlay(state: any, isPlay: boolean) {
-    console.log(isPlay);
-
     state.isPlay = isPlay;
   },
 };
 
+const getSongUrl = async (id: number) => {
+  const { data } = await getMusicUrl(id);
+  console.log(data.data[0].url);
+
+  return data.data[0].url;
+};
+
 const store = createStore({
   state: state,
   mutations: mutations,