公告对接

src/components/livedModel/livedAnnouncement.vue

@@ -2,13 +2,14 @@
   <!-- 公告组件 -->
   <div class="livedAnnouncement" v-show="isShow">
     <div class="label">
-      <span class="labelTit">公告：</span><span class="test">欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间</span>
+      <span class="labelTit">公告：</span><span class="test">{{liveNotice}}</span>
     </div>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
 export default {
+  props:["liveNotice"],
   name: "",
   data() {
     return {
@@ -23,7 +24,7 @@ export default {
     this.isShow=true;
     setTimeout(() => {
       this.isShow=false;
-    }, 7000);
+    }, 8000);
   },
   mounted() {},
   methods: {}
@@ -40,7 +41,7 @@ export default {
   border-radius: 10px;
   padding: 8px;
   margin-bottom: 10px;
-  animation:toLeft 6s linear;
+  animation:toLeft 7s linear;
   opacity: 0;
   span{
     font-size: 14px;
@@ -57,6 +58,9 @@ export default {
   0%{
     opacity: 1;
   }
+  80%{
+    opacity: 0.3;
+  }
   100%{
     opacity: 0;
   }

src/components/livedModel/livedControls.vue

 <template>
   <div class="livedControls">
     <!-- 公告层 -->
-    <livedAnnouncement></livedAnnouncement>
+    <livedAnnouncement v-if="info.liveNotice"  :liveNotice="info.liveNotice"></livedAnnouncement>
     <!-- 用户进入通知 -->
     <div class="userComing userComingAni" v-if="userComing">
       <span>xxx</span>
       <span>来了</span>
     </div>
     <!-- 评论层 -->
-    <livedIsMsg></livedIsMsg>
+    <livedIsMsg v-if="info.liveBroadcastState==1"></livedIsMsg>
     <!-- 带货商品层 -->
-    <livedExplainingCommodities></livedExplainingCommodities>
+    <livedExplainingCommodities v-if="info.liveBroadcastState==1"></livedExplainingCommodities>
     <!-- 商品列表弹层 -->
     <livedGoodsDia :showDia="showDia" @changeStatus="changeStatus"></livedGoodsDia>
     <!-- 底部控制层 -->
@@ -50,10 +50,11 @@ import livedIsMsg from "@/components/livedModel/livedIsMsg";
 import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
 import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
 export default {
+  props:["info"],
   name: "",
   data() {
     return {
-      likeNum: 9997, //点赞数
+      likeNum: 0, //点赞数
       imgList: [],
       iconList: [
         "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
@@ -82,10 +83,7 @@ export default {
   },
   created() {},
   onLoad(){
-    setInterval(() => {
-      this.getAdd();
-      this.userComing = !this.userComing;
-    }, 5000);
+    
   },
   mounted() {
   },

src/components/livedModel/livedIsMsg.vue

 <template>
   <!-- 评论模块 -->
   <div class="livedIsMsg">
-    <div class="list">
+    <div class="list" v-if="list.length>0">
       <scroll-view :style="{'height': '24vh','width':'52vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"  @scrolltolower="scrolltolower">
         <div class="item flex" v-for="(item,index) in list" :key="index">
           <div class="user">
@@ -25,21 +25,6 @@ export default {
         {
           val: "测试测试测试测"
         },
-        {
-          val: "评论了直播"
-        },
-        {
-          val: "测试测试测试测评论了直播"
-        },
-        {
-          val: "测试测试测评论了直播试测试"
-        },
-        {
-          val: "测试测试测试测试测试测试"
-        },
-        {
-          val: "测试测试测试测试测试测试"
-        }
       ],
       scrollTop:0,
     };
@@ -48,12 +33,7 @@ export default {
   computed: {},
   created() {},
   onLoad(){
-    setInterval(() => {
-      this.list.push({
-        val:'测试'+Math.random(),
-      })
-      this.scrollTop=this.list.length*1000;
-    }, 2000);
+    
   },
   mounted() {},
   methods: {