525 lines
14 KiB
Plaintext
525 lines
14 KiB
Plaintext
<template>
|
|
<div class="page">
|
|
<cover-view class="cover-view-center">
|
|
<div :style="{ height: `${sysheight-60}px`,width: width }" ref="touch" @click="clickVideo(index)" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
|
|
<div class="nav">
|
|
<image class="img-icon" :src="staticUrl + 'video/video_fanhui.png'" style="width: 64upx;" @click.stop="clickLeft"></image>
|
|
<div class="title-center">
|
|
<text class="title" :class="distanceX>0?'active-title':''" @click="click1"></text>
|
|
<text class="title" :class="distanceX==0?'active-title':''" @click="click0">{{videoByUserData.nickname}}</text>
|
|
<text class="title" :class="distanceX<0?'active-title':''" @click="click_1"></text>
|
|
</div>
|
|
</div>
|
|
<div class="cover-view-right" style="top: 380upx;">
|
|
<!-- 头像 -->
|
|
<image class="img" style="height: 100upx;" @click.stop="tapAvater"></image>
|
|
<!-- 关注 -->
|
|
<image class="img" style="height: 50upx;" @click.stop="tapAvaterLikes"></image>
|
|
<text class="right-text" style="margin-bottom: 10upx;"> </text>
|
|
<!-- 点赞 -->
|
|
<image class="img" @click.stop="tapLove"></image>
|
|
<text class="right-text" style="margin-bottom: 36upx;"> </text>
|
|
<!-- 评价 -->
|
|
<image class="img" @click.stop="tapMsg"></image>
|
|
<text class="right-text" style="margin-bottom: 25upx;"> </text>
|
|
<!-- 分享 -->
|
|
<image class="img" @click.stop="tapShare"></image>
|
|
<text class="right-text"> </text>
|
|
</div>
|
|
</div>
|
|
</cover-view>
|
|
|
|
<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(-distance/sysheight-idx)<=1">
|
|
<chunlei-video class="video" :src="item.video" :poster="item.image" :gDuration="item.duration"
|
|
:height="height" :width="width" :play="item.flag"
|
|
:objectFit="item.objectFit":initialTime="item.initialTime" @pause="pauseVideo">
|
|
</chunlei-video>
|
|
<cover-view class="cover-view-left">
|
|
<text class="left-text">@{{videoByUserData.nickname}}</text>
|
|
<text class="left-text">{{item.note}}</text>
|
|
</cover-view>
|
|
<cover-view class="cover-view-right">
|
|
<cover-image :src="videoByUserData.icon" class="avater img" @click.stop="tapAvater"></cover-image>
|
|
<text class="right-text"></text>
|
|
<cover-image :src="item.likeFlag && item.likeFlag >= 1?staticUrl + 'video/video_love.png':staticUrl + 'video/video_love_n.png'" class="img imgDianZan" @click.stop="tapLove"></cover-image>
|
|
<text class="right-text">{{item.likes}}</text>
|
|
<cover-image :src="staticUrl + 'video/video_noties.png'" class="img imgPinLun" @click.stop="tapMsg"></cover-image>
|
|
<text class="right-text">{{item.evaluationQuantity}}</text>
|
|
<cover-image :src="staticUrl + 'video/video_share.png'" class="img imgFenXiang" @click.stop="tapShare" style="opacity: 0;"></cover-image>
|
|
<text class="right-text" style="opacity: 0;">分享</text>
|
|
</cover-view>
|
|
</block>
|
|
</div>
|
|
</block>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import url from '@/common/http/url.js';
|
|
import publics from "@/common/utils/public.js"
|
|
import { sendRequest } from "@/common/http/api.js" // nvue 不能使用this.$http
|
|
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{
|
|
staticUrl: getApp().staticUrl,
|
|
videoNowIndex:0,//当前播放视频的下标
|
|
videoByUserData:{},
|
|
videoList:[],
|
|
videoList_1:[],
|
|
videoList1:[],
|
|
pages: "" // 从哪个页面进来 my-我的 user-用户个人中心 like-喜欢
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
let that = this;
|
|
if (opt.pages) this.pages = opt.pages
|
|
if (opt.id){
|
|
sendRequest("GET", url.interaction.getVideoDetailById, {id: opt.id}).then(res =>{
|
|
let data = res.data
|
|
data.flag = false
|
|
data.initialTime = 0
|
|
this.videoByUserData = data
|
|
this.videoList = [data]
|
|
//设置下标
|
|
this.$nextTick(()=>{
|
|
that.bindCurrentX(0,0) //滚动至n
|
|
that.videoNowIndex = 0;
|
|
})
|
|
})
|
|
}
|
|
},
|
|
created(){
|
|
//#ifdef APP-PLUS
|
|
plus.screen.lockOrientation("portrait-primary")
|
|
//隐藏subnvue
|
|
uni.getSubNVueById('commentUser').hide()
|
|
//#endif
|
|
this.init();
|
|
},
|
|
async mounted() {
|
|
this.videoPlay(this.index)
|
|
},
|
|
onHide(){
|
|
this.videoNoPay();
|
|
},
|
|
onBackPress() {
|
|
let pages = getCurrentPages();
|
|
let beforePage = pages[pages.length - 2];
|
|
if (this.pages === "my") {
|
|
beforePage.$vm.$refs.my.pageSize = 0
|
|
beforePage.$vm.$refs.my.videoList = []
|
|
beforePage.$vm.$refs.my.getVideoInit()
|
|
} else if (this.pages === "user") {
|
|
beforePage.$vm.pageSize = 0
|
|
beforePage.$vm.videoList = []
|
|
beforePage.$vm.getVideoInit()
|
|
} else if (this.pages === "like") {
|
|
beforePage.$vm.getLikeList('refresh')
|
|
}
|
|
return false
|
|
},
|
|
methods:{
|
|
async getByVideoIdMyMsgFlag(x,index,videoUserId,videoId){
|
|
let that = this;
|
|
let videoOneData = {};
|
|
if(x > 0){//同城
|
|
videoOneData = this.videoList1[index];
|
|
}else if(x == 0){//推荐
|
|
videoOneData = this.videoList[index];
|
|
}else{//关注
|
|
videoOneData = this.videoList_1[index];
|
|
}
|
|
|
|
let paremet = {videoUserId:videoUserId,videoId:videoId};
|
|
let res = await sendRequest("GET", url.interaction.getByVideoIdMyMsg, paremet)
|
|
let data = res.data
|
|
if(!data.videoLike){
|
|
data.videoLike = 0;
|
|
}
|
|
if(!data.likeAmount){
|
|
data.likeAmount = 0;
|
|
}
|
|
if(!data.videoUserLike){
|
|
data.videoUserLike = 0;
|
|
}
|
|
if(x > 0){//同城
|
|
this.videoList1[index].likeFlag = data.videoLike;
|
|
this.videoList1[index].likes = data.likeAmount;
|
|
this.videoList1[index].likeCheck = data.videoUserLike;
|
|
this.videoList1[index].evaluationQuantity = data.commentCount;
|
|
}else if(x == 0){//推荐
|
|
this.videoList[index].likeFlag = data.videoLike;
|
|
this.videoList[index].likes = data.likeAmount;
|
|
this.videoList[index].likeCheck = data.videoUserLike;
|
|
this.videoList[index].evaluationQuantity = data.commentCount;
|
|
}else{//关注
|
|
this.videoList_1[index].likeFlag = data.videoLike;
|
|
this.videoList_1[index].likes = data.likeAmount;
|
|
this.videoList_1[index].likeCheck = data.videoUserLike;
|
|
this.videoList_1[index].evaluationQuantity = data.commentCount;
|
|
}
|
|
},
|
|
videoNoPay(){
|
|
let flag = false
|
|
this.videoList_1.forEach((item)=>{
|
|
if(item.flag){
|
|
item.flag = false
|
|
flag = true
|
|
}
|
|
})
|
|
this.videoList1.forEach((item)=>{
|
|
if(item.flag){
|
|
item.flag = false
|
|
flag = true
|
|
}
|
|
})
|
|
this.videoList.forEach((item)=>{
|
|
if(item.flag){
|
|
item.flag = false
|
|
flag = true
|
|
}
|
|
})
|
|
/* this.videoList_1.forEach((item)=>item.flag=false)
|
|
this.videoList1.forEach((item)=>item.flag=false)
|
|
this.videoList.forEach((item)=>item.flag=false) */
|
|
},
|
|
getIndex(){
|
|
return this.videoNowIndex;
|
|
let listData = this.videoList;
|
|
for(let i=0;i<listData.length;i++){
|
|
if(listData[i].flag){
|
|
return i;
|
|
}
|
|
}
|
|
},
|
|
//设置参数
|
|
init(){
|
|
this.typeX = false //开启左右滑动
|
|
this.playCount = 2 //剩余多少视频加载视频列表
|
|
this.startDistance = 5 //判断左右上下拖动的启动距离 px
|
|
this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
|
|
this.backDistance = 200 //判断上下滑动的回弹距离 px
|
|
},
|
|
tapAvater(e){
|
|
e.stopPropagation();
|
|
console.log("头像");
|
|
this.videoNoPay()
|
|
uni.navigateTo({
|
|
url:'/pages/interaction/user?current=1&&userId='+this.videoList[0].imAccount
|
|
})
|
|
},
|
|
tapAvaterLikes(e){
|
|
e.stopPropagation();
|
|
console.log("关注");
|
|
let index = this.getIndex();
|
|
|
|
/* this.videoList[index].likeCheck = !this.videoList[index].likeCheck;
|
|
this.videoList = [...this.videoList]; */
|
|
},
|
|
tapLove(e){
|
|
e.stopPropagation();
|
|
console.log("点赞");
|
|
|
|
let index = this.getIndex();
|
|
let type = 0;
|
|
|
|
if(this.videoList[index].likeFlag >= 1){//取消点赞
|
|
type = 1;
|
|
this.videoList[index].likeFlag = 0;
|
|
this.videoList[index].likes -= 1;
|
|
}else{//点赞
|
|
this.videoList[index].likeFlag = 1;
|
|
this.videoList[index].likes += 1;
|
|
}
|
|
this.videoList = [...this.videoList];
|
|
|
|
publics.setDianZanTrueDatasJiLu(this.videoList[index].id,type);
|
|
this.likeByUserVideo(this.videoList[index].id,type);
|
|
},
|
|
//点赞
|
|
async likeByUserVideo(videoId, type) {
|
|
let res = await sendRequest('post', url.interaction.likeByVideo, {
|
|
videoId: videoId,
|
|
type: type
|
|
});
|
|
},
|
|
tapMsg(e){
|
|
e.stopPropagation();
|
|
console.log("评论");
|
|
//获取id
|
|
let index = this.getIndex();
|
|
let videoId = this.videoList[index].id;
|
|
uni.getSubNVueById('commentUser').show('none',0,()=>{
|
|
uni.$emit('showComment',{videoId:videoId,commentType:1})
|
|
});
|
|
},
|
|
tapShare(e){
|
|
e.stopPropagation();
|
|
console.log("分享");
|
|
},
|
|
//加载视频
|
|
async pushVideoList(){
|
|
let that = this;
|
|
if(this.videoByUserData.loadingType == "noMore"){
|
|
return;
|
|
}
|
|
|
|
let paremet = {userId:this.videoByUserData.userId,type:this.videoByUserData.type,pageSize:this.videoByUserData.pageNum||0};
|
|
sendRequest("GET", url.interaction.userVideoType, paremet).then(res =>{
|
|
let data = res.data
|
|
for(let i=0;i<data.length;i++){
|
|
//是否播放
|
|
data[i].flag = false;
|
|
//视频从0秒开始播放
|
|
data[i].initialTime = 0;
|
|
}
|
|
if(data && data.length > 0){
|
|
this.videoList = [...this.videoList,...data];
|
|
}
|
|
|
|
//判断是否还有数据
|
|
if(this.videoList.length >= parseInt(this.videoByUserData.number)){
|
|
this.videoByUserData.loadingType = "noMore";
|
|
}else{
|
|
this.videoByUserData.loadingType = "more";
|
|
}
|
|
this.videoByUserData.pageNum += 1;
|
|
})
|
|
},
|
|
clickRight(e){
|
|
e.stopPropagation();
|
|
let index = this.getIndex();
|
|
let videoId = this.videoList[index].id;
|
|
let that = this;
|
|
//编辑我的信息
|
|
uni.showActionSheet({
|
|
itemList: ['编辑信息', '删除视频'],
|
|
success: function (res) {
|
|
if(res.tapIndex == 0){//编辑视频
|
|
uni.navigateTo({
|
|
url: "/pages/video/sendVideo?videoId="+videoId
|
|
})
|
|
}else{//删除视频
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定删除该视频吗？',
|
|
success: res => {
|
|
if(res.confirm){
|
|
that.delVideo(videoId,index);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
fail: function (res) {
|
|
console.log(res.errMsg);
|
|
}
|
|
});
|
|
},
|
|
async delVideo(videoId,index){
|
|
uni.showLoading({
|
|
title: '删除中...'
|
|
});
|
|
setTimeout(function() {
|
|
//最多10秒
|
|
uni.hideLoading();
|
|
}, 1000*10);
|
|
|
|
let paremet = {videoId:videoId};
|
|
sendRequest("POST", url.interaction.delVideo, paremet).then(res =>{
|
|
let data = res.data
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "删除成功",
|
|
icon: "none"
|
|
})
|
|
//操作该视频去除掉
|
|
this.videoList[that.index].flag = false;
|
|
this.videoList[that.index].image = data.image;
|
|
this.videoList[that.index].video = data.video;
|
|
this.videoList[that.index].initialTime = 0;
|
|
})
|
|
},
|
|
clickLeft(e){
|
|
e.stopPropagation();
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-color: #000;
|
|
}
|
|
.swiper{
|
|
position: relative;
|
|
background-color: #000;
|
|
}
|
|
.left-div{
|
|
background-color: #000;
|
|
position: absolute;
|
|
top: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.right-div{
|
|
background-color: #000;
|
|
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: 80upx;
|
|
left: 30upx;
|
|
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: 100upx;
|
|
width: 100upx;
|
|
opacity: 0.9;
|
|
}
|
|
.imgDianZan{
|
|
height: 84upx;
|
|
width: 84upx;
|
|
margin-left: 10upx;
|
|
opacity: 0.9;
|
|
}
|
|
.imgPinLun{
|
|
height: 60upx;
|
|
width: 60upx;
|
|
margin-left: 20upx;
|
|
opacity: 0.9;
|
|
}
|
|
.imgFenXiang{
|
|
height: 75upx;
|
|
width: 75upx;
|
|
margin-left: 20upx;
|
|
opacity: 0.9;
|
|
}
|
|
.img-icon{
|
|
width: 50upx;
|
|
height: 50upx;
|
|
margin-top: 18upx;
|
|
}
|
|
.nav{
|
|
flex-direction: row;
|
|
height:200upx;
|
|
justify-content: space-between;
|
|
padding: 44px 15px 0;
|
|
}
|
|
.title{
|
|
line-height: 80upx;
|
|
color: #eee;
|
|
font-size: 18px;
|
|
}
|
|
.active-title{
|
|
border-bottom-width: 2px;
|
|
font-weight: bold;
|
|
border-style: solid;
|
|
border-bottom-color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
height: 40px;
|
|
}
|
|
.title-center{
|
|
flex-direction: row;
|
|
height: 45px;
|
|
}
|
|
</style>
|