清除定时器，以及处理禁止用户滑动快进

pages/index/index.vue

@@ -30,7 +30,7 @@
 					<view class="close" @click="handleClose()">关闭</view>
 				</view>
 				<video id="video-box" v-if="show" :src="baseUrl + posterForm.videoPath" :autoplay="true"
-					:controls="false" @timeupdate="changeTimeupdate" @play="play"></video>
+					:controls="false" @timeupdate="changeTimeupdate" @play="play" @ended="ended"></video>
 			</view>
 		</u-popup>
 	</view>
@@ -54,7 +54,7 @@
 				statusBarHeight: 0,
 				countdown: 0,
 				videoCurrentTime: 0, //视频播放时间
-				time: null,
+				historyTime: null,
 				wifiForm: {},
 				posterForm: {},
 				platform: null,
@@ -74,7 +74,6 @@
 				})
 			}
 
-			// this.getNetinfo(11)
 		},
 		methods: {
 			//根据微信扫小程序码进入首页拿到网络id查询网络详情
@@ -118,32 +117,33 @@
 			},
 			// 开始播放
 			play() {
-				this.enableTimer() //启用计时器
 				this.setPosterHistory()
 			},
-			//计时器
-			enableTimer() {
-				this.time = setInterval(() => {
-					if (this.countdown > 0) {
-						this.countdown--
-					} else {
-						clearInterval(this.time)
-						this.handleClose()
-					}
-				}, 1000)
+			//播放完毕
+			ended() {
+				this.handleClose()
 			},
 			//视频播放进度
 			changeTimeupdate(e) {
-				this.videoCurrentTime = e.detail.currentTime
+				this.countdown = Math.floor(e.detail.duration) - Math.floor(e.detail.currentTime)
+				this.videoCurrentTime = Math.floor(e.detail.currentTime)
 
+				// 禁止拖动进度条快进
+				if (e.detail.currentTime - this.historyTime > 1) {
+					uni.showToast({
+						title: '不能快进哦',
+						icon: 'none',
+					});
+					let videoContext = wx.createVideoContext('video-box');
+					videoContext.seek(this.historyTime);
+				}
+				this.historyTime = e.detail.currentTime;
 			},
 			//关闭弹窗
 			handleClose() {
+				console.log('完毕', this.countdown)
 				this.show = false
-				console.log(Math.ceil(this.videoCurrentTime), this.posterForm.duration, Math.ceil(this.videoCurrentTime) >=
-					this
-					.posterForm.duration)
-				if (Math.ceil(this.videoCurrentTime) >= this.posterForm.duration) {
+				if (this.countdown <= 1) {
 					//证明已经看过视频时间
 					this.handleWifi()
 				} else {
@@ -151,10 +151,7 @@
 						title: '连接WI-FI失败!',
 						icon: 'error'
 					})
-					this.countdown = this.posterForm.duration
-					this.videoCurrentTime = 0
 				}
-				clearInterval(this.time)
 			},
 
 			//判断当前机器是否支持连接WIFI

unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -164,7 +164,7 @@ __webpack_require__.r(__webpack_exports__);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(uni) {
+/* WEBPACK VAR INJECTION */(function(uni, wx) {
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -220,7 +220,7 @@ var _default = {
       countdown: 0,
       videoCurrentTime: 0,
       //视频播放时间
-      time: null,
+      historyTime: null,
       wifiForm: {},
       posterForm: {},
       platform: null
@@ -237,10 +237,7 @@ var _default = {
         icon: 'error'
       });
     }
-
-    // this.getNetinfo(11)
   },
-
   methods: {
     //根据微信扫小程序码进入首页拿到网络id查询网络详情
     getNetinfo: function getNetinfo(netId) {
@@ -283,30 +280,33 @@ var _default = {
     },
     // 开始播放
     play: function play() {
-      this.enableTimer(); //启用计时器
       this.setPosterHistory();
     },
-    //计时器
-    enableTimer: function enableTimer() {
-      var _this2 = this;
-      this.time = setInterval(function () {
-        if (_this2.countdown > 0) {
-          _this2.countdown--;
-        } else {
-          clearInterval(_this2.time);
-          _this2.handleClose();
-        }
-      }, 1000);
+    //播放完毕
+    ended: function ended() {
+      this.handleClose();
     },
     //视频播放进度
     changeTimeupdate: function changeTimeupdate(e) {
-      this.videoCurrentTime = e.detail.currentTime;
+      this.countdown = Math.floor(e.detail.duration) - Math.floor(e.detail.currentTime);
+      this.videoCurrentTime = Math.floor(e.detail.currentTime);
+
+      // 禁止拖动进度条快进
+      if (e.detail.currentTime - this.historyTime > 1) {
+        uni.showToast({
+          title: '不能快进哦',
+          icon: 'none'
+        });
+        var videoContext = wx.createVideoContext('video-box');
+        videoContext.seek(this.historyTime);
+      }
+      this.historyTime = e.detail.currentTime;
     },
     //关闭弹窗
     handleClose: function handleClose() {
+      console.log('完毕', this.countdown);
       this.show = false;
-      console.log(Math.ceil(this.videoCurrentTime), this.posterForm.duration, Math.ceil(this.videoCurrentTime) >= this.posterForm.duration);
-      if (Math.ceil(this.videoCurrentTime) >= this.posterForm.duration) {
+      if (this.countdown <= 1) {
         //证明已经看过视频时间
         this.handleWifi();
       } else {
@@ -314,10 +314,7 @@ var _default = {
           title: '连接WI-FI失败!',
           icon: 'error'
         });
-        this.countdown = this.posterForm.duration;
-        this.videoCurrentTime = 0;
       }
-      clearInterval(this.time);
     },
     //判断当前机器是否支持连接WIFI
     handleWifi: function handleWifi() {
@@ -417,7 +414,7 @@ var _default = {
   }
 };
 exports.default = _default;
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"], __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/wx.js */ 1)["default"]))
 
 /***/ }),
 

unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
-<view class="container"><view class="wifi-data"><view class="wifi-icon"><u-icon vue-id="8dd740cc-1" color="#ffffff" name="wifi" size="30" bind:__l="__l"></u-icon></view><view class="wifi-datas" color="#2979ff"><view class="wifi-name">{{wifiForm.wifiName}}</view><view class="wifi-hot"><text class="hot-text">快速连接</text><text class="hot-icon">.</text><text class="hot-text">无需密码</text><text class="hot-icon">.</text><text class="hot-text">保护隐私</text></view></view></view><block wx:if="{{!showBtn}}"><view class="wifi-success">WI-FI连接成功</view></block><block wx:if="{{showBtn}}"><u-button vue-id="8dd740cc-2" type="primary" text="一键连接WI-FI" data-event-opts="{{[['^click',[['handleLinkwifi']]]]}}" bind:click="__e" bind:__l="__l"></u-button></block><u-popup vue-id="8dd740cc-3" show="{{show}}" mode="bottom" bind:__l="__l" vue-slots="{{['default']}}"><view class="video-container"><view class="video-btns" style="{{'padding-top:'+(statusBarHeight+'rpx')+';'}}"><view hidden="{{!(countdown>0)}}" class="second">{{countdown+" 后连接WI-FI"}}</view><view hidden="{{!(countdown==0)}}" class="second">已获得奖励</view><view data-event-opts="{{[['tap',[['handleClose']]]]}}" class="close" bindtap="__e">关闭</view></view><block wx:if="{{show}}"><video id="video-box" src="{{baseUrl+posterForm.videoPath}}" autoplay="{{true}}" controls="{{false}}" data-event-opts="{{[['timeupdate',[['changeTimeupdate',['$event']]]],['play',[['play',['$event']]]]]}}" bindtimeupdate="__e" bindplay="__e"></video></block></view></u-popup></view>
+<view class="container"><view class="wifi-data"><view class="wifi-icon"><u-icon vue-id="8dd740cc-1" color="#ffffff" name="wifi" size="30" bind:__l="__l"></u-icon></view><view class="wifi-datas" color="#2979ff"><view class="wifi-name">{{wifiForm.wifiName}}</view><view class="wifi-hot"><text class="hot-text">快速连接</text><text class="hot-icon">.</text><text class="hot-text">无需密码</text><text class="hot-icon">.</text><text class="hot-text">保护隐私</text></view></view></view><block wx:if="{{!showBtn}}"><view class="wifi-success">WI-FI连接成功</view></block><block wx:if="{{showBtn}}"><u-button vue-id="8dd740cc-2" type="primary" text="一键连接WI-FI" data-event-opts="{{[['^click',[['handleLinkwifi']]]]}}" bind:click="__e" bind:__l="__l"></u-button></block><u-popup vue-id="8dd740cc-3" show="{{show}}" mode="bottom" bind:__l="__l" vue-slots="{{['default']}}"><view class="video-container"><view class="video-btns" style="{{'padding-top:'+(statusBarHeight+'rpx')+';'}}"><view hidden="{{!(countdown>0)}}" class="second">{{countdown+" 后连接WI-FI"}}</view><view hidden="{{!(countdown==0)}}" class="second">已获得奖励</view><view data-event-opts="{{[['tap',[['handleClose']]]]}}" class="close" bindtap="__e">关闭</view></view><block wx:if="{{show}}"><video id="video-box" src="{{baseUrl+posterForm.videoPath}}" autoplay="{{true}}" controls="{{false}}" data-event-opts="{{[['timeupdate',[['changeTimeupdate',['$event']]]],['play',[['play',['$event']]]],['ended',[['ended',['$event']]]]]}}" bindtimeupdate="__e" bindplay="__e" bindended="__e"></video></block></view></u-popup></view>