直播v2.0

src/components/livedModel/livedControls.vue

@@ -9,11 +9,11 @@
     </div>
     <!-- 评论层 -->
     <livedIsMsg
-      v-if="(info.liveBroadcastState!=2 || info.liveBroadcastState!=4) &&guestBookList"
       :guestBookList="guestBookList"
       :updateVal="updateVal"
       :isSend="isSend"
       :liveId="liveId"
+      :info="info"
       :fixedHeight="getBottom"
     ></livedIsMsg>
     <!-- 带货商品层 -->
@@ -43,7 +43,7 @@
           <p class="goodsNum" v-if="list.length>0">{{list.length}}</p>
         </div>
         <div class="goodsImg" v-else></div>
-        <div class="iptCopy" v-if="!info.playbackUrl" @click="isLogin">跟主播说点什么...</div>
+        <div class="iptCopy" v-if="!info.playbackUrl || info.liveBroadcastState==3" @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="">

src/components/livedModel/livedGoodsDia.vue

@@ -15,8 +15,8 @@
         
         <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)">
+          <div class="item" v-for="(item,index) in list" :key="index" @click="toGoodsInfo(item)">
+            <div class="img" >
               <div class="num">{{item.number}}</div>
               <!-- <img v-if="item.productImgUrl" :src="item.productImgUrl" alt /> -->
               <image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
@@ -34,7 +34,7 @@
                     <span>{{999}}</span>
                   </p>-->
                 </div>
-                <div class="icon" @click="isLogin(item)">
+                <div class="icon" @click.stop="isLogin(item)">
                   <img src="../../../static/images/lived/shopCart.png" alt="">
                 </div>
               </div>

src/components/livedModel/livedIsMsg.vue

