Merge branch 'feature/animation' into 'master'

Feature/animation

See merge request !38

src/components/custom/loading.wpy

 <template>
   <div class="loading-container">
-    <van-loading size="24px" vertical>加载中...</van-loading>
+    <image class="loading-image" :src="snapshot" mode="widthFix"></image>
+    <!-- <van-loading size="24px" vertical></van-loading> -->
   </div>
 </template>
 <script>
   import wepy from '@wepy/core';
 
   wepy.component({
-
+    props: {
+      snapshot: {
+        type: String,
+        default: ''
+      }
+    }
   });
 </script>
 <style lang="less">
@@ -20,6 +26,10 @@
   	justify-content: center;
   	align-items: center;
   	z-index: 1;
+    .loading-image {
+      position: absolute;
+      width: 100%;
+    }
   }
 </style>
 <config>

src/components/custom/videolist.wpy → src/components/custom/prizeList.wpy

@@ -4,7 +4,14 @@
     width:100%;
     height:100%;
   }
-  .video-item{
+  .video-item {
+    height:100%;
+    width:100%;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .image-item{
     height:100%;
     width:100%;
     position: absolute;
@@ -61,33 +68,34 @@
   <view class="container">
     <swiper
       class="video-swiper"
-      :duration= "800"
-      circular="{{circular}}"
+      duration= "400"
+      circular="{{true}}"
       vertical
-      current="1"
-      bindchange="bindchange"
+      current="0"
+      bindanimationfinish="bindanimationfinish"
     >
-      <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
-      <swiper-item class="video-item" v-for="(item, idx) in curQueue" :key="item.id">
+      <swiper-item class="{{item.photoUrl ? 'image-item' : 'video-item'}}" v-for="(item, idx) in curQueue" :key="item.id">
         <view class="video-wrapper">
-          <!-- <video
-            id="video_{{index}}"
+           <video
+            id="video_{{idx}}"
             class="video_item"
             loop
             show-center-play-btn="{{false}}"
+            enable-progress-gesture="{{false}}"
             controls="{{false}}"
-            src="{{item.url}}"
+            src="{{item.videoUrl}}"
             data-id="{{item.id}}"
             object-fit="{{item.objectFit || 'contain'}}"
-            data-index="{{index}}"
+            data-index="{{idx}}"
             binderror="onError"
-            bindwaiting="onWaiting"
-            bindloadedmetadata="onLoadedMetaData"
             bindtimeupdate="onTimeUpdate"
             @tap="videoTap"
+            v-if="!item.photoUrl"
           >
+            <video-loading v-if="item.time === 0" :snapshot="item.snapshot"/>
             <video-pause :pause="pause"></video-pause>
-          </video> < !-->
+          </video>
+          <image v-if="item.photoUrl" class="images" :src="item.photoUrl" mode="widthFix"></image>
           <view class="rightcont">
             <view class="info">奖品库存: {{item.stock}}/{{item.totalStock}}</view>
             <view class="info">中奖概率: {{item.probability}}</view>
@@ -96,9 +104,6 @@
               <view class="orange" style="{{item.progressStyle}}"></view>
             </view>
           </view>
-          <!-- <van-image lazy-load custom-class="images" :src="item.photoUrl" mode="contain" /> -->
-          <image class="images" :src="item.photoUrl" mode="widthFix"></image>
-          <!-- <video-loading v-if="item.time === 0"/> -->
         </view>
       </swiper-item>
     </swiper>
@@ -109,32 +114,12 @@
   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: {
         type: Array,
         value: []
       },
-      loading: {
-        type: Boolean,
-        default: false
-      },
-      duration: {
-        type: Number,
-        value: 800
-      },
-      total: {
-        type: Number,
-        value: 0
-      },
       userAccount: {
         type: Number,
         value: 0
@@ -142,72 +127,34 @@
     },
     data: {
       pause: false,
-      nextQueue: [],
-      prevQueue: [],
       curQueue: [],
-      circular: false,
-      _last: 1,
-      _change: -1,
-      _invalidUp: 0,
-      _invalidDown: 0,
-      _videoContexts: [],
-      loading: false,
-      isFirstUp: true
+      _videoContexts: []
     },
     watch: {
       videoList () {
         const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-        this.loading = false;
-        if (!newVal.length) return;
         this._videoListChanged(newVal);
-//        this.compute(this.userAccount);
+        this.compute(this.userAccount);
       },
       userAccount(newVal) {
         this.compute(newVal);
       }
     },
-    attached() {
-      // 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);
-        });
-
         this.curQueue.forEach(v => {
           v.probability = getProbability(+newVal, +v.coinQuantity);
         });
-
-        this.prevQueue.forEach(v => {
-          v.probability = getProbability(+newVal, +v.coinQuantity);
-        });
-
         this.curQueue = [...this.curQueue];
-        this.nextQueue = [...this.nextQueue];
-        this.prevQueue = [...this.prevQueue];
       },
       async getProgress(id) {
         let detail = await getAwardsDetail({ prizeId: id });
         detail = detail || {};
         const progress = Math.round((detail.join / detail.quantity) * 100) + '%';
-        this.nextQueue.forEach(v => {
-          if (v.id === id) {
-            if (v.id === id) {
-              v.progress = progress;
-              v.batchId = detail.id;
-              v.progressStyle = 'width:' + progress;
-            }
-          }
-        });
 
         this.curQueue.forEach(v => {
           if (v.id === id) {
@@ -217,95 +164,20 @@
           }
         });
 
-        this.prevQueue.forEach(v => {
-          if (v.id === id) {
-            v.progress = progress;
-            v.batchId = detail.id;
-            v.progressStyle = 'width:' + progress;
-          }
-        });
-
         this.curQueue = [...this.curQueue];
-        this.nextQueue = [...this.nextQueue];
-        this.prevQueue = [...this.prevQueue];
       },
       _videoListChanged (newVal) {
-        newVal.forEach((item, index) => {
+        this.curQueue = newVal.map((item, index) => {
+          this._videoContexts.push(item.videoUrl ? wx.createVideoContext(`video_${index}`, this.$wx) : null);
           item.time = 0;
-          this.nextQueue.push(item);
+          return item;
         });
-        if (!this.curQueue.length) {
-          this.curQueue = this.nextQueue.splice(0, 3);
-          this.compute(this.userAccount);
-          this.playCurrent(1);
-        }
+        this.playCurrent(0);
       },
-      async bindchange(e) {
+      async bindanimationfinish(e) {
         const current = e.$wx.detail.current;
-        const diff = current - this._last;
-        if (diff === 0) return;
-        this._last = current;
+        this.pause = false;
         this.playCurrent(current);
-        this.$emit('change', { activeId: this.curQueue[current].id });
-        this.loading = true;
-
-        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) {
-            const change = (this._change + 1) % 3;
-            const add = this.nextQueue.shift();
-            const remove = this.curQueue[change];
-            if (add) {
-              this.prevQueue.push(remove);
-              this.curQueue[change] = add;
-              this._change = change;
-              if (this.nextQueue.length === 0) this.nextQueue.push(this.prevQueue.shift());
-            } else {
-              this._invalidUp += 1;
-            }
-          } else {
-            this._invalidDown -= 1;
-          }
-        }
-        if (direction === 'down') {
-          if (this._invalidUp === 0) {
-            const _change2 = this._change;
-            const _remove = this.curQueue[_change2];
-            const _add = this.prevQueue.pop();
-            if (_add) {
-              this.curQueue[_change2] = _add;
-              this.nextQueue.unshift(_remove);
-              this._change = (_change2 - 1 + 3) % 3;
-              if (this.prevQueue.length === 0) this.prevQueue.push(this.nextQueue.pop());
-            } else {
-              this._invalidDown += 1;
-            }
-          } else {
-            this._invalidUp -= 1;
-          }
-        }
-        this.curQueue = [...this.curQueue];
-        this.nextQueue = [...this.nextQueue];
-        this.prevQueue = [...this.prevQueue];
-        this.circular = true;
-
-        if (this.nextQueue.length === 0 && current !== 0) {
-          this.circular = false;
-        }
-        if (this.prevQueue.length === 0 && current !== 2) {
-          this.circular = false;
-        }
-      },
-      onWaiting (e) {
-        this.trigger(e, 'wait');
-      },
-      onLoadedMetaData (e) {
-        this.trigger(e, 'loadedmetadata');
       },
       onError(e) {
         this.trigger(e, 'error');
@@ -324,6 +196,15 @@
       },
       playCurrent(current) {
         if (!this.curQueue || this.curQueue.length <= 1) return;
+
+        this._videoContexts.forEach((ctx, index) => {
+          if (index !== current) {
+            ctx && ctx.pause();
+          } else {
+            ctx && ctx.play();
+          }
+        });
+
         this.getProgress(this.curQueue[current].id);
         const { id, photoUrl, name, probability } = this.curQueue[current];
         this.$emit('getAwardsInfo', {
@@ -333,13 +214,6 @@
           name,
           chance: probability
         });
-        // 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] : {};
@@ -355,10 +229,6 @@
           }
         });
         this.pause = !this.pause;
