add音乐

src/views/activityDetail.vue

@@ -20,6 +20,9 @@
       </div>
     </div>
     <div id="introduce">
+      <audio id="music" loop="loop" :src="musicUrl" autoplay v-show="false"></audio>
+      <img id="iconMusic" v-show="isPlaying" @click="musicPause" src="../assets/icon_music.png">
+      <img id="iconMusic" v-show="!isPlaying" @click="musicPlay" src="../assets/icon_silent.png">
       <img :src="detailImgUrl">
     </div>
     <div id="applyButtonBox">
@@ -56,6 +59,9 @@ export default {
       peoples: '',
       detailImgUrl: '',
       qualifications: '',
+      musicUrl: '',
+
+      isPlaying: true,
 
       tipDialogShow: false,//弹窗
       tipDialogBtn: '',
@@ -68,6 +74,13 @@ export default {
   components: {
     loading
   },
+  ready: function() {
+    this.isPlaying = true
+    document.querySelector('#music').play();
+    document.addEventListener("WeixinJSBridgeReady", function () {
+      document.querySelector('#music').play();
+    }, false);
+  },
   mounted() {
     this.loadingShow = true
     request({
@@ -88,6 +101,7 @@ export default {
       this.peoples = response.data.peoples
       this.detailImgUrl = response.data.detailImgUrl
       this.qualifications = response.data.qualifications
+      this.musicUrl = response.data.musicUrl
     })
 
 
@@ -174,6 +188,14 @@ export default {
     },
     share() {
       this.shareWrapShow = true
+    },
+    musicPause() {
+      this.isPlaying = false
+      document.querySelector('#music').pause();
+    },
+    musicPlay() {
+      this.isPlaying = true
+      document.querySelector('#music').play();
     }
   }
 }
@@ -225,9 +247,17 @@ export default {
 #introduce{
   background-color: #fff;
   padding: 10px 10px 75px;
-  img{
+  position: relative;
+  >img{
     width: 100%;
   }
+  #iconMusic{
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 32px;
+    height: 32px;
+  }
 }
 #applyButtonBox{
   background-color: #fff;