@@ -19,7 +19,7 @@
 <script type="text/ecmascript-6">
 import liveApi from "@/api/live";
 export default {
-  props:["guestBookList","updateVal","isSend","fixedHeight","liveId"],
+  props:["guestBookList","updateVal","isSend","fixedHeight","liveId","info"],
   name: "",
   data() {
     return {
@@ -29,15 +29,22 @@ export default {
   },
   watch:{
     updateVal(){
+     if(!this.info.playbackUrl){
+       console.log('2222222222222')
         this.list=[...this.list,...this.guestBookList];
         this.scrollTop=this.list.length*1000;
      }
+     
+    }
   },
   components: {},
   computed: {},
   created() {},
   onLoad(){
+    if(this.info.playbackUrl && this.info.playbackUrl[0]){
       this.init()
+    }
+    
   },
   mounted() {},
   methods: {
@@ -51,7 +58,10 @@ export default {
         beginTime : 1
       }
       liveApi.queryPlaybackComments(query).then(res => {
-        console.log(res.data)
+        if(res.data.code == '200'){
+          this.list= res.data.data.guestBookList.slice(-100);
+          this.scrollTop=this.list.length*1000;
+        }
       })
     }
   }

src/components/livedModel/livedShareDia.vue

@@ -134,8 +134,7 @@ export default {
           }
           console.log('query -----------------',query)
           let newTime = new Date(this.info.startTime.replace(/-/g, "/"));
-          query.livedTime = `${newTime.getMonth() + 1}月${newTime.getDate() -
-            1}日  ${Number(newTime.getHours()) < 10 ? '0' + Number(newTime.getHours()) : newTime.getHours()}:${Number(newTime.getMinutes()) < 10 ? '0' + Number(newTime.getMinutes()) : newTime.getMinutes()}`;
+          query.livedTime = `${newTime.getMonth() + 1}月${newTime.getDate()}日  ${Number(newTime.getHours()) < 10 ? '0' + Number(newTime.getHours()) : newTime.getHours()}:${Number(newTime.getMinutes()) < 10 ? '0' + Number(newTime.getMinutes()) : newTime.getMinutes()}`;
           let qrCode = DFSImg(res.data.data);
           if (qrCode.indexOf("https") == -1) {
             query.qrCode = qrCode.replace("http", "https");
@@ -145,21 +144,7 @@ export default {
           live.getUserInfo().then(res1 => {
             if(res1.data.code == '200'){
               this.userInfo = res1.data.data;
-              // res1.data.data.headPortraitUrl = DFSImg(res1.data.data.headPortraitUrl)
-              live.imgToBase64(DFSImg(res1.data.data.headPortraitUrl)).then(res2 => {
-                console.log(res2.data.code,'res2.data.code')
-                if(res2.data.code == '200'){
-                  console.log('2222222222222')
-                  let suffix = ''
-                  let index = DFSImg(res1.data.data.headPortraitUrl).lastIndexOf("?")
-                  let index1 = DFSImg(res1.data.data.headPortraitUrl).lastIndexOf(".")
-                  suffix = DFSImg(res1.data.data.headPortraitUrl).substring(index1+1,index+1);
-                  this.$set(this.userInfo,'headPortraitUrl',`data:image/${suffix};base64,` + res2.data.data)
-                  console.log(this.userInfo)
-                  console.log('2222222222222')
               this.againLoadingPoster = true;
-                }
-              })
               
               
               console.log(this.userInfo)

src/components/livedModel/livedposterDia.vue

@@ -33,7 +33,7 @@ export default {
       info: {
         posterCoverUrl: "",
         livedStatus: 1, //直播状态  0未开播 1一开播
-        livedTime: "3月21日 20:20",
+        livedTime: "",
         livedTitle: "",
         nickName: "",
         avatarUrl: "",
@@ -69,6 +69,7 @@ export default {
       this.$emit("closePosterDia");
     },
     init() {
+      wx.hideLoading();
       // wx.showLoading({
       //   title: "生成中..."
       // });
@@ -117,32 +118,34 @@ export default {
 
     
         if(this.info.livedStatus == 0){
-          this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/1a33da04-8224-4980-9299-a4a8e32be678.png',path => {
-            ctx.drawImage(path, 160 * bili , 340 * bili, 20 * bili, 20 * bili);
+          console.log('直播预告')
+          this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/2a6cbdf0-91ca-4993-9ec5-963cb30ba9b8.png',path => {
+            ctx.drawImage(path, 160 * bili , 340 * bili, 18 * bili, 18 * bili);
             ctx.save()
             ctx.setTextAlign("left");
             ctx.setFillStyle("#3F2F00");
             ctx.setFontSize(14);
-            ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
+            ctx.fillText(this.info.livedTime, 184 * bili , 355 * bili);
           })
         }  
 
 
-        this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/1eaa8c87-e20a-4b5b-8c21-596dac8fa093.png',path => {
-          ctx.drawImage(path, 20 * bili , 340 * bili, 26 * bili, 20 * bili);
+        this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/cc6db4d4-55bb-4add-a9ba-5733499aa5d0.png',path => {
+          ctx.drawImage(path, 20 * bili , 340 * bili, 20 * bili, 18 * bili);
           ctx.save()
           ctx.setTextAlign("left");
           ctx.setFillStyle("#3F2F00");
           ctx.setFontSize(14);
-          ctx.fillText(this.info.livedStatus == 1 ? '直播中' : '直播预告', 52 * bili , 355 * bili);
-
-
-          ctx.setTextAlign("left");
-          ctx.setFillStyle("#3F2F00");
-          ctx.setFontSize(14);
-          ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
-
 
+          let liveText = '';
+          if(this.info.livedStatus == 0){
+            liveText = '直播预告'
+          }else if(this.info.livedStatus == 1){
+            liveText = '直播中'
+          }else{
+            liveText = '直播结束'
+          }
+          ctx.fillText(liveText, 48 * bili , 355 * bili);         
           
         })
 
@@ -165,13 +168,16 @@ export default {
           ctx.save();
           //头像
           ctx.clip();
-          ctx.drawImage(info.avatarUrl, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
+          this.saveThe(info.avatarUrl,path => {
+            ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
             ctx.save();
+
             ctx.stroke();
             ctx.draw();
           
             this.posterStatus = true;
             console.log("--------海报生成成功");
+          })
         });
       });
     },
@@ -183,7 +189,7 @@ export default {
           callback(res.path);
         },
         fail: function(res) {
-          console.log('saveTheFail ___________________________',res)
+          console.log('saveTheFail ___________________________',url + '------url-----',res)
         }
       });
     },
@@ -200,18 +206,26 @@ export default {
     // 点击保存时，将画布生成海报
     handleSave() {
       var that = this;
+      
+      wx.getSetting({
+        success(res) {
+
+          console.log('11111111111')
+          if (res.authSetting["scope.writePhotosAlbum"]) {
             wx.showLoading({
               title: "正在保存...",
               mask: true
             });
-      wx.getSetting({
-        success(res) {
-          if (res.authSetting["scope.writePhotosAlbum"]) {
             that.saveImg();
           } else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
+            console.log('3333333333333')
             wx.authorize({
               scope: "scope.writePhotosAlbum",
               success() {
+                wx.showLoading({
+                  title: "正在保存...",
+                  mask: true
+                });
                 that.saveImg();
               },
               fail() {
@@ -223,9 +237,15 @@ export default {
               }
             });
           } else {
+            console.log('44444444444444')
+            
             wx.openSetting({
               success(res) {
                 if (res.authSetting["scope.writePhotosAlbum"]) {
+                  wx.showLoading({
+                    title: "正在保存...",
+                    mask: true
+                  });
                   that.saveImg();
                 } else {
                   wx.showToast({
@@ -240,7 +260,7 @@ export default {
         fail: err => {
           wx.hideLoading();
           wx.showToast({
-            title: "出现了错误，请稍后再试",
+            title: "出现了错误，请稍后再试11111",
             icon: "none"
           });
         }
@@ -286,7 +306,7 @@ export default {
         fail: err => {
           wx.hideLoading();
           wx.showToast({
-            title: "出现了错误，请稍后再试",
+            title: "出现了错误，请稍后再试2222",
             icon: "none"
           });
         }
@@ -337,6 +357,8 @@ export default {
       margin: 0 auto;
       background: #fff;
       position: relative;
+      overflow: hidden;
+      border-radius: 5px;
       .myCanvas {
         width: 100%;
         height: 100%;

src/pages/live/index.vue

@@ -336,9 +336,12 @@ export default {
 
         console.log('onHide',this.overOrStop)
 
+        this.pusher.stop();
+
         if(this.overOrStop){
             if(this.liveInfo.liveBroadcastState == 1){
                 this.changeLiveStatus(3)
+                
                 this.isSetBeauty = false;
             }
         }
@@ -655,6 +658,7 @@ export default {
                 if(this.liveCountDown == 0){
                     console.log('开始直播')
                     this.pusher.start(); //开始推流
+                    
                     this.isCountDown = false;
                     
                     this.isSetBeauty = false;

src/pages/liveList/index.vue

@@ -537,6 +537,7 @@ export default {
                         key: "phoneNumber",
                         data: res.data.data.mobilephone
                     });
+
                 }
             })
         },
@@ -704,6 +705,7 @@ export default {
         // height: 50vh;
         // margin-bottom: 60px;
         padding-bottom: 60px;
+        box-sizing: border-box;
         background-color: #efefef;
     }
     .history-wrap{

src/pages/liveOver/index.vue

@@ -4,11 +4,11 @@
         <image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
         <div class="conbox">
             <div class="live-over">
-                <div class="over-text">直播已结束</div>
-                <div class="live-time">直播时长：{{overInfo.liveTime}}</div>
+                <div class="over-text">直播已{{liveInfo.liveBroadcastState == 2 ? '结束' : '失效'}}</div>
+                <div class="live-time" v-if="liveInfo.liveBroadcastState == 2">直播时长：{{overInfo.liveTime}}</div>
             </div>
 
-            <div class="live-info">
+            <div class="live-info" v-if="liveInfo.liveBroadcastState == 2">
                 <div class="info-row item-row-one">
                     <div class="info-item">
                         <div class="item-num">{{overInfo.watchNum}}</div>
@@ -77,6 +77,8 @@ export default {
     },
     onLoad(options){
 
+        
+
         this.overInfo = {}
 
         if(options.type){
@@ -85,6 +87,8 @@ export default {
 
         this.liveInfo = JSON.parse(options.liveInfo)
         
+        console.log(this.liveInfo)
+
         this.getOverInfo(options.id)
         
     },

src/pages/lived/index.vue

@@ -62,6 +62,7 @@
         :src="liveNoticeInfo.playbackUrl[0]"
         autoplay
         loop
+        :controls="false"
         :show-fullscreen-btn="false"
         object-fit="cover"
       />
@@ -461,21 +462,9 @@ export default {
     timingGetInfo(serverTime) {
       if (this.isTimeLock) {
         this.isTimeLock = false;
-
-        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 dataTime = this.isTimeFirstReq
+          ? serverTime - 2000
+          : this.newCommentsTime;
         let userTime = this.isTimeFirstReq
           ? serverTime - 2000
           : this.userActivebeginTime;

src/pages/login/index.vue

@@ -189,6 +189,15 @@ export default {
         //   }&params=${encodeURIComponent(this.backParams)}`
         // });
         // 跳转回小程序页面
+        var data = wx_decode(
+            this.appid,
+            this.session_key,
+            e.mp.detail.encryptedData,
+            e.mp.detail.iv
+        );
+        this.userInfo = JSON.parse(e.target.rawData);
+
+        this.$store.commit('setUserInfo',this.userInfo)
         this.pushPageType();
       } else {
         var data = wx_decode(
@@ -200,6 +209,7 @@ export default {
         this.unionId = data.unionId || "";
         this.userInfo = JSON.parse(e.target.rawData);
         console.log(this.userInfo, "this.userInfo");
+        this.$store.commit('setUserInfo',this.userInfo)
 
         if (this.unionId) {
           login