<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="tapCollect"></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="item.iscollect?'../../static/collectred.png':'../../static/collect.png'"
|
class="img" @click.stop="tapCollect"></cover-image>
|
<text class="right-text">{{item.collect}}</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 that = this;
|
var dataForm = JSON.parse((e.detailData));
|
that.videoList = []
|
//获取新闻数据
|
this.rolename = this.$store.state.UserData.role_name;
|
this.userid = this.$store.state.UserData.user_id;
|
var url = that.$store.state.piAPI + '/article/article/pageLikes';
|
if(dataForm.collectTo){
|
url = that.$store.state.piAPI + '/article/article/pageCollect';
|
}
|
|
uni.request({
|
url: url,
|
method: 'GET',
|
data: {
|
rolename: that.rolename, //帐号角色
|
userid: that.userid,
|
current: 1,
|
size: 99999,
|
articleType: "ksp"
|
},
|
success: (res) => {
|
if (res.data.code == 200) {
|
var data = res.data.data.records;
|
var x = 0;
|
for (var i = 0; i < data.length; i++) {
|
var flag = false;
|
var check = data[i].islikes == "1"?true:false;
|
var like = data[i].count == null?0:Number(data[i].count);
|
var iscollect = data[i].iscollect == "1"?true:false;
|
var collect = data[i].collectcount == null?0:Number(data[i].collectcount);
|
var comment = data[i].comments == null?0:Number(data[i].comments);
|
if (data[i].id == dataForm.id) {
|
x = 1;
|
flag = true;
|
}
|
if (x == 1) {
|
that.videoList.push({
|
id: data[i].id,
|
iscomment:data[i].iscomment,
|
userid: that.userid,
|
src: data[i].videoUrl,
|
content: data[i].title,
|
flag: flag,
|
check: check,
|
like: like,
|
iscollect: iscollect,
|
collect: collect,
|
comment: comment,
|
avater: '../../static/logo.png',
|
initialTime: 0,
|
at: data[i].sourceName,
|
duration: 5,
|
});
|
flag = false;
|
}
|
}
|
}
|
}
|
});
|
},
|
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) {
|
var that = this;
|
e.stopPropagation();
|
if (this.distanceX != 0) return
|
if(this.videoList[this.index].check){
|
this.videoList[this.index].like = this.videoList[this.index].like - 1;
|
uni.request({
|
url: that.$store.state.piAPI + 'likes/likes/removelikes',
|
method: 'POST',
|
data: {
|
likesUser: that.userid,
|
likesArticle: that.videoList[that.index].id
|
},
|
success: (res) => {
|
|
}
|
});
|
|
}else{
|
this.videoList[this.index].like = this.videoList[this.index].like + 1;
|
uni.request({
|
url: that.$store.state.piAPI + 'likes/likes/submit',
|
method: 'POST',
|
data: {
|
likesUser: that.userid,
|
likesArticle: that.videoList[that.index].id
|
},
|
success: (res) => {
|
|
}
|
});
|
}
|
|
this.videoList[this.index].check = !this.videoList[this.index].check
|
this.videoList = [...this.videoList]
|
},
|
tapCollect(e) {
|
var that = this;
|
e.stopPropagation();
|
if (this.distanceX != 0) return
|
if(this.videoList[this.index].iscollect){
|
this.videoList[this.index].collect = this.videoList[this.index].collect - 1;
|
uni.request({
|
url: that.$store.state.piAPI + 'collect/collect/removecollect',
|
method: 'POST',
|
data: {
|
collectUser: that.userid,
|
collectArticle: that.videoList[that.index].id
|
},
|
success: (res) => {
|
|
}
|
});
|
|
}else{
|
this.videoList[this.index].collect = this.videoList[this.index].collect + 1;
|
uni.request({
|
url: that.$store.state.piAPI + 'collect/collect/submit',
|
method: 'POST',
|
data: {
|
collectUser: that.userid,
|
collectArticle: that.videoList[that.index].id
|
},
|
success: (res) => {
|
|
}
|
});
|
}
|
|
this.videoList[this.index].iscollect = !this.videoList[this.index].iscollect
|
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
|
console.log(this.videoList[this.index])
|
if(this.videoList[this.index].iscomment == "0" || this.videoList[this.index].iscomment == ""){
|
uni.showToast({
|
icon: 'none',
|
title: `当前视频不支持评论`
|
});
|
return;
|
}
|
uni.getSubNVueById('comment').show('none', 0, () => {
|
uni.$emit('showComment', this.videoList[this.index])
|
});
|
},
|
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>
|
