Skip to content

T
TripFriend
Commit 6b44c43e authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent 3380ed97
Show whitespace changes
Inline Side-by-side
Showing with 418 additions and 24 deletions
pages/index/index.js
View file @ 6b44c43e
......@@ -371,7 +371,8 @@ Page({
ConfigId: 0,
TCID: this.data.optionTCID,
OrderId: userInfo.OrderId ? userInfo.OrderId : '',
CityId: userInfo.DepartureCityId ? userInfo.DepartureCityId : ''
CityId: userInfo.DepartureCityId ? userInfo.DepartureCityId : '',
GuestId: userInfo.GuestId ? userInfo.GuestId:0,
};
app.$api('b2b_get_GetMXYTravelIndexInfo', msg).then(res => {
wx.setStorageSync('tcid', res.tcid)
......
pages/video/video.js
View file @ 6b44c43e
// pages/video/video.js
Page({
/**
* 页面的初始数据
*/
data: {
videoDetail: '',
start: 0,
current: 0,
startTouch: '',
startNum: '0',
//其中的 视频url(videoUrl) 封面url(videoImageUrl) 头像url(headUrl) 的话大家自己填上就行
videoList: [{
"callState": "1",
"projectContent": "老鼠炸飞了(ಡωಡ)hiahiahia",
"employerId": "4224f6e674e346b4a675df4131253fbc",
"workCity": "北京市",
"workProvince": "北京市",
"videoUrl": "http://vt-im-bucket.oss-cn-chengdu.aliyuncs.com/New/Sale/Uploadvideo/CkAi7G8ZCE2YtZct5y2SzdtZrasFwWNP.mp4",
"projectState": "2",
"workCounty": "朝阳区",
"quickProjectWorkerTagName": "电工,接线,砌墙,钢结构",
"headUrl": "",
"projectId": "6f1121611a17418cb5d3860b551c9e19",
"createDate": "2019-08-22 19:06:39",
"reallyName": "大发发",
"videoImageUrl": ""
}, {
"callState": "1",
"projectContent": "哒哒哒任汝芬",
"employerId": "4224f6e674e346b4a675df4131253fbc",
"workCity": "北京市",
"workProvince": "北京市",
"videoUrl": "",
"projectState": "2",
"workCounty": "朝阳区",
"quickProjectWorkerTagName": "工装,图纸,塔吊,外墙保温,刮腻子",
"headUrl": "",
"projectId": "d3b43f21b84b4a75a3321e478f73161f",
"createDate": "2019-08-22 10:00:11",
"reallyName": "大发发",
"videoImageUrl": ""
}], //接口返回的视频列表。
touch: false,
touchStartTime: 0, //触摸开始时间
touchEndTime: 0, // 触摸结束时间
lastTapTime: 0, // 单击事件点击后要触发的函数
lastTapTimeoutFunc: null,
switchTo: true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
onLoad: function(options) {
var that = this;
var listTem = that.data.videoList;
for (var i = 0; i < listTem.length; i++) {
var arr = (listTem[i].quickProjectWorkerTagName).split(',')
// console.log(arr)
listTem[i].tagnamesArr = arr;
}
that.setData({
videoList: listTem
})
that.dataList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
onReady: function() {
this.videoContext = wx.createVideoContext('videoplayer');
this.setData({
updateState: true
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
onReachBottom: function() {
},
dataList: function() { //加载数据
var that = this;
wx.request({
url: '', //把这里换成自己的接口地址
data: {
userId: '',
start: '',
limit: 5
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function(res) {
console.log(res)
// console.log(res.data)
var listTem = that.data.videoList;
var dataList = res.data;
//添加新任务列表
that.setData({
videoList: listTem.concat(dataList)
})
if (res.data.length < 5) {
that.setData({
startNum: '0',
current: 0
})
}
}
})
},
// 下面主要模仿滑动事件
touchstart: function(e) {
this.setData({
touchStartTime: e.timeStamp,
showGuide: false
})
let startTouch = e.changedTouches[0]
this.setData({
startTouch: startTouch,
touch: false
})
},
touchmove: function(e) {
let Y = e.changedTouches[0].pageY - this.data.startTouch.pageY;
},
touchend: function(e) {
this.setData({
touchEndTime: e.timeStamp
})
this.getDirect(this.data.startTouch, e.changedTouches[0])
},
touchcancel: function(e) {
this.getDirect(this.data.startTouch, e.changedTouches[0])
},
// 计算滑动方向
getDirect: function(start, end) {
var X = end.pageX - start.pageX,
Y = end.pageY - start.pageY;
if (Math.abs(X) > Math.abs(Y) && X > 0) {
console.log("left 2 right");
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
console.log("right 2 left");
} else if (Math.abs(Y) > Math.abs(X) && Y > 40) {
if (this.data.current > 0) {
this.setData({
touch: true,
transitionOver: false
})
this.pre()
} else {
this.setData({
current: 0
})
}
} else if (Math.abs(Y) > Math.abs(X) && Y < -40) {
if (this.data.current < this.data.videoList.length - 2) {
this.setData({
touch: true
})
this.next()
} else {
var startNum = parseInt(this.data.startNum) + 5;
this.setData({
startNum: startNum,
})
this.dataList();
this.setData({
current: this.data.videoList.length - 1
})
}
}
},
// 播放上一个
pre: function() {
this.setData({
current: this.data.current - 1,
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
// 播放下一个
next: function() {
this.setData({
current: this.data.current + 1,
})
},
//点击暂停/开始
videoTap: function() {
//获取video
this.videoContext = wx.createVideoContext('videoplayer')
if (this.data.play) {
//开始播放
this.videoContext.play() //开始播放
this.setData({
play: false
})
} else {
//当play==false 显示图片 暂停
this.videoContext.pause() //暂停播放
this.setData({
play: true
})
}
},
//播放条时间改表触发
videoUpdate(e) {
if (this.data.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
let sliderValue = e.detail.currentTime / e.detail.duration * 100;
this.setData({
sliderValue: sliderValue,
duration: e.detail.duration
})
}
},
sliderChanging(e) {
this.setData({
updateState: false //拖拽过程中，不允许更新进度条
})
},
//拖动进度条触发事件
sliderChange(e) {
if (this.data.duration) {
this.videoContext.seek(e.detail.value / 100 * this.data.duration); //完成拖动后，计算对应时间并跳转到指定位置
this.setData({
sliderValue: e.detail.value,
updateState: true //完成拖动后允许更新滚动条
})
}
},
})
\ No newline at end of file
pages/video/video.json
View file @ 6b44c43e
{
"usingComponents": {}
"navigationBarTitleText": "视频详情",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"disableScroll": true
}
\ No newline at end of file
pages/video/video.wxml
View file @ 6b44c43e
<view class="f30 c99 center">
正在开发中请稍后
<view class="videoBox">
<view class="video {{touch==true? 'transfrom' : '' }}" style="transform:translateY(-{{current*100}}%);" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend' bindtouchcancel='touchcancel'>
<view wx:for="{{videoList}}" class='videoitem' wx:key="{{item}}">
<video src="{{item.videoUrl}}" id="videoplayer" bindtimeupdate="videoUpdate" bindtap='videoTap' wx:if="{{current==index}}" object-fit="contain" loop='{{true}}' autoplay='{{true}}' custom-cache="{{true}}" controls='{{false}}' show-progress="{{true}}" show-fullscreen-btn="{{false}}" show-play-btn="{{false}}"
show-center-play-btn="{{false}}" enable-progress-gesture="{{false}}" vslide-gesture-in-fullscreen="{{false}}" poster="{{item.videoImageUrl}}">
</video>
<!-- <image src="http://{{item.videoImageUrl}}" class="preImage" mode='aspectFit' lazy-load="{{true}}" wx:else></image> -->
<!-- 右侧区域 -->
<view class='btnBox {{switchTo?"show":"hide"}}'>
<view class='btnTx' bindtap='{{isFollow==0?"follow":""}}'>
<image class='TX' src='{{item.headUrl}}'></image>
<image class='followAdd {{isFollow==0?"show":"hide"}}' src='../../img/followAdd.png'></image>
</view>
<view class='btnCollect' bindtap='btnCollect'>
<image src='../../img/{{isCollect==1?"collect_H":"collect_B"}}.png'></image>
<text>收藏</text>
</view>
<button class='btnShare' open-type='share'>
<image src='../../img/share.png'></image>
<text>分享</text>
</button>
<view class='btnTelPhone {{oneself?"hide":"show"}}' bindtap='btnTelPhone'>
<image src='../../img/telPhone.png'></image>
<text>电话</text>
</view>
<view class='btnShut {{oneself?"show":"hide"}}' bindtap='btnShut'>
<image src='../../img/shut.png'></image>
<text>关闭</text>
</view>
</view>
<!-- 描述 -->
<view class='describe {{switchTo?"show":"hide"}}'>
<view class='nameAddr clearfix'>
<text class='fl' style="margin-right:10rpx">@{{item.reallyName}}</text>
<view class='fl addr clearfix'>
<image class='fl' src='../../img/position.png'></image>
<text class='fl'>{{item.workProvince}}{{item.workCity}}{{item.workCounty}}</text>
</view>
</view>
<text class="descText">{{item.projectContent}}</text>
<view class='labelS clearfix'>
<text wx:for='{{item.tagnamesArr}}' wx:key='{{item}}' wx:for-item="item">#{{item}}</text>
</view>
</view>
<!-- 播放暂停图标 请换成自己的路径 -->
<image class="playImg" src="../../img/icon_short.png" wx:if="{{play}}" bindtap='videoTap'></image>
<!-- 进度条 -->
<slider class='{{switchTo?"show":"hide"}}' bindchange="sliderChange" bindchanging="sliderChanging" step="1" block-size='10' value="{{sliderValue}}" backgroundColor="#797979" activeColor="#fff" />
</view>
</view>
</view>
pages/video/video.wxss
View file @ 6b44c43e
/* pages/video/video.wxss */
\ No newline at end of file
/**index.wxss**/
page{
height: 100%;
}
.fl{
float:left;
}
.fr{
float: right;
}
.hide{
display: none !important;
}
.show{
display: block;
}
.videoBox{
overflow: hidden;
height: 100%;
position: relative;
}
.video{
width: 100%;
height: 100%;
display: block;
position: absolute;
top:0;
left: 0;
}
.transfrom{
transition: transform 0.6s ease-out;
}
.videoitem{
height: 100%;
background:#000000;
position: relative;
}
.videoitem video{
width: 100%;
height: 100vh;
}
.preImage{
display: block;
width: 100%;
}
/* 右侧按钮 */
.btnBox{
width: 100rpx;
position: absolute;
right: -2%;
bottom: -2%;
transform: translate(-50%,-50%);
}
.btnBox image{
display: block;
}
.btnBox view,.btnBox button{
margin-bottom: 50rpx;
}
.btnBox button{
padding: 0;
background: transparent;
}
.btnBox view image,.btnBox button image{
margin: 0 auto;
}
.btnBox view text,.btnBox button text{
line-height: 50rpx;
font-size: 24rpx;
color: #fff;
text-align: center;
}
.btnBox .btnTx{
position: relative;
}
.btnBox .btnTx .TX{
width: 94rpx;
height: 94rpx;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
}
.btnBox .btnTx .followAdd{
width: 39rpx;
height: 39rpx;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%,-50%);
border-radius:50%;
overflow: hidden;
}
.btnBox .btnCollect image{
width: 54rpx;
height: 52rpx;
}
.btnBox .btnShare image{
width: 54rpx;
height: 43rpx;
}
.btnBox .btnTelPhone image{
width: 45rpx;
height: 47rpx;
}
.btnBox .btnShut image{
width: 49rpx;
height: 49rpx;
}
/* 详情描述 */
.describe{
position: absolute;
width:75%;
left:5%;
bottom:12%;
}
.describe .nameAddr text{
font-size: 30rpx;
line-height: 58rpx;
color: #fff;
}
.describe .addr image{
width: 22rpx;
height: 28rpx;
margin: 15rpx 10rpx 0 0;
}
.describe .descText{
font-size: 28rpx;
color: #fff;
line-height: 38rpx;
}
.describe .labelS text{
float: left;
font-size: 28rpx;
color: #fff;
line-height: 48rpx;
margin-right: 10rpx;
}
slider{
display: 100%;
width: 100%;
position: absolute;
bottom: 8%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment