直播优化

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="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 class="logining-info" v-else>
+            </div>
+            
+            <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 //观看
@@ -285,6 +291,8 @@ export default {
     },
     onShow(){
 
+        
+        
         wx.setKeepScreenOn({
             keepScreenOn: true
         })  
@@ -304,9 +312,20 @@ export default {
     onHide(){
         this.commentsList = []
         this.clearAllInterval()
+
+        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,14 +337,20 @@ export default {
       });
     },
     // 定时查询直播数据
-    timingGetInfo() {
+    timingGetInfo(serverTime) {
+      if(this.isTimeLock){
+        this.isTimeLock = false;
+        let dataTime = this.isTimeFirstReq ? serverTime - 2000 : this.newCommentsTime
         // 前五秒
         let query = {
           id: Number(this.liveId),
-        beginTime: new Date().getTime() - 5000
+          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、直播中给用户进入通知、评论、点赞数赋值
@@ -386,7 +399,11 @@ export default {
             ) {
               this.liveNoticeInfo.liveBroadcastState = 1;
             }
+            // 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; //点赞信息
             // 直播中且接口直播中---主要操作
             // 数据初始化
@@ -403,11 +420,14 @@ export default {
             }
             this.updateVal = Math.random(); //监听使用数据
           } else {
-          if (this.infoTiming) {
-            clearInterval(this.infoTiming);
-          }
+            // 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");
     },