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