<template>
|
<div class="page">
|
<div class="cover-view-center" v-if="distanceX==0">
|
<div :style="{ height: `${sysheight-60}px`,width: width }" ref="touch" @click="clickVideo(index)" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
|
<div class="cover-view-right" v-if="distanceX==0">
|
<image class="img" @click.stop="tapAvater"></image>
|
<text class="right-text"> </text>
|
<image class="img" @click.stop="tapLove"></image>
|
<text class="right-text"> </text>
|
<image class="img" @click.stop="tapMsg"></image>
|
<text class="right-text"> </text>
|
<image class="img" @click.stop="tapShare"></image>
|
<text class="right-text"> </text>
|
</div>
|
</div>
|
</div>
|
<div class="swiper" ref="swiper">
|
<block v-for="(item, idx) in videoList" :key="idx">
|
<div class="video-box" :style="{ height: height }">
|
<!-- 视频渲染数预加载数影响性能 -->
|
<block v-if="Math.abs(index-idx)<=1">
|
<chunlei-video class="video" :src="item.src" :height="height" :width="width"
|
:play="item.flag" :gDuration="item.duration" :objectFit="item.objectFit"
|
:initialTime="item.initialTime" @pause="pauseVideo" :rotateImg="`//static/avatar.png`" :danmuList="danmuList"
|
>
|
</chunlei-video>
|
<cover-view class="cover-view-left">
|
<text class="left-text">@{{item.at}}</text>
|
<text class="left-text">{{item.content}}</text>
|
</cover-view>
|
<cover-view class="cover-view-right">
|
<cover-image :src="item.avater" class="avater img" @click.stop="tapAvater"></cover-image>
|
<text class="right-text-avater">+</text>
|
<text class="right-text"></text>
|
<cover-image :src="item.check?'../../static/aixinRed.png':'../../static/aixin.png'" class="img" @click.stop="tapLove"></cover-image>
|
<text class="right-text">{{item.like}}</text>
|
<cover-image src="../../static/xiaoxi.png" class="img" @click.stop="tapMsg"></cover-image>
|
<text class="right-text">{{item.comment}}</text>
|
<cover-image src="../../static/share-fill.png" class="img" @click.stop="tapShare"></cover-image>
|
<text class="right-text">分享</text>
|
</cover-view>
|
|
</block>
|
</div>
|
|
</block>
|
</div>
|
|
<div class="left-div" :style="{ height: height,width: width,left:`${-parseInt(width)}px` }" ref="left" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
|
<text class="title-text" @click="clickbt">{{videoList[index].at}}</text>
|
</div>
|
<div class="right-div" :style="{ height: height,width: width,right:`${-parseInt(width)}px` }" ref="right" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
|
<text class="title-text">{{videoList[index].content}}</text>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import chunleiVideo from '../../components/chunlei-video/chunlei-video';
|
import scrollMixins from './scrollMixins';
|
const BindingX = uni.requireNativePlugin('bindingx');
|
const animation = weex.requireModule('animation');
|
const modal = weex.requireModule('modal');
|
|
export default {
|
mixins:[scrollMixins],
|
components:{
|
chunleiVideo
|
},
|
data(){
|
return{
|
danmuList:[
|
{text: '发条弹幕0',color: '#fff',time: 2,avatar:'../../static/avatar.png'},
|
{text: '发条弹幕1',color: '#fff',time: 3,avatar:'../../static/avatar.png'},
|
{text: '发条弹幕2',color: '#fff',time: 5,avatar:'../../static/avatar.png'},
|
{text: '发条弹幕3',color: '#fff',time: 6,avatar:'../../static/avatar.png'},
|
],
|
videoList:[
|
{
|
src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164015&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
|
content:'为什么要选择uni-app？',
|
flag:true,
|
check:false,
|
like:'10w',
|
comment:'1045',
|
avater:'../../static/logo.png',
|
initialTime:20,
|
at:'Dcloud',
|
duration:841,
|
objectFit:'fill'
|
},
|
{
|
src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=129764&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
|
content:'广告有反转：危机感十足！一辆车都比你靠谱',
|
flag:false,
|
check:true,
|
like:'7w',
|
comment:'1045',
|
avater:'http://img.kaiyanapp.com/e44ed5fcfa424ba35761ce5f1339bc16.jpeg?imageMogr2/quality/60/format/jpg',
|
initialTime:0,
|
at:'欧美广告精选',
|
duration:149
|
},
|
{
|
src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164111&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
|
content:'无辣不欢，你没见过小龙虾的大场面',
|
flag:false,
|
check:false,
|
like:'7w',
|
comment:'1045',
|
avater:'http://img.kaiyanapp.com/7af2bb1bc134fb1115d48f05e9d317f0.jpeg?imageMogr2/quality/60/format/jpg',
|
initialTime:0,
|
at:'世界美食荟萃',
|
duration:1162
|
},
|
]
|
}
|
},
|
created(){
|
this.init()
|
//隐藏subnvue
|
uni.getSubNVueById('comment').hide()
|
uni.getSubNVueById('input-box').hide()
|
},
|
async mounted() {
|
//this.videoPlay(this.index)
|
await this.pushVideoList()
|
this.$nextTick(()=>{
|
this.videoPlay(this.index)
|
})
|
},
|
onLoad(e){
|
var dataForm = JSON.parse((e.detailData));
|
this.videoList = [
|
{
|
src: dataForm.videoUrl,
|
content:dataForm.title,
|
flag:false,
|
check:false,
|
like:'10w',
|
comment:'1045',
|
avater:'../../static/logo.png',
|
initialTime:0,
|
at:dataForm.sourceName,
|
duration:5,
|
}];
|
console.log("ccccc"+ dataForm)
|
},
|
onShow(){
|
this.videoPlay(this.index)
|
},
|
onHide(){
|
for (let item of this.videoList) {
|
item.flag = false
|
}
|
},
|
methods:{
|
clickbt(){
|
console.log(11)
|
},
|
//设置参数
|
init(){
|
this.typeX = true //开启左右滑动
|
this.playCount = 2 //剩余多少视频加载视频列表
|
this.startDistance = 5 //判断左右上下拖动的启动距离 px
|
this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
|
this.backDistance = 200 //判断上下滑动的回弹距离 px
|
},
|
pushVideoList(){
|
let promise = new Promise((resolve,reject)=>{
|
uni.request({
|
url: 'https://api.apiopen.top/videoRecommend?id=127397',
|
success: (res) => {
|
let videoGroup = []
|
for (let item of res.data.result) {
|
if(item.type == 'videoSmallCard'){
|
videoGroup.push({
|
src:item.data.playUrl,
|
content:item.data.title,
|
flag:false,
|
check:false,
|
like:'7w',
|
comment:'1045',
|
at:item.data.author.name,
|
avater:item.data.author.icon,
|
initialTime:0,
|
duration:item.data.duration
|
})
|
}
|
}
|
this.videoList = [...this.videoList,...videoGroup]
|
|
resolve()
|
}
|
})
|
})
|
return promise
|
},
|
tapLove(e){
|
e.stopPropagation();
|
if(this.distanceX!=0) return
|
this.videoList[this.index].check = !this.videoList[this.index].check
|
this.videoList = [...this.videoList]
|
},
|
tapAvater(e){
|
e.stopPropagation();
|
if(this.distanceX!=0) return
|
uni.showToast({
|
icon:'none',
|
title:`点击索引为${this.index}的头像`
|
})
|
},
|
tapMsg(e){
|
e.stopPropagation();
|
if(this.distanceX!=0) return
|
uni.getSubNVueById('comment').show('none',0,()=>{
|
uni.$emit('showComment',this.videoList[this.index].content)
|
});
|
},
|
tapShare(e){
|
e.stopPropagation();
|
if(this.distanceX!=0) return
|
uni.showToast({
|
icon:'none',
|
title:`分享索引为${this.index}的视频`
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page{
|
flex: 1;
|
overflow: hidden;
|
position: relative;
|
}
|
.swiper{
|
position: relative;
|
background-color: #000;
|
}
|
.left-div{
|
position: absolute;
|
top: 0;
|
justify-content: center;
|
align-items: center;
|
}
|
.right-div{
|
position: absolute;
|
top: 0;
|
justify-content: center;
|
align-items: center;
|
}
|
.title-text{
|
font-size: 16px;
|
color: #000000;
|
}
|
.video-box{
|
position: relative;
|
background-color: #000;
|
}
|
.cover-view-center{
|
|
position: fixed;
|
justify-content: center;
|
align-items: center;
|
|
z-index: 999;
|
}
|
.cover-view-top{
|
position: fixed;
|
width: 750rpx;
|
height: 150px;
|
overflow: hidden;
|
}
|
.cover-view-left{
|
position: absolute;
|
margin-left: 10upx;
|
width: 500upx;
|
bottom: 200upx;
|
z-index: 9999;
|
font-size: 16px;
|
color: #FFFFFF;
|
}
|
.left-text{
|
font-size: 16px;
|
color: #FFFFFF;
|
margin-bottom: 20upx;
|
}
|
.avater{
|
border-radius: 50upx;
|
border-color: #fff;
|
border-style: solid;
|
border-width: 2px;
|
}
|
|
.cover-view-right{
|
position: absolute;
|
top: 400upx;
|
right: 20upx;
|
z-index: 9999;
|
}
|
.right-text-avater{
|
position: absolute;
|
font-size: 14px;
|
top: 50upx;
|
left: 17upx;
|
height: 40upx;
|
width: 40upx;
|
background-color: #DD524D;
|
color: #FFFFFF;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 40upx;
|
z-index: 999;
|
}
|
|
.avater-icon{
|
height: 40upx;
|
width: 40upx;
|
|
color: #fff;
|
background-color: #DD524D;
|
border-radius: 50%;
|
position: absolute;
|
left: 30upx;
|
top:-20upx;
|
}
|
|
.right-text{
|
text-align: center;
|
font-size: 14px;
|
color: #FFFFFF;
|
margin-bottom: 50upx;
|
height: 20px;
|
}
|
.img{
|
height: 74upx;
|
width: 74upx;
|
opacity: 0.9;
|
}
|
</style>
|
