Merge branch 'feature/animation' into 'master'

Feature/animation

See merge request !28

src/components/custom/videolist.wpy

@@ -64,8 +64,7 @@
       circular="{{circular}}"
       vertical
       current="1"
-      bindanimationfinish="animationfinish"
-      bindchange="cancelPause"
+      bindchange="bindchange"
     >
       <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
       <swiper-item class="video-item" v-for="(item, idx) in curQueue" :key="item.id">
@@ -108,6 +107,15 @@
   import wepy from '@wepy/core';
   import { getProbability } from '../../common/raffleProbability';
   import { getAwardsDetail } from '../../common/api.js';
+
+  const fn = async function(time) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve();
+      }, time);
+    });
+  };
+
   wepy.component({
     props: {
       videoList: {
@@ -142,7 +150,8 @@
       _invalidUp: 0,
       _invalidDown: 0,
       _videoContexts: [],
-      loading: false
+      loading: false,
+      isFirstUp: true,
     },
     watch: {
       videoList () {
@@ -157,17 +166,19 @@
       }
     },
     attached() {
-      this._videoContexts = [
-        wx.createVideoContext('video_0', this.$wx),
-        wx.createVideoContext('video_1', this.$wx),
-        wx.createVideoContext('video_2', this.$wx)
-      ];
+      // this._videoContexts = [
+      //   wx.createVideoContext('video_0', this.$wx),
+      //   wx.createVideoContext('video_1', this.$wx),
+      //   wx.createVideoContext('video_2', this.$wx)
+      // ];
     },
     created() {
       this.compute(this.userAccount);
     },
     methods: {
       compute (newVal) {
+        if (!this.curQueue.length) return;
+
         this.nextQueue.forEach(v => {
           v.probability = getProbability(+newVal, +v.coinQuantity);
         });
@@ -227,7 +238,7 @@
           this.playCurrent(1);
         }
       },
-      animationfinish(e) {
+      async bindchange(e) {
         const current = e.$wx.detail.current;
         const diff = current - this._last;
         if (diff === 0) return;
@@ -236,7 +247,11 @@
         this.$emit('change', { activeId: this.curQueue[current].id });
         this.loading = true;
 
-        // setTimeout(() => {
+        if (current === 2 && this.isFirstUp) {
+          this.isFirstUp = false;
+          await fn(700);
+        }
+
         const direction = diff === 1 || diff === -2 ? 'up' : 'down';
         if (direction === 'up') {
           if (this._invalidDown === 0) {
@@ -264,7 +279,6 @@
               this.curQueue[_change2] = _add;
               this.nextQueue.unshift(_remove);
               this._change = (_change2 - 1 + 3) % 3;
-                console.log('this.prevQueue.length', this.prevQueue.length);
               if (this.prevQueue.length === 0) this.prevQueue.push(this.nextQueue.pop());
             } else {
               this._invalidDown += 1;
@@ -279,15 +293,11 @@
         this.circular = true;
 
         if (this.nextQueue.length === 0 && current !== 0) {
-            console.log('circular1');
           this.circular = false;
         }
         if (this.prevQueue.length === 0 && current !== 2) {
-            console.log('circular2');
           this.circular = false;
         }
-          // console.log(this.prevQueue.map(v => v.id), this.curQueue.map(v => v.id), this.nextQueue.map(v => v.id));
-        // });
       },
       onWaiting (e) {
         this.trigger(e, 'wait');
@@ -322,13 +332,13 @@
           chance: probability,
           progress: progress
         });
-        this._videoContexts.forEach((ctx, index) => {
-          if (index !== current) {
-            ctx.pause();
-          } else {
-            ctx.play();
-          }
-        });
+        // this._videoContexts.forEach((ctx, index) => {
+        //   if (index !== current) {
+        //     ctx.pause();
+        //   } else {
+        //     ctx.play();
+        //   }
+        // });
       },
       trigger(e, type) {
         var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -346,6 +356,7 @@
         this.pause = !this.pause;
       },
       cancelPause() {
+        // console.log('bindchange');
         this.pause = false;
       }
     }

src/pages/index.wpy

@@ -175,7 +175,7 @@
   <view class="video-wrapper">
     <view id="myvideo">
       <van-notify id="van-notify" />
-      <video-list :videoList.sync="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :total="total" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo">
+      <video-list v-if="videoList && videoList.length" :videoList.sync="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :total="total" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo">
       </video-list>
     </view>
     <view class="userInfo" style="{{userImgStyle}}" @tap="showMenu(!showMenus)">
@@ -292,7 +292,6 @@
       showAwardsModal: false,
       awardsInfo: {},
       isReceive: false,
-
       autoplayActivity: false
     },
 
@@ -607,6 +606,8 @@
       statusHeight && (this.userImgStyle = 'top:' + statusHeight + 'px');
     },
     async onShow() {
+      this.videoList = [];
+
       if (!wx.getStorageSync('openId')) {
         const { code } = await wepy.wx.login();
         const userInfo = await login(code);