-      },
-      cancelPause() {
-        // console.log('bindchange');
-        this.pause = false;
       }
     }
   });

src/pages/index.wpy

@@ -206,8 +206,8 @@
   <view class="video-wrapper">
     <view id="myvideo">
       <van-notify id="van-notify" />
-      <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>
+      <prize-list v-if="videoList && videoList.length" :videoList.sync="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :total="total" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo">
+      </prize-list>
     </view>
     <view class="userInfo" style="{{userImgStyle}}">
       <button v-if="authmodal" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-button">
@@ -216,10 +216,10 @@
       <image v-if="!authmodal" @tap="showMenu(!showMenus)" src="{{userInfo.avatarUrl || '/static/images/user@2x.png'}}" mode="cover" class="userimage"></image>
     </view>
     <view>
-      <video-gold type="gold" :des="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :gold="sign" :isReceive="isReceive"></video-gold>
-      <video-sign type="sign" des="签到" :sign="sign" @sign-in="signIn"></video-sign>
-      <video-lottery type="lottery" des="抽奖" @getAwards="getAwards" @getUserInfo="getUserInfo" :authmodal="authmodal"></video-lottery>
-      <video-share type="share" des="分享"></video-share>
+      <gold type="gold" :des="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :gold="sign" :isReceive="isReceive"></gold>
+      <sign type="sign" des="签到" :sign="sign" @sign-in="signIn"></sign>
+      <lottery type="lottery" des="抽奖" @getAwards="getAwards" @getUserInfo="getUserInfo" :authmodal="authmodal"></lottery>
+      <share type="share" des="分享"></share>
     </view>
     <view class="content {{isActiveDone}}" >
       <view class="leftcont">
