feat: 视频优化

src/components/custom/prizeList.wpy

@@ -20,9 +20,6 @@
     display: flex;
     align-items: center;
   }
-  .video-wrapper {
-    width: 100%;
-  }
   .rightcont {
     font-size: @font-normal;
     position: absolute;
@@ -71,10 +68,9 @@
   <view class="container">
     <swiper
       class="video-swiper"
-      duration= "400"
-      circular="{{true}}"
+      circular="{{circular}}"
       vertical
-      current="0"
+      current="1"
       bindanimationfinish="bindanimationfinish"
       bindchange="moveSwiper"
     >
@@ -136,12 +132,13 @@
       pause: false,
       curQueue: [],
       currentIndex:0,
+      circular: true,
     },
     watch: {
       videoList () {
         const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         this._videoListChanged(newVal);
-        this.compute(this.userAccount);
+//        this.compute(this.userAccount);
       },
       userAccount(newVal) {
         this.compute(newVal);
@@ -195,7 +192,7 @@
           this.playCurrent(0);
         }, 300);
       },
-      async bindanimationfinish(e) {
+      bindanimationfinish(e) {
         const current = e.$wx.detail.current;
         videoCurrent = current;
         this.pause = false;
@@ -229,7 +226,7 @@
       playCurrent(current) {
         if (!this.curQueue || this.curQueue.length <= 1) return;
         // 播放当前视频
-        _videoContexts.forEach((ctx, index) => {
+        /*_videoContexts.forEach((ctx, index) => {
           if (index !== current) {
             ctx && ctx.pause();
           } else {
@@ -237,7 +234,7 @@
 //            ctx && ctx.seek(0);
             ctx && ctx.play();
           }
-        });
+        });*/
         // 更新抽奖页面参数
         this.updateAwardsInfo(current);
         // 更新奖品进度

src/components/custom/video.wpy

+<wxs module="video" src="../../common/common.wxs"></wxs>
+<template>
+  <view class="container">
+    <swiper
+      class="video-swiper"
+      circular="{{circular}}"
+      vertical
+      current="1"
+      bindchange="moveSwiper"
+      bindanimationfinish="animationfinish">
+      <swiper-item wx:for="{{curQueue}}" wx:key="index">
+        <view class="video-swiper">
+          <video
+            class="video-item"
+            id="video_{{index}}"
+            loop
+            enable-play-gesture
+            enable-progress-gesture
+            show-center-play-btn="{{false}}"
+            controls="{{false}}"
+            src="{{video.showVideo(item,currentIndex,index)?item.videoUrl:null}}"
+            data-id="{{item.id}}"
+            object-fit="contain"
+            data-index="{{index}}"
+            @tap="videoTap"
+            bindplay="videoPlay"
+            wx:if="{{item.showType && item.showType.value ==2}}"
+          >
+            <video-pause :pause="videoPause"></video-pause>
+            <!--<video-loading v-if="videoLoading" :snapshot="item.videoSnapUrl"/>-->
+          </video>
+          <van-image wx:if="{{item.showType && item.showType.value ==1}}" use-loading-slot src="{{item.photoUrl}}" 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}}/{{item.totalStock}}</view>
+            <view class="info">中奖概率: {{item.probability}}</view>
+            <view class="progress">
+              <view class="text">{{item.progress}}</view>
+              <view class="orange" style="{{item.progressStyle}}"></view>
+            </view>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  import { getProbability } from '../../common/raffleProbability';
+  import { getAwardsDetail } from '../../common/api.js';
+  wepy.component({
+    props: {
+      videoList: {
+        type: Array,
+        value: []
+      },
+      userAccount: {
+        type: Number,
+        value: 0
+      }
+    },
+    data:{
+      nextQueue: [],
+      prevQueue: [],
+      curQueue: [],
+      circular: true,
+      _last: 1,
+      _invalidUp: 0,
+      _invalidDown: 0,
+      _videoContexts: [],
+      currentIndex:1,
+      videoPause: false,
+      videoLoading: false,
+    },
+    watch: {
+      videoList (list) {
+        const newVal = list || [];
+        this._videoListChanged(newVal);
+      },
+      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)
+      ];
+    },
+    methods: {
+      compute (newVal) {
+        if (!this.curQueue.length) return;
+        this.curQueue.forEach(v => {
+          v.probability = getProbability(+newVal, +v.coinQuantity);
+        });
+        this.curQueue = [...this.curQueue];
+        this.updateAwardsInfo(this.currentIndex);
+      },
+      _videoListChanged (newVal) {
+        const _this = this;
+        if (this.curQueue.length === 0) {
+          newVal.forEach(function (item,index) {
+            if(index < 3) {
+              _this.curQueue.push(item);
+            }else {
+              _this.nextQueue.push(item);
+            }
+          });
+          this.playCurrent(1);
+        }else{
+          newVal.forEach(function (item) {
+            _this.nextQueue.push(item);
+          });
+        }
+        this.compute(this.userAccount);
+      },
+      moveSwiper(e) {
+        this.videoPause = false;
+        if (e.$wx.detail.source === 'touch') {
+          const current = e.$wx.detail.current;
+          this.currentIndex = current;
+        }
+      },
+      animationfinish (e) {
+        var _last = this._last,
+          curQueue = this.curQueue,
+          prevQueue = this.prevQueue,
+          nextQueue = this.nextQueue;
+        //一共三个数组，curQueue是要显示的数组，其中只有三个元素prevQueue，放上滑过去的元素nextQueue放即将进入的元素
+        //一次最多只展示3个video标签，每次只有当滑动到当前元素时才把视频的url赋值上，这样提高加载视频的速度
+        const current = e.$wx.detail.current;
+        const diff = current - _last;
+        if (diff === 0) return;
+        this._last = current;
+        this.playCurrent(current);
+        // 如果上滑的时候，当前滑动到第0元素，那么被划走，放入prevQueue是第一个元素，这个要自己画图才会更理解
+        const upChange = [1,2,0];
+        const downChange = [2,0,1];
+        this.$emit('change', { activeId: curQueue[current].id });
+        const direction = (diff === 1 || diff === -2) ? 'up' : 'down';
+        if (direction === 'up') {
+          if (this._invalidDown === 0) {
+            const uchange = upChange[current];
+            const add = nextQueue.shift();
+            const remove = curQueue[uchange];
+            if (add) {
+              prevQueue.push(remove);
+              curQueue[uchange] = add;
+            } else {
+              this._invalidUp += 1;
+            }
+          } else {
+            this._invalidDown -= 1;
+          }
+        }
+        if (direction === 'down') {
+          if (this._invalidUp === 0) {
+            const dchange = downChange[current];
+            const _remove = curQueue[dchange];
+            const _add = prevQueue.pop();
+            if (_add) {
+              curQueue[dchange] = _add;
+              nextQueue.unshift(_remove);
+            } else {
+              this._invalidDown += 1;
+            }
+          } else {
+            this._invalidUp -= 1;
+          }
+        }
+        //当滑动到头时，circular改成false
+        let circular = true;
+        if (nextQueue.length === 0 && current !== 0) {
+          circular = false;
+        }
+        if (prevQueue.length === 0 && current !== 2) {
+          circular = false;
+        }
+        this.curQueue = [...curQueue];
+        this.circular = circular;
+      },
+      playCurrent (current) {
+        this.curQueue[current] && this.getProgress(this.curQueue[current].id);
+        //滑动到当前元素时，其他video都暂停，只播放当前video
+        this._videoContexts.forEach(function (ctx, index) {
+          if(ctx) {
+            index !== current ? ctx.pause() : ctx.play();
+          }
+        });
+      },
+      videoTap(e) {
+        const current = e.currentTarget.dataset.index;
+        const ctx = this._videoContexts[current];
+        if(this.videoPause) {
+          ctx.play();
+          this.videoPause = false;
+        }else {
+          ctx.pause();
+          this.videoPause = true;
+        }
+      },
+      videoPlay() {
+//        this.videoLoading = false;
+      },
+      updateAwardsInfo(current) {
+        const { id, photoUrl, name, probability } = this.curQueue[current];
+        this.$emit('getAwardsInfo', {
+          id,
+          photoUrl: encodeURIComponent(photoUrl),
+          name,
+          chance: probability
+        });
+      },
+      async getProgress(id) {
+        if (id <= 0) return;
+        let detail = await getAwardsDetail({ prizeId: id });
+        detail = detail || {};
+        if (detail.join > detail.quantity) detail.join = detail.quantity;
+        const progressFloat = detail.join / detail.quantity * 100;
+        let progress = Math.round(progressFloat) + '%';
+        if (progressFloat > 0 && progressFloat < 1) progress = '1%';
+
+        this.curQueue.forEach(v => {
+          if (v.id === id) {
+            v.progress = progress;
+            v.batchId = detail.id;
+            v.progressStyle = 'width:' + progress;
+          }
+        });
+
+        this.curQueue = [...this.curQueue];
+      },
+    }
+  });
+</script>
+<config>
+  {
+    usingComponents: {
+      'video-pause': '~@/components/custom/videoPause',
+      'video-loading': '~@/components/custom/loading',
+      "van-loading": "~@/components/vant/loading/index",
+      "van-image": "~@/components/vant/image/index"
+    }
+  }
+</config>
+<style lang="less">
+  @import "../../style/common";
+  .container,.video-swiper{
+    width:100%;
+    height:100%;
+  }
+  .video-item {
+    height:100%;
+    width:100%;
+    position: absolute;
+    background-color: #000;
+    z-index: 1;
+  }
+
+  .image-item{
+    height:100%;
+    width:100%;
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+  }
+  .rightcont {
+    font-size: @font-normal;
+    position: absolute;
+    z-index: 9;
+    bottom: 415rpx;
+    width:30%;
+    right: 30rpx;
+    color: @whitecolor;
+    will-change: transform;
+    .info {
+      line-height: 40rpx;
+    }
+  }
+  .progress {
+    width: 180rpx;
+    height: 20rpx;
+    background-color: @whiteback;
+    margin-top: 10rpx;
+    color: @greycolor;
+    position: relative;
+    .text {
+      position: absolute;
+      top:0;
+      left:0;
+      width:100%;
+      height:100%;
+      z-index: 2;
+      text-align: center;
+      line-height:20rpx;
+      background-color: transparent;
+      font-size: 18rpx;
+    }
+    .orange {
+      width: 0;
+      height:100%;
+      transition:all .6s;
+      background-color: @maincolor;
+    }
+  }
+  .images {
+    width: 100%;
+  }
+</style>
+

src/pages/index.wpy

@@ -161,8 +161,9 @@
 <template>
   <view class="video-wrapper">
     <view class="prize">
-      <prize-list :videoList="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo">
-      </prize-list>
+      <!--<prize-list :videoList="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo">
+      </prize-list>-->
+      <video-list :videoList="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo"></video-list>
     </view>
     <view class="userInfo" style="{{safeAreaStyle}}">
       <button v-if="authmodal" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-button">
@@ -503,7 +504,8 @@
       'van-dialog': '~@/components/vant/dialog/index',
       'goods-list': '../components/custom/goodsList',
       'activity-list': '../components/custom/activityList',
-      'van-popup':'../components/vant/popup/index'
+      'van-popup':'../components/vant/popup/index',
+      'video-list':'../components/custom/video'
     },
     navigationStyle: "custom",
     disableScroll: true

