接口对接

src/api/live.js

@@ -33,4 +33,8 @@ export default {
   userEntryOrExitsLiveRoom(options) {
     return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/userEntryOrExitsLiveRoom`, options);
   },
+  // 提交直播评论
+  addGuestbook(options) {
+    return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/addGuestbook`, options);
+  },
 };
\ No newline at end of file

src/components/livedModel/livedControls.vue

@@ -8,7 +8,7 @@
       <span>来了</span>
     </div>
     <!-- 评论层 -->
-    <livedIsMsg v-if="info.liveBroadcastState==1"></livedIsMsg>
+    <livedIsMsg v-if="info.liveBroadcastState==1&&guestBookList" :guestBookList="guestBookList" :updateVal="updateVal"></livedIsMsg>
     <!-- 带货商品层 -->
     <livedExplainingCommodities v-if="info.liveBroadcastState==1"></livedExplainingCommodities>
     <!-- 商品列表弹层 -->
@@ -61,8 +61,9 @@ import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
 import livedIsMsg from "@/components/livedModel/livedIsMsg";
 import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
 import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
+import live from "@/api/live";
 export default {
-  props: ["info","entryNoticeText","updateVal"],
+  props: ["info","entryNoticeText","updateVal","guestBookList"],
   name: "",
   data() {
     return {
@@ -125,7 +126,7 @@ export default {
         return;
       }
       if (val == 1) {
-        this.likeNum++;
+        this.watchNum++;
       }
       setTimeout(() => {
         this.num++;
@@ -206,7 +207,7 @@ export default {
       setTimeout(() => {
         this.isSend = false;
         this.sendVal = "";
-      }, 10);
+      }, 220);
     },
     // 点击发送留言
     toSend() {
@@ -214,6 +215,12 @@ export default {
       if (this.sendVal == "") {
         this.getFocus = true;
       } else {
+        let query={
+          guestbookType:'1',
+          guestbookContent:this.sendVal,
+          liveBroadcastId:Number(this.liveId),
+        }
+        this.$emit("toSendMsg",query);
       }
     }
   }

src/components/livedModel/livedExplainingCommodities.vue

@@ -35,19 +35,19 @@ export default {
           isEC: true,
           id: 1,
           img:
-            "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg"
+            "//img3.imgtn.bdimg.com/it/u=1870796683,3322238076&fm=11&gp=0.jpg"
         },
         {
           isEC: true,
           id: 2,
           img:
-            "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
+            "//img0.imgtn.bdimg.com/it/u=3318255953,3983626805&fm=26&gp=0.jpg"
         },
         {
           isEC: false,
           id: 3,
           img:
-            "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
+            "//img3.imgtn.bdimg.com/it/u=4241660740,3615994401&fm=26&gp=0.jpg"
         },
         {
           isEC: false,

src/components/livedModel/livedIsMsg.vue

@@ -7,7 +7,7 @@
           <div class="user">
             <p class="live"></p>
             <div class="name">
-              <span class="user">用户{{index}}：</span><span class="test">{{item.val}}</span>
+              <span class="user">{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
             </div>
           </div>
         </div>
@@ -18,17 +18,20 @@
 
 <script type="text/ecmascript-6">
 export default {
+  props:["guestBookList","updateVal"],
   name: "",
   data() {
     return {
-      list: [
-        {
-          val: "测试测试测试测"
-        },
-      ],
+      list: [],
       scrollTop:0,
     };
   },
+  watch:{
+    updateVal(){
+      this.list=[...this.list,...this.guestBookList];
+      this.scrollTop=this.list.length*1000;
+    }
+  },
   components: {},
   computed: {},
   created() {},

src/pages/lived/index.vue

@@ -34,7 +34,9 @@
         v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
         :info="liveNoticeInfo"
         :entryNoticeText="entryNoticeText"
+        :guestBookList="guestBookList"
         :updateVal="updateVal"
+        @toSendMsg="toSendMsg"
       ></livedControls>
     </div>
     <!-- 直播 -->
@@ -69,14 +71,14 @@ export default {
       status: 0, // 0：未开始 1：直播中 2：已结束
       // 总数据
       liveNoticeInfo: {}, //详情
-      entryNoticeText:'',//用户通知
-      guestBookList:[],// 定时查评论
-      updateVal:0,//子组件监听此数据进行数据赋值
-      likeInfo:{},//点赞
+      entryNoticeText: "", //用户通知
+      guestBookList: [], // 定时查评论
+      updateVal: 0, //子组件监听此数据进行数据赋值
+      likeInfo: {}, //点赞
       isVideo: false, //是否有直播或回放链接
       liveTime: null, //定时器
       isWifi: true, //提示网络环境
-      infoTiming:null,//定时器
+      infoTiming: null //定时器
     };
   },
   components: {
@@ -89,10 +91,10 @@ export default {
   onLoad(options) {
     wx.getNetworkType({
       success: function(res) {
-        if(res.networkType!='wifi'){
+        if (res.networkType != "wifi") {
           wx.showModal({
             content: "您当前处于非wifi网络环境下",
-            confirmColor: '#ff877d',
+            confirmColor: "#ff877d",
             success: function(res) {
               if (res.confirm) {
               } else if (res.cancel) {
@@ -108,16 +110,18 @@ export default {
     this.shopName = params.shopName;
     this.shopLogo = DFSImg(params.shopLogo, 40, 40);
     this.init();
-    this.infoTiming=setInterval(() => {
+    setTimeout(() => {
+      this.infoTiming = setInterval(() => {
         this.timingGetInfo();
       }, 5000);
+    }, 2000);
     this.userEntry("IN");
   },
   onUnload() {
     this.userEntry("OUT");
     this.liveNoticeInfo.liveBroadcastState = -1;
     this.liveNoticeInfo = {};
-    if(this.infoTiming){
+    if (this.infoTiming) {
       clearInterval(this.infoTiming);
     }
   },
@@ -133,9 +137,9 @@ export default {
           this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
             ? DFSImg(this.liveNoticeInfo.coverUrl)
             : "";
-          if(this.liveNoticeInfo.liveBroadcastState>2&&this.infoTiming){
+          if (this.liveNoticeInfo.liveBroadcastState > 2 && this.infoTiming) {
             clearInterval(this.infoTiming);
-          }else{
+          } else {
             // 调用定时接口
             this.timingGetInfo();
           }
@@ -160,75 +164,79 @@ export default {
         url: `../index/main?from=livedToIndex&backpath=${this.backPath}`
       });
     },
-    // 是否登录
-    isLogin(){
-      wx.getStorage({
-        key: "sessionid",
-        success(res) {
-          console.log("登录----------147")
-        },
-        fail(res) {
-          console.log("未登录------150")
-          // 跳转登录页
-          let backUrl='/lived/main';
-          let query={
-            liveId:this.liveId,
-          }
-          let url = `/pages/login/main?backpath=${backUrl}&params=${JSON.stringify(query)}`;
-          wx.reLaunch({
-            url: url
-          });
-        }
-      });
-    },
     // 定时查询直播数据
-    timingGetInfo(){
+    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;
+      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"){
+          if (
+            this.liveNoticeInfo.liveBroadcastState == 0 &&
+            resData.liveState == "NO_LIVE"
+          ) {
             // 未开始且接口也未开始不作操作
-          }else if(this.liveNoticeInfo.liveBroadcastState==0&&resData.liveState=="IN_LIVE"){
+          } else if (
+            this.liveNoticeInfo.liveBroadcastState == 0 &&
+            resData.liveState == "IN_LIVE"
+          ) {
             // 未开始且接口直播中
             this.init();
-          }else if(this.liveNoticeInfo.liveBroadcastState==1&&resData.liveState=="IN_LIVE"){
+          } 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}人`;
+            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}人`;//用户进入
               }
             }
-          }else if(this.liveNoticeInfo.liveBroadcastState==1&&resData.liveState=="END_LIVE"){
+            this.guestBookList=resData.guestBookList;//评论列表
+          } else if (
+            this.liveNoticeInfo.liveBroadcastState == 1 &&
+            resData.liveState == "END_LIVE"
+          ) {
             // 直播中且接口已结束
             this.init();
           }
-          this.updateVal=Math.random();
-        }else{
-          if(this.infoTiming){
+          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 => {});
     },
-    userEntry(type){
-      let query={
-        liveBroadcastId:Number(this.liveId),
-        activityType:type
+    toSendMsg(val) {
+      live.addGuestbook(val).then(res => {
+        if (res.data.code == 200) {
+        } else {
+          wx.showToast({
+            title: res.data.msg,
+            icon: "none"
+          });
         }
-      live.userEntryOrExitsLiveRoom(query).then(res=>{});
+      });
     }
   }
 };