From 8fe10268eccd4a7ed2d2857ff3659094cd11a886 Mon Sep 17 00:00:00 2001
From: algerkong <1455048564@qq.com>
Date: Wed, 21 Jul 2021 22:30:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=20=E7=A9=BA=E6=A0=BC?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E6=92=AD=E6=94=BE=20=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/SongItem.vue | 24 +++++++++++++++++++++---
 src/store/index.ts                 |  9 +++++++--
 src/utils/index.ts                 | 11 +++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/common/SongItem.vue b/src/components/common/SongItem.vue
index e32d34f..7bbf3d6 100644
--- a/src/components/common/SongItem.vue
+++ b/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;
         }
     }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 8d5ae8d..3526ee8 100644
--- a/src/store/index.ts
+++ b/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) => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e32515e..54221c6 100644
--- a/src/utils/index.ts
+++ b/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;
+};