视频播放

components/swiper-video/index.js

@@ -1,152 +0,0 @@
-const float = require('../../utils/floatObj');
-
-Component({
-    options: {
-        addGlobalClass: true
-    },
-    properties: {
-        // 数据源
-        imgList: {
-            type: Array,
-            value: [],
-            observer: "dataChange"
-        }
-    },
-    data: {
-        videoContext: null,
-        imageHeight: 0,
-        visible: false,
-        videoUrl: null
-    },
-    methods: {
-        /**
-         *  初始化函数
-         */
-        init() {
-            this.setData({
-                imageHeight: float.accDiv(float.accMul(750, 9), 16),
-            })
-            this.data.videoContext = wx.createVideoContext('video', this)
-        },
-        isVideoUrl: function (url) {
-            if (url && url.indexOf('.mp4') >= 0) {
-                return true
-            }
-            return false
-        },
-        dataChange(newVal, oldVal) {
-            var vindex = -1
-            var vurl = null
-            var imgList = []
-            for (let index = 0; index < newVal.length; index++) {
-                const element = newVal[index]
-                if (this.isVideoUrl(element)) {
-                    vindex = index
-                    vurl = element
-                    break
-                }
-            }
-            
-            if (vindex >= 1) {
-                newVal.splice(vindex, 1)
-                imgList = newVal
-                imgList.unshift(vurl)
-                this.data.videoContext = wx.createVideoContext('video', this)
-            } else if (vindex == 0) {
-                imgList = newVal
-                this.data.videoContext = wx.createVideoContext('video', this)
-            } else {
-                imgList = newVal
-            }
-            this.setData({
-                videoUrl: vurl,
-                imgList: imgList
-            })
-        },
-        // bindchange: function (event) {
-        //     if (this.data.videoContext && this.data.status == 1) {
-        //         this.data.videoContext.pause()
-        //     }
-        // },
-        // videoTouch: function () {
-            
-        //     if (this.data.timeout) {
-        //         return
-        //     }
-        //     if (!this.data.controls && this.data.status == 1) {
-        //         this.setData({
-        //             controls: true
-        //         })
-        //         this.data.timeout = setTimeout(() => {
-        //             this.setData({
-        //                 controls: false
-        //             })
-        //             this.data.timeout = null
-        //         }, 1000)
-        //     }
-        // },
-        videoTap: function () {
-            this.setData({
-                visible: true,
-            })
-            if (this.data.videoContext) {
-                this.data.videoContext.play()
-            }
-        },
-        onClose: function() {
-            this.setData({
-                visible: false,
-            })
-            if (this.data.videoContext) {
-                this.data.videoContext.pause()
-            }
-        },
-        // bindplay: function () {
-        //     this.setData({
-        //         status: 1
-        //     })
-        //     this.data.timeout = setTimeout(() => {
-        //         this.setData({
-        //             controls: false
-        //         })
-        //         this.data.timeout = null
-        //     }, 1500)
-        // },
-        // bindpause: function () {
-        //     this.setData({
-        //         status: 0,
-        //         controls: true
-        //     })
-        //     if (this.data.timeout) {
-        //         clearTimeout(this.data.timeout)
-        //         this.data.timeout = null
-        //     }
-        // },
-        bindended: function () {
-            this.data.videoContext.exitFullScreen()
-            this.setData({
-                visible: false
-            })
-        },
-        // 图片查看 
-        viewImage: function (e) {
-            if (e.currentTarget.dataset.url.indexOf('.mp4') >= 0) {
-                return
-            }
-            var imgList = []
-            for (let index = 0; index < this.data.imgList.length; index++) {
-                if (this.data.imgList[index].indexOf('.mp4') >= 0) {
-                    continue
-                }
-                imgList.push(this.data.imgList[index])
-            }
-            wx.previewImage({
-                urls: imgList,
-                current: e.currentTarget.dataset.url
-            });
-        },
-    },
-    ready() {
-        this.init();
-    }
-})

