讲解对接

src/api/live.js

@@ -41,4 +41,8 @@ export default {
   addLiveLikeByUser(options) {
     return requestPOST(`${process.env.OLSHOP_URL}liveBroadcastInfo/addLiveLikeByUser`, options);
   },
+  // 直播中商品列表
+  getListByLiveBroadcastId(options) {
+    return requestGET(`${process.env.OLSHOP_URL}liveBroadcastGoods/getListByLiveBroadcastId?id=${Number(options)}`);
+  },
 };
\ No newline at end of file

src/components/livedModel/livedControls.vue

@@ -10,12 +10,14 @@
     <!-- 评论层 -->
     <livedIsMsg v-if="info.liveBroadcastState==1&&guestBookList" :guestBookList="guestBookList" :updateVal="updateVal"></livedIsMsg>
     <!-- 带货商品层 -->
-    <livedExplainingCommodities v-if="info.liveBroadcastState==1"></livedExplainingCommodities>
+    <livedExplainingCommodities v-if="info.liveBroadcastState==1&&list" :updateGoods="updateGoods" :list="list"></livedExplainingCommodities>
     <!-- 商品列表弹层 -->
     <livedGoodsDia
       :showDia="showDia"
-      :info="info"
-      v-if="info.goodsRespDTOs&&showDia"
+      :updateVal="updateVal"
+      :list="list"
+      :updateGoods="updateGoods"
+      v-if="list&&showDia"
       @changeStatus="changeStatus"
     ></livedGoodsDia>
     <!-- 底部控制层 -->
@@ -23,7 +25,7 @@
       <template v-if="!isSend">
         <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>
+          <p class="goodsNum" v-if="list.length>0">{{list.length}}</p>
         </div>
         <div class="iptCopy" @click="isLogin">跟主播说点什么...</div>
         <div class="shareIcon">
@@ -33,7 +35,7 @@
           <van-icon name="like" class="like" />
           <p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p>
           <div class="box">
-            <div class="img" v-for="(item,index) in imgList" :key="index">
+            <div class="img" :class="{'imgAni':imgAni}"  v-for="(item,index) in imgList" :key="index">
               <img :src="item.img" alt />
             </div>
           </div>
