视频播放

app.js

@@ -1,7 +1,7 @@
  //app.js
  App({
    //----------------------------------------------globalData--------------------------------------
-   release: 1,
+   release: 0,
    httpUrl: 'https://api-test.qniao.cn',
    tmplIds: ['kg0T1ve0FpYrEtZ4ExbypHm8mtS7OJaehvqN_T9ypoI'],
    globalData: {

pages/mall/index.wxs

@@ -46,9 +46,17 @@ function formateText(text, length) {
   return text.substring(0, length) + '...'
 }
 
+function isVideoUrl(url){
+  if(url && url.indexOf('.mp4') >= 0){
+    return true
+  }
+  return false
+}
+
 module.exports = {
   formatePrice: formatePrice,
   formateWeight: formateWeight,
   formateDate: formateDate,
-  formateText: formateText
+  formateText: formateText,
+  isVideoUrl: isVideoUrl
 }

pages/mall/order-info/index.js

@@ -15,6 +15,7 @@ Page({
     orderInfo: null,
     matchTag: null,
     sukList: [],
+    imgList: [],
     form: {
       productId: null,
       skuId: null,
@@ -22,18 +23,23 @@ Page({
       unitPrice: 0
     },
     amount: null,
-    isIPhoneX: false
+    isIPhoneX: false,
+    status: 0,
+    controls: true
   },
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    if(getCurrentPages().length == 1){
+    if (getCurrentPages().length == 1) {
       this.setData({
         backStr: '首页'
       })
     }
-    this.setData({ token: app.globalData.token, isIPhoneX: app.globalData.isIPhoneX })
+    this.setData({
+      token: app.globalData.token,
+      isIPhoneX: app.globalData.isIPhoneX
+    })
     event.on('EventMessage', this, this.onEvent)
     if (options.id) {
       wx.showLoading({
@@ -44,9 +50,29 @@ Page({
       request.get('/bxe-mall/product/' + options.id).then(result => {
         //成功回调
         wx.hideLoading()
+        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 {
+          imgList = result.data.imgList
+        }
         this.setData({
           ['form.productId']: options.id,
-          orderInfo: result.data
+          orderInfo: result.data,
+          imgList: imgList
         })
       }).catch(err => {
         //异常回调
@@ -55,15 +81,85 @@ Page({
       })
     }
   },
+  swapArray: function (arr, index1, index2) {
+    arr[index1] = arr.splice(index2, 1, arr[index1])[0]
+    return arr
+  },
+  isVideoUrl: function (url) {
+    if (url && url.indexOf('.mp4') >= 0) {
+      return true
+    }
+    return false
+  },
   // 事件处理
   onEvent: function (message) {
     console.log('mall>>order>>onEvent', message)
-    if(message.what == 1 && util.isEmpty(this.data.token)){
-      this.setData({ token: app.globalData.token })
-    } else if(message.what == 10){
+    if (message.what == 1 && util.isEmpty(this.data.token)) {
+      this.setData({
+        token: app.globalData.token
+      })
+    } else if (message.what == 10) {
       wx.navigateBack()
     }
   },
+  bindchange: function (event) {
+    if (this.videoContext && this.data.status == 1) {
+      this.videoContext.pause()
+    }
+  },
+  videoTouch: function () {
+    console.log('videoTouch>>>')
+    if (this.timeout) {
+      return
+    }
+    if (!this.data.controls && this.data.status == 1) {
+      this.setData({
+        controls: true
+      })
+      this.timeout = setTimeout(() => {
+        this.setData({
+          controls: false
+        })
+        this.timeout = null
+      }, 1000)
+    }
+  },
+  videoTap: function () {
+    console.log('videoTap>>>')
+    if (this.videoContext) {
+      if (this.data.status == 0) {
+        this.videoContext.play()
+      } else if (this.data.status == 1) {
+        this.videoContext.pause()
+      }
+    }
+  },
+  bindplay: function () {
+    this.setData({
+      status: 1
+    })
+    this.timeout = setTimeout(() => {
+      this.setData({
+        controls: false
+      })
+      this.timeout = null
+    }, 1500)
+  },
+  bindpause: function () {
+    this.setData({
+      status: 0,
+      controls: true
+    })
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+      this.timeout = null
+    }
+  },
+  bindended: function () {
+    this.setData({
+      status: 0
+    })
+  },
   // phone: function (e) {
   //   var mobile = e.currentTarget.dataset.index
   //   if (util.checkPhone(mobile)) {
@@ -74,17 +170,27 @@ Page({
   // },
   // 图片查看 
   viewImage: function (e) {
+    if (e.currentTarget.dataset.url.indexOf('.mp4') >= 0) {
+      return
+    }
+    var imgList = []
+    for (let index = 0; index < this.data.orderInfo.imgList.length; index++) {
+      if (this.data.orderInfo.imgList[index].indexOf('.mp4') >= 0) {
+        continue
+      }
+      imgList.push(this.data.orderInfo.imgList[index])
+    }
     wx.previewImage({
-      urls: this.data.orderInfo.imgList,
+      urls: imgList,
       current: e.currentTarget.dataset.url
     });
   },
   // 根据
-  checkDisableTag: function(sukId, match, element){
+  checkDisableTag: function (sukId, match, element) {
     match[sukId] = element.id
     for (let index = 0; index < this.data.orderInfo.skuList.length; index++) {
       const item = this.data.orderInfo.skuList[index];
-      if(this.checkSkuPrice(match, item)){
+      if (this.checkSkuPrice(match, item)) {
         delete match[sukId]
         return false
       }
@@ -95,8 +201,8 @@ Page({
   // tag 点击事件
   tagClick: function (e) {
     this.data.matchTag = null
-    var sukId = e.currentTarget.dataset.suk// 对应的是一级列表的Id
-    var id = e.currentTarget.dataset.index// 对应的是二级列表的Id，相应是有价格计算的
+    var sukId = e.currentTarget.dataset.suk // 对应的是一级列表的Id
+    var id = e.currentTarget.dataset.index // 对应的是二级列表的Id，相应是有价格计算的
     //------------------------------sukList-------------------------------------------
     // 检查是否需要跟新，或者修改，跟新sukList；
     var push_flag = true
@@ -108,7 +214,7 @@ Page({
         break
       }
     }
-    if(push_flag){
+    if (push_flag) {
       this.data.sukList.push({
         skuId: sukId,
         id: id
@@ -124,7 +230,7 @@ Page({
     for (let i = 0; i < attributeList.length; i++) {
       for (let k = 0; k < attributeList[i].values.length; k++) {
         const element = attributeList[i].values[k];
-         // 点击的列判断 对应的是一级列表，肯定是可以点击的
+        // 点击的列判断 对应的是一级列表，肯定是可以点击的
         if (attributeList[i].id == sukId) {
           element.select = false
           if (element.id == id) {
@@ -151,25 +257,25 @@ Page({
     }
   },
   // 根据所有选择的规格校验获取价格
-  checkSkuPrice: function(tag, element){
-    if(!tag){
+  checkSkuPrice: function (tag, element) {
+    if (!tag) {
       return false
     }
     for (var key in tag) {
-      if(element.price <=0 || tag[key] != element[key]){
+      if (element.price <= 0 || tag[key] != element[key]) {
         return false
       }
     }
     return true
   },
-   // 数量变化的函数监听
+  // 数量变化的函数监听
   onNumChange: function (e) {
     if (e) {
       this.setData({
         ['form.number']: e.detail.value
       })
       // 如果查询到了价格，进行价格计算
-      if(this.data.form.unitPrice){
+      if (this.data.form.unitPrice) {
         this.setData({
           amount: float.accMul(this.data.form.unitPrice, this.data.form.number)
         })
@@ -178,12 +284,12 @@ Page({
       // 根据规格，克重，以及其他筛选价格
       for (let index = 0; index < this.data.orderInfo.skuList.length; index++) {
         const element = this.data.orderInfo.skuList[index];
-        if(this.checkSkuPrice(this.data.matchTag, element)){
+        if (this.checkSkuPrice(this.data.matchTag, element)) {
           this.data.form.unitPrice = Number(element.price)
           this.data.form.monthPrice = Number(element.groupMonthPrice)
           this.data.form.stockNumber = Number(element.stockNumber)
           // 如果当前的数量大于所选规格的库存数量，那么就设置成库存数量；
-          if(this.data.form.number > this.data.form.stockNumber){
+          if (this.data.form.number > this.data.form.stockNumber) {
             this.data.form.number = Number(element.stockNumber)
           }
           this.data.form.dividePrice = Number(element.dividePrice)
@@ -193,7 +299,7 @@ Page({
         }
       }
       // 如果查询到了价格，进行价格计算
-      if(this.data.form.unitPrice){
+      if (this.data.form.unitPrice) {
         this.setData({
           ['form.number']: this.data.form.number,
           ['form.unitPrice']: this.data.form.unitPrice,
@@ -220,11 +326,11 @@ Page({
         return
       }
     }
-    if(this.data.form.number <= 0){
+    if (this.data.form.number <= 0) {
       util.showToast('请输入购买数量，必选大于0')
       return
     }
-    if(this.data.form.stockNumber <= 0){
+    if (this.data.form.stockNumber <= 0) {
       util.showToast('暂无库存，请选择其他规格类型')
       return
     }
@@ -239,29 +345,28 @@ Page({
     })
   },
   // 就行登录流程；然后进入下一步的支付操作
-  onGotPhoneNumber: function(e){
+  onGotPhoneNumber: function (e) {
     request.loginWechat(e.detail).then(data => {
       this.offerProject()
     })
   },
-  onShareAppMessage: function() {
+  onShareAppMessage: function () {
     return {
       title: this.data.orderInfo.name,
       path: '/pages/mall/order-info/index?id=' + this.data.orderInfo.id,
       imageUrl: this.data.orderInfo.litimgUrl,
-      success: function(res) {
-      }
+      success: function (res) {}
     }
   },
   // event的unregister
-  onUnload: function(){
+  onUnload: function () {
     event.remove('EventMessage', this)
-    if(getCurrentPages().length == 1){
+    if (getCurrentPages().length == 1) {
       this.toHome()
     }
   },
   // 返回到主页
-  toHome(){
+  toHome() {
     wx.reLaunch({
       url: '/pages/mall/shops/index',
     })

pages/mall/order-info/index.wxml

@@ -1,13 +1,25 @@
 <!--pages/order/order-info/index.wxml-->
+<wxs module="formate" src="./../index.wxs"></wxs>
 <cu-custom bgColor="bg-white" isBack="{{true}}">
 	<view slot="backText">{{backStr}}</view>
 	<view slot="content" style="color:black;font-size:36rpx">商品详情</view>
 </cu-custom>
 
 <view wx:if="{{orderInfo}}">
-	<swiper class="screen-swiper square-dot" style="min-height:400rpx" indicator-dots="true" autoplay="true" interval="5000" duration="500" indicator-color="#FFFFFF" indicator-active-color="#008AFF">
-		<swiper-item wx:for="{{orderInfo.imgList}}" wx:key="index" bindtap="viewImage" data-url="{{orderInfo.imgList[index]}}">
-			<image src="{{item}}" mode='aspectFill'></image>
+	<swiper class="screen-swiper square-dot" style="min-height:400rpx" indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#008AFF" bindchange="bindchange">
+		<swiper-item wx:for="{{imgList}}" wx:key="index">
+			<view wx:if="{{formate.isVideoUrl(item)}}" bindtap="videoTouch">
+				<view class="video-cnt">
+					<video id="video" src="{{item}}" style="width:100%;min-height:400rpx" bindplay="bindplay" bindpause="bindpause" bindended="bindended" show-center-play-btn="{{false}}" controls="{{false}}" muted />
+				</view>
+				<view class="play-btn" style="width:80rpx;height:80rpx" catchtap="videoTap" wx:if="{{controls}}">
+				  <image src="{{status == 0 ? '/assets/image/video_play.png' : '/assets/image/video_pause.png'}}"/>
+				</view>
+				<!-- <text class="cuIcon-{{status == 0 ? 'playfill' : 'stop'}} play-btn" catchtap="videoTap" wx:if="{{controls}}" style="font-size:80rpx;color:white"></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">
@@ -39,7 +51,7 @@
 		<view class="text-gray" style="font-size:28rpx">购买数量</view>
 		<wux-input-number value="{{form.number}}" controlled="{{true}}" disabled="{{false}}" color="stable" min="{{1}}" max="{{form.stockNumber||orderInfo.stockNumber}}" bind:change="onNumChange" />
 	</view>
-	
+
 	<view class="bg-white" style="padding:32rpx;margin-top:32rpx">
 		<view class="text-black" style="font-size:32rpx">商品描述</view>
 		<view class="text-gray" style="font-size:28rpx;margin-top:32rpx">{{orderInfo.detail}}</view>

pages/mall/order-info/index.wxss

@@ -58,4 +58,27 @@ button::after {
   top: 24px;
   right: 24px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+}
+
+.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: 400rpx;
+}
+
+.play-btn {
+  position: absolute;
+  top: 150rpx;
+  left: 342rpx;
+  z-index: 100;
 }

pages/mall/shops/index.js

@@ -78,7 +78,7 @@ Page({
       this.onRefreshList()
     }
     if (!this.data.firstShow) {
-      this.data.firstShow = true
+      // this.data.firstShow = true
     }
   },
   // 获取特价列表

project.config.json

@@ -4,7 +4,7 @@
 		"ignore": []
 	},
 	"setting": {
-		"urlCheck": true,
+		"urlCheck": false,
 		"es6": true,
 		"enhance": true,
 		"postcss": true,
@@ -15,6 +15,7 @@
 		"autoAudits": false,
 		"showShadowRootInWxmlPanel": true,
 		"scopeDataCheck": false,
+		"uglifyFileName": true,
 		"checkInvalidKey": true,
 		"checkSiteMap": true,
 		"uploadWithSourceMap": true,
@@ -22,11 +23,10 @@
 			"ignore": [],
 			"disablePlugins": [],
 			"outputPath": ""
-		},
-		"uglifyFileName": true
+		}
 	},
 	"compileType": "miniprogram",
-	"libVersion": "2.11.0",
+	"libVersion": "2.11.1",
 	"appid": "wx9e774103645f5c54",
 	"projectname": "page-mall-mini",
 	"debugOptions": {