问题解决

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/components/custom/video.wpy

@@ -2,16 +2,17 @@
   <view class="container">
     <swiper
       class="video-swiper"
-      duration="500"
+      duration="300"
       circular="{{circular}}"
       vertical
       current="0"
-      bindchange="moveSwiper">
+      bindchange="moveSwiper"
+      bindanimationfinish="animationfinish">
       <swiper-item wx:for="{{curQueue}}" wx:key="index">
         <view class="video-swiper">
           <video
             class="video-item"
-            :class="{ show: item.showType && item.showType.value == 2 }"
+            v-show="item.showType && item.showType.value == 2"
             id="video_{{index}}"
             loop
             enable-progress-gesture="{{false}}"
@@ -27,15 +28,15 @@
             bindloadedmetadata="loadMedia"
           >
             <video-pause :pause="videoPause"></video-pause>
+            <van-loading type="spinner" size="40" v-if="videoLoading"  custom-class="video-loading"/>
+            <!--<video-loading v-if="videoLoading" :snapshot="item.videoSnapUrl"/>-->
           </video>
-          <van-loading type="spinner" size="40" v-if="videoLoading"  custom-class="video-loading"/>
-          <!-- <video-loading v-if="videoLoading" :snapshot="item.videoSnapUrl"/> -->
           <van-image wx:if="{{item.showType && item.showType.value ==1}}" use-loading-slot src="{{item.photoUrl || item.videoSnapUrl}}" class="images" radius="10rpx" fit="contain" width="100%" height="100%">
             <van-loading slot="loading" type="spinner" size="20" vertical/>
           </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>
@@ -44,13 +45,13 @@
         </view>
       </swiper-item>
     </swiper>
+    <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: {
       videoList: {
@@ -74,17 +75,15 @@
       _invalidUp: 0,
       _invalidDown: 0,
       _videoContexts: [],
-      currentIndex: 1,
+      currentIndex: 0,
       videoPause: false,
+      showPopup: false,
       videoLoading: true
     },
     watch: {
       videoList (list) {
         const newVal = list || [];
         this._videoListChanged(newVal);
-      },
-      userAccount(newVal) {
-        this.compute(newVal);
       }
     },
     attached() {
@@ -95,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) {
@@ -128,7 +111,7 @@
               _this.nextQueue.push(item);
             }
           });
-          this.playCurrent(1);
+          this.playCurrent(0);
         } else {
           // 新进入的数组要去重，新进入的数组去重是需求的逻辑
           const curIds = this.curQueue.map(item => item.id);
@@ -139,12 +122,18 @@
             _this.nextQueue.push(item);
           });
         }
-        this.compute(this.userAccount);
+        // this.compute(this.userAccount);
       },
       moveSwiper(e) {
         this.videoPause = false;
         this.videoLoading = true;
         if (e.$wx.detail.source === 'touch') {
+          // 增加一个透明遮罩层，控制用户滑动速度，400ms内只能滑动一次，解决用户滑动过快，不触发animationfinish的bug
+          this.showPopup = true;
+          // debounce(() => {
+          //   this.showPopup = false;
+          // }, 200)();
+
           const current = e.$wx.detail.current;
           this.currentIndex = current;
           // 如果next中如果就剩下4个了，请求下一页
@@ -153,14 +142,11 @@
               this._videoListChanged(data);
             });
           }
-          this.animationfinish(e);
         }
       },
       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;
@@ -212,25 +198,23 @@
           circular = false;
         }
         this.curQueue = [...curQueue];
-        setTimeout(() => {
-          this.circular = circular;
-        }, 400);
+        this.circular = circular;
       },
       playCurrent (current) {
-        this.$nextTick(() => {
-          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 {
-                ctx.play();
-              }
+        const that = this;
+        this.curQueue[current] && this.getProgress(this.curQueue[current].id);
+        // 滑动到当前元素时，其他video都暂停，只播放当前video
+        this._videoContexts.forEach(function (ctx, index) {
+          if (ctx) {
+            const showType = that.curQueue[current] && that.curQueue[current].showType && that.curQueue[current].showType.value == 2;
+            if (index === current || showType) {
+              ctx.play();
+            } else {
+              ctx.pause();
             }
-          });
-          this.updateAwardsInfo(current);
+          }
         });
+        this.updateAwardsInfo(current);
       },
       videoTap(e) {
         const current = e.currentTarget.dataset.index;
@@ -304,10 +288,6 @@
     position: absolute;
     background-color: #000;
     z-index: 1;
-    display: none;
-    &.show {
-      display: block;
-    }
   }
   .video-loading {
     position: absolute;
@@ -366,6 +346,8 @@
   }
   .images {
     width: 100%;
+    position: relative;
+    z-index: 3;
     .van-image__loading {
       background-color: rgba(0,0,0,0.7);
     }