视频播放

assets/image/icon_empty.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg t="1590740257326" class="icon" viewBox="0 0 1764 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14859" width="64" height="64">
+	<path d="M1526.914723 60.089191S1477.697362 0 1405.864851 0L352.299574 0.435745s-72.07217 1.895489-125.015148 57.779744C227.306213 58.215489 0 406.419064 0 472.260085v422.28017c0 65.841021 54.163064 119.197957 120.984511 119.197958h1512.251915c66.821447 0 120.984511-53.378723 120.98451-119.17617V472.238298c0-65.841021-227.306213-412.170894-227.306213-412.170894zM1129.951319 439.666383c-38.018723 0-52.202213 25.077106-57.452936 41.635404 0.130723 3.028426 0.457532 5.991489 0.457532 9.06349 0 107.672511-88.042213 194.995745-196.651575 194.995744-108.631149 0-196.673362-87.323234-196.673361-194.995744 0-3.921702 0.370383-7.734468 0.588255-11.590809-13.94383-38.955574-55.949617-39.108085-55.949617-39.108085H129.307234L297.831489 147.412426s32.680851-56.385362 64.272341-55.884256h1051.560851s30.240681 13.07234 56.71217 55.884256L1634.478298 439.666383H1129.951319z" p-id="14860" fill="#8a8a8a"></path>
+</svg>

colorui/main.wxss

