播放 空格控制播放 播放进度条

src/components/common/SongItem.vue

@@ -17,7 +17,11 @@
             <div class="recommend-music-list-item-operating-like">
                 <i class="iconfont icon-likefill"></i>
             </div>
-            <div class="recommend-music-list-item-operating-play" @click="playMusic(item)">
+            <div
+                class="recommend-music-list-item-operating-play bg-black"
+                :class="isPlaying ? 'bg-green-600' : ''"
+                @click="playMusicEvent(item)"
+            >
                 <i class="iconfont icon-playfill"></i>
             </div>
         </div>
@@ -28,6 +32,7 @@
 import { setAnimationDelay, setAnimationClass } from "@/utils";
 import { useStore } from "vuex";
 import type { SongResult } from "@/type/music";
+import { computed, } from "vue";
 import type { PropType } from "vue";
 
 
@@ -42,8 +47,21 @@ const props = defineProps({
     }
 })
 
+
 const store = useStore();
-const playMusic = (item: SongResult) => {
+
+const playMusic = computed(() => store.state.playMusic);
+
+
+// 判断是否为正在播放的音乐
+const isPlaying = computed(() => {
+    console.log(1231223, playMusic.value.id, props.item.id);
+
+    return playMusic.value.id == props.item.id;
+})
+
+// 播放音乐 设置音乐详情 打开音乐底栏
+const playMusicEvent = (item: SongResult) => {
     store.commit("setPlay", item);
     store.commit("setIsPlay", true);
 };
@@ -84,7 +102,7 @@ const playMusic = (item: SongResult) => {
             @apply mr-2 cursor-pointer;
         }
         &-play {
-            @apply bg-black cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
+            @apply cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
         }
     }
 }

src/store/index.ts

@@ -20,6 +20,7 @@ let state = {
       text: "hello",
     },
   ],
+  play: false,
   isPlay: false,
   playMusic: {} as SongResult,
   playMusicUrl: "",
@@ -29,13 +30,17 @@ let mutations = {
   setMenus(state: any, menus: any[]) {
     state.menus = menus;
   },
-  setPlay(state: any, playMusic: SongResult) {
+  async setPlay(state: any, playMusic: SongResult) {
     state.playMusic = playMusic;
-    state.playMusicUrl = getSongUrl(playMusic.id);
+    state.playMusicUrl = await getSongUrl(playMusic.id);
+    state.play = true;
   },
   setIsPlay(state: any, isPlay: boolean) {
     state.isPlay = isPlay;
   },
+  setPlayMusic(state: any, play: boolean) {
+    state.play = play;
+  },
 };
 
 const getSongUrl = async (id: number) => {

src/utils/index.ts

@@ -10,3 +10,14 @@ export const setAnimationClass = (type: String) => {
 export const setAnimationDelay = (index: number = 6, time: number = 50) => {
   return "animation-delay:" + index * time + "ms";
 };
+
+//将秒转换为分钟和秒
+export const secondToMinute = (s: number) => {
+  let minute: number = Math.floor(s / 60);
+  let second: number = Math.floor(s % 60);
+  let minuteStr: string =
+    minute > 9 ? minute.toString() : "0" + minute.toString();
+  let secondStr: string =
+    second > 9 ? second.toString() : "0" + second.toString();
+  return minuteStr + ":" + secondStr;
+};