components/swiper-video/index.json

@@ -1,6 +0,0 @@
-{
-    "component": true,
-    "usingComponents": {
-        "wux-landscape": "../landscape/index"
-    }
-}

components/swiper-video/index.wxml

@@ -1,18 +0,0 @@
-<wxs module="formate" src="../../pages/mall/index.wxs"></wxs>
-<swiper class="screen-swiper square-dot" style="min-height:{{imageHeight}}rpx" indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#008AFF">
-	<swiper-item wx:for="{{imgList}}" wx:key="index">
-		<view wx:if="{{formate.isVideoUrl(item)}}">
-			<view class="video-cnt">
-				<video src="{{item}}" style="width:100%;min-height:{{imageHeight}}rpx" show-center-play-btn="{{false}}" controls="{{false}}" muted />
-			</view>
-			<text class="play-btn cuIcon-video text-white" style="font-size:80rpx" catchtap="videoTap" wx:if="{{!visible}}"></text>
-		</view>
-		<view wx:else bindtap="viewImage" style="width:100%;height:100%" data-url="{{item}}">
-			<image src="{{item}}" mode="aspectFill"></image>
-		</view>
-	</swiper-item>
-</swiper>
-
-<wux-landscape visible="{{ visible }}" bind:close="onClose">
-	<video id="video" src="{{videoUrl}}" style="width:750rpx;min-height:{{imageHeight}}rpx" show-center-play-btn="{{false}}" bindended="bindended"/>
-</wux-landscape>

components/swiper-video/index.wxss