@@ -2470,8 +2470,8 @@ scroll-view.cu-steps .cu-item {
 }
 
 .img-empty {
-  width: 280rpx;
-  height: 280rpx;
+  width: 120rpx;
+  height: 120rpx;
 }
 
 .text-empty {

components/backdrop/index.wxss

@@ -1,5 +1,5 @@
 .wux-backdrop {
-  background: rgba(0,0,0,.4)
+  background: rgba(0,0,0,1)
 }
 .wux-backdrop,
 .wux-backdrop--transparent {

components/landscape/index.js

@@ -0,0 +1,62 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-landscape',
+        },
+        visible: {
+            type: Boolean,
+            value: false,
+        },
+        mask: {
+            type: Boolean,
+            value: true,
+            observer(newVal) {
+                this.setData({ showMask: newVal })
+            },
+        },
+        maskClosable: {
+            type: Boolean,
+            value: false,
+        },
+        closable: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        showMask: true,
+    },
+    computed: {
+        classes: ['prefixCls, showMask', function(prefixCls, showMask) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--has-mask`]: showMask,
+            })
+            const popup = `${prefixCls}__popup`
+            const popupBody = `${prefixCls}__popup-body`
+            const popupClose = `${prefixCls}__popup-close`
+            const inner = `${prefixCls}__inner`
+            const close = `${prefixCls}__close`
+            const x = `${prefixCls}__close-x`
+
+            return {
+                wrap,
+                popup,
+                popupBody,
+                popupClose,
+                inner,
+                close,
+                x,
+            }
+        }],
+    },
+    methods: {
+        onClose() {
+            this.triggerEvent('close', { visible: !this.data.visible })
+        },
+    },
+    attached() {},
+})

components/landscape/index.json

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

components/landscape/index.wxml

@@ -0,0 +1,20 @@
+<wux-popup
+    wux-content-class="{{ classes.popup }}"
+    wux-body-class="{{ classes.popupBody }}"
+    wux-close-class="{{ classes.popupClose }}"
+    visible="{{ visible }}"
+    hasHeader="{{ false }}"
+    hasFooter="{{ false }}"
+    mask="{{ showMask }}"
+    maskClosable="{{ maskClosable }}"
+    bind:close="onClose"
+>
+	<view class="wux-class {{ classes.wrap }}">
+	    <view class="{{ classes.inner }}">
+	    	<slot></slot>
+	    </view>
+        <view class="{{ classes.close }}" wx:if="{{ closable }}" bindtap="onClose">
+            <text class="cuIcon-roundclose text-white" style="font-size:80rpx"></text>
+        </view>
+	</view>
+</wux-popup>

components/landscape/index.wxss

@@ -0,0 +1,32 @@
+.wux-landscape__popup {
+  background-color: transparent!important
+}
+.wux-landscape__popup-body {
+  padding: 0!important
+}
+.wux-landscape__inner {
+  padding: 30rpx;
+  font-size: 30rpx;
+  line-height: 1.5;
+  color: #666
+}
+.wux-landscape__inner > image {
+  width: 100%;
+  max-width: 100%
+}
+.wux-landscape__close {
+  position: relative;
+  display: inline-block;
+  margin-top: 10rpx
+}
+.wux-landscape__close-x {
+  display: inline-block;
+  width: 48rpx;
+  height: 48rpx;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888' fill-rule='evenodd'%3E%3Cpath d='M1.414 0l28.284 28.284-1.414 1.414L0 1.414z'/%3E%3Cpath d='M28.284 0L0 28.284l1.414 1.414L29.698 1.414z'/%3E%3C/g%3E%3C/svg%3E")
+}
+.wux-landscape--has-mask .wux-landscape__close-x {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-rule='evenodd'%3E%3Cpath d='M1.414 0l28.284 28.284-1.414 1.414L0 1.414z'/%3E%3Cpath d='M28.284 0L0 28.284l1.414 1.414L29.698 1.414z'/%3E%3C/g%3E%3C/svg%3E")
+}

components/popup/index.wxss

@@ -1,8 +1,8 @@
 .wux-popup {
   position: fixed;
   z-index: 1000;
-  width: 80%;
-  max-width: 600rpx
+  /* width: 80%; */
+  /* max-width: 600rpx */
 }
 .wux-popup-position.wux-popup-position--center .wux-popup {
   top: 50%;

components/swiper-video/index.js

@@ -0,0 +1,152 @@
+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

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

components/swiper-video/index.wxml

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,32 @@
+.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/index/index.wxml

@@ -11,7 +11,7 @@
 	<view class="text-empty" style="margin-top:48rpx">加载中...</view>
 </view>
 <view class="flex list-empty" wx:if="{{!taskList.length && !cheapList.length}}" style="height:{{height}}rpx">
-	<image class="img-empty" src="/assets/image/list_empty.png"></image>
+	<image class="img-empty" src="/assets/image/icon_empty.svg"></image>
 	<view class="text-empty">暂无数据</view>
 </view>
 <view wx:else>

pages/mall/order-detail/index.js

@@ -55,26 +55,6 @@ Page({
     })
   },
 
-  showDialog: function (e) {
-    var that = this
-    $wuxDialog().open({
-      resetOnClose: true,
-      title: '温馨提示',
-      content: '跳过确认事宜之后，没有确认的事项将不在记录，同时意味着您已经装货入仓了，确定跳过？',
-      buttons: [{
-        text: '取消',
-      }, {
-        text: '确定',
-        type: 'primary',
-        onTap(e) {
-          that.setData({
-            step: steps.length + 1
-          })
-        }
-      }]
-    })
-  },
-
   offerProject: function (e) {
     if (!this.data.addressInfo) {
       util.showToast('请选择收货地址')

pages/mall/order-info/index.js

@@ -14,7 +14,6 @@ Page({
     backStr: '返回',
     orderInfo: null,
     matchTag: null,
-    imageHeight: 0,
     sukList: [],
     imgList: [],
     form: {
@@ -24,9 +23,7 @@ Page({
       unitPrice: 0
     },
     amount: null,
-    isIPhoneX: false,
-    status: 0,
-    controls: true
+    isIPhoneX: false
   },
   /**
    * 生命周期函数--监听页面加载
@@ -39,8 +36,7 @@ Page({
     }
     this.setData({
       token: app.globalData.token,
-      isIPhoneX: app.globalData.isIPhoneX,
-      imageHeight: float.accDiv(float.accMul(750, 9), 16),
+      isIPhoneX: app.globalData.isIPhoneX
     })
     event.on('EventMessage', this, this.onEvent)
     if (options.id) {
@@ -52,35 +48,13 @@ 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 if(vindex == 0){
-          imgList = result.data.imgList
-          this.videoContext = wx.createVideoContext('video')
-        } else {
-          imgList = result.data.imgList
-        }
         if(Number(result.data.minBuyNum) > 1){
           this.data.form.number = parseInt(result.data.minBuyNum)
         }
         this.setData({
           ['form.productId']: options.id,
           orderInfo: result.data,
-          imgList: imgList
+          imgList: result.data.imgList
         })
       }).catch(err => {
         //异常回调
@@ -89,16 +63,6 @@ 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)
@@ -110,89 +74,6 @@ Page({
       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 () {
-    if (this.videoContext) {
-      console.log('videoTap>>>')
-      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)) {
-  //     wx.makePhoneCall({
-  //       phoneNumber: mobile
-  //     })
-  //   }
-  // },
-  // 图片查看 
-  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: imgList,
-      current: e.currentTarget.dataset.url
-    });
-  },
   // 根据
   checkDisableTag: function (sukId, match, element) {
     match[sukId] = element.id

pages/mall/order-info/index.json

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

pages/mall/order-info/index.wxml

@@ -6,22 +6,7 @@
 </cu-custom>
 
 <view wx:if="{{orderInfo}}">
-	<swiper class="screen-swiper square-dot" style="min-height:{{imageHeight}}rpx" 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:{{imageHeight}}rpx" 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>
+  <swiper-video img-list="{{imgList}}"></swiper-video>
 	<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>

pages/mall/order-list/index.wxml

@@ -22,7 +22,7 @@
 		<view class="text-empty" style="margin-top:48rpx">加载中...</view>
 	</view>
 	<view wx:elif="{{taskList.length}}" class="flex list-empty" style="height:{{height}}rpx">
-		<image class="img-empty" src="/assets/image/list_empty.png"></image>
+		<image class="img-empty" src="/assets/image/icon_empty.svg"></image>
 		<view class="text-empty">暂无消息</view>
 	</view>
 	<scroll-view wx:else scroll-y style="height:{{height}}rpx" bindscrolltolower="fetchTaskList">

pages/mall/order-offer/index.js

@@ -40,32 +40,11 @@ Page({
       }
     })
   },
-
   checkMode: function (e) {
     this.setData({
       ['form.payType']: Number(e.currentTarget.dataset.index)
     })
   },
-
-  showDialog: function (e) {
-    var that = this
-    $wuxDialog().open({
-      resetOnClose: true,
-      title: '温馨提示',
-      content: '跳过确认事宜之后，没有确认的事项将不在记录，同时意味着您已经装货入仓了，确定跳过？',
-      buttons: [{
-        text: '取消',
-      }, {
-        text: '确定',
-        type: 'primary',
-        onTap(e) {
-          that.setData({
-            step: steps.length + 1
-          })
-        }
-      }]
-    })
-  },
   // 创建订单
   offerProject: function (e) {
     if (!this.data.addressInfo) {

pages/mall/search-list/index.wxml

@@ -32,7 +32,7 @@
 		<view class="text-empty" style="margin-top:48rpx">加载中...</view>
 	</view>
 	<view class="list-empty" wx:elif="{{!taskList.length}}" style="height:{{height}}rpx">
-		<image class="img-empty" src="/assets/image/list_empty.png"></image>
+		<image class="img-empty" src="/assets/image/icon_empty.svg"></image>
 		<view class="text-empty">暂无数据</view>
 	</view>
 	<scroll-view scroll-y scroll-top="{{top}}" style="height:{{height}}rpx;padding: 0rpx 24rpx" wx:else bindscrolltolower="fetchTaskList">

pages/mall/shops/index.wxml

@@ -97,11 +97,6 @@
 		</wux-skeleton>
 	</view>
 
-	<view class="list-empty" wx:elif="{{!taskList.length && !cheapList.length}}" style="height:{{height}}rpx">
-		<image class="img-empty" src="/assets/image/list_empty.png"></image>
-		<view class="text-empty">暂无数据</view>
-	</view>
-
 	<view wx:else style="padding: 0rpx 24rpx">
 		<image src="https://p.pstatp.com/origin/ff4c00012a45f918338e" class="swiper-image" mode="aspectFill" style="margin-top:24rpx"></image>
 		<view wx:for-item="item" wx:for="{{cheapList}}" wx:key="index">
@@ -113,17 +108,6 @@
 			</view>
 			<page-list dataList="{{item.list}}"></page-list>
 		</view>
-		<view wx:if="{{taskList.length}}">
-			<view class="flex nav-li">
-				<view class="shadow">团购</view>
-				<view style="font-size:36rpx;color:white">专区</view>
-				<view class="v-driver"></view>
-				<view class="nav-title">大厂品牌 质量保证</view>
-			</view>
-		</view>
-		<!-- <view wx:for-item="pageItem" wx:for-index="pageIndex" wx:for="{{taskList}}" wx:key="pageIndex">
-		  <page-list dataList="{{pageItem}}"></page-list>
-		</view> -->
 		<!--加载更多的UI-->
 		<wux-divider>
 			<view class="loadmore">

pages/message/index.wxml

@@ -10,7 +10,7 @@
     <view class="text-empty" style="margin-top:48rpx">加载中...</view>
   </view>
   <view class="flex list-empty" wx:elif="{{!messageList.length}}" style="height:{{height}}rpx">
-    <image class="img-empty" src="/assets/image/list_empty.png"></image>
+    <image class="img-empty" src="/assets/image/icon_empty.svg"></image>
     <view class="text-empty">暂无消息</view>
   </view>
   <scroll-view scroll-y style="height:{{height}}rpx" bindscrolltolower="fetchMessageList" wx:else>