Merge branch 'master' of http://git.ycjcjy.com/honghe/h5-draw-lots

src/components/BgMusic.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-music">
-
+  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
+    <audio :src="url" ref="audioRef" loop @canplay="show = true" @play="handlePlay"></audio>
   </div>
 </template>
 
@@ -11,15 +11,61 @@ export default {
     const { origin, pathname } = window.location
 
     return {
+      show: false,
+      playing: false,
       url: `${origin}${pathname}/bg.mp3`
     }
+  },
+  mounted() {
+    document.body.addEventListener("click", this.handleClick);
+  },
+  methods: {
+    handleClick() {
+      if (!this.show || !this.$refs.audioRef) return;
+
+      if (this.playing) {
+        this.$refs.audioRef.pause();
+      } else {
+        this.$refs.audioRef.play();
+      }
+
+      this.playing = !this.playing
+    },
+
+    handlePlay() {
+      document.body.removeEventListener("click", this.handleClick);
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .bg-music {
-  width: 64px;
-  height: 64px;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  z-index: 10;
+
+  width: 2em;
+  height: 2em;
+  background-image: url('~@/assets/indexImg/play.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  &.icon-playing {
+    background-image: url('~@/assets/indexImg/paused.png');
+    animation: musicrotate 3s linear infinite;
+  }
+
+  & > audio {
+    max-width: 1px;
+    max-height: 1px;
+  }
+}
+
+@keyframes musicrotate {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 </style>

src/pages/Honghe.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="index-box">
+    <bg-music />
     <popup
       :show="showPopup"
       @cancel="cancelFrom"
@@ -151,7 +152,8 @@ export default {
   components: {
     Popup: () => import('@/components/Popup.vue'),
     WinningPopup: () => import('@/components/WinningPopup.vue'),
-    ImgBox: () => import('@/components/imgbox.vue')
+    ImgBox: () => import('@/components/imgbox.vue'),
+    BgMusic: () => import('@/components/BgMusic.vue'),
   },
   data() {
     return {
@@ -236,6 +238,13 @@ export default {
         this.showMyWinning = true
 
         // 其他动作
+      }).catch(err => {
+        if (err && err.code === 9999) {
+          // 奖品没了
+        } else {
+          // 其他错误
+          const errMsg = err.message || err;
+        }
       })
     },
     // 获取奖品列表

src/utils/request.js

@@ -12,7 +12,7 @@ export default function request (url, options = {}) {
     .then(response => response.json())
     .then(data => {
       if (data.code === 1000) return data.data
-      return Promise.reject(data.message)
+      return Promise.reject(data)
     })
 }