直播小程序

src/components/comments/index.vue

@@ -7,7 +7,7 @@
           <div class="user">
             <p class="live"></p>
             <div class="name">
-              <span class="user">{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
+              <span>{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
             </div>
           </div>
         </div>
@@ -78,18 +78,19 @@ export default {
     overflow: hidden;
     bottom: 0;
     padding-left: 10px;
+    border-radius: 9px;
     .item {
       width: 50vw;
-      padding: 4px 0;
-      display: flex;
-      align-items: flex-start;
-      line-height: 18px;
       border-radius: 9px;
-      background-color: rgba(0,0,0,0.3);
       margin-bottom: 4px;
-      padding-left: 8px;
-      box-sizing: border-box;
       .user {
+        max-width: 50vw;
+        padding: 4px 8px;
+        display: inline-block;
+        line-height: 18px;
+        border-radius: 9px;
+        background-color: rgba(0,0,0,0.3);
+        box-sizing: border-box;
         .name {
           color: #f9a93c;
           font-size: 12px;

src/components/livedModel/livedGoodsDia.vue

@@ -22,7 +22,7 @@
               <image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
             </div>
             <div class="info">
-              <div class="name line-clamp2">{{item.productName}}</div>
+              <div class="name text-overflow2">{{item.productName}}</div>
               <div class="bottom">
                 <div class="price">
                   <div>
@@ -218,16 +218,18 @@ img{
 .livedGoodsList {
   .tit {
       font-size: 16px;
-      padding: 14px 14px 6px 14px;
+      padding: 10px 10px;
     }
   .list {
     overflow-y:auto;
     max-height: 44vh;
-    padding: 0 14px;
     .item {
       padding: 10px 4px;
       display: flex;
       align-items: center;
+      padding: 14px;
+      box-sizing: border-box;
+      border-bottom: 1rpx solid #EEEEED;
       .img {
         width: 70px;
         height: 70px;

src/components/livedModel/livedIsEnded.vue

@@ -2,7 +2,7 @@
   <!-- 直播结束组件 -->
   <div class="livedIsEnd">
     <div class="end">
-      <p class="endTxt">直播已结束</p>
+      <p class="endTxt">直播已{{status == 2 ? '结束' : "失效"}}</p>
       <p class="time">
         <span>直播时长：</span>
         <span>{{endInfo.liveTime}}</span>
@@ -71,7 +71,7 @@ import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
 import { DFSImg } from "@/utils/index";
 import live from "@/api/live";
 export default {
-  props: ["updateGoods", "goodsList", "endInfo"],
+  props: ["updateGoods", "goodsList", "endInfo","status"],
   name: "",
   data() {
     return {

src/components/livedModel/livedIsMsg.vue

@@ -7,7 +7,7 @@
           <div class="user">
             <p class="live"></p>
             <div class="name">
-              <span class="user">{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
+              <span>{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
             </div>
           </div>
         </div>
@@ -67,18 +67,19 @@ export default {
     overflow: hidden;
     bottom: 0;
     padding-left: 10px;
+    border-radius: 9px;
     .item {
       width: 50vw;
-      padding: 4px 0;
-      display: flex;
-      align-items: flex-start;
-      line-height: 18px;
       border-radius: 9px;
-      background-color: rgba(0,0,0,0.3);
       margin-bottom: 4px;
-      padding-left: 8px;
-      box-sizing: border-box;
       .user {
+        max-width: 50vw;
+        padding: 4px 8px;
+        display: inline-block;
+        line-height: 18px;
+        border-radius: 9px;
+        background-color: rgba(0,0,0,0.3);
+        box-sizing: border-box;
         .name {
           color: #f9a93c;
           font-size: 14px;

src/components/livedModel/livedShareDia.vue

@@ -71,6 +71,11 @@ export default {
   },
   onUnload() {},
   mounted() {},
+  onShow(){
+    console.log('onSHow..........................')
+    this.againLoadingPoster = false;
+    this.init();
+  },
   methods: {
     closePosterDia() {
       this.showPosterDia = false;
@@ -80,16 +85,21 @@ export default {
       // 获取小程序码
       let id = Number(this.liveId);
       live.getLiveQRCode(id).then(res => {
+        
         if (res.data.code == 200) {
+          let cImg = DFSImg(this.info.posterCoverUrl);
           let query = {
             liveId: this.liveId,
             livedTitle: this.info.title,
-            livedStatus: this.info.liveBroadcastState
+            livedStatus: this.info.liveBroadcastState,
+            posterCoverUrl : DFSImg(this.info.posterCoverUrl)
           };
-          let cImg = DFSImg(this.info.posterCoverUrl);
+          
+          console.log('cImg -----------------',cImg)
           if (cImg.indexOf("https") == -1) {
             query.posterCoverUrl = cImg.replace("http", "https");
           }
+          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()}`;
@@ -101,9 +111,24 @@ export default {
           
           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;
+              // 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)
               console.log('111111111111111111111111111')
             }

src/components/livedModel/livedposterDia.vue

@@ -88,6 +88,8 @@ export default {
       ctx.setFillStyle("#fff");
       ctx.fillRect(0, 0, 310 * bili, 520 * bili);
 
+      console.log('info.posterCoverUrl',info.posterCoverUrl)
+
       //封面
       this.saveThe(info.posterCoverUrl, path => {
         console.log(this.info)
@@ -129,26 +131,6 @@ export default {
           
         })
 
-        // ctx.drawImage(require('../../../static/images/bofang.png'), 20 * bili , 340 * bili, 26 * bili, 20 * bili);
-        // ctx.save()
-
-        // ctx.setTextAlign("left");
-        // ctx.setFillStyle("#3F2F00");
-        // ctx.setFontSize(14);
-        // ctx.fillText(this.info.livedStatus == 1 ? '直播中' : '直播预告', 52 * bili , 355 * bili);
-
-        // if(this.info.livedStatus == 0){
-        //   ctx.drawImage(require('../../../static/images/lishi.png'), 160 * bili , 340 * bili, 20 * bili, 20 * bili);
-        //   ctx.save()
-
-        //   ctx.setTextAlign("left");
-        //   ctx.setFillStyle("#3F2F00");
-        //   ctx.setFontSize(14);
-        //   ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
-        // }
-        
-        
-        // ctx.fill()
 
         ctx.setTextAlign("left");
         ctx.setFillStyle("#3F2F00");
@@ -167,20 +149,23 @@ export default {
           ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
           ctx.save();
           //头像
-          this.saveThe(info.avatarUrl, path => {
+          // this.saveThe(info.avatarUrl, path => {
+
             ctx.clip();
-            ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
+            ctx.drawImage(info.avatarUrl, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
             ctx.save();
             ctx.stroke();
             ctx.draw();
+            
             this.posterStatus = true;
             console.log("--------海报生成成功");
-          });
+          // });
         });
       });
     },
     // 小程序需要将图片下载下来，然后才能绘制到画布上
     saveThe(url, callback) {
+      console.log('url==========',url)
       wx.getImageInfo({
         src: url, //服务器返回的图片地址
         success: res => {

src/components/livedModel/notStarted.vue

@@ -83,9 +83,17 @@ export default {
             });
           }
         }else{
+          wx.showToast({
+            title: '订阅失败',
+            icon: "none"
+          });
           console.log('开播失败')
         }
       } catch (err) {
+        wx.showToast({
+          title: '订阅失败',
+          icon: "none"
+        });
         console.error("subscribeMessage-err", err);
       }
     },

src/pages/index/index.vue

@@ -365,6 +365,7 @@ export default {
     
 
     console.log(this.shareUrl, "index12");
+    console.log(`/pages/index/main?share=${encodeURIComponent(this.shareUrl)}`, '测试直播分享相关')
     return {
       title: this.shareShopName, // 默认是小程序的名称
       path: `/pages/index/main?share=${encodeURIComponent(this.shareUrl)}`, // 默认是当前页面

src/pages/live/index.vue

@@ -14,6 +14,7 @@
             :remote-mirror="remoteMirror"
             :local-mirror="remoteMirror"
             :mirror="mirror"
+            :waiting-image="liveInfo.coverUrl"
             style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1" 
             @statechange="statechange"
             @error="binderror"
@@ -221,6 +222,11 @@ export default {
             mirror : true,
         }
     },
+    filter(){
+        formatNum : (val) => {
+            return val - 0 > 10000 ? Math.floor(val / 10000)+ "w" : val
+        }
+    },
     watch:{
         //用户通知
         entryNoticeText(){
@@ -302,8 +308,6 @@ export default {
     },
     onShow(){
 
-        
-        
         wx.setKeepScreenOn({
             keepScreenOn: true
         })  
@@ -532,12 +536,32 @@ export default {
 
             day = Math.floor(getTimeAbs / (3600*1000*24))
             hours = Math.floor((getTimeAbs%(24*3600*1000))/(3600*1000));
-            minute = Math.floor((getTimeAbs%(24*3600*1000)%(3600*1000) )/(60*1000))
+            minute = Math.floor((getTimeAbs%(24*3600*1000)%(3600*1000) )/(60*1000))     
             if(getTime > 0){
                 if(day > 0){
-                    this.liveTime = `${day >= 10 ? day : '0' + day}天${hours >= 10 ? hours : '0' + hours}小时${minute >= 10 ? minute : '0' + minute}分`
+                    let showHours = "";
+                    let showMinute = "";
+                    if(hours > 0){  
+                        if(hours >= 10){
+                            showHours = hours + '小时'
+                        }else{
+                            showHours = '0' + hours + '小时'
+                        } 
+                    } 
+                    if(minute >= 10){
+                        showMinute = minute + '分'
+                    }else{
+                        showMinute = '0' + minute + '分'
+                    }       
+                    this.liveTime = `${day >= 10 ? day : '0' + day}天${showHours}${showMinute}`
                 }else if(day <= 0 && hours > 0){
-                    this.liveTime = `${hours >= 10 ? hours : '0' + hours}小时${minute >= 10 ? minute : '0' + minute}分`
+                    let showMinute = "";
+                    if(minute >= 10){
+                        showMinute = minute + '分'
+                    }else{
+                        showMinute = '0' + minute + '分'
+                    }   
+                    this.liveTime = `${hours >= 10 ? hours : '0' + hours}小时${showMinute}`
                 }else if(day <= 0 && hours <= 0 && minute >= 0){
                      this.liveTime = `${minute >= 10 ? minute : '0' + minute}分`
                 }
@@ -707,11 +731,11 @@ export default {
                                     }
                                 }
                                 //观看
-                                this.look = result.historyWatchNum;
+                                this.look = result.historyWatchNum - 0 >= 10000 ? Math.floor(result.historyWatchNum / 10000)+ "w" : result.historyWatchNum
                                 //在线
-                                this.online = result.watchNum
+                                this.online = result.watchNum - 0 >= 10000 ? Math.floor(result.watchNum / 10000)+ "w" : result.watchNum 
                                 //点赞
-                                this.praise = result.likeInfo.likeNum
+                                this.praise = result.likeInfo.likeNum - 0 >= 10000 ? Math.floor(result.likeInfo.likeNum / 10000)+ "w" : result.likeInfo.likeNum
                                 //评论
                                 result.guestBookList.forEach(item => {
                                     this.commentsList.push(item)

src/pages/lived/index.vue

@@ -23,7 +23,7 @@
           </div>
           <div class="info">
             <p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
-            <p class="num" v-if="liveNoticeInfo.historyWatchNum>0">
+            <p class="num" v-if="liveNoticeInfo.liveBroadcastState != 2 && liveNoticeInfo.liveBroadcastState != 4">
               <span>{{liveNoticeInfo.historyWatchNum}}</span>
               <span style="margin-left:6px;">观看</span>
             </p>
@@ -37,9 +37,10 @@
       <isPauseShow v-if="liveNoticeInfo.liveBroadcastState==3" :info="liveNoticeInfo"></isPauseShow>
       <!-- 结束展示 -->
       <livedIsEnded
-        v-if="liveNoticeInfo.liveBroadcastState==2"
+        v-if="liveNoticeInfo.liveBroadcastState==2 || liveNoticeInfo.liveBroadcastState==4"
         :updateGoods="updateGoods"
         :endInfo="endInfo"
+        :status="liveNoticeInfo.liveBroadcastState"
         :goodsList="goodsList"
       ></livedIsEnded>
       <!-- 控件层 -->
@@ -117,9 +118,10 @@ export default {
       endInfo: {}, //直播结束详情
       firstComing: true, // 首次进入
       params: {},
-      userId: "",
+      // userId: "",
       hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
       spokesmanObj: {}, //分销员信息
+      userId : '', //用户id
       navTop: 0,
       navHeight: 0,
       isTimeLock: true, //时间锁
@@ -138,7 +140,7 @@ export default {
   },
   computed: {},
   onLoad(options) {
-    console.log("onLoad");
+    console.log("onLoad",options);
     this.isTimeLock = true;
     this.isTimeFirstReq = true;
     this.newCommentsTime = 0;
@@ -177,7 +179,8 @@ export default {
       this.$store.commit("setSpokesman", {
         spokesmanGroupId: this.params.spokesmanGroupId,
         spokesmanShopId: this.params.spokesmanShopId,
-        spokesmanRelId: this.params.spokesmanRelId
+        spokesmanRelId: this.params.spokesmanRelId,
+        userId : this.params.userId
       });
     }
     this.init();
@@ -198,10 +201,18 @@ export default {
     };
     live.addShareRecord(query).then();
     let _this = this;
-    if (this.hasInvitationStatus == 1) {
-      Object.assign(this.params, this.params, this.spokesmanObj);
+    console.log(this.userId,'this.userId')
+    if(this.userId){
+      if (this.hasInvitationStatus == 1) {
+        Object.assign(this.params, this.params, this.spokesmanObj,{userId : this.userId});
+      }else{
+        Object.assign(this.params, this.params,{userId : this.userId});
+      }
     }
+    
+    console.log(options)
     console.log(this.params, "--------------161");
+    console.log(`/pages/lived/main?params=${JSON.stringify(this.params)}`)
     let shareObj = {
       title: this.liveNoticeInfo.title,
       path: `/pages/lived/main?params=${JSON.stringify(this.params)}`,
@@ -232,6 +243,7 @@ export default {
   onShow() {
     console.log("onShow");
     this.userEntry("IN");
+    this.isLogin()
   },
   onUnload() {
     this.liveNoticeInfo.liveBroadcastState = -1;
@@ -254,6 +266,7 @@ export default {
   methods: {
     // 初始化数据
     init() {
+      let  _this = this;
       let liveBroadcastId = this.liveId;
       live.getLiveInfo(liveBroadcastId).then(res => {
         if (res.data.code == 200) {
@@ -284,8 +297,31 @@ export default {
           ) {
             clearInterval(this.goodTiming);
           }
+
+          if(this.liveNoticeInfo.liveBroadcastState == 4){
+            this.endLived();
+          }
         }
       });
+      //绑定关系
+      wx.getStorage({
+        key: "sessionid",
+        success : res => {
+          // 查询分销员信息
+
+          console.log(res,'绑定关系',this.params,this.params.spokesmanRelId,this.params.userId)
+          if(this.params.spokesmanRelId){
+            live.becomepokesmanCustomer(this.params.spokesmanRelId).then(res=>{
+              console.log(res,"----------------------becomepokesmanCustomer")
+            })
+          }else if(this.params.userId){
+            live.saveCustomerInviterInviteeRel(this.params.userId).then(res=>{
+              console.log(res,"----------------------saveCustomerInviterInviteeRel")
+            })
+          }
+        },
+        fail(res) {}
+      });
     },
     back() {
       let query = {
@@ -306,6 +342,7 @@ export default {
         success(res) {
           // 查询分销员信息
           _this.getSpokesman();
+          _this.getUserId();
         },
         fail(res) {}
       });
@@ -344,6 +381,14 @@ export default {
         }
       });
     },
+    getUserId(){
+      live.getUserInfo().then(res => {
+        if(res.data.code=="200"&&res.data.data){ 
+          console.log('getUserId')
+          this.userId = res.data.data.userId
+        }
+      })
+    },
     toShop() {
       // 到商城首页
       this.backPath = "/";
@@ -587,6 +632,7 @@ img {
     bottom: 0;
     right: 0;
     z-index: -1;
+    
     image {
       width: 100%;
       height: 100%;
@@ -602,6 +648,7 @@ img {
     top: 0;
     left: 0;
     z-index: 1;
+    background-color: rgba(102,102,102,.38);
     .customBack {
       position: absolute;
       left: 12px;
@@ -619,13 +666,12 @@ img {
         background: rgba(0, 0, 0, 0.6);
         border-radius: 30px;
         align-items: center;
-        padding-right: 10px;
+        padding: 2px 10px 2px 2px;
         .img {
           width: 30px;
           height: 30px;
           border-radius: 50%;
-          overflow: hidden;
-          margin-left: 4px;
+          overflow: hidden; 
           img {
             width: 100%;
             height: 100%;

src/store/state.js

@@ -15,6 +15,7 @@ const state = {
   spokesmanGroupId: "",
   spokesmanShopId: "",
   spokesmanRelId: "",
+  userId : "",
   subscribeMessageObj: {},
   offlineShopCode:"",
   isLogin,

src/utils/index.js

@@ -74,6 +74,7 @@ export function DFSImg(path, w, h) { //
     if (w && h) {
       path += '.' + w + 'x' + h + '.jpg';
     }
+
     return baseImg[Math.floor(Math.random() * 100) % baseImg.length] + path;
   }
 }