feats

src/components/BgMusic.vue

@@ -20,11 +20,19 @@ export default {
     document.body.addEventListener("click", this.handleClick);
 
     this.$nextTick(() => {
-      this.$refs.audioRef.load()
+      this.handleIOSAudio()
     })
 
   },
   methods: {
+    handleIOSAudio() {
+      const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
+      if (isiOS) {
+        document.addEventListener('WeixinJSBridgeReady', () => {
+          this.$refs.audioRef.load()
+        }, false)
+      }
+    },
     handleClick() {
       if (!this.show || !this.$refs.audioRef) return;
 

src/pages/Honghe.vue

@@ -36,7 +36,7 @@
 import { useModel } from '@/store'
 import { drawLottery, getPrizeList } from '@/services/person'
 import { rand, shuffle } from '@/utils/math'
-import { hideLoading, preloadImg } from '@/utils'
+import { hideLoading, preloadImages } from '@/utils'
 
 import { share } from '@/utils/wx'
 
@@ -179,7 +179,8 @@ export default {
       bingoId: rand(0, 12) + 1, // 可以抽奖的月份
       NOMyWinningShow: true,
       PrizeState: null,
-      binggo: false
+      binggo: false,
+      imagesLoaded: false,
     }
   },
   computed: {
@@ -209,13 +210,27 @@ export default {
     }
   },
   created() {
+    // 加载图片
+    const mainImages = monthList.reduce((arr, item) => {
+      return [
+        ...arr,
+        item.posterImg,
+        item.popImg,
+        item.shareImg,
+        item.screenImg,
+        item.calendarImg,
+      ]
+    }, [])
+    preloadImages(mainImages, () => {
+      this.imagesLoaded = true
+    })
+
     this.getPrizes()
     this.noShowMy()
   },
   watch: {
     binggo: {
       handler(val) {
-        console.log('-------binggo---->', val)
         // 微信分享
         // 1、正常情况下, 分享主题是 抽取幸运签，解锁隐藏福利
         // 2、中奖弹出情况下, 分享主题是 我中奖啦! 来试试你的运气吧
@@ -229,9 +244,26 @@ export default {
         }
       },
       immediate: true
+    },
+    prizeList: {
+      handler(val) {
+        this.metaLoaded(val.length && this.imagesLoaded)
+      },
+      immediate: true
+    },
+    imagesLoaded: {
+      handler(val) {
+        this.metaLoaded(val && this.prizeList.length)
+      },
+      immediate: true
     }
   },
   methods: {
+    metaLoaded(loaded) {
+      if (loaded) {
+        hideLoading()
+      }
+    },
     noShowMy() {
       if (this.person.prizeId !== '' && this.noPrize) {
         console.log('有奖品')
@@ -313,15 +345,6 @@ export default {
     getPrizes() {
       getPrizeList().then((list) => {
         this.prizeList = list
-        console.log(
-          '🚀 ~ file: Honghe.vue ~ line 227 ~ getPrizeList ~ list',
-          list
-        )
-
-        const t = setTimeout(() => {
-          hideLoading()
-          clearTimeout(t)
-        }, 1000)
       })
     }
   }

src/utils/index.js

@@ -2,3 +2,25 @@
 export function hideLoading() {
   document.getElementsByClassName('page-loading-wrapper')[0].style="display: none"
 }
+
+export function preloadImages (arr, callback) {
+  let count = 0
+
+  for (let img of arr) {
+    let image = new Image();
+    image.src = img;
+    image.onload = () => {
+      count+=1;      
+      if (count === arr.length) {
+        callback()
+      }
+    };
+    image.onerror = () => {
+      count+=1;
+      
+      if (count === arr.length) {
+        callback()
+      }
+    }
+  }
+}

src/utils/preloadImg.js

@@ -1,109 +0,0 @@
-
-export function preloadImg (arr) {
-
-
-  beforeCreate(){
-
-
-  }
-  let imgs = [
-
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-    '../assets/indexImg/imgex_MEW/1.jpg',
-  ]
-  let count = 0
-  // let percent = ''
-
-  for (let img of imgs) {
-    let image = new Image();
-    image.src = img;
-    image.onload = () => {
-      count++;
-      console.log("🚀 ~ file: preloadImg.js ~ line 16 ~ preloadImg ~ percent", count)
-      return true;
-    };
-  }
-
-}