直播2.0

src/api/live.js

@@ -88,4 +88,8 @@ export default {
   saveCustomerInviterInviteeRel(params) {
     return requestPOST(`${process.env.OLSHOP_URL}/user/saveCustomerInviterInviteeRel/`+params+``, {})
   },
+  //查看回放评论
+  queryPlaybackComments(options){
+    return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveGuestAndLikeNumById`,options);
+  }
 };
\ No newline at end of file

src/components/livedModel/isPauseShow.vue

@@ -29,6 +29,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  z-index: 2;
   .tit {
     font-size: 30px;
     font-weight: bold;

src/components/livedModel/livedControls.vue

 <template>
-  <div class="livedControls">
+  <div class="livedControls" :style="{'bottom' : info.openPlayback == 0 && info.playbackUrl && info.playbackUrl[0] && info.liveBroadcastState == 2 ? '40px' : '20px'}">
     <!-- 公告层 -->
-    <livedAnnouncement v-if="info.liveNotice" :liveNotice="info.liveNotice"></livedAnnouncement>
+    <livedAnnouncement v-if="info.liveNotice && !info.playbackUrl" :liveNotice="info.liveNotice"></livedAnnouncement>
     <!-- 用户进入通知 -->
     <div class="userComing userComingAni" v-if="userComing">
       <span>{{entryNoticeText}}</span>
@@ -13,6 +13,7 @@
       :guestBookList="guestBookList"
       :updateVal="updateVal"
       :isSend="isSend"
+      :liveId="liveId"
       :fixedHeight="getBottom"
     ></livedIsMsg>
     <!-- 带货商品层 -->
@@ -34,13 +35,16 @@
     <!-- 分享弹层 -->
     <livedShareDia v-if="loadingShare"  :showShareDia="showShareDia" @closeShareDia="closeShareDia" :info="info"></livedShareDia>
     <!-- 底部控制层 -->
-    <div class="control flex">
+    <div class="control flex" >
       <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="list.length>0">{{list.length}}</p>
         </div>
-        <div class="iptCopy" @click="isLogin">跟主播说点什么...</div>
+        <div class="goodsImg" v-else></div>
+        <div class="iptCopy" v-if="!info.playbackUrl" @click="isLogin">跟主播说点什么...</div>
+        <div class="iptCopy" style="background:none;" v-else></div>
         <div class="shareIcon" @click="showShare">
           <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADwElEQVR4Xu2aS6hNURjH//+RgYGRKAMDr1tmFJGBSxmIjGTgKq/rUURi5qKQkhKlLt1IHkl05VUG7r3lkW4MPMIVRXkNFMqAqL++2len45y99mPtc/bu7FWnc2qv9X3f/7fX41trHaLFC1tcP0oAZQ9ocQLlEGjxDlBOguUQKIdAixPI1RCQ1EbyZSPfSW4ASHoGYCqABwC2kBxsBIhcAJB0CsDKCsGfAKwleTNrCHkB0A9gbpXY3wDWkDyTJYQ8AxjWvY3k4awgFAGAad9PcmcWEIoCwLQfJ7nBN4QiATDtl22yJPnDF4iiATDdAwGEdz4gFBGA6bacwXrCo7QQmg5A0iQAJ2osgy5tliusInnLVTHsecMBSBoHYAaAmcG3/R6ZUITlCgbhXML2jTsPkDQdwLrgkzTeeu22kjySxGjmPSBj4ZWa95HsigshMwCSxgDYHnzixpW0fjfJjXEaZwJAkiUsJn5CnGA81b0EoIPkryj2vAKQNA3AAQALojjPsI5trlaQ/ODy4Q2ApIUAzgMY5XLaoOdPAwiPM18GJa0H0N0gYXHcWK5gPeF2vUape4CkGwDs7ee1WK6wjGRvrQBTAZB0BcCSvCqviOsNyYleAUg6CmBzAcRbiAMk270BkGTCDUBRSjtJ20X+V2IPAUnzANSdVHJIZArJV14mQUkjAPQBmJ1DodUhfQcwluRPb8ugpIMAdhRA/BDJtihxRh4CkhYDuBrFaJPr9JGcHzWGOADs4KHZKa5L12mSlRcsrvrRzgMkLQdw1mmtuRX2ktwVN4RIPUDSfQCz4hpvYP1Okj1J/DkBSOoA4Pt66huA5wCeADC4qxOcCZrePwAWpTkXjALgguXSSegGbT4HS6cJfQFgsPpcX1Ktu0GXy/c2J5E0m4lLKIDgAHMowaGlTZj3APSTvOuKLgGAhwAsu0t9QeICEGeba/tu2xz1kgzdg1cDiQngOklbkr0UF4BrNsYcnu4AOEQycY4QA0APyU4vygMjdQFIGg/gbYizj4Hw1FfXEQEkOvV1wQoDEDb7HwvEhwFy+f73PAKATSTNp/cSBuAigKU1PNq/Nk76jCQEwFe7SCFpJ72ZlDAANvtPrvI6h6TN7l5LHQC2vJl45yqSJpgwAMP/2hq2P5rklzTO6rWVtAfA7ornlheY+NdZ+Ku0GQbAgrIZ18a5HSpa4pFZkWSriN0f2tDr8rHGRwnWmQlGMVLkOiWAIr89H7GXPcAHxSLbKHtAkd+ej9jLHuCDYpFtlD2gyG/PR+wt3wP+AsW7I1AzjlUOAAAAAElFTkSuQmCC" alt="">
         </div>
@@ -59,6 +63,7 @@
             </div>
           </div>
         </div>
+        
       </template>
       <template v-else>
         <div class="sendOut" :style="{'bottom':getBottom+'px'}">
@@ -332,9 +337,9 @@ export default {
 }
 .livedControls {
   position: fixed;
-  bottom: 20px;
   left: 0;
   width: 100vw;
+  z-index: 2;
   .userComing {
     margin-bottom: 10px;
     background: rgba(#000, 0.4);

src/components/livedModel/livedIsEnded.vue

@@ -234,6 +234,7 @@ export default {
   left: 0;
   right: 0;
   display: flex;
+  z-index: 2;
   flex-direction: column;
   align-items: center;
   .end {

src/components/livedModel/livedIsMsg.vue

@@ -17,8 +17,9 @@
 </template>
 
 <script type="text/ecmascript-6">
+import liveApi from "@/api/live";
 export default {
-  props:["guestBookList","updateVal","isSend","fixedHeight"],
+  props:["guestBookList","updateVal","isSend","fixedHeight","liveId"],
   name: "",
   data() {
     return {
@@ -36,12 +37,22 @@ export default {
   computed: {},
   created() {},
   onLoad(){
-    
+    this.init()
   },
   mounted() {},
   methods: {
     scrolltolower(){
       
+    },
+    init(){
+      let query = {
+        id : this.liveId,
+        userActivebeginTime : 1,
+        beginTime : 1
+      }
+      liveApi.queryPlaybackComments(query).then(res => {
+        console.log(res.data)
+      })
     }
   }
 };

src/components/livedModel/notStarted.vue

@@ -175,6 +175,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  z-index: 2;
   .title{
     font-size: 18px;
     font-weight: bold;

src/pages/index/index.vue

@@ -312,7 +312,7 @@ export default {
       let params = ''
       if(querys.length > midNum){
         if(querys[midNum + 2]){
-          params += `&spokesmanGroupId=${querys[midNum - 1]}&spokesmanShopId=${querys[midNum]}&spokesmanRelId=${query[midNum+1]}&userId=${querys[midNum+2]}`
+          params += `&spokesmanGroupId=${querys[midNum - 1]}&spokesmanShopId=${querys[midNum]}&spokesmanRelId=${querys[midNum+1]}&userId=${querys[midNum+2]}`
         }else{
           params += `&spokesmanGroupId=${querys[midNum - 1]}&spokesmanShopId=${querys[midNum]}&spokesmanRelId=${querys[midNum+1]}`
         }

src/pages/lived/index.vue

@@ -37,7 +37,7 @@
       <isPauseShow v-if="liveNoticeInfo.liveBroadcastState==3" :info="liveNoticeInfo"></isPauseShow>
       <!-- 结束展示 -->
       <livedIsEnded
-        v-if="liveNoticeInfo.liveBroadcastState==2 || liveNoticeInfo.liveBroadcastState==4"
+        v-if="(liveNoticeInfo.openPlayback == 1 && (liveNoticeInfo.liveBroadcastState==2 || liveNoticeInfo.liveBroadcastState==4)) || (liveNoticeInfo.openPlayback == 0 && !liveNoticeInfo.playbackUrl && (liveNoticeInfo.liveBroadcastState==4 || liveNoticeInfo.liveBroadcastState==2))"
         :updateGoods="updateGoods"
         :endInfo="endInfo"
         :status="liveNoticeInfo.liveBroadcastState"
@@ -45,7 +45,7 @@
       ></livedIsEnded>
       <!-- 控件层 -->
       <livedControls
-        v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState!=2&&liveNoticeInfo.liveBroadcastState!=4"
+        v-if="liveNoticeInfo.liveBroadcastState==0 || liveNoticeInfo.liveBroadcastState==1 || (liveNoticeInfo.liveBroadcastState==2 && liveNoticeInfo.openPlayback == 0 && liveNoticeInfo.playbackUrl) || liveNoticeInfo.liveBroadcastState==3"
         :info="liveNoticeInfo"
         :entryNoticeText="entryNoticeText"
         :guestBookList="guestBookList"
@@ -55,6 +55,17 @@
         :goodsList="goodsList"
         @toSendMsg="toSendMsg"
       ></livedControls>
+
+      <video
+        v-if="liveNoticeInfo.openPlayback == 0 && liveNoticeInfo.playbackUrl && liveNoticeInfo.playbackUrl[0] && liveNoticeInfo.liveBroadcastState == 2"
+        style="width:100%;height:100vh;z-index:-1"
+        :src="liveNoticeInfo.playbackUrl[0]"
+        autoplay
+        loop
+        :show-fullscreen-btn="false"
+        object-fit="cover"
+      />
+      <div class="masker" ></div>
     </div>
     <!-- 直播 -->
     <live-player
@@ -73,12 +84,7 @@
       @statechange="changes"
     />
 
-    <!-- <video
-      style="width:100%;height:100vh;"
-      src="http://vjs.zencdn.net/v/oceans.mp4"
-      autoplay
-      :show-fullscreen-btn="false"
-    /> -->
+    
 
   
     <!-- object-fit="fillCrop" -->
@@ -455,9 +461,21 @@ export default {
     timingGetInfo(serverTime) {
       if (this.isTimeLock) {
         this.isTimeLock = false;
-        let dataTime = this.isTimeFirstReq
-          ? serverTime - 2000
-          : this.newCommentsTime;
+
+        let dataTime = ''
+        if(this.liveNoticeInfo.openPlayback == 0 && 
+          this.liveNoticeInfo.playbackUrl && 
+          this.liveNoticeInfo.playbackUrl[0] && 
+          this.liveNoticeInfo.liveBroadcastState == 2
+        ){
+          console.log('回放功能------------------------------' + new Date(this.liveNoticeInfo.realStartTime).getTime())
+          dataTime = new Date(this.liveNoticeInfo.realStartTime).getTime()
+        }else{
+          dataTime = this.isTimeFirstReq ? serverTime - 2000 : this.newCommentsTime;
+        }
+        // let dataTime = this.isTimeFirstReq
+        //   ? serverTime - 2000
+        //   : this.newCommentsTime;
         let userTime = this.isTimeFirstReq
           ? serverTime - 2000
           : this.userActivebeginTime;
@@ -774,4 +792,14 @@ img {
     z-index: -1;
   }
 }
+.masker{
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: rgba(102,102,102,0.38);
+  z-index: 1;
+  pointer-events: none;
+}
 </style>
\ No newline at end of file