@@ -63,7 +65,7 @@ import livedExplainingCommodities from "@/components/livedModel/livedExplainingC
 import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
 import live from "@/api/live";
 export default {
-  props: ["info","entryNoticeText","updateVal","guestBookList","likeInfo"],
+  props: ["info","entryNoticeText","updateVal","guestBookList","likeInfo","goodsList","updateGoods"],
   name: "",
   data() {
     return {
@@ -76,12 +78,14 @@ export default {
         "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
         "//img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
       ],
+      list:[],
       num: 0,
       userComing: false,
       showDia: false, //显示商品列表弹窗
       isSend: false, //显示评论输入框
       sendVal: "", //输入内容
       getFocus: false, //获取焦点
+      imgAni:false,//给点赞元素加动画
     };
   },
   components: {
@@ -110,7 +114,10 @@ export default {
       }else{
         this.userComing=false;
       }
-    }
+    },
+    updateGoods(){
+      this.list=this.goodsList;
+    },
   },
   created() {},
   onLoad(options) {
@@ -125,6 +132,7 @@ export default {
     },
     // 点赞
     addLike(val) {
+      this.imgAni=true;
       if (this.info.liveBroadcastState < 1) {
         this.notAgainLive();
         return;
@@ -213,10 +221,11 @@ export default {
     },
     // 失焦点
     onblur() {
+      this.imgAni=false;
       setTimeout(() => {
         this.isSend = false;
         this.sendVal = "";
-      }, 500);
+      }, 100);
     },
     // 点击发送留言
     toSend() {
@@ -348,7 +357,6 @@ export default {
           margin-left: -20px;
           width: 40px;
           height: 40px;
-          animation: moveImg 1.5s linear 0.1s;
           opacity: 0;
           border-radius: 50%;
           overflow: hidden;
@@ -360,6 +368,9 @@ export default {
             height: 40px;
           }
         }
+        .imgAni{
+          animation: moveImg 1.5s linear 0.1s;
+        }
         @keyframes moveImg {
           0% {
             opacity: 1;

src/components/livedModel/livedExplainingCommodities.vue

@@ -2,15 +2,10 @@
   <!-- 讲解商品 -->
   <div class="livedExplainingCommodities">
     <div class="goods clearfix" v-if="!showFixedGoods">
-      <div
-        class="goodsList"
-        :class="{isEC:item.isEC}"
-        v-for="(item,index) in goodsList"
-        :key="index"
-      >
+      <div class="goodsList" :class="{isEC:item.upperScreenState==1}" v-for="(item,index) in list" :key="index">
         <img :src="item.img" alt />
         <p class="num">{{item.id}}</p>
-        <div class="explain" v-if="item.isEC">讲解中</div>
+        <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
       </div>
     </div>
     <!-- 左上角展示讲解中商品 -->
@@ -18,79 +13,132 @@
       <div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index">
         <img :src="item.img" alt />
         <p class="num">{{item.id}}</p>
-        <div class="explain" v-if="item.isEC">讲解中</div>
+        <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
       </div>
     </div>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
+import { DFSImg } from "@/utils/index";
 export default {
+  props: ["updateGoods", "goodsList"],
   name: "",
   data() {
     return {
       showFixedGoods: false, //展示讲解中商品方式  false底部|true左侧固定
-      goodsList: [
-        {
-          isEC: true,
-          id: 1,
-          img:
-            "//img3.imgtn.bdimg.com/it/u=1870796683,3322238076&fm=11&gp=0.jpg"
-        },
-        {
-          isEC: true,
-          id: 2,
-          img:
-            "//img0.imgtn.bdimg.com/it/u=3318255953,3983626805&fm=26&gp=0.jpg"
-        },
-        {
-          isEC: false,
-          id: 3,
-          img:
-            "//img3.imgtn.bdimg.com/it/u=4241660740,3615994401&fm=26&gp=0.jpg"
-        },
-        {
-          isEC: false,
-          id: 4,
-          img:
-            "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
-        },
-        {
-          isEC: false,
-          id: 5,
-          img:
-            "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
-        }
-      ],
+      list: [],
       // 讲解中浮动商品
-      fixedGoodsList: []
+      fixedGoodsList: [],
+      firstCom:true,//首次进入
     };
   },
+  watch: {
+    updateGoods() {
+      if(this.firstCom==true){
+        this.list=[];
+        this.firstCom=false;
+        let arr1=[];
+        let arr2=[];
+        this.goodsList.forEach((item,index)=>{
+          if(item.upperScreenState==1){
+            arr1.push(item);
+          }else if(item.upperScreenState==0){
+            arr2.push(item);
+          }
+        });
+        this.list=[...arr1,...arr2];
+        setTimeout(() => {
+          this.fixedGoodsList = arr1 ? arr1 : [];
+          this.showFixedGoods = true;
+        }, 5000);
+      }else{
+        if(!this.equalsObj(this.list, this.goodsList)){
+          let newArr=[];
+          newArr=this.goodsList.filter((item,index)=>{
+            if (item.upperScreenState==1) {
+              return item;
+            }
+          });
+          this.fixedGoodsList=newArr;
+        }
+      }
+    }
+  },
   components: {},
   computed: {},
   created() {},
-  onLoad() {
-    setTimeout(() => {
-      let newArr = this.goodsList.filter((item, index) => {
-        if (item.isEC) {
-          return item;
-        }
-      });
-      this.fixedGoodsList=newArr?newArr:[];
-      this.showFixedGoods = true;
-    }, 5000);
-  },
+  onLoad() {},
   onUnload() {
     this.fixedGoodsList = [];
     this.showFixedGoods = false;
   },
   mounted() {},
-  methods: {}
+  methods: {
+    /**
+     * 判断此对象是否是Object类型
+     * @param {Object} obj
+     */
+    isObject(obj) {
+      return Object.prototype.toString.call(obj) === "[object Object]";
+    },
+    /**
+     * 判断此类型是否是Array类型
+     * @param {Array} arr
+     */
+    isArray(arr) {
+      return Object.prototype.toString.call(arr) === "[object Array]";
+    },
+
+    /**
+     *  深度比较两个对象是否相同
+     * @param {Object} oldData
+     * @param {Object} newData
+     */
+    equalsObj(oldData, newData) {
+      // 类型为基本类型时,如果相同,则返回true
+      if (oldData === newData) return true;
+      if (
+        this.isObject(oldData) &&
+        this.isObject(newData) &&
+        Object.keys(oldData).length === Object.keys(newData).length
+      ) {
+        // 类型为对象并且元素个数相同
+
+        // 遍历所有对象中所有属性,判断元素是否相同
+        for (const key in oldData) {
+          if (oldData.hasOwnProperty(key)) {
+            if (!this.equalsObj(oldData[key], newData[key]))
+              // 对象中具有不相同属性 返回false
+              return false;
+          }
+        }
+      } else if (
+        this.isArray(oldData) &&
+        this.isArray(oldData) &&
+        oldData.length === newData.length
+      ) {
+        // 类型为数组并且数组长度相同
+
+        for (let i = 0, length = oldData.length; i < length; i++) {
+          if (!this.equalsObj(oldData[i], newData[i]))
+            // 如果数组元素中具有不相同元素,返回false
+            return false;
+        }
+      } else {
+        // 其它类型,均返回false
+        return false;
+      }
+
+      // 走到这里,说明数组或者对象中所有元素都相同,返回true
+      return true;
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-img{
+img {
   display: block;
 }
 .fl {
@@ -160,7 +208,7 @@ img{
     position: fixed;
     top: 14vh;
     left: 12px;
-    .goodsList{
+    .goodsList {
       width: 22vw;
       height: 22vw;
       border: 1px solid #ff3334;

src/components/livedModel/livedGoodsDia.vue

@@ -7,18 +7,18 @@
       :close-on-click-overlay="true"
       @close="closeDia"
     >
-      <div class="list" v-if="goodsList.length>0">
-        <div class="item" v-for="(item,index) in goodsList" :key="index">
+      <div class="list" v-if="list.length>0">
+        <div class="item" v-for="(item,index) in list" :key="index">
           <div class="img" @click="toGoodsInfo(item)">
-            <img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt />
+            <img v-if="item.productImgUrl" :src="item.productImgUrl" alt />
           </div>
           <div class="info">
-            <p class="name line-clamp2">{{item.goodsName}}</p>
+            <p class="name line-clamp2">{{item.productName}}</p>
             <div class="bottom">
               <div class="price">
                 <p>
                   <span>￥</span>
-                  <span>{{item.goodsPrice}}</span>
+                  <span>{{item.minPrice}}</span>
                 </p>
                 <!-- <p class="del">
                   <span>￥</span>
@@ -55,15 +55,12 @@ import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
 import { DFSImg } from "@/utils/index";
 import live from "@/api/live";
 export default {
-  props: {
-    showDia: Boolean,
-    info: Object
-  },
+  props:["showDia","updateGoods","goodsList"],
   name: "",
   data() {
     return {
       liveId: 0,
-      goodsList: [],
+      list: [],
       itemGoods: {}, //选中商品
       showSpe: false
     };
@@ -76,12 +73,9 @@ export default {
   onLoad(options) {
     let params = JSON.parse(options.params);
     this.liveId = params.liveId;
-    this.goodsList = this.info.goodsRespDTOs;
-    this.goodsList.forEach((item, index) => {
-      item.goodsPrice = Number(item.goodsPrice);
-      if (item.goodsImageUrl) {
-        item.goodsImageUrl = DFSImg(item.goodsImageUrl);
-      }
+    this.list = this.goodsList;
+    this.list.forEach((item, index) => {
+      item.minPrice = Number(item.minPrice);
     });
   },
   mounted() {},

src/pages/lived/index.vue

@@ -28,7 +28,7 @@
       <!-- 未开始展示 -->
       <notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
       <!-- 结束展示 -->
-      <livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2"></livedIsEnded>
+      <livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2" :updateGoods="updateGoods" :goodsList="goodsList"></livedIsEnded>
       <!-- 控件层 -->
       <livedControls
         v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
@@ -36,7 +36,9 @@
         :entryNoticeText="entryNoticeText"
         :guestBookList="guestBookList"
         :updateVal="updateVal"
+        :updateGoods="updateGoods"
         :likeInfo="likeInfo"
+        :goodsList="goodsList"
         @toSendMsg="toSendMsg"
       ></livedControls>
     </div>
@@ -48,6 +50,7 @@
       mode="RTC"
       autoplay
       @error="error"
+      @statechange="changes"
     />
   </div>
 </template>
@@ -73,7 +76,9 @@ export default {
       liveNoticeInfo: {}, //详情
       entryNoticeText: "", //用户通知
       guestBookList: [], // 定时查评论
+      goodsList:[],//商品列表
       updateVal: 0, //子组件监听此数据进行数据赋值
+      updateGoods:0,//商品相关组件监听
       likeInfo: {}, //点赞
       isVideo: false, //是否有直播或回放链接
       liveTime: null, //定时器
@@ -113,6 +118,7 @@ export default {
     setTimeout(() => {
       this.infoTiming = setInterval(() => {
         this.timingGetInfo();
+        this.getGoodsList();
       }, 5000);
     }, 2000);
     this.userEntry("IN");
@@ -137,12 +143,13 @@ export default {
           this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
             ? DFSImg(this.liveNoticeInfo.coverUrl)
             : "";
-          if (this.liveNoticeInfo.liveBroadcastState > 2 && this.infoTiming) {
+          if(this.liveNoticeInfo.liveBroadcastState > 1 && this.infoTiming) {
             clearInterval(this.infoTiming);
           } else {
             // 调用定时接口
             this.timingGetInfo();
           }
+          this.getGoodsList();
         }
       });
     },
@@ -199,7 +206,6 @@ export default {
               }
             }
             this.guestBookList=resData.guestBookList;//评论列表
-            this.likeInfo=resData.likeInfo;
           } else if (
             this.liveNoticeInfo.liveBroadcastState == 1 &&
             resData.liveState == "END_LIVE"
@@ -207,6 +213,7 @@ export default {
             // 直播中且接口已结束
             this.init();
           }
+          this.likeInfo=resData.likeInfo;
           this.updateVal = Math.random();
         } else {
           if (this.infoTiming) {
@@ -215,6 +222,24 @@ export default {
         }
       });
     },
+    // 获取商品列表
+    getGoodsList(){
+      let id=this.liveId;
+      live.getListByLiveBroadcastId(id).then(res=>{
+        if(res.data.code==200){
+          this.goodsList=[];
+          this.updateGoods = Math.random();
+          if(res.data.data.length>0){
+            this.goodsList=res.data.data.forEach((item,index)=>{
+              if(item.productImgUrl){
+                item.productImgUrl=DFSImg(item.productImgUrl);
+              }
+            })
+            console.log(this.goodsList,'--------------238')
+          }
+        }
+      })
+    },
     userEntry(type) {
       let query = {
         liveBroadcastId: Number(this.liveId),
@@ -235,6 +260,9 @@ export default {
     },
     error(res){
       console.log(res,'------------------237')
+    },
+    changes(res){
+      console.log(res,'---------------241')
     }
   }
 };