直播

src/api/live.js

@@ -72,5 +72,9 @@ export default {
   //获取服务器时间戳
   queryServerTimeNow(){
     return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getServerTimeNow`)
-}
+  },
+  // 获取个人资料
+  getUserInfo() {
+    return requestPOST(`${process.env.OLSHOP_URL}/user/get_user_info`)
+  },
 };
\ No newline at end of file

src/components/livedModel/livedExplainingCommodities.vue

@@ -9,7 +9,8 @@
         :key="index"
         @click="toGoodsInfo(item)"
       >
-        <img :src="item.productImgUrl" alt />
+        <!-- <img :src="item.productImgUrl" alt /> -->
+        <image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
         <p class="num">{{item.number}}</p>
         <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
       </div>
@@ -17,7 +18,8 @@
     <!-- 左上角展示讲解中商品 -->
     <div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0">
       <div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index" @click="toGoodsInfo(item)">
-        <img :src="item.productImgUrl" alt />
+        <!-- <img :src="item.productImgUrl" alt /> -->
+        <image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
         <!-- <p class="num">{{item.number}}</p> -->
         <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
         <p class="price" v-if="item.minPrice">
@@ -40,12 +42,14 @@ export default {
       list: [],
       // 讲解中浮动商品
       fixedGoodsList: [],
-      firstCom: true //首次进入
+      firstCom: true, //首次进入
+      liveId: 0,
     };
   },
   watch: {
     updateGoods() {
       console.log(this.goodsList,'---------------------------------46goodsList')
+      console.log(this.firstCom,'this.firstCom----------')
       if (this.firstCom == true) {
         this.list = [];
         this.firstCom = false;
@@ -54,11 +58,12 @@ export default {
         this.goodsList.forEach((item, index) => {
           if (item.upperScreenState == 1) {
             arr1.push(item);
-          } else if (item.upperScreenState == 0) {
+          } else if (item.upperScreenState == 0 || item.upperScreenState == 2) {
             arr2.push(item);
           }
         });
         this.list = [...arr1, ...arr2];
+        console.log(this.list,'--------------------------------this.list1212')
         setTimeout(() => {
           this.fixedGoodsList = arr1 ? arr1 : [];
           this.showFixedGoods = true;
@@ -81,7 +86,10 @@ export default {
   components: {},
   computed: {},
   created() {},
-  onLoad() {},
+  onLoad(options) {
+    let params = JSON.parse(options.params);
+    this.liveId = params.liveId;
+  },
   onUnload() {
     this.fixedGoodsList = [];
     this.showFixedGoods = false;
@@ -206,9 +214,9 @@ img {
       border: 1px solid #949494;
       margin-right: 10px;
       overflow: hidden;
-      img {
-        width: 100%;
-        height: 100%;
+      image {
+        width: 30vw;
+        height: 30vw;
         object-fit: cover;
       }
       .num {
@@ -242,14 +250,15 @@ img {
     left: 12px;
     .goodsList {
       width: 22vw;
-      border: 1px solid #ff3334;
+      // border: 1px solid #ff3334;
       margin-right: 10px;
       overflow: hidden;
       margin-bottom: 10px;
       position: relative;
-      img {
+      border-radius: 2px;
+      image {
         width: 22vw;
-        height: 22vw;
+        height: 28vw;
         object-fit: cover;
       }
       .num {

src/components/livedModel/livedGoodsDia.vue

@@ -3,15 +3,23 @@
     <van-popup
       :show="showDia"
       position="bottom"
-      custom-style="height: 50vh;padding:14px;border-top-left-radius:10px;border-top-right-radius:10px;"
+      custom-style="height: 50vh;border-top-left-radius:10px;border-top-right-radius:10px;"
       :close-on-click-overlay="true"
       @close="closeDia"
     >
+
+      <div class="tit" v-if="list.length>0">
+          <span>商品列表</span>
+          <span>({{list.length}})</span>
+        </div>
+        
         <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="num">{{item.number}}</div>
-            <img v-if="item.productImgUrl" :src="item.productImgUrl" alt />
+              <!-- <img v-if="item.productImgUrl" :src="item.productImgUrl" alt /> -->
+              <image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
             </div>
             <div class="info">
               <p class="name line-clamp2">{{item.productName}}</p>
@@ -33,6 +41,8 @@
             </div>
           </div>
         </div>
+      
+      
       <div style="text-align:center;font-size:16px;padding-top:10px;" v-else>暂无商品</div>
     </van-popup>
     <!-- 选择规格弹层 -->
@@ -206,7 +216,14 @@ img{
   display: block;
 }
 .livedGoodsList {
+  .tit {
+      font-size: 16px;
+      padding: 14px 14px 6px 14px;
+    }
   .list {
+    overflow-y:auto;
+    max-height: 44vh;
+    padding: 0 14px;
     .item {
       padding: 10px 4px;
       display: flex;
@@ -218,7 +235,7 @@ img{
         overflow: hidden;
         background: #999;
         position: relative;
-        img {
+        image {
           width: 100%;
           height: 100%;
           object-fit: cover;

src/components/livedModel/livedIsEnded.vue

@@ -31,7 +31,8 @@
           <div class="item" v-for="(item,index) in list" :key="index" :class="{'itemBorder':index!=list.length-1}">
             <div class="img" @click="toGoodsInfo(item)">
               <div class="num">{{item.number}}</div>
-              <img :src="item.productImgUrl" alt />
+              <!-- <img :src="item.productImgUrl" alt /> -->
+              <image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
             </div>
             <div class="info">
               <p class="name line-clamp2">{{item.productName}}</p>
@@ -283,7 +284,7 @@ export default {
             border-radius: 6px;
             overflow: hidden;
             position: relative;
-            img {
+            image {
               width: 100%;
               height: 100%;
               object-fit: cover;

src/components/livedModel/livedShareDia.vue

@@ -30,6 +30,7 @@
       v-if="againLoadingPoster"
       :showPosterDia="showPosterDia"
       :posterInfo="posterInfo"
+      :userInfo="userInfo"
       @closePosterDia="closePosterDia"
     ></livedposterDia>
   </div>
@@ -50,7 +51,8 @@ export default {
       backPath: "",
       showPosterDia: false,
       posterInfo: {},
-      againLoadingPoster: false // 是否开始加载海报
+      againLoadingPoster: false, // 是否开始加载海报
+      userInfo : {},
     };
   },
   components: {
@@ -96,9 +98,20 @@ export default {
             query.qrCode = qrCode.replace("http", "https");
           }
           this.posterInfo = query;
+          
+          live.getUserInfo().then(res1 => {
+            if(res1.data.code == '200'){
+              res1.data.data.headPortraitUrl = DFSImg(res1.data.data.headPortraitUrl)
+              this.userInfo = res1.data.data;
               this.againLoadingPoster = true;
+              console.log(this.userInfo)
+              console.log('111111111111111111111111111')
+            }
+          })
         }
       });
+
+      
     },
     initShare() {},
     //   关闭

src/components/livedModel/livedposterDia.vue

@@ -7,7 +7,11 @@
       @close="closeDia"
     >
       <div class="posterWrap" @click="closeDia">
+        <div class="canvas-wrap">
           <canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
+          <div v-if="!posterStatus" class="masker">加载中...</div>
+        </div>
+        
         <div class="saveBtn" @click="getImg">点击保存海报</div>
       </div>
     </van-popup>
@@ -17,7 +21,7 @@
 <script type="text/ecmascript-6">
 import live from "@/api/live";
 export default {
-  props: ["showPosterDia", "posterInfo"],
+  props: ["showPosterDia", "posterInfo","userInfo"],
   name: "",
   data() {
     return {
@@ -33,16 +37,20 @@ export default {
         nickName: "",
         avatarUrl: "",
         miniCode: ""
-      }
+      },
+      posterStatus : false,
     };
   },
   components: {},
   computed: {},
   onLoad(options) {
+    this.posterStatus = false;
     this.params = JSON.parse(options.params);
     this.liveId = this.params.liveId;
+    console.log(this.userInfo)
     Object.assign(this.info, this.info, this.posterInfo);
     console.log(this.info, "--------------------35");
+    console.log(this.$store.state)
     this.init();
   },
   created() {},
@@ -55,12 +63,13 @@ export default {
       // wx.showLoading({
       //   title: "生成中..."
       // });
+      this.$set(this.info,'avatarUrl',this.userInfo.headPortraitUrl)
+      // this.info.avatarUrl = this.userInfo.headPortraitUrl
       let _this = this;
       wx.getUserInfo({
         //获取微信用户信息
         success: function(res) {
           (_this.info.nickName = res.userInfo.nickName),
-            (_this.info.avatarUrl = res.userInfo.avatarUrl),
             _this.initPoster(_this.info);
         },
         fail: function(res) {
@@ -80,6 +89,8 @@ export default {
 
       //封面
       this.saveThe(info.posterCoverUrl, path => {
+        console.log(this.info)
+        console.log('0000000000000000000000封面')
         ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
         ctx.save();
         // 微信昵称
@@ -111,6 +122,7 @@ export default {
             ctx.save();
             ctx.stroke();
             ctx.draw();
+            this.posterStatus = true;
             console.log("--------海报生成成功");
           });
         });
@@ -124,16 +136,20 @@ export default {
           console.log(res.path, "--------------------131");
           callback(res.path);
         },
-        fail: function(res) {}
+        fail: function(res) {
+          console.log('saveTheFail ___________________________',res)
+        }
       });
     },
     getImg() {
+      if(this.posterStatus){
         let query = {
           liveBroadcastId: this.liveId,
           shareType: "HB"
         };
         live.addShareRecord(query).then();
         this.handleSave();
+      }
     },
     // 点击保存时，将画布生成海报
     handleSave() {
@@ -269,12 +285,31 @@ export default {
     min-height: calc(100vh - 80px);
     padding-top: 80px;
     // background-color: #f1f1f1;
-    .myCanvas {
+    .canvas-wrap{
       width: 310px;
       height: 520px;
       margin: 0 auto;
       background: #fff;
+      position: relative;
+      .myCanvas {
+        width: 100%;
+        height: 100%;
+        background: #fff;
       }
+      .masker{
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: white;
+        text-align: center;
+        line-height: 520px;
+        font-size: 16px;
+        color: #666;
+      }
+    }
+    
     .saveBtn {
       margin: 0 auto;
       margin-top: 20px;

src/components/livedModel/notStarted.vue

 <template>
   <div class="notStarted">
+    <div class="title">{{info.title}}</div>
     <p class="tit">直播倒计时</p>
     <div class="time">
       <timeDown v-if="startTime" :startTime="startTime"></timeDown>
@@ -30,6 +31,7 @@ export default {
     this.liveId = params.liveId;
     console.log(params, "--------------------126");
     this.startTime = this.info.startTime;
+    console.log(this.info)
   },
   mounted() {},
   methods: {
@@ -72,6 +74,11 @@ export default {
               },
               fail(res) {
                 console.log("message fail response: ", res);
+
+                wx.showToast({
+                  title: res,
+                  icon: "none"
+                });
               }
             });
           }
@@ -115,12 +122,18 @@ export default {
 .notStarted {
   position: absolute;
   width: 70vw;
-  top: 40%;
+  top: 35%;
   left: 15vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  .title{
+    font-size: 18px;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 20px;
+  }
   .tit {
     font-size: 16px;
     color: #fff;

src/pages/index/index.vue

@@ -91,9 +91,11 @@ export default {
     } else if (options.from && options.from == "livedToIndex") {
       //来自直播详情
       this.page = decodeURIComponent(options.backpath);
+      this.params += "&" + serialize(options.params);
     } else if (options.from && options.from == "livedBackShop") {
       //直播页back到商城
       this.page = decodeURIComponent(options.backpath);
+      this.params += "&" + serialize(options.params);
     } else if(options.from && options.from == "liveList"){
       //从主播端跳到商品
       this.page = decodeURIComponent(options.backpath);

src/pages/live/index.vue

@@ -13,6 +13,7 @@
             :enable-mic="enableMic"
             :remote-mirror="remoteMirror"
             :local-mirror="remoteMirror"
+            :mirror="mirror"
             style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1" 
             @statechange="statechange"
             @error="binderror"
@@ -216,6 +217,8 @@ export default {
             overOrStop : 1, //是暂停还是结束
 
             isDetailControlLock : true,
+
+            mirror : false,
         }
     },
     watch:{
@@ -424,6 +427,7 @@ export default {
         //镜像
         updateRemoteMirror(val){
             this.remoteMirror = val;
+            this.mirror = val == 'enable' ? true : false
         },
         //麦克风
         updateEnableMic(val){
@@ -548,6 +552,7 @@ export default {
             this.noStartLive = false;
             this.isSetBeauty = true;
             this.enableCamera = true;
+            this.isDetailControlLock = false;
             this.isBgImg = false;
             this.pusher.startPreview()
         },
@@ -616,7 +621,7 @@ export default {
                     console.log('开始直播')
                     this.pusher.start(); //开始推流
                     this.isCountDown = false;
-                    this.isDetailControlLock = true;
+                    
                     this.isSetBeauty = false;
                     clearInterval(timer)
                     this.changeLiveStatus(1);
@@ -643,6 +648,7 @@ export default {
                         this.enableCamera = false;
                         this.pusher.pause();
                     }
+                    this.isDetailControlLock = true;
                     
                     this.$set(this.liveInfo,'liveBroadcastState',val)
                     // this.pusher.resume();
@@ -684,11 +690,11 @@ export default {
                         beginTime: dataTime, //评论时间
                         userActivebeginTime : userTime, //用户进入时间
                     }).then(res => {
+                        this.isTimeLock = true;
                         if(res.data.code == '200'){
                             this.isTimeFirstReq = false;
-                            this.isTimeLock = true;
                             let result = res.data.data;
-                            if(result.liveState == 'IN_LIVE' || result.liveState == 'SUSPEND_LIVE' || result.liveState == 'NO_LIVE'){
+                            // if(result.liveState == 'IN_LIVE' || result.liveState == 'SUSPEND_LIVE' || result.liveState == 'NO_LIVE' || result.liveState == 'PAUSE_LIVE'){
                                 //用户通知
                                 this.entryNoticeText = "";
                                 if (result.entryNoticeList.length > 0) {
@@ -719,7 +725,7 @@ export default {
                                 }
 
                                 this.updateVal = new Date().getTime(); //监听使用数据
-                            }
+                            // }
                         }
                     })  
                 }else{
@@ -763,7 +769,7 @@ export default {
         },
         //获取商品列表
         getProductList(){      
-            liveApi.queryProductList({id : this.liveId}).then(res => {
+            liveApi.queryProductList({id : this.liveId,pageNum : 0,pageSize:0}).then(res => {
                 if(res.data.code == '200'){
 
                     let productIdArr = []

src/pages/liveOver/index.vue

 <template>
     <div class="container" :style="{'padding-top':navHeight +'px'}">
+        <div class="masker"></div>
         <image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
-        <navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar>
-
+        <div class="conbox">
             <div class="live-over">
                 <div class="over-text">直播已结束</div>
                 <div class="live-time">直播时长：{{overInfo.liveTime}}</div>
@@ -34,6 +34,10 @@
                     </div>
                 </div>
             </div>
+        </div>
+        <navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar>
+
+        
 
     </div>
 </template>
@@ -116,13 +120,30 @@ export default {
         position: fixed;
         top: 0;
         left: 0;
+        .conbox{
+            width: 100%;
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 10;
+        }
+        .masker{
+            width: 100%;
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            background-color: rgba(102,102,102,.38);
+        }
         .bg-img{
             width: 100%;
             height: 100vh;
             position: fixed;
             top: 0;
             left: 0;
-            z-index: -1;
+            background-color: rgba(102,102,102,.38);
         }
         .live-over{
             color: white;

src/pages/lived/index.vue

@@ -2,7 +2,8 @@
   <div class="lived">
     <!-- 背景(未开始&&已结束) -->
     <div class="bgImg" v-if="liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1">
-      <img :src="liveNoticeInfo.coverUrl" alt />
+      <!-- <img :src="liveNoticeInfo.coverUrl" alt /> -->
+      <image :src="liveNoticeInfo.coverUrl" mode="aspectFill" alt=""></image>
     </div>
     <!-- 直播展示层 -->
     <div class="liveModel" v-if="liveNoticeInfo.liveBroadcastState>-1">
@@ -121,12 +122,12 @@ export default {
       spokesmanObj: {}, //分销员信息
       navTop: 0,
       navHeight: 0,
-      isTimeLock : true, //时间锁
+      isTimeLock: true, //时间锁
 
-      isTimeFirstReq : true, //第一次数据请求
+      isTimeFirstReq: true, //第一次数据请求
 
-      newCommentsTime : 0,
-      userActivebeginTime : 0,
+      newCommentsTime: 0,
+      userActivebeginTime: 0
     };
   },
   components: {
@@ -137,7 +138,7 @@ export default {
   },
   computed: {},
   onLoad(options) {
-    console.log('onLoad')
+    console.log("onLoad");
     this.isTimeLock = true;
     this.isTimeFirstReq = true;
     this.newCommentsTime = 0;
@@ -225,11 +226,11 @@ export default {
     console.log(shareObj, "----------------168");
     return shareObj;
   },
-  onHide(){
+  onHide() {
     this.userEntry("OUT");
   },
-  onShow(){
-    console.log('onShow')
+  onShow() {
+    console.log("onShow");
     this.userEntry("IN");
   },
   onUnload() {
@@ -262,14 +263,14 @@ export default {
             ? DFSImg(this.liveNoticeInfo.coverUrl)
             : "";
           this.liveNoticeInfo.shareUrl = this.liveNoticeInfo.coverUrl
-            ? DFSImg(this.liveNoticeInfo.coverUrl,500,400)
+            ? DFSImg(this.liveNoticeInfo.coverUrl, 500, 400)
             : "";
           this.getGoodsList();
           if (this.liveNoticeInfo.liveBroadcastState == 2) {
             // 调直播结束
             this.endLived();
           } else {
-            console.log('这里')
+            console.log("这里");
             this.timingGetInfo();
           }
           if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
@@ -287,9 +288,14 @@ export default {
       });
     },
     back() {
+      let query = {
+        sessionid: wx.getStorageSync("sessionid") || ""
+      };
       // 返回商城
       wx.reLaunch({
-        url: `../index/main?from=livedBackShop&backpath=${this.backPath}`
+        url: `../index/main?from=livedBackShop&backpath=${
+          this.backPath
+        }&params=${JSON.stringify(query)}`
       });
     },
     // 是否登录
@@ -347,21 +353,24 @@ export default {
     },
     // 定时查询直播数据
     timingGetInfo(serverTime) {
-      if(this.isTimeLock){
+      if (this.isTimeLock) {
         this.isTimeLock = false;
-        let dataTime = this.isTimeFirstReq ? serverTime - 2000 : this.newCommentsTime
-        let userTime = this.isTimeFirstReq ? serverTime - 2000 : this.userActivebeginTime
+        let dataTime = this.isTimeFirstReq
+          ? serverTime - 2000
+          : this.newCommentsTime;
+        let userTime = this.isTimeFirstReq
+          ? serverTime - 2000
+          : this.userActivebeginTime;
         // 前五秒
         let query = {
           id: Number(this.liveId),
           beginTime: dataTime,
-          userActivebeginTime : userTime, //用户进入时间
+          userActivebeginTime: userTime //用户进入时间
         };
         live.getLiveStateById(query).then(res => {
           this.isTimeFirstReq = false;
           this.isTimeLock = true;
           if (res.data.code == 200) {
-            
             let resData = res.data.data;
             // 1、判断状态如果发生改变才init();
             // 2、直播中给用户进入通知、评论、点赞数赋值
@@ -412,11 +421,17 @@ export default {
             }
             // console.log("resData.guestBookList---》", resData.guestBookList)
             this.guestBookList = resData.guestBookList; //评论列表
-            if(resData.guestBookList && resData.guestBookList.length){
-                this.newCommentsTime = resData.guestBookList[resData.guestBookList.length - 1].createTimeStamp
-            }
-            if(resData.entryNoticeList && resData.entryNoticeList.length){
-                this.userActivebeginTime = resData.entryNoticeList[resData.entryNoticeList.length - 1].createTimeStamp
+            if (resData.guestBookList && resData.guestBookList.length) {
+              this.newCommentsTime =
+                resData.guestBookList[
+                  resData.guestBookList.length - 1
+                ].createTimeStamp;
+            }
+            if (resData.entryNoticeList && resData.entryNoticeList.length) {
+              this.userActivebeginTime =
+                resData.entryNoticeList[
+                  resData.entryNoticeList.length - 1
+                ].createTimeStamp;
             }
             this.likeInfo = resData.likeInfo; //点赞信息
             // 直播中且接口直播中---主要操作
@@ -427,9 +442,9 @@ export default {
               if (resData.entryNoticeList.length == 1) {
                 this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
               } else {
-                this.entryNoticeText = `${resData.entryNoticeList[0].userName}等${
-                  resData.entryNoticeList.length
-                }人`; //用户进入
+                this.entryNoticeText = `${
+                  resData.entryNoticeList[0].userName
+                }等${resData.entryNoticeList.length}人`; //用户进入
               }
             }
 
@@ -440,8 +455,8 @@ export default {
             // }
           }
         });
-      }else{
-          console.log('上次请求未结束，进行了下一次请求')
+      } else {
+        console.log("上次请求未结束，进行了下一次请求");
       }
     },
     // 获取商品列表
@@ -495,22 +510,22 @@ export default {
       });
     },
     //服务器时间戳
-    getServerTimeNow(){
+    getServerTimeNow() {
       live.queryServerTimeNow().then(res => {
-            if(res.data.code == 200){
+        if (res.data.code == 200) {
           //定时查询数据
           // this.timingGetInfo(res.data.data);
 
-                this.newCommentsTime = res.data.data
-                this.userActivebeginTime = res.data.data
-                console.log('newCommentsTime',this.newCommentsTime)
+          this.newCommentsTime = res.data.data;
+          this.userActivebeginTime = res.data.data;
+          console.log("newCommentsTime", this.newCommentsTime);
           // setTimeout(() => {
           this.infoTiming = setInterval(() => {
             this.timingGetInfo(res.data.data);
           }, 2000);
           // }, 2000);
         }
-        })
+      });
     },
     error(res) {
       console.log(res, "------------------237");
@@ -572,7 +587,7 @@ img {
     bottom: 0;
     right: 0;
     z-index: -1;
-    img {
+    image {
       width: 100%;
       height: 100%;
       object-fit: cover;