honghe
/
h5-draw-lots
Volgen 3
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

feats

张延森 3 jaren geleden
bovenliggende
7f0b258fb5
commit
74e26ab57d
4 gewijzigde bestanden met toevoegingen van 66 en 122 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 9
    1
      src/components/BgMusic.vue
  2. 35
    12
      src/pages/Honghe.vue
  3. 22
    0
      src/utils/index.js
  4. 0
    109
      src/utils/preloadImg.js

+ 9
- 1
src/components/BgMusic.vue Bestand weergeven 

@@ -20,11 +20,19 @@ export default {
20 20 
     document.body.addEventListener("click", this.handleClick);
21 21
22 22 
     this.$nextTick(() => {
23 
-      this.$refs.audioRef.load()
23 
+      this.handleIOSAudio()
24 24 
     })
25 25
26 26 
   },
27 27 
   methods: {
28 
+    handleIOSAudio() {
29 
+      const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
30 
+      if (isiOS) {
31 
+        document.addEventListener('WeixinJSBridgeReady', () => {
32 
+          this.$refs.audioRef.load()
33 
+        }, false)
34 
+      }
35 
+    },
28 36 
     handleClick() {
29 37 
       if (!this.show || !this.$refs.audioRef) return;
30 38

+ 35
- 12
src/pages/Honghe.vue Bestand weergeven 

@@ -36,7 +36,7 @@
36 36 
 import { useModel } from '@/store'
37 37 
 import { drawLottery, getPrizeList } from '@/services/person'
38 38 
 import { rand, shuffle } from '@/utils/math'
39 
-import { hideLoading, preloadImg } from '@/utils'
39 
+import { hideLoading, preloadImages } from '@/utils'
40 40
41 41 
 import { share } from '@/utils/wx'
42 42 
 
@@ -179,7 +179,8 @@ export default {
179 179 
       bingoId: rand(0, 12) + 1, // 可以抽奖的月份
180 180 
       NOMyWinningShow: true,
181 181 
       PrizeState: null,
182 
-      binggo: false
182 
+      binggo: false,
183 
+      imagesLoaded: false,
183 184 
     }
184 185 
   },
185 186 
   computed: {
 
@@ -209,13 +210,27 @@ export default {
209 210 
     }
210 211 
   },
211 212 
   created() {
213 
+    // 加载图片
214 
+    const mainImages = monthList.reduce((arr, item) => {
215 
+      return [
216 
+        ...arr,
217 
+        item.posterImg,
218 
+        item.popImg,
219 
+        item.shareImg,
220 
+        item.screenImg,
221 
+        item.calendarImg,
222 
+      ]
223 
+    }, [])
224 
+    preloadImages(mainImages, () => {
225 
+      this.imagesLoaded = true
226 
+    })
227 
+
212 228 
     this.getPrizes()
213 229 
     this.noShowMy()
214 230 
   },
215 231 
   watch: {
216 232 
     binggo: {
217 233 
       handler(val) {
218 
-        console.log('-------binggo---->', val)
219 234 
         // 微信分享
220 235 
         // 1、正常情况下, 分享主题是 抽取幸运签，解锁隐藏福利
221 236 
         // 2、中奖弹出情况下, 分享主题是 我中奖啦! 来试试你的运气吧
 
@@ -229,9 +244,26 @@ export default {
229 244 
         }
230 245 
       },
231 246 
       immediate: true
247 
+    },
248 
+    prizeList: {
249 
+      handler(val) {
250 
+        this.metaLoaded(val.length && this.imagesLoaded)
251 
+      },
252 
+      immediate: true
253 
+    },
254 
+    imagesLoaded: {
255 
+      handler(val) {
256 
+        this.metaLoaded(val && this.prizeList.length)
257 
+      },
258 
+      immediate: true
232 259 
     }
233 260 
   },
234 261 
   methods: {
262 
+    metaLoaded(loaded) {
263 
+      if (loaded) {
264 
+        hideLoading()
265 
+      }
266 
+    },
235 267 
     noShowMy() {
236 268 
       if (this.person.prizeId !== '' && this.noPrize) {
237 269 
         console.log('有奖品')
 
@@ -313,15 +345,6 @@ export default {
313 345 
     getPrizes() {
314 346 
       getPrizeList().then((list) => {
315 347 
         this.prizeList = list
316 
-        console.log(
317 
-          '🚀 ~ file: Honghe.vue ~ line 227 ~ getPrizeList ~ list',
318 
-          list
319 
-        )
320 
-
321 
-        const t = setTimeout(() => {
322 
-          hideLoading()
323 
-          clearTimeout(t)
324 
-        }, 1000)
325 348 
       })
326 349 
     }
327 350 
   }

+ 22
- 0
src/utils/index.js Bestand weergeven 

@@ -2,3 +2,25 @@
2 2 
 export function hideLoading() {
3 3 
   document.getElementsByClassName('page-loading-wrapper')[0].style="display: none"
4 4 
 }
5 
+
6 
+export function preloadImages (arr, callback) {
7 
+  let count = 0
8 
+
9 
+  for (let img of arr) {
10 
+    let image = new Image();
11 
+    image.src = img;
12 
+    image.onload = () => {
13 
+      count+=1;
14 
+      if (count === arr.length) {
15 
+        callback()
16 
+      }
17 
+    };
18 
+    image.onerror = () => {
19 
+      count+=1;
20 
+
21 
+      if (count === arr.length) {
22 
+        callback()
23 
+      }
24 
+    }
25 
+  }
26 
+}

+ 0
- 109
src/utils/preloadImg.js Bestand weergeven 

@@ -1,109 +0,0 @@
1 
-
2 
-export function preloadImg (arr) {
3 
-
4 
-
5 
-  beforeCreate(){
6 
-
7 
-
8 
-  }
9 
-  let imgs = [
10 
-
11 
-    '../assets/indexImg/imgex_MEW/1.jpg',
12 
-    '../assets/indexImg/imgex_MEW/1.jpg',
13 
-    '../assets/indexImg/imgex_MEW/1.jpg',
14 
-    '../assets/indexImg/imgex_MEW/1.jpg',
15 
-    '../assets/indexImg/imgex_MEW/1.jpg',
16 
-    '../assets/indexImg/imgex_MEW/1.jpg',
17 
-    '../assets/indexImg/imgex_MEW/1.jpg',
18 
-    '../assets/indexImg/imgex_MEW/1.jpg',
19 
-    '../assets/indexImg/imgex_MEW/1.jpg',
20 
-    '../assets/indexImg/imgex_MEW/1.jpg',
21 
-    '../assets/indexImg/imgex_MEW/1.jpg',
22 
-    '../assets/indexImg/imgex_MEW/1.jpg',
23 
-    '../assets/indexImg/imgex_MEW/1.jpg',
24 
-    '../assets/indexImg/imgex_MEW/1.jpg',
25 
-    '../assets/indexImg/imgex_MEW/1.jpg',
26 
-    '../assets/indexImg/imgex_MEW/1.jpg',
27 
-    '../assets/indexImg/imgex_MEW/1.jpg',
28 
-    '../assets/indexImg/imgex_MEW/1.jpg',
29 
-    '../assets/indexImg/imgex_MEW/1.jpg',
30 
-    '../assets/indexImg/imgex_MEW/1.jpg',
31 
-    '../assets/indexImg/imgex_MEW/1.jpg',
32 
-    '../assets/indexImg/imgex_MEW/1.jpg',
33 
-    '../assets/indexImg/imgex_MEW/1.jpg',
34 
-    '../assets/indexImg/imgex_MEW/1.jpg',
35 
-    '../assets/indexImg/imgex_MEW/1.jpg',
36 
-    '../assets/indexImg/imgex_MEW/1.jpg',
37 
-    '../assets/indexImg/imgex_MEW/1.jpg',
38 
-    '../assets/indexImg/imgex_MEW/1.jpg',
39 
-    '../assets/indexImg/imgex_MEW/1.jpg',
40 
-    '../assets/indexImg/imgex_MEW/1.jpg',
41 
-    '../assets/indexImg/imgex_MEW/1.jpg',
42 
-    '../assets/indexImg/imgex_MEW/1.jpg',
43 
-    '../assets/indexImg/imgex_MEW/1.jpg',
44 
-    '../assets/indexImg/imgex_MEW/1.jpg',
45 
-    '../assets/indexImg/imgex_MEW/1.jpg',
46 
-    '../assets/indexImg/imgex_MEW/1.jpg',
47 
-    '../assets/indexImg/imgex_MEW/1.jpg',
48 
-    '../assets/indexImg/imgex_MEW/1.jpg',
49 
-    '../assets/indexImg/imgex_MEW/1.jpg',
50 
-    '../assets/indexImg/imgex_MEW/1.jpg',
51 
-    '../assets/indexImg/imgex_MEW/1.jpg',
52 
-    '../assets/indexImg/imgex_MEW/1.jpg',
53 
-    '../assets/indexImg/imgex_MEW/1.jpg',
54 
-    '../assets/indexImg/imgex_MEW/1.jpg',
55 
-    '../assets/indexImg/imgex_MEW/1.jpg',
56 
-    '../assets/indexImg/imgex_MEW/1.jpg',
57 
-    '../assets/indexImg/imgex_MEW/1.jpg',
58 
-    '../assets/indexImg/imgex_MEW/1.jpg',
59 
-    '../assets/indexImg/imgex_MEW/1.jpg',
60 
-    '../assets/indexImg/imgex_MEW/1.jpg',
61 
-    '../assets/indexImg/imgex_MEW/1.jpg',
62 
-    '../assets/indexImg/imgex_MEW/1.jpg',
63 
-    '../assets/indexImg/imgex_MEW/1.jpg',
64 
-    '../assets/indexImg/imgex_MEW/1.jpg',
65 
-    '../assets/indexImg/imgex_MEW/1.jpg',
66 
-    '../assets/indexImg/imgex_MEW/1.jpg',
67 
-    '../assets/indexImg/imgex_MEW/1.jpg',
68 
-    '../assets/indexImg/imgex_MEW/1.jpg',
69 
-    '../assets/indexImg/imgex_MEW/1.jpg',
70 
-    '../assets/indexImg/imgex_MEW/1.jpg',
71 
-    '../assets/indexImg/imgex_MEW/1.jpg',
72 
-    '../assets/indexImg/imgex_MEW/1.jpg',
73 
-    '../assets/indexImg/imgex_MEW/1.jpg',
74 
-    '../assets/indexImg/imgex_MEW/1.jpg',
75 
-    '../assets/indexImg/imgex_MEW/1.jpg',
76 
-    '../assets/indexImg/imgex_MEW/1.jpg',
77 
-    '../assets/indexImg/imgex_MEW/1.jpg',
78 
-    '../assets/indexImg/imgex_MEW/1.jpg',
79 
-    '../assets/indexImg/imgex_MEW/1.jpg',
80 
-    '../assets/indexImg/imgex_MEW/1.jpg',
81 
-    '../assets/indexImg/imgex_MEW/1.jpg',
82 
-    '../assets/indexImg/imgex_MEW/1.jpg',
83 
-    '../assets/indexImg/imgex_MEW/1.jpg',
84 
-    '../assets/indexImg/imgex_MEW/1.jpg',
85 
-    '../assets/indexImg/imgex_MEW/1.jpg',
86 
-    '../assets/indexImg/imgex_MEW/1.jpg',
87 
-    '../assets/indexImg/imgex_MEW/1.jpg',
88 
-    '../assets/indexImg/imgex_MEW/1.jpg',
89 
-    '../assets/indexImg/imgex_MEW/1.jpg',
90 
-    '../assets/indexImg/imgex_MEW/1.jpg',
91 
-    '../assets/indexImg/imgex_MEW/1.jpg',
92 
-    '../assets/indexImg/imgex_MEW/1.jpg',
93 
-    '../assets/indexImg/imgex_MEW/1.jpg',
94 
-    '../assets/indexImg/imgex_MEW/1.jpg',
95 
-  ]
96 
-  let count = 0
97 
-  // let percent = ''
98 
-
99 
-  for (let img of imgs) {
100 
-    let image = new Image();
101 
-    image.src = img;
102 
-    image.onload = () => {
103 
-      count++;
104 
-      console.log("🚀 ~ file: preloadImg.js ~ line 16 ~ preloadImg ~ percent", count)
105 
-      return true;
106 
-    };
107 
-  }
108 
-
109 
-}