接口对接

src/api/live.js

@@ -25,4 +25,12 @@ export default {
   addCart(options) {
     return requestPOST(`${process.env.OLSHOP_URL}/cart/add_item`, options);
   },
+  // 实时查询直播状态
+  getLiveStateById(options) {
+    return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveStateById`, options);
+  },
+  // 用户进入和退出直播间埋点接口
+  userEntryOrExitsLiveRoom(options) {
+    return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/userEntryOrExitsLiveRoom`, options);
+  },
 };
\ No newline at end of file

src/components/livedModel/livedControls.vue

@@ -4,7 +4,7 @@
     <livedAnnouncement v-if="info.liveNotice" :liveNotice="info.liveNotice"></livedAnnouncement>
     <!-- 用户进入通知 -->
     <div class="userComing userComingAni" v-if="userComing">
-      <span>xxx</span>
+      <span>{{entryNoticeText}}</span>
       <span>来了</span>
     </div>
     <!-- 评论层 -->
@@ -21,7 +21,7 @@
     <!-- 底部控制层 -->
     <div class="control flex">
       <template v-if="!isSend">
-        <div class="goodsImg" @click="showGoodsList">
+        <div class="goodsImg" @click="showGoodsList" v-if="info.liveBroadcastSales==0">
           <img src="../../../static/images/lived/goodsImg.png" alt />
           <p class="goodsNum" v-if="info.goodsRespDTOs.length>0">{{info.goodsRespDTOs.length}}</p>
         </div>
@@ -62,13 +62,13 @@ import livedIsMsg from "@/components/livedModel/livedIsMsg";
 import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
 import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
 export default {
-  props: ["info"],
+  props: ["info","entryNoticeText","updateVal"],
   name: "",
   data() {
     return {
       liveId: 0,
-      likeNum: 0, //点赞数
       imgList: [],
+      watchNum:0,
       iconList: [
         "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
         "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg",
@@ -91,7 +91,20 @@ export default {
   },
   computed: {
     likeNumCopy() {
-      return this.watchMan(this.likeNum);
+      return this.watchMan(this.watchNum);
+    },
+  },
+  watch:{
+    updateVal(newVal,oldVal){
+      this.watchNum=this.info.watchNum;
+      if(this.entryNoticeText){
+        this.userComing=true;
+        setTimeout(() => {
+          this.userComing=false;
+        }, 4600);
+      }else{
+        this.userComing=false;
+      }
     }
   },
   created() {},
@@ -107,7 +120,7 @@ export default {
     },
     // 点赞
     addLike(val) {
-      if (!this.info.liveBroadcastState < 1) {
+      if (this.info.liveBroadcastState < 1) {
         this.notAgainLive();
         return;
       }
@@ -181,11 +194,10 @@ export default {
     },
     // 发送评论
     toSendOut() {
-      if (!this.info.liveBroadcastState < 1) {
+      if (this.info.liveBroadcastState < 1) {
         this.notAgainLive();
         return;
       }
-      // 登录及未开始判断
       this.isSend = true;
       this.getFocus = true;
     },
@@ -198,6 +210,7 @@ export default {
     },
     // 点击发送留言
     toSend() {
+      console.log("点击按钮-------------------200")
       if (this.sendVal == "") {
         this.getFocus = true;
       } else {
@@ -228,7 +241,7 @@ export default {
     display: inline-block;
   }
   .userComingAni {
-    animation: userComingAni 5.1s linear;
+    animation: userComingAni 4.7s linear;
   }
   @keyframes userComingAni {
     0% {

src/pages/lived/index.vue

@@ -17,9 +17,9 @@
           </div>
           <div class="info">
             <p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
-            <p class="num" v-if="liveNoticeInfo.liveBroadcastState>0">
+            <p class="num" v-if="liveNoticeInfo.watchNum>0">
               <span>{{liveNoticeInfo.watchNum}}</span>
-              <span>观看</span>
+              <span style="margin-left:6px;">观看</span>
             </p>
           </div>
           <div class="toShop" @click="toShop">进店</div>
@@ -33,6 +33,8 @@
       <livedControls
         v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
         :info="liveNoticeInfo"
+        :entryNoticeText="entryNoticeText"
+        :updateVal="updateVal"
       ></livedControls>
     </div>
     <!-- 直播 -->
@@ -65,10 +67,16 @@ export default {
       backPath: "",
       isLoading: false,
       status: 0, // 0：未开始 1：直播中 2：已结束
+      // 总数据
       liveNoticeInfo: {}, //详情
+      entryNoticeText:'',//用户通知
+      guestBookList:[],// 定时查评论
+      updateVal:0,//子组件监听此数据进行数据赋值
+      likeInfo:{},//点赞
       isVideo: false, //是否有直播或回放链接
       liveTime: null, //定时器
-      isWifi: true //提示网络环境
+      isWifi: true, //提示网络环境
+      infoTiming:null,//定时器
     };
   },
   components: {
@@ -95,16 +103,23 @@ export default {
       }
     });
     let params = JSON.parse(options.params);
-    console.log(params.offlineShopCode,'-----------------98');
     this.$store.commit("setOfflineShopCode", params.offlineShopCode);
     this.liveId = params.liveId;
     this.shopName = params.shopName;
     this.shopLogo = DFSImg(params.shopLogo, 40, 40);
     this.init();
+    this.infoTiming=setInterval(() => {
+      this.timingGetInfo();
+    }, 5000);
+    this.userEntry("IN");
   },
   onUnload() {
+    this.userEntry("OUT");
     this.liveNoticeInfo.liveBroadcastState = -1;
     this.liveNoticeInfo = {};
+    if(this.infoTiming){
+      clearInterval(this.infoTiming);
+    }
   },
   mounted() {},
   methods: {
@@ -118,6 +133,12 @@ export default {
           this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
             ? DFSImg(this.liveNoticeInfo.coverUrl)
             : "";
+          if(this.liveNoticeInfo.liveBroadcastState>2&&this.infoTiming){
+            clearInterval(this.infoTiming);
+          }else{
+            // 调用定时接口
+            this.timingGetInfo();
+          }
         }
       });
     },
@@ -159,6 +180,55 @@ 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==0&&resData.liveState=="IN_LIVE"){
+            // 未开始且接口直播中
+            this.init();
+          }else if(this.liveNoticeInfo.liveBroadcastState==1&&resData.liveState=="IN_LIVE"){
+            // 直播中且接口直播中---主要操作
+            // 数据初始化
+            this.entryNoticeText="";
+            this.liveNoticeInfo.watchNum=resData.watchNum;
+            // this.liveNoticeInfo.watchNum=Math.floor(Math.random()*(100-1+1)+1);
+            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}人`;
+              }
+            }
+          }else if(this.liveNoticeInfo.liveBroadcastState==1&&resData.liveState=="END_LIVE"){
+            // 直播中且接口已结束
+            this.init();
+          }
+          this.updateVal=Math.random();
+        }else{
+          if(this.infoTiming){
+            clearInterval(this.infoTiming);
+          }
+        }
+      })
+    },
+    userEntry(type){
+      let query={
+        liveBroadcastId:Number(this.liveId),
+        activityType:type
+      }
+      live.userEntryOrExitsLiveRoom(query).then(res=>{});
     }
   }
 };