Merge branch 'swiperVideoImprove' into 'v1.1.0'

Swiper video improve

See merge request !61

src/app.wpy

@@ -55,6 +55,9 @@ wepy.app({
       'pages/search',
       'pages/agreement'
     ],
+    "networkTimeout": {
+      "request": 3000
+    },
     window: {
       backgroundTextStyle: 'light',
       navigationBarBackgroundColor: '#f1f1f1',

src/common/raffleProbability.wxs

+function getCommonDivisor(firstNum, secondNum) {
+  if (secondNum === 0) return firstNum;
+  var remainder = parseInt(firstNum % secondNum);
+  return getCommonDivisor(secondNum, remainder);
+}
+
+module.exports = {
+  getProbability: function (quantity, coinQuantity) {
+    if (!quantity) return 0;
+    // 如果用户克币数是0
+    if (quantity === 0) {
+      return '0%';
+    }
+    var divisor = getCommonDivisor(quantity, coinQuantity);
+    var value = quantity / divisor;
+    var value2 = coinQuantity / divisor;
+    // 如果分子比分母大说明中奖概率是100%，那么返回中奖概率
+    if (value >= value2) {
+      return '100%';
+    } else {
+      return value + '/' + value2;
+    }
+  }
+};

src/common/utils.js

+/*
+ * @Description:
+ * @Date: 2020-07-09 11:14:06
+ * @LastEditors: gzw
+ * @LastEditTime: 2020-07-09 11:14:26
+ */
+/**
+ * 延时函数
+ * @param {Function} func 方法
+ * @param {Number} wait 等待时间
+ * @param {Boolean} immediate 是否立即执行
+ * @return: {Function} result 方法执行
+ */
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result;
+
+  const later = function () {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp;
+
+    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      }
+    }
+  };
+
+  return function (...args) {
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+    return result;
+  };
+}

src/common/wxRequest.js

 import wepy from '@wepy/core';
 import Notify from '../components/vant/notify/notify';
 
-const env = 'prod'; // 每次上线手动切换成 prod/test
+const env = 'test'; // 每次上线手动切换成 prod/test
 let baseUrl = 'https://api-luckii.q-gp.com';
 if (env === 'test') {
   baseUrl = 'https://luckii-qa.liangkebang.net';
@@ -58,6 +58,10 @@ const request = async (url, options) => {
     errMsg = `httpurl: ${url}, method: ${options.method}, params: ${JSON.stringify(options.data)}, status: ${res.statusCode}, data: ${JSON.stringify(res.data)}`;
     if (env === 'test') console.error(errMsg);
     throw new Error(errMsg);
+  }).catch(e => {
+    if (e.errMsg === 'request:fail timeout') {
+      Notify({ message: '网络异常,请稍后重试', safeAreaInsetTop });
+    }
   });
 };
 

src/components/custom/activityList.wpy

@@ -66,7 +66,7 @@
     position: absolute;
     z-index: 9;
     bottom: 400rpx;
-    width: 100%;
+    width: 44%;
     color: @whitecolor;
     clear: both;
     &.anima {
@@ -77,8 +77,7 @@
     }
   }
   .leftcont {
-    width: 44%;
-    float: left;
+    width: 100%;
     font-size: @font-normal;
     margin-left: 30rpx;
   }

src/components/custom/sign.wpy

@@ -15,7 +15,7 @@
         </div>
         <div class="show-gold">
           <div class="sunshine" v-if="addsunshine"></div>
-          <image class="show-gold-image" :class="{'gold-scale': addsunshine}" :src="goldUrl" mode="widthFix"></image>
+          <image class="show-gold-image" :class="{'gold-scale': addsunshine}" :src="goldUrl" mode="widthFix" style="height: 22px;"></image>
           <span class="show-gold-num">
             {{des}}
           </span>

src/components/custom/video.wpy

@@ -2,28 +2,28 @@
   <view class="container">
     <swiper
       class="video-swiper"
-      duration="600"
+      duration="300"
       circular="{{circular}}"
       vertical
-      current="1"
+      current="0"
       bindchange="moveSwiper"
       bindanimationfinish="animationfinish">
       <swiper-item wx:for="{{curQueue}}" wx:key="index">
         <view class="video-swiper">
           <video
             class="video-item"
