libo
/
page-mall-mini
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

视频播放

master
xpz2018 5 years ago
parent
e214543b1c
commit
d794f1212c
7 changed files with 99 additions and 215 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 152
      components/swiper-video/index.js
  2. 6
      components/swiper-video/index.json
  3. 18
      components/swiper-video/index.wxml
  4. 32
      components/swiper-video/index.wxss
  5. 82
      pages/mall/order-info/index.js
  6. 4
      pages/mall/order-info/index.json
  7. 20
      pages/mall/order-info/index.wxml

152
components/swiper-video/index.js
View File

@ -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();
}
})

6
components/swiper-video/index.json
View File

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

18
components/swiper-video/index.wxml
View File

@ -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>

32
components/swiper-video/index.wxss
View File

@ -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;
}

82
pages/mall/order-info/index.js
View File

@ -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

4
pages/mall/order-info/index.json
View File

@ -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"
}
}

20
pages/mall/order-info/index.wxml
View File

@ -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>
Write Preview
Loading…
Cancel
Save