直播暂停功能

src/components/livedModel/isPauseShow.vue

+<template>
+  <!-- 直播暂停 -->
+  <div class="pauseShow">
+    <p class="tit">主播暂时离开</p>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.pauseShow {
+  position: absolute;
+  width: 70vw;
+  top: 40%;
+  left: 15vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .tit {
+    font-size: 30px;
+    font-weight: bold;
+    color: #fff;
+  }
+}
+</style>

src/components/livedModel/livedControls.vue

@@ -15,7 +15,7 @@
     ></livedIsMsg>
     <!-- 带货商品层 -->
     <livedExplainingCommodities
-      v-if="info.liveBroadcastState==1&&list"
+      v-if="(info.liveBroadcastState==1||info.liveBroadcastState==3)&&list"
       :updateGoods="updateGoods"
       :goodsList="list"
     ></livedExplainingCommodities>
@@ -175,10 +175,10 @@ export default {
     addLike(val) {
       this.imgAni = true;
       if (val == 1) {
-        if (this.info.liveBroadcastState < 1) {
-          this.notAgainLive();
-          return;
-        }
+        // if (this.info.liveBroadcastState < 1) {
+        //   this.notAgainLive();
+        //   return;
+        // }
         this.likeNum++;
         let query = {
           liveBroadcastId: this.liveId,

src/pages/lived/index.vue

@@ -31,6 +31,8 @@
       </div>
       <!-- 未开始展示 -->
       <notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
+      <!-- 直播暂停展示 -->
+      <isPauseShow v-if="liveNoticeInfo.liveBroadcastState==3" :info="liveNoticeInfo"></isPauseShow>
       <!-- 结束展示 -->
       <livedIsEnded
         v-if="liveNoticeInfo.liveBroadcastState==2"
@@ -40,7 +42,7 @@
       ></livedIsEnded>
       <!-- 控件层 -->
       <livedControls
-        v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
+        v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState!=2"
         :info="liveNoticeInfo"
         :entryNoticeText="entryNoticeText"
         :guestBookList="guestBookList"
@@ -73,11 +75,17 @@
 </template>
 
 <script type="text/ecmascript-6">
-import { serialize, getQueryVariable, DFSImg,getNavbarInfo } from "@/utils/index";
+import {
+  serialize,
+  getQueryVariable,
+  DFSImg,
+  getNavbarInfo
+} from "@/utils/index";
 import live from "@/api/live";
 import notStarted from "@/components/livedModel/notStarted";
 import livedControls from "@/components/livedModel/livedControls";
 import livedIsEnded from "@/components/livedModel/livedIsEnded";
+import isPauseShow from "@/components/livedModel/isPauseShow";
 import spokesman from "@/api/spokesman";
 import shop from "@/api/shop";
 export default {
@@ -110,21 +118,22 @@ export default {
       userId: "",
       hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
       spokesmanObj: {}, //分销员信息
-      navTop:0,
-      navHeight:0,
+      navTop: 0,
+      navHeight: 0
     };
   },
   components: {
     notStarted,
     livedControls,
-    livedIsEnded
+    livedIsEnded,
+    isPauseShow
   },
   computed: {},
   onLoad(options) {
-    getNavbarInfo(res=>{
-      console.log(res,'--------------------125')
-      this.navTop=res.navTop
-      this.navHeight=res.navHeight
+    getNavbarInfo(res => {
+      console.log(res, "--------------------125");
+      this.navTop = res.navTop;
+      this.navHeight = res.navHeight;
     });
     wx.getNetworkType({
       success: function(res) {
@@ -149,12 +158,12 @@ export default {
     this.backPath = this.params.fromPagePath || "/";
     this.shopLogo = DFSImg(this.params.shopLogo, 40, 40);
     // 是否有分销员信息
-    if(this.params.spokesmanGroupId){
+    if (this.params.spokesmanGroupId) {
       this.$store.commit("setSpokesman", {
         spokesmanGroupId: this.params.spokesmanGroupId,
         spokesmanShopId: this.params.spokesmanShopId,
         spokesmanRelId: this.params.spokesmanRelId
-      })
+      });
     }
     this.init();
     this.infoTiming = setInterval(() => {
@@ -169,10 +178,10 @@ export default {
 
   onShareAppMessage(options) {
     let _this = this;
-    if(this.hasInvitationStatus==1){
-      Object.assign(this.params,this.params,this.spokesmanObj);
+    if (this.hasInvitationStatus == 1) {
+      Object.assign(this.params, this.params, this.spokesmanObj);
     }
-    console.log(this.params,'--------------161')
+    console.log(this.params, "--------------161");
     let shareObj = {
       title: this.liveNoticeInfo.title,
       path: `/pages/lived/main?params=${JSON.stringify(this.params)}`,
@@ -207,11 +216,11 @@ export default {
     this.firstComing = true;
     if (this.infoTiming) {
       clearInterval(this.infoTiming);
-      this.infoTiming=null;
+      this.infoTiming = null;
     }
     if (this.goodTiming) {
       clearInterval(this.goodTiming);
-      this.goodTiming=null;
+      this.goodTiming = null;
     }
   },
   mounted() {},
@@ -235,7 +244,7 @@ export default {
           }
           if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
             this.goodTiming = setInterval(() => {
-              console.log("--------获取商品接口")
+              console.log("--------获取商品接口");
               this.getGoodsList();
             }, 5000);
           } else if (
@@ -365,6 +374,16 @@ export default {
               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
           }
           this.guestBookList = resData.guestBookList; //评论列表
           this.likeInfo = resData.likeInfo; //点赞信息