change music

src/components/music.vue

@@ -1,42 +1,55 @@
 <template>
-    <div class="musicbox">
-      <!-- 播放 -->
-      <div class="play" v-if="audioPlayShow" @click="audioState">
-        <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png">
-      </div>
-      <!-- 暂停-->
-      <div class="play" v-else @click="audioState">
-         <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" >
-      </div>
-      <audio ref="player" :src="url" autoplay preload loop="loop"></audio>
+    <div class="musicbox" @click="troggle">
+      <img :class="playing" :src="icons[theme][playing]" alt="">
+      <audio ref="player" :src="url" preload loop="loop"></audio>
     </div>
 </template>
 <script>
-// import { createNamespacedHelpers } from 'vuex'
-// const {
-//   mapState: mapactivityState,
-// } = createNamespacedHelpers("vote");
 export default {
   name:'music',
-  props:['url'],
+  props: {
+    url: String,
+    theme: String
+  },
   data() {
     return {
-      yttjmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png',
-      yjsmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yinyueon.png',
-      yttjmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png',
-      yjsmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yinyueoff.png',
-      audioPlayShow: true,
+      playing: 'off',
+
+      icons: {
+        '1': {
+          'on': 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png',
+          'off': 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png',
+        },
+        '2': {
+          'on': 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yinyueon.png',
+          'off': 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yinyueoff.png',
+        },
+      }
     };
   },
+  watch: {
+    url: function(n) {
+      if (this.playing === 'off' && n) {
+        window.setTimeout(this.play, 1000)
+      }
+    }
+  },
   methods: {
-    // 点击播放暂停按钮时间
-    audioState() {
-      this.audioPlayShow = !this.audioPlayShow; // 更改播放暂停按钮状态
-      const music = this.$refs.player; // 音频所在对象
-      if (this.audioPlayShow) {
-        music.play(); // 播放音乐
+    play() {
+      if (this.url) {
+        this.$refs.player.play()
+        this.playing = 'on'
+      }
+    },
+    stop() {
+      this.$refs.player.pause()
+      this.playing = 'off'
+    },
+    troggle() {
+      if (this.playing === 'on') {
+        this.stop()
       } else {
-        music.pause(); // 暂停音乐
+        this.play()
       }
     }
   }
@@ -44,33 +57,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @keyframes changDeg{
-// 			0%{
-// 				transform: rotate(0deg);
-// 			}
-// 			100%{
-// 				transform: rotate(360deg);
-// 			}
-// 		}
+  @keyframes rotate{
+    0%{
+      transform: rotate(0deg);
+    }
+    100%{
+      transform: rotate(360deg);
+    }
+  }
+
   .musicbox {
     position: fixed;
     top: 0.09rem;
     right: 0.09rem;
-    width: 0.5rem;
-    height: 0.5rem;
+    width: 0.35rem;
+    height: 0.35rem;
     border-radius: 50%;
-    z-index: 130;
+    z-index: 10;
 
-    .play {
+    .on {
+      animation: rotate 3s linear infinite;
+    }
+
+    img {
       width: 100%;
       height: 100%;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
     }
   }
-</style>
 
 
+</style>
+