Skip to content

M
mayi-mp-shop
Commit 83e55891 by 程智春
Options

直播优化

parent 13063e84
Showing with 225 additions and 108 deletions
src/api/live.js
......@@ -69,4 +69,8 @@ export default {
addShareRecord(options) {
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/addShareRecord`,options);
},
//获取服务器时间戳
queryServerTimeNow(){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getServerTimeNow`)
}
};
\ No newline at end of file
src/components/comments/index.vue
......@@ -27,16 +27,25 @@ export default {
commentsList:{
type:Array,
default:null
},
updateVal:{
type:{
type:Number,
default:0
}
}
},
data() {
return {
list: [{
val : '测试'
}],
list: [],
scrollTop:0,
};
},
watch:{
updateVal(){
this.scrollTop=this.commentsList.length*1000;
}
},
onLoad(){
......@@ -69,7 +78,7 @@ export default {
overflow: hidden;
bottom: 0;
padding-left: 10px;
background-color: rgba(0,0,0,.3);
background-color: rgba(0,0,0,0.3);
.item {
width: 50vw;
padding: 4px 0;
......
src/components/common/navbar.vue
......@@ -6,19 +6,22 @@
<div class="back" @click="back">
<span class="iconfont iconzuo"></span>
</div>
<div class="user-info" v-if="!isSetBeauty" :style="{'width' : liveInfo.liveBroadcastState != 0 ? '154px' : '114px'}">
<div class="avatar">
<img :src="liveInfo.logoUrl" alt="">
<div class="user-info" v-if="!isSetBeauty" :style="{'width' : liveInfo.liveBroadcastState != 0 ? '160px' : '114px'}">
<div class="user-info-left">
<div class="avatar">
<img :src="liveInfo.logoUrl" alt="">
</div>
<div class="username text-overflow" v-if="!status">{{liveInfo.shopName}}</div>
</div>
<div class="username text-overflow" v-if="!status">{{liveInfo.shopName}}</div>
<div class="logining-info" v-else>
<div class="logining-info" v-if="status">
<div class="info-left">
<div class="login-name text-overflow">{{liveInfo.title}}</div>
<div class="login-time">{{time}}</div>
</div>
</div>
<div class="over-live" @click="endLive" v-if="liveInfo.liveBroadcastState != 0">结束</div>
<div class="over-live" @click="endLive" v-if="liveInfo.liveBroadcastState ==1 || liveInfo.liveBroadcastState == 3">结束</div>
</div>
</div>
</template>
......@@ -90,11 +93,9 @@ export default {
}
},
created(){
},
onShow(){
clearInterval(this.timer)
console.log(this.type)
},
onReady(){
this.userInfo = this.$store.state.userInfo;
......@@ -116,6 +117,8 @@ export default {
confirmColor : '#07c160',
success : res => {
if (res.confirm) {
this.$emit('changeOver',0);
this.changeLiveStatus(2);
} else if (res.cancel) {
console.log('用户点击取消')
......@@ -173,8 +176,8 @@ export default {
this.$set(this.liveInfo,'boStream','')
this.$set(this.liveInfo,'tuiStream','')
// wx.navigateTo({url:`../liveOver/main?id=${this.id}&liveInfo=${JSON.stringify(this.liveInfo)}`})
wx.reLaunch({url:`../liveList/main`})
wx.navigateTo({url:`../liveOver/main?id=${this.id}&liveInfo=${JSON.stringify(this.liveInfo)}`})
// wx.reLaunch({url:`../liveList/main`})
}
})
},
......@@ -212,17 +215,18 @@ export default {
}
}
.user-info{
.user-info-left{
display: flex;
justify-content: flex-start;
align-items: center;
}
height: 30px;
line-height: 30px;
background-color: rgba(0,0,0,.6);
border-radius: 15px;
display: flex;
align-items: center;
padding-left: 2px;
box-sizing: border-box;
padding-right: 8px;
// margin-left: 20px;
justify-content: space-between;
.avatar{
width: 26px;
height: 26px;
......@@ -272,7 +276,7 @@ export default {
line-height: 19px;
font-size: 12px;
color: white;
margin-left: 8px;
margin-right : 4px;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
......
src/pages/live/index.vue
......@@ -32,6 +32,7 @@
:realStartTime="realStartTime"
@closeSetBeauty="closeSetBeauty"
@clearAllInterval="clearAllInterval"
@changeOver="changeOver"
>
</navBar>
<div class="live-active" v-if="!isSetBeauty">
......@@ -116,7 +117,7 @@
>
</setting>
<!-- 评论 -->
<comments v-if="!isSetBeauty" :id="liveId" :commentsList="commentsList"></comments>
<comments v-if="!isSetBeauty" :updateVal="updateVal" :id="liveId" :commentsList="commentsList"></comments>
<!-- 用户进入通知 -->
<div class="userComing userComingAni" v-if="userComing && !isSetBeauty">
<span>{{entryNoticeText}}</span>
......@@ -207,6 +208,10 @@ export default {
isTimeLock : true, //时间锁
isTimeFirstReq : true, //第一次数据请求
updateVal : 0,
overOrStop : 1, //是暂停还是结束
}
},
watch:{
......@@ -262,6 +267,7 @@ export default {
this.isBgImg = true;
this.isTimeLock = true;
this.isTimeFirstReq = true;
this.overOrStop = 1;
this.online = 0 //在线
this.look = 0 //观看
......@@ -284,6 +290,8 @@ export default {
},
onShow(){
wx.setKeepScreenOn({
keepScreenOn: true
......@@ -304,9 +312,20 @@ export default {
onHide(){
this.commentsList = []
this.clearAllInterval()
if(this.liveInfo.liveBroadcastState == 1){
this.changeLiveStatus(3)
console.log('onHide',this.overOrStop)
if(this.overOrStop){
if(this.liveInfo.liveBroadcastState == 1){
this.changeLiveStatus(3)
this.isSetBeauty = false;
}
}
// this.isSetBeauty = false;
},
onUnload(){
......@@ -649,6 +668,8 @@ export default {
if(result.guestBookList && result.guestBookList.length){
newCommentsTime = result.guestBookList[result.guestBookList.length - 1].createTimeStamp
}
this.updateVal = new Date().getTime(); //监听使用数据
}
}
})
......@@ -794,6 +815,9 @@ export default {
clearInterval(this.openLiveTimer)
clearInterval(this.getProductTimer)
clearInterval(this.liveDetailTimer)
},
changeOver(val){
this.overOrStop = 0;
}
}
}
......
src/pages/liveList/index.vue
<template>
<div class="container1" :style="{'padding-top':navHeight +'px'}">
<div class="navbar" :style="{'height' : navHeight + 'px','padding-top':navTop+'px'}">
<!-- <div class="container1" :style="{'padding-top':navHeight +'px'}"> -->
<div class="container1">
<!-- <div class="navbar" :style="{'height' : navHeight + 'px','padding-top':navTop+'px'}"> -->
<!-- <div @click="toHistory" class="history-btn" v-show="isLogin">
<img class="btn-img" src="../../../static/images/history.png" alt="">
</div> -->
<div @click="toIndex" class="history-btn">
<!-- <div @click="toHistory" class="history-btn">
<img class="btn-img" src="../../../static/images/history.png" alt="">
</div>
<div class="navbar-title">直播计划</div>
</div> -->
<div class="history-wrap">
<div class="history-box" @click="toHistory">
<img class="history-img" src="../../../static/images/history.png" alt="">
<span class="history-text">直播历史</span>
</div>
</div>
<div class="live-list" v-if="isLogin">
......@@ -440,6 +449,34 @@ export default {
padding-bottom: 12px;
background-color: #efefef;
}
.history-wrap{
width: 100%;
height: 50px;
background-color: white;
display: flex;
justify-content: flex-end;
border-top: 1px solid #efefef;
box-sizing: border-box;
.history-box{
width: 40%;
height: 50px;
box-sizing: border-box;
padding-right: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
.history-img{
width: 21px;
height: 21px;
margin-right: 6px;
}
.history-text{
font-size: 16px;
color: #666;
}
}
}
.navbar{
box-sizing: border-box;
display: flex;
......
src/pages/liveList/main.json
{
"navigationStyle":"custom",
"enablePullDownRefresh":true
"enablePullDownRefresh":true,
"navigationBarTitleText":"直播计划"
}
\ No newline at end of file
src/pages/lived/index.vue
......@@ -120,7 +120,12 @@ export default {
hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
spokesmanObj: {}, //分销员信息
navTop: 0,
navHeight: 0
navHeight: 0,
isTimeLock : true, //时间锁
isTimeFirstReq : true, //第一次数据请求
newCommentsTime : 0,
};
},
components: {
......@@ -131,6 +136,9 @@ export default {
},
computed: {},
onLoad(options) {
this.isTimeLock = true;
this.isTimeFirstReq = true;
this.newCommentsTime = 0;
wx.setKeepScreenOn({
keepScreenOn: true
});
......@@ -170,16 +178,14 @@ export default {
});
}
this.init();
setTimeout(() => {
this.infoTiming = setInterval(() => {
this.timingGetInfo();
}, 5000);
}, 2000);
this.userEntry("IN");
// 通过分享进入直播间重新查询订阅消息配置
this.getMsgConfig();
this.isLogin();
this.getServerTimeNow();
},
onShareAppMessage(options) {
......@@ -254,6 +260,7 @@ export default {
// 调直播结束
this.endLived();
} else {
console.log('这里')
this.timingGetInfo();
}
if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
......@@ -330,84 +337,97 @@ export default {
});
},
// 定时查询直播数据
timingGetInfo() {
// 前五秒
let query = {
id: Number(this.liveId),
beginTime: new Date().getTime() - 5000
};
live.getLiveStateById(query).then(res => {
if (res.data.code == 200) {
let resData = res.data.data;
// 1、判断状态如果发生改变才init();
// 2、直播中给用户进入通知、评论、点赞数赋值
if (
this.liveNoticeInfo.liveBroadcastState == 0 &&
resData.liveState == "NO_LIVE"
) {
// 未开始且接口也未开始不作操作
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "IN_LIVE"
) {
} else if (
this.liveNoticeInfo.liveBroadcastState == 0 &&
resData.liveState == "IN_LIVE"
) {
console.log("未开始----直播中");
// 未开始且接口直播中/直播中且接口已结束
this.init();
} else if (
(this.liveNoticeInfo.liveBroadcastState == 2 &&
resData.liveState == "END_LIVE") ||
(this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "END_LIVE")
) {
console.log(
this.liveNoticeInfo.liveBroadcastState,
resData.liveState,
this.firstComing,
"直播中----结束",
"结束----结束"
);
//直播结束且接口已结束
if (this.firstComing) {
this.firstComing = false;
timingGetInfo(serverTime) {
if(this.isTimeLock){
this.isTimeLock = false;
let dataTime = this.isTimeFirstReq ? serverTime - 2000 : this.newCommentsTime
// 前五秒
let query = {
id: Number(this.liveId),
beginTime: dataTime
};
live.getLiveStateById(query).then(res => {
this.isTimeFirstReq = false;
this.isTimeLock = true;
if (res.data.code == 200) {
let resData = res.data.data;
// 1、判断状态如果发生改变才init();
// 2、直播中给用户进入通知、评论、点赞数赋值
if (
this.liveNoticeInfo.liveBroadcastState == 0 &&
resData.liveState == "NO_LIVE"
) {
// 未开始且接口也未开始不作操作
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "IN_LIVE"
) {
} else if (
this.liveNoticeInfo.liveBroadcastState == 0 &&
resData.liveState == "IN_LIVE"
) {
console.log("未开始----直播中");
// 未开始且接口直播中/直播中且接口已结束
this.init();
} else if (
(this.liveNoticeInfo.liveBroadcastState == 2 &&
resData.liveState == "END_LIVE") ||
(this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "END_LIVE")
) {
console.log(
this.liveNoticeInfo.liveBroadcastState,
resData.liveState,
this.firstComing,
"直播中----结束",
"结束----结束"
);
//直播结束且接口已结束
if (this.firstComing) {
this.firstComing = false;
this.init();
}
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "PAUSE_LIVE"
) {
this.liveNoticeInfo.liveBroadcastState = 3;
} else if (
this.liveNoticeInfo.liveBroadcastState == 3 &&
resData.liveState == "IN_LIVE"
) {
this.liveNoticeInfo.liveBroadcastState = 1;
}
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "PAUSE_LIVE"
) {
this.liveNoticeInfo.liveBroadcastState = 3;
} else if (
this.liveNoticeInfo.liveBroadcastState == 3 &&
resData.liveState == "IN_LIVE"
) {
this.liveNoticeInfo.liveBroadcastState = 1;
}
this.guestBookList = resData.guestBookList; //评论列表
this.likeInfo = resData.likeInfo; //点赞信息
// 直播中且接口直播中---主要操作
// 数据初始化
this.entryNoticeText = "";
this.liveNoticeInfo.watchNum = resData.watchNum; //观看人数
if (resData.entryNoticeList.length > 0) {
if (resData.entryNoticeList.length == 1) {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
} else {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}等${
resData.entryNoticeList.length
}人`; //用户进入
// console.log("resData.guestBookList---》", resData.guestBookList)
this.guestBookList = resData.guestBookList; //评论列表
if(resData.guestBookList && resData.guestBookList.length){
this.newCommentsTime = resData.guestBookList[resData.guestBookList.length - 1].createTimeStamp
}
this.likeInfo = resData.likeInfo; //点赞信息
// 直播中且接口直播中---主要操作
// 数据初始化
this.entryNoticeText = "";
this.liveNoticeInfo.watchNum = resData.watchNum; //观看人数
if (resData.entryNoticeList.length > 0) {
if (resData.entryNoticeList.length == 1) {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
} else {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}等${
resData.entryNoticeList.length
}人`; //用户进入
}
}
this.updateVal = Math.random(); //监听使用数据
} else {
// if (this.infoTiming) {
// clearInterval(this.infoTiming);
// }
}
this.updateVal = Math.random(); //监听使用数据
} else {
if (this.infoTiming) {
clearInterval(this.infoTiming);
}
}
});
});
}else{
console.log('上次请求未结束，进行了下一次请求')
}
},
// 获取商品列表
getGoodsList() {
......@@ -459,6 +479,23 @@ export default {
}
});
},
//服务器时间戳
getServerTimeNow(){
live.queryServerTimeNow().then(res => {
if(res.data.code == 200){
//定时查询数据
// this.timingGetInfo(res.data.data);
this.newCommentsTime = res.data.data
console.log('newCommentsTime',this.newCommentsTime)
// setTimeout(() => {
this.infoTiming = setInterval(() => {
this.timingGetInfo(res.data.data);
}, 2000);
// }, 2000);
}
})
},
error(res) {
console.log(res, "------------------237");
},
......
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