+            v-show="item.showType && item.showType.value == 2"
             id="video_{{index}}"
             loop
             enable-progress-gesture="{{false}}"
             show-center-play-btn="{{false}}"
             controls="{{false}}"
-            src="{{currentIndex == index ?item.videoUrl :null}}"
+            src="{{item.videoUrl}}"
             data-id="{{item.id}}"
             object-fit="contain"
             data-index="{{index}}"
             @tap="videoTap"
             custom-cache="{{false}}"
-            wx:if="{{item.showType && item.showType.value ==2}}"
             bindplay="loadMedia"
             bindloadedmetadata="loadMedia"
           >
@@ -36,7 +36,7 @@
           </van-image>
           <view class="rightcont" v-show="item.id > 0">
             <view class="info">奖品剩余: {{item.stock}}</view>
-            <view class="info">中奖概率: {{item.probability}}</view>
+            <view class="info">中奖概率: {{rp.getProbability(userAccount, item.coinQuantity)}}</view>
             <view class="progress">
               <view class="text">{{item.progress}}</view>
               <view class="orange" style="{{item.progressStyle}}"></view>
@@ -48,9 +48,9 @@
     <van-popup show="{{showPopup}}" close-on-click-overlay="{{false}}" overlay-style="background-color:transparent"></van-popup>
   </view>
 </template>
+<wxs module="rp" src="../../common/raffleProbability.wxs"></wxs>
 <script>
   import wepy from '@wepy/core';
