Procházet zdrojové kódy

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

李志伟 před 3 roky
rodič
revize
347a2a68da

binární
src/assets/indexImg/loading.png Zobrazit soubor


binární
src/assets/indexImg/loadingBgc.jpg Zobrazit soubor


binární
src/assets/indexImg/loading_bar.png Zobrazit soubor


public/images/paused.png → src/assets/indexImg/paused.png Zobrazit soubor


public/images/play.png → src/assets/indexImg/play.png Zobrazit soubor


+ 50
- 4
src/components/BgMusic.vue Zobrazit soubor

1
 <template>
1
 <template>
2
-  <div class="bg-music">
3
-
2
+  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
3
+    <audio :src="url" ref="audioRef" loop @canplay="show = true" @play="handlePlay"></audio>
4
   </div>
4
   </div>
5
 </template>
5
 </template>
6
 
6
 
11
     const { origin, pathname } = window.location
11
     const { origin, pathname } = window.location
12
 
12
 
13
     return {
13
     return {
14
+      show: false,
15
+      playing: false,
14
       url: `${origin}${pathname}/bg.mp3`
16
       url: `${origin}${pathname}/bg.mp3`
15
     }
17
     }
18
+  },
19
+  mounted() {
20
+    document.body.addEventListener("click", this.handleClick);
21
+  },
22
+  methods: {
23
+    handleClick() {
24
+      if (!this.show || !this.$refs.audioRef) return;
25
+
26
+      if (this.playing) {
27
+        this.$refs.audioRef.pause();
28
+      } else {
29
+        this.$refs.audioRef.play();
30
+      }
31
+
32
+      this.playing = !this.playing
33
+    },
34
+
35
+    handlePlay() {
36
+      document.body.removeEventListener("click", this.handleClick);
37
+    }
16
   }
38
   }
17
 }
39
 }
18
 </script>
40
 </script>
19
 
41
 
20
 <style lang="less" scoped>
42
 <style lang="less" scoped>
21
 .bg-music {
43
 .bg-music {
22
-  width: 64px;
23
-  height: 64px;
44
+  position: fixed;
45
+  top: 1em;
46
+  right: 1em;
47
+  z-index: 10;
48
+
49
+  width: 2em;
50
+  height: 2em;
51
+  background-image: url('~@/assets/indexImg/play.png');
52
+  background-repeat: no-repeat;
53
+  background-size: 100% 100%;
54
+
55
+  &.icon-playing {
56
+    background-image: url('~@/assets/indexImg/paused.png');
57
+    animation: musicrotate 3s linear infinite;
58
+  }
59
+
60
+  & > audio {
61
+    max-width: 1px;
62
+    max-height: 1px;
63
+  }
64
+}
65
+
66
+@keyframes musicrotate {
67
+  100% {
68
+    transform: rotate(360deg);
69
+  }
24
 }
70
 }
25
 </style>
71
 </style>

+ 10
- 1
src/pages/Honghe.vue Zobrazit soubor

1
 <template>
1
 <template>
2
   <div class="index-box">
2
   <div class="index-box">
3
+    <bg-music />
3
     <popup
4
     <popup
4
       :show="showPopup"
5
       :show="showPopup"
5
       @cancel="cancelFrom"
6
       @cancel="cancelFrom"
151
   components: {
152
   components: {
152
     Popup: () => import('@/components/Popup.vue'),
153
     Popup: () => import('@/components/Popup.vue'),
153
     WinningPopup: () => import('@/components/WinningPopup.vue'),
154
     WinningPopup: () => import('@/components/WinningPopup.vue'),
154
-    ImgBox: () => import('@/components/imgbox.vue')
155
+    ImgBox: () => import('@/components/imgbox.vue'),
156
+    BgMusic: () => import('@/components/BgMusic.vue'),
155
   },
157
   },
156
   data() {
158
   data() {
157
     return {
159
     return {
236
         this.showMyWinning = true
238
         this.showMyWinning = true
237
 
239
 
238
         // 其他动作
240
         // 其他动作
241
+      }).catch(err => {
242
+        if (err && err.code === 9999) {
243
+          // 奖品没了
244
+        } else {
245
+          // 其他错误
246
+          const errMsg = err.message || err;
247
+        }
239
       })
248
       })
240
     },
249
     },
241
     // 获取奖品列表
250
     // 获取奖品列表

+ 1
- 1
src/utils/request.js Zobrazit soubor

12
     .then(response => response.json())
12
     .then(response => response.json())
13
     .then(data => {
13
     .then(data => {
14
       if (data.code === 1000) return data.data
14
       if (data.code === 1000) return data.data
15
-      return Promise.reject(data.message)
15
+      return Promise.reject(data)
16
     })
16
     })
17
 }
17
 }
18
 
18