music

src/components/MusicBtn/MusicBtn.jsx

+import React from "react";
+import { observer } from "mobx-react";
+import "./MusicBtn.less";
+import classNames from "classnames";
+
+import { RES_PATH } from "../../../sparkrc";
+import musicStore from "@src/store/musicStore";
+import { Button } from "@src/components/Button";
+
+@observer
+class MusicBtn extends React.Component {
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  /**
+   * 音效加载/播放
+   */
+  toggleHandle = (e) => {
+    const { onClick } = this.props;
+    musicStore.mute = !musicStore.mute;
+    onClick?.(e);
+  };
+
+  render() {
+    const {
+      children,
+      className,
+      style = {},
+      enable = RES_PATH + "common/musicOpen.png",
+      disable = RES_PATH + "common/musicClose.png"
+    } = this.props;
+
+    const { mute } = musicStore;
+
+    const cls = classNames(`com-music-btn`, className);
+
+    return <Button
+      className={cls}
+      style={{
+        ...style
+      }}
+      onClick={this.toggleHandle}>
+      {
+        mute
+          ? <img src={disable} />
+          : <img src={enable} />
+      }
+      {children}
+    </Button>;
+  }
+}
+
+export default MusicBtn;

src/components/MusicBtn/MusicBtn.less

+@import "../../res.less";
+
+.com-music-btn {
+  width: 64px;
+  height: 64px;
+
+  & > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+}

src/pages/userhomepage/userhomepage.jsx

@@ -13,6 +13,7 @@ import { SvgaPlayer } from "@spark/svgaplayer";
 import { RES_PATH } from "../../../sparkrc";
 import shareStore from "@src/store/share";
 import musicStore from "@src/store/musicStore";
+import MusicBtn from "@src/components/MusicBtn/MusicBtn";
 
 
 @observer
@@ -27,7 +28,7 @@ class Userhomepage extends React.Component {
 
   async componentDidMount() {
 
-    musicStore.playSound(RES_PATH + "/audio/1.mp3", true);
+    musicStore.playSound(RES_PATH + "/audio/bgm.mp3", true);
 
     await store.getHomeInfo();
     this.flushCD();
@@ -167,6 +168,8 @@ class Userhomepage extends React.Component {
           <div className="inviteBtnImg" />
         </Button>
 
+        <MusicBtn className="musicBtn"/>
+
         <div className="rankBg" style={{ borderWidth: "2px" }}>
           <div className="rankTop" style={{ left: 0, top: -2 }} />
           <div className="rankBgInner">

src/pages/userhomepage/userhomepage.less

@@ -150,7 +150,6 @@
     top: 1127px;
     width: 377px;
     height: 123px;
-    //.sparkBg("userHomePage/按钮.png");
 
     .inviteBtnImg {
       width: 100%;
@@ -160,6 +159,14 @@
     }
   }
 
+  .musicBtn {
+    position: absolute;
+    left: 685px;
+    top: 165px;
+    width: 47px;
+    height: 47px;
+  }
+
   .drawBtn {
     position: absolute;
     left: 585px;