715 lines
19 KiB
Vue
Executable File
715 lines
19 KiB
Vue
Executable File
<template>
|
|
<view style="flex: 1">
|
|
<list
|
|
:pagingEnabled="true"
|
|
:show-scrollbar="false"
|
|
@scroll="listScroll"
|
|
@scrollend="scroll"
|
|
:scrollable="true">
|
|
<cell
|
|
:recycle="false"
|
|
v-for="(item, index) in playerList"
|
|
:key="index"
|
|
:data-index="index"
|
|
:style="{ height: screenHeight + 'px' }">
|
|
<video
|
|
ref="videoDetail"
|
|
id="videoDetail"
|
|
:object-fit="item.width >= item.height ? 'contain' : 'fill'"
|
|
:src="item.url"
|
|
:controls="false"
|
|
:enable-progress-gesture="false"
|
|
v-if="playerCur === index"
|
|
loop
|
|
autoplay
|
|
show-loading="true"
|
|
style="width: 750rpx"
|
|
:style="{ height: screenHeight + 'px' }"
|
|
@click="playOrPause"
|
|
@play="onplay"
|
|
@error="onerror"
|
|
@timeupdate="timeupdate"></video>
|
|
<image
|
|
:lazy-load="true"
|
|
:fade-show="false"
|
|
v-if="!item.play"
|
|
:src="item.cover"
|
|
:mode="item.width >= item.height ? 'aspectFit' : 'scaleToFill'"
|
|
style="width: 750rpx; filter: blur(10px)"
|
|
:style="{ height: screenHeight + 'px' }"></image>
|
|
<view class="publish-info-box">
|
|
<view class="">
|
|
<text class="publish-info-vloger-name">@{{ item.vlogerName }}</text>
|
|
<text class="publish-info-content">{{ item.content }}</text>
|
|
<view class="publish-info-music-box">
|
|
<image
|
|
src="/static/images/icon-fire.png"
|
|
class="icon-fire"></image>
|
|
<text class="muisc-words">{{ item.vlogerName }}的原声创作</text>
|
|
</view>
|
|
</view>
|
|
<view class="" style="flex-direction: row">
|
|
<image src="/static/images/cd-play-4.gif"
|
|
style="width: 150rpx;height: 150rpx;opacity: 0.8;"></image>
|
|
<image
|
|
v-if="!isIOS"
|
|
src="/static/images/icon-cd.png"
|
|
class="play-cd"
|
|
style="width: 120rpx; height: 120rpx"></image>
|
|
<image
|
|
v-if="isIOS"
|
|
:src="
|
|
'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' +
|
|
times
|
|
"
|
|
class="play-cd"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 视频展示右侧的操作按钮, 头像 - 点赞 - 评论 - 转发 -->
|
|
<view class="operation-box">
|
|
<view class="operation-face-box">
|
|
<image
|
|
:src="item.vlogerFace"
|
|
class="user-face"
|
|
@click="goUserInfoSeeSee(item.vlogerId)"></image>
|
|
</view>
|
|
<image
|
|
v-if="!item.doIFollowVloger && userId != item.vlogerId"
|
|
src="/static/images/icon-follow.png"
|
|
@click="followMe(item.vlogerId)"
|
|
class="follow-me"></image>
|
|
<view class="like-box">
|
|
<image
|
|
v-if="!item.doILikeThisVlog"
|
|
src="/static/images/icon-unlike.png"
|
|
@click="likeOrDislikeVlog(1)"
|
|
class="icon"></image>
|
|
<image
|
|
v-if="item.doILikeThisVlog"
|
|
src="/static/images/icon-like.png"
|
|
@click="likeOrDislikeVlog(0)"
|
|
class="icon"></image>
|
|
<text class="some-counts">{{ item.likeCounts }}</text>
|
|
</view>
|
|
<view class="comment-and-share-box">
|
|
<image
|
|
src="/static/images/icon-comments.png"
|
|
@click="commentToggle"
|
|
class="icon"></image>
|
|
<text class="some-counts">{{ thisVlogTotalComentCounts }}</text>
|
|
</view>
|
|
<view class="comment-and-share-box">
|
|
<image
|
|
src="/static/images/icon-share.png"
|
|
@click="shareToggle"
|
|
class="icon"></image>
|
|
<text class="some-counts">分享</text>
|
|
</view>
|
|
</view>
|
|
</cell>
|
|
</list>
|
|
<!-- </uni-list> -->
|
|
|
|
<view v-if="thisVlog != null && thisVlog != {}">
|
|
<uni-popup ref="comment" type="comment">
|
|
<uni-popup-comments
|
|
:thisVlogerId="thisVlogerId"
|
|
:thisVlogId="thisVlogId"></uni-popup-comments>
|
|
</uni-popup>
|
|
<uni-popup ref="share" background-color="#fff" type="share">
|
|
<uni-popup-share
|
|
:thisVlogerId="thisVlogerId"
|
|
:thisVlogId="thisVlogId"
|
|
:vlogUrl="thisVlog.url"
|
|
:isPrivate="thisVlog.isPrivate"></uni-popup-share>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let app = getApp();
|
|
|
|
|
|
|
|
export default {
|
|
props: {
|
|
screenHeight: {
|
|
default: 0,
|
|
},
|
|
src: {
|
|
default: false,
|
|
},
|
|
playStatus: {
|
|
default: false,
|
|
},
|
|
vlogId: {
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
thisVlog: {}, // 当前的短视频对象
|
|
thisVlogId: "", // 当前的短视频主键id
|
|
thisVlogerId: "", // 当前的短视频博主的主键id
|
|
userId: "",
|
|
|
|
playerCur: 0,
|
|
page: 0,
|
|
totalPage: 0,
|
|
// videoList:[
|
|
// {
|
|
// width:750,//视频宽
|
|
// height:300,//视频高
|
|
// play:true, // 是否自动播放
|
|
// cover:'/static/video/c1.jpg', //首帧图
|
|
// url:'/static/video/v1.mp4', // 视频地址
|
|
// vlogerName:'我是vlogerName', // 博主名称
|
|
// vlogerFace: '/static/face/face-cat.png', // 博主头像
|
|
// content:'我是content', //视频内容
|
|
// vlogerId:123,//博主id
|
|
// doIFollowVloger:false, //是否关注博主
|
|
// doILikeThisVlog:false, //是否喜欢视频
|
|
|
|
// }
|
|
// ],
|
|
playerList: this.videoList,
|
|
thisVlogTotalComentCounts: 0,
|
|
|
|
videoContext: {},
|
|
currentIndex: 0,
|
|
contentOffsetY: 0,
|
|
times: new Date().getTime(),
|
|
objectFit: "fill",
|
|
isIOS: uni.getSystemInfoSync().platform == "ios",
|
|
};
|
|
},
|
|
created() {
|
|
if (!this.isIOS) {
|
|
this.objectFit = "cover";
|
|
}
|
|
let myUserInfo = getApp().getUserInfoSession();
|
|
if (!app.isStrEmpty(myUserInfo)) {
|
|
this.userId = myUserInfo.id;
|
|
}
|
|
// 查询首页短视频列表
|
|
this.displayVideoPaging(this.page + 1, true);
|
|
let videoContext = uni.createVideoContext("videoDetail");
|
|
this.videoContext = videoContext;
|
|
},
|
|
watch: {
|
|
refreshList(value) {
|
|
let me = this;
|
|
let newList = value;
|
|
if (newList != null && newList != undefined && newList.length > 0) {
|
|
me.playerList = newList;
|
|
}
|
|
|
|
// 重置
|
|
this.playerCur = 0;
|
|
this.currentIndex = 0;
|
|
this.contentOffsetY = 0;
|
|
},
|
|
playStatus: function (val) {
|
|
let me = this;
|
|
if (!val) {
|
|
me.videoContext.pause();
|
|
} else {
|
|
me.videoContext.play();
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
// 喜欢, 点赞的list重新设置
|
|
reLikePlayList(vlogId) {
|
|
let me = this;
|
|
let playerList = me.playerList;
|
|
for (let i = 0; i < playerList.length; i++) {
|
|
let vlog = playerList[i];
|
|
if (vlog.vlogId == vlogId) {
|
|
vlog.doILikeThisVlog = true;
|
|
playerList.splice(i, 1, vlog);
|
|
}
|
|
}
|
|
me.playerList = playerList;
|
|
},
|
|
reDislikePlayList(vlogId) {
|
|
let me = this;
|
|
let playerList = me.playerList;
|
|
for (let i = 0; i < playerList.length; i++) {
|
|
let vlog = playerList[i];
|
|
if (vlog.vlogId == vlogId) {
|
|
vlog.doILikeThisVlog = false;
|
|
playerList.splice(i, 1, vlog);
|
|
}
|
|
}
|
|
me.playerList = playerList;
|
|
},
|
|
|
|
reChangeVlogLikedCountsInPlayList(vlogId, counts) {
|
|
let me = this;
|
|
let playerList = me.playerList;
|
|
for (let i = 0; i < playerList.length; i++) {
|
|
let vlog = playerList[i];
|
|
if (vlog.vlogId == vlogId) {
|
|
vlog.likeCounts = counts;
|
|
playerList.splice(i, 1, vlog);
|
|
}
|
|
}
|
|
me.playerList = playerList;
|
|
},
|
|
|
|
refreshVlogCounts() {
|
|
// 查询当前点赞数, 重新赋值给当前视频
|
|
let me = this;
|
|
let serverUrl = app.globalData.serverUrl;
|
|
let currentIndex = me.playerCur;
|
|
let vlog = me.playerList[currentIndex];
|
|
uni.request({
|
|
method: "POST",
|
|
url: serverUrl + "/vlog/totalLikedCounts?vlogId=" + vlog.vlogId,
|
|
success(result) {
|
|
if (result.data.status == 2095) {
|
|
let counts = result.data.data;
|
|
me.reChangeVlogLikedCountsInPlayList(vlog.vlogId, counts);
|
|
} else {
|
|
uni.showToast({
|
|
title: result.data.msg,
|
|
duration: 3000,
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
likeOrDislikeVlog(isLike) {
|
|
let me = this;
|
|
if (isLike == 1) {
|
|
// 点赞视频
|
|
let myUserInfo = getApp().getUserInfoSession();
|
|
if (app.isStrEmpty(myUserInfo)) {
|
|
uni.showToast({
|
|
duration: 3000,
|
|
title: "请登录后再进行操作~",
|
|
icon: "none",
|
|
});
|
|
uni.navigateTo({
|
|
url: "../loginRegist/loginRegist",
|
|
animationType: "slide-in-bottom",
|
|
success() {
|
|
me.loginWords = "请登录";
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
|
|
let userId = myUserInfo.id;
|
|
let serverUrl = app.globalData.serverUrl;
|
|
let currentIndex = me.playerCur;
|
|
let vlog = me.playerList[currentIndex];
|
|
uni.request({
|
|
method: "POST",
|
|
header: {
|
|
headerUserId: userId,
|
|
headerUserToken: app.getUserSessionToken(),
|
|
},
|
|
url:
|
|
serverUrl +
|
|
"/vlog/like?userId=" +
|
|
userId +
|
|
"&vlogerId=" +
|
|
vlog.vlogerId +
|
|
"&vlogId=" +
|
|
vlog.vlogId,
|
|
success(result) {
|
|
if (result.data.status == 2093) {
|
|
me.reLikePlayList(vlog.vlogId);
|
|
me.refreshVlogCounts();
|
|
} else {
|
|
uni.showToast({
|
|
title: result.data.msg,
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
}
|
|
},
|
|
});
|
|
} else if (isLike == 0) {
|
|
let myUserInfo = getApp().getUserInfoSession();
|
|
if (app.isStrEmpty(myUserInfo)) {
|
|
uni.showToast({
|
|
duration: 3000,
|
|
title: "请登录后再进行操作~",
|
|
icon: "none",
|
|
});
|
|
uni.navigateTo({
|
|
url: "../loginRegist/loginRegist",
|
|
animationType: "slide-in-bottom",
|
|
success() {
|
|
me.loginWords = "请登录";
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
|
|
let userId = myUserInfo.id;
|
|
let serverUrl = app.globalData.serverUrl;
|
|
let currentIndex = me.playerCur;
|
|
let vlog = me.playerList[currentIndex];
|
|
uni.request({
|
|
method: "POST",
|
|
header: {
|
|
headerUserId: userId,
|
|
headerUserToken: app.getUserSessionToken(),
|
|
},
|
|
url:
|
|
serverUrl +
|
|
"/vlog/unlike?userId=" +
|
|
userId +
|
|
"&vlogerId=" +
|
|
vlog.vlogerId +
|
|
"&vlogId=" +
|
|
vlog.vlogId,
|
|
success(result) {
|
|
if (result.data.status == 2094) {
|
|
me.reDislikePlayList(vlog.vlogId);
|
|
me.refreshVlogCounts();
|
|
} else {
|
|
uni.showToast({
|
|
title: result.data.msg,
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
// 关注后的list重新设置
|
|
reFollowPlayList(vlogerId) {
|
|
let me = this;
|
|
let playerList = me.playerList;
|
|
for (let i = 0; i < playerList.length; i++) {
|
|
let vlog = playerList[i];
|
|
if (vlog.vlogerId == vlogerId) {
|
|
vlog.doIFollowVloger = true;
|
|
playerList.splice(i, 1, vlog);
|
|
}
|
|
}
|
|
me.playerList = playerList;
|
|
},
|
|
// 取关后的list重新设置
|
|
reCancelPlayList(vlogerId) {
|
|
let me = this;
|
|
let playerList = me.playerList;
|
|
for (let i = 0; i < playerList.length; i++) {
|
|
let vlog = playerList[i];
|
|
if (vlog.vlogerId == vlogerId) {
|
|
vlog.doIFollowVloger = false;
|
|
playerList.splice(i, 1, vlog);
|
|
}
|
|
}
|
|
me.playerList = playerList;
|
|
},
|
|
// 关注博主
|
|
followMe(vlogerId) {
|
|
let me = this;
|
|
let myUserInfo = getApp().getUserInfoSession();
|
|
if (app.isStrEmpty(myUserInfo)) {
|
|
uni.showToast({
|
|
duration: 3000,
|
|
title: "请登录后再进行操作~",
|
|
icon: "none",
|
|
});
|
|
|
|
uni.navigateTo({
|
|
url: "../loginRegist/loginRegist",
|
|
animationType: "slide-in-bottom",
|
|
success() {
|
|
me.loginWords = "请登录";
|
|
},
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
let userId = myUserInfo.id;
|
|
let serverUrl = app.globalData.serverUrl;
|
|
uni.request({
|
|
method: "POST",
|
|
header: {
|
|
headerUserId: userId,
|
|
headerUserToken: app.getUserSessionToken(),
|
|
},
|
|
url:
|
|
serverUrl + "/fans/follow?myId=" + userId + "&vlogerId=" + vlogerId,
|
|
success(result) {
|
|
if (result.data.status == 208) {
|
|
me.reFollowPlayList(vlogerId);
|
|
} else {
|
|
uni.showToast({
|
|
title: result.data.msg,
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
goUserInfoSeeSee(userId) {
|
|
// 是否是当前登录的用户
|
|
let myUserId = "";
|
|
if (!app.isStrEmpty(app.getUserInfoSession())) {
|
|
myUserId = app.getUserInfoSession().id;
|
|
}
|
|
if (myUserId == userId) {
|
|
uni.switchTab({
|
|
url: "/pages/me/me",
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/me/vlogerInfo?userPageId=" + userId,
|
|
});
|
|
}
|
|
},
|
|
downloadVlog() {
|
|
var me = this;
|
|
var serverUrl = app.globalData.serverUrl;
|
|
var currentIndex = me.playerCur;
|
|
var vlog = me.playerList[currentIndex];
|
|
var pendingLength = vlog.url;
|
|
},
|
|
|
|
onplay: function (e) {
|
|
if (uni.getSystemInfoSync().platform == "ios") {
|
|
this.doplay(0.1);
|
|
}
|
|
},
|
|
timeupdate: function (e) {
|
|
if (e.detail.currentTime > 0.2) {
|
|
this.doplay(e.detail.currentTime);
|
|
}
|
|
},
|
|
|
|
playOrPause() {
|
|
let me = this;
|
|
let playStatus = this.playStatus;
|
|
|
|
if (!playStatus) {
|
|
me.videoContext.pause();
|
|
} else {
|
|
me.videoContext.play();
|
|
}
|
|
this.playStatus = !playStatus;
|
|
},
|
|
|
|
displayVideoPaging(page, needClearList) {
|
|
let me = this;
|
|
let vlogId = me.vlogId;
|
|
|
|
let myUserInfo = getApp().getUserInfoSession();
|
|
let userId = "";
|
|
if (!app.isStrEmpty(myUserInfo)) {
|
|
userId = myUserInfo.id;
|
|
}
|
|
|
|
let serverUrl = app.globalData.serverUrl;
|
|
uni.request({
|
|
method: "GET",
|
|
url: serverUrl + "/vlog/detail?userId=" + userId + "&vlogId=" + vlogId,
|
|
success(result) {
|
|
if (result.data.status == 207) {
|
|
let vlog = result.data.data;
|
|
let playerList = [];
|
|
playerList.push(vlog);
|
|
me.playerList = playerList;
|
|
me.freshCommentCounts();
|
|
me.setThisVlogInfo();
|
|
} else {
|
|
uni.showToast({
|
|
title: result.data.msg,
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
doplay: function (time) {
|
|
if (time > 0) {
|
|
this.playerList[this.playerCur].play = true;
|
|
}
|
|
},
|
|
onchange: function (index) {
|
|
if (index != this.playerCur) {
|
|
this.playerList[this.playerCur].play = false;
|
|
this.playerCur = index;
|
|
}
|
|
this.setThisVlogInfo();
|
|
},
|
|
|
|
// 设置当前vlog的信息
|
|
setThisVlogInfo() {
|
|
let me = this;
|
|
let serverUrl = app.globalData.serverUrl;
|
|
|
|
if (
|
|
me.playerList != null &&
|
|
me.playerList != undefined &&
|
|
me.playerList.length > 0
|
|
) {
|
|
let currentIndex = me.playerCur;
|
|
let vlog = me.playerList[currentIndex];
|
|
this.thisVlog = vlog;
|
|
this.thisVlogId = vlog.vlogId;
|
|
this.thisVlogerId = vlog.vlogerId;
|
|
}
|
|
},
|
|
freshCommentCounts() {
|
|
var me = this;
|
|
var userId = getApp().getUserInfoSession().id;
|
|
var serverUrl = app.globalData.serverUrl;
|
|
if (
|
|
me.playerList == null ||
|
|
me.playerList == undefined ||
|
|
me.playerList.length == 0
|
|
) {
|
|
return;
|
|
}
|
|
var currentIndex = me.playerCur;
|
|
var vlog = me.playerList[currentIndex];
|
|
var vlogId = vlog.vlogId;
|
|
var serverUrl = app.globalData.serverUrl;
|
|
uni.request({
|
|
method: "GET",
|
|
url: serverUrl + "/comment/counts?vlogId=" + vlogId,
|
|
success(result) {
|
|
if (result.data.status == 200) {
|
|
me.thisVlogTotalComentCounts = result.data.data;
|
|
} else {
|
|
me.thisVlogTotalComentCounts = 0;
|
|
}
|
|
},
|
|
});
|
|
},
|
|
commentToggle() {
|
|
this.$refs.comment.open();
|
|
uni.hideTabBar({
|
|
animation: true,
|
|
});
|
|
},
|
|
shareToggle() {
|
|
this.$refs.share.open();
|
|
uni.hideTabBar({
|
|
animation: true,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.user-face {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 100rpx;
|
|
}
|
|
|
|
.play-cd {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
opacity: 0.8;
|
|
}
|
|
.refresh-info-txt {
|
|
color: #f1f1f1;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.publish-info-box {
|
|
position: absolute;
|
|
bottom: 200rpx;
|
|
left: 0;
|
|
right: 0;
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.publish-info-vloger-name {
|
|
color: #ffffff;
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
padding: 10rpx;
|
|
}
|
|
.publish-info-music-box {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.publish-info-content {
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
padding: 10rpx;
|
|
lines: 5;
|
|
width: 520rpx;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.icon-fire {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
.muisc-words {
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
padding: 10rpx;
|
|
width: 400rpx;
|
|
}
|
|
.some-counts {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
margin-top: 2rpx;
|
|
}
|
|
.operation-box {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-right: 20rpx;
|
|
}
|
|
.operation-face-box {
|
|
border-radius: 100rpx;
|
|
border-color: #ffffff;
|
|
border-width: 3rpx;
|
|
}
|
|
.follow-me {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
top: -20rpx;
|
|
}
|
|
.like-box {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
}
|
|
.comment-and-share-box {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 45rpx;
|
|
}
|
|
</style>
|