@@ -269,12 +269,6 @@
         </swiper-item>
       </swiper>
     </view> -->
-    <!-- <view class="authmodal" v-show="authmodal">
-      <view class="wrap">
-        <view class="text">来到luckii，再平凡的人，<br>也有幸运的权利！</view>
-        <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权并进入</button>
-      </view>
-    </view> -->
     <network v-if="isConnected === false"></network>
     <open-animation v-if="showAwardsModal" :joinRecord="mainInfo && mainInfo.joinRecord"></open-animation>
     <shared-popup v-if="showShareModal" :inviteinfo="mainInfo && mainInfo.inviteRecord" @getSharedGold="getSharedGold"></shared-popup>
@@ -319,7 +313,6 @@
       goldNum: 50000,
       awards: false,
       showMenus: false,
-      loading: false,
       inviter: '',
       mainInfo: null,
       showShareModal: false,
@@ -327,7 +320,7 @@
       awardsInfo: {},
       isReceive: false,
       isActiveDone: '',
-      isAuto:true,
+      isAuto: true
     },
 
     computed: {
@@ -660,9 +653,6 @@
       }
       let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
       statusHeight && (this.userImgStyle = 'top:' + statusHeight + 'px');
-    },
-    async onShow() {
-      this.videoList = [];
 
       if (!wx.getStorageSync('openId')) {
         const { code } = await wepy.wx.login();
@@ -684,9 +674,37 @@
           this.authmodal = true;
         }
       }
-      await this.getMainInfo();
+      this.getMainInfo();
       this.videoList = await getPrizeList();
+      // let urls = [
+      //   {type: 'video', url: 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4', snapshot: 'http://img3.imgtn.bdimg.com/it/u=246328798,659513921&fm=26&gp=0.jpg'},
+      //   {type: 'image', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590151556813&di=44964ab823b5fb5f3fadcf9ceb87553b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F07%2F20150307113019_FSEFE.thumb.700_0.png'},
+      //   {type: 'video', url: 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4', snapshot: 'http://img3.imgtn.bdimg.com/it/u=246328798,659513921&fm=26&gp=0.jpg'},
+      //   {type: 'image', url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2944016076,351466175&fm=26&gp=0.jpg'},
+      //   {type: 'video', url: 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4', snapshot: 'http://img3.imgtn.bdimg.com/it/u=246328798,659513921&fm=26&gp=0.jpg'},
+      //   {type: 'image', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590151520979&di=beba310e6bc314f7dd7ede841d068f68&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F05%2F20161005092600_jCmSx.thumb.700_0.jpeg'}
+      // ];
+
+      // this.videoList = urls.map((url, idx) => {
+      //   return {
+      //     cash: false,
+      //     coinQuantity: 29900,
+      //     createdAt: 1590645948000,
+      //     id: idx,
+      //     name: '蓝牙音箱',
+      //     photoUrl: url.type === 'image' ? url.url : null,
+      //     price: 299,
+      //     status: {name: '上架', value: 1},
+      //     stock: 1,
+      //     totalStock: 1,
+      //     updatedAt: 1590741775000,
+      //     videoUrl: url.type === 'video' ? url.url : null,
+      //     snapshot: url.type === 'video' ? url.snapshot : null
+      //   };
+      // });
       this.showActivity();
+    },
+    async onShow() {
     }
 
   });
@@ -696,20 +714,20 @@
     navigationBarTitleText: '主页',
     usingComponents: {
       'van-button': '../components/vant/button/index',
-      'video-list': '~@/components/custom/videolist',
+      'prize-list': '~@/components/custom/prizeList',
       'van-icon': '../components/vant/icon/index',
-      'video-sign': '~@/components/custom/sign',
-      'video-gold': '~@/components/custom/sign',
-      'video-share': '~@/components/custom/sign',
-      'video-lottery': '~@/components/custom/sign',
+      'sign': '~@/components/custom/sign',
+      'gold': '~@/components/custom/sign',
+      'share': '~@/components/custom/sign',
+      'lottery': '~@/components/custom/sign',
       'network': '~@/components/custom/network',
       'open-animation': '~@/components/custom/openAnimation',
       'popup': '~@/components/custom/popup',
       'van-notify': '~@/components/vant/notify/index',
       'shared-popup': '~@/components/custom/sharedPopup',
-      'video-loading': '~@/components/custom/loading',
       'van-dialog': '~@/components/vant/dialog/index'
     },
     navigationStyle: "custom",
+    disableScroll: true
   }
 </config>