src/pages/raffle.wpy

@@ -253,7 +253,7 @@
   import Dialog from '../components/vant/dialog/dialog';
   import { updateUserPhone, confirmRaffle, register, login, getAwardsDetail, checkInnerCode } from '../common/api';
   import store from '../store';
-  let hasPhone = false, innerActivity= '', batchId = null;
+  let innerActivity= '', batchId = null;
   wepy.page({
     store,
     data: {
@@ -269,7 +269,8 @@
       isError: false,
       code: '',
       errorText: '',
-      errorBtn: '确定'
+      errorBtn: '确定',
+      hasPhone: false,
     },
     methods: {
       check() {
@@ -284,7 +285,7 @@
           updateUserPhone(detail).then(() => {
             wx.setStorageSync('hasPhone', true);
             that.btnfont = '立即参与';
-            hasPhone = true;
+            this.hasPhone = true;
             that.joinin();
           }).catch(() => {
             that.btnfont = '立即参与';
@@ -345,7 +346,7 @@
           Notify({message: '勾选同意后才可以抽奖!'});
           return;
         }
-        if (hasPhone) {
+        if (this.hasPhone) {
           // 当有innerActivity并且没有邀请码(没有验证过)并且不是VIP的时候才显示modal
           if (innerActivity && !innerActivity.haveCode && !innerActivity.vip) {
             this.showModal();
@@ -406,7 +407,7 @@
     },
     computed: {
       opentype() {
-        if (this.isCheck && !hasPhone) {
+        if (this.isCheck && !this.hasPhone) {
           return 'getPhoneNumber';
         } else {
           return '';
@@ -427,7 +428,7 @@
       this.name = name;
       this.chance = chance;
       this.photoUrl = decodeURIComponent(photoUrl);
-      hasPhone = wx.getStorageSync('hasPhone');
+      this.hasPhone = wx.getStorageSync('hasPhone');
       innerActivity = wx.getStorageSync('innerActivity');
     }
   });