@@ -1,32 +0,0 @@
-.swiper-cnt {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.video-cnt {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1 !important;
-  width: 100%;
-  height: 100%;
-}
-
-.play-btn {
-  position: absolute;
-  top: 150rpx;
-  left: 342rpx;
-  z-index: 100;
-}
-
-.play-controls{
-  width: 100%;
-  height: 80rpx;
-  padding: 15rpx 20rpx;
-  position: absolute;
-  display: flex;
-  bottom: 0px;
-  z-index: 100;
-}

pages/mall/order-info/index.js

@@ -23,7 +23,10 @@ Page({
       unitPrice: 0
     },
     amount: null,
-    isIPhoneX: false
+    isIPhoneX: false,
+    imageHeight: 0,
+    visible: false,
+    videoUrl: null
   },
   /**
    * 生命周期函数--监听页面加载
@@ -36,6 +39,7 @@ Page({
     }
     this.setData({
       token: app.globalData.token,
+      imageHeight: float.accDiv(float.accMul(750, 9), 16),
       isIPhoneX: app.globalData.isIPhoneX
     })
     event.on('EventMessage', this, this.onEvent)
@@ -48,13 +52,40 @@ Page({
       request.get('/bxe-mall/product/' + options.id).then(result => {
         //成功回调
         wx.hideLoading()
-        if(Number(result.data.minBuyNum) > 1){
+        if (Number(result.data.minBuyNum) > 1) {
           this.data.form.number = parseInt(result.data.minBuyNum)
         }
+        var vindex = -1
+        var vurl = null
+        var imgList = []
+        for (let index = 0; index < result.data.imgList.length; index++) {
+          const element = result.data.imgList[index]
+          if (this.isVideoUrl(element)) {
+            vindex = index
+            vurl = element
+            break
+          }
+        }
+        if (vindex >= 1) {
+          result.data.imgList.splice(vindex, 1)
+          imgList = result.data.imgList
+          imgList.unshift(vurl)
+          this.videoContext = wx.createVideoContext('video')
+        } else if (vindex == 0) {
+          imgList = result.data.imgList
+          this.videoContext = wx.createVideoContext('video')
+        } else {
+          imgList = result.data.imgList
+        }
+        this.setData({
+          videoUrl: vurl,
+          imgList: imgList
+        })
         this.setData({
           ['form.productId']: options.id,
           orderInfo: result.data,
-          imgList: result.data.imgList
+          videoUrl: vurl,
+          imgList: imgList
         })
       }).catch(err => {
         //异常回调
@@ -63,6 +94,12 @@ Page({
       })
     }
   },
+  isVideoUrl: function (url) {
+    if (url && url.indexOf('.mp4') >= 0) {
+      return true
+    }
+    return false
+  },
   // 事件处理
   onEvent: function (message) {
     console.log('mall>>order>>onEvent', message)
@@ -74,6 +111,45 @@ Page({
       wx.navigateBack()
     }
   },
+  videoTap: function () {
+    this.setData({
+      visible: true,
+    })
+    if (this.videoContext) {
+      this.videoContext.play()
+    }
+  },
+  onClose: function () {
+    this.setData({
+      visible: false,
+    })
+    if (this.videoContext) {
+      this.videoContext.pause()
+    }
+  },
+  bindended: function () {
+    this.videoContext.exitFullScreen()
+    this.setData({
+      visible: false
+    })
+  },
+  // 图片查看 
+  viewImage: function (e) {
+    if (e.currentTarget.dataset.url.indexOf('.mp4') >= 0) {
+      return
+    }
+    var imgList = []
+    for (let index = 0; index < this.data.imgList.length; index++) {
+      if (this.data.imgList[index].indexOf('.mp4') >= 0) {
+        continue
+      }
+      imgList.push(this.data.imgList[index])
+    }
+    wx.previewImage({
+      urls: imgList,
+      current: e.currentTarget.dataset.url
+    });
+  },
   // 根据
   checkDisableTag: function (sukId, match, element) {
     match[sukId] = element.id

pages/mall/order-info/index.json

@@ -2,6 +2,6 @@
   "usingComponents": {
     "wux-button": "/components/button/index",
     "wux-input-number": "/components/input-number/index",
-    "swiper-video": "/components/swiper-video/index"
-}
+    "wux-landscape": "/components/landscape/index"
+  }
 }

pages/mall/order-info/index.wxml

@@ -6,7 +6,19 @@
 </cu-custom>
 
 <view wx:if="{{orderInfo}}">
-  <swiper-video img-list="{{imgList}}"></swiper-video>
+	<swiper class="screen-swiper square-dot" style="min-height:{{imageHeight}}rpx" indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#008AFF">
+		<swiper-item wx:for="{{imgList}}" wx:key="index">
+			<view wx:if="{{formate.isVideoUrl(item)}}">
+				<view class="video-cnt">
+					<video src="{{item}}" style="width:100%;min-height:{{imageHeight}}rpx" show-center-play-btn="{{false}}" controls="{{false}}"/>
+				</view>
+				<text class="play-btn cuIcon-video text-white" style="font-size:80rpx" catchtap="videoTap" wx:if="{{!visible}}"></text>
+			</view>
+			<view wx:else bindtap="viewImage" style="width:100%;height:100%" data-url="{{item}}">
+				<image src="{{item}}" mode="aspectFill"></image>
+			</view>
+		</swiper-item>
+	</swiper>
 	<view class="bg-white flex flex-justify" style="padding:24rpx 32rpx">
 		<view class="flex flex-center">
 			<view class="detail-price">￥{{form.unitPrice || orderInfo.price}}</view>
@@ -79,4 +91,8 @@
 			<button wx:else class="cu-btn offer-btn" open-type="getPhoneNumber" bindgetphonenumber="onGotPhoneNumber">立即购买</button>
 		</view>
 	</view>
-</view>
+</view>
+
+<wux-landscape visible="{{ visible }}" bind:close="onClose">
+	<video id="video" src="{{videoUrl}}" style="width:750rpx;min-height:{{imageHeight}}rpx" show-center-play-btn="{{false}}" bindended="bindended" />
+</wux-landscape>