-  import { getProbability } from '../../common/raffleProbability';
   import { getAwardsDetail, getPrizeList } from '../../common/api.js';
   wepy.component({
     props: {
@@ -75,18 +75,15 @@
       _invalidUp: 0,
       _invalidDown: 0,
       _videoContexts: [],
-      currentIndex: 1,
       videoPause: false,
       showPopup: false,
-      videoLoading: true
+      videoLoading: true,
+      isFirstRoll: true // 是否是首次加载。_last设置为1时，会出现首次加载的第二个视频不自动播放，设置为其他的值时会出现后续乱序的问题。此处为补丁
     },
     watch: {
       videoList (list) {
         const newVal = list || [];
         this._videoListChanged(newVal);
-      },
-      userAccount(newVal) {
-        this.compute(newVal);
       }
     },
     attached() {
@@ -97,22 +94,6 @@
       ];
     },
     methods: {
-      compute (newVal) {
-        if (!this.curQueue.length) return;
-        this.curQueue.forEach(v => {
-          v.probability = getProbability(+newVal, +v.coinQuantity);
-        });
-        this.nextQueue.forEach(v => {
-          v.probability = getProbability(+newVal, +v.coinQuantity);
-        });
-        this.prevQueue.forEach(v => {
-          v.probability = getProbability(+newVal, +v.coinQuantity);
-        });
-        this.prevQueue = [...this.prevQueue];
-        this.curQueue = [...this.curQueue];
-        this.nextQueue = [...this.nextQueue];
-        this.updateAwardsInfo(this.currentIndex);
-      },
       _videoListChanged (newVal) {
         const _this = this;
         if (this.curQueue.length === 0) {
@@ -120,9 +101,9 @@
           // 同时展示的元素只有三个，curQueue中始终只有三个元素，用来解决吧video过多时，资源加载问题
           // 当前的资源加载解决方案是参考小程序的video-swiper源码
           newVal.forEach(function (item, index) {
-            if (index === 1) {
+            if (index === 0) {
               _this.curQueue[0] = item;
-            } else if (index === 0) {
+            } else if (index === 1) {
               _this.curQueue[1] = item;
             } else if (index === 2) {
               _this.curQueue[2] = item;
@@ -130,7 +111,7 @@
               _this.nextQueue.push(item);
             }
           });
-          this.playCurrent(1);
+          this.playCurrent(0);
         } else {
           // 新进入的数组要去重，新进入的数组去重是需求的逻辑
           const curIds = this.curQueue.map(item => item.id);
@@ -141,19 +122,14 @@
             _this.nextQueue.push(item);
           });
         }
-        this.compute(this.userAccount);
       },
       moveSwiper(e) {
         this.videoPause = false;
         this.videoLoading = true;
         if (e.$wx.detail.source === 'touch') {
-          // 增加一个透明遮罩层，控制用户滑动速度，500ms内只能滑动一次，解决用户滑动过快，不触发animationfinish的bug
+          // 增加一个透明遮罩层，控制用户滑动速度，400ms内只能滑动一次，解决用户滑动过快，不触发animationfinish的bug
           this.showPopup = true;
-          setTimeout(() => {
-            this.showPopup = false;
-          }, 500);
-          const current = e.$wx.detail.current;
-          this.currentIndex = current;
+
           // 如果next中如果就剩下4个了，请求下一页
           if (this.nextQueue.length === 4) {
             getPrizeList().then(data => {
@@ -163,15 +139,18 @@
         }
       },
       animationfinish (e) {
-        let _last = this._last;
-        let curQueue = this.curQueue;
-        let prevQueue = this.prevQueue;
-        let nextQueue = this.nextQueue;
+        this.showPopup = false;
+        let { _last, curQueue, prevQueue, nextQueue } = this;
         // 一共三个数组，curQueue是要显示的数组，prevQueue放上滑过去的元素，nextQueue放即将进入的元素
         // 一次最多只展示3个video标签，提高加载视频的速度
         const current = e.$wx.detail.current;
         const diff = current - _last;
+        if (this.isFirstRoll && current === 1) {
+          this.playCurrent(1);
+          this.isFirstRoll = false;
+        }
         if (diff === 0) return;
+        this.isFirstRoll = false;
         this._last = current;
         this.playCurrent(current);
         // 如果上滑的时候，当前滑动到第0元素，那么被划走，放入prevQueue是第一个元素，这个要自己画图才会更理解
@@ -221,14 +200,17 @@
         this.circular = circular;
       },
       playCurrent (current) {
+        const that = this;
         this.curQueue[current] && this.getProgress(this.curQueue[current].id);
         // 滑动到当前元素时，其他video都暂停，只播放当前video
         this._videoContexts.forEach(function (ctx, index) {
           if (ctx) {
-            if (index !== current) {
-              ctx.pause();
-            } else {
+            const showType = that.curQueue[current] && that.curQueue[current].showType && that.curQueue[current].showType.value === 2;
+            if (index === current && showType) {
               ctx.play();
+            } else {
+              ctx.pause();
+              ctx.seek(0);
             }
           }
         });
@@ -364,6 +346,8 @@
   }
   .images {
     width: 100%;
+    position: relative;
+    z-index: 3;
     .van-image__loading {
       background-color: rgba(0,0,0,0.7);
     }

src/pages/index.wpy

@@ -233,6 +233,7 @@
   import store from '../store';
   import { mapState, mapActions } from '@wepy/x';
   import wepy from '@wepy/core';
+  import { debounce } from '../common/utils';
   import Notify from '../components/vant/notify/notify';
   import Dialog from '../components/vant/dialog/dialog';
   import { login, register, getMainInfo, addGold, getPrizeList, signIn, getActivityFeed, checkCornCode } from '../common/api.js';
@@ -311,6 +312,10 @@
             return;
           }
         }
+        wepy.wx.showLoading({
+          title: '请稍候...',
+          mask: true
+        });
         wx.requestSubscribeMessage({
           tmplIds,
           success (res) {
@@ -320,7 +325,7 @@
               const rs = tmplIds.every(v => res[v] === undefined || res[v] === 'accept');
               if (rs) {
                 that.sign = true;
-                setTimeout(async () => {
+                debounce(async () => {
                   const innerAudioContext = wx.createInnerAudioContext();
                   innerAudioContext.autoplay = true;
                   innerAudioContext.src = '/static/audio/supermarie.mp3';
@@ -330,14 +335,20 @@
                     console.log(res.errCode);
                   });
                   const { coins } = await signIn();
+                  wepy.wx.hideLoading();
                   if (coins === 0) return;
                   that.mainInfo.account.quantity = coins;
-                }, 1500);
+                }, 700)();
+              } else {
+                wepy.wx.hideLoading();
               }
+            } else {
+              wepy.wx.hideLoading();
             }
           },
           fail (res) {
             console.log('requestSubscribeMessage fail', res);
+            wepy.wx.hideLoading();
           }
         });
       },