直播

taiyuan
1 parent 93cb23de
Showing 3 changed files with 162 additions and 95 deletions
packageA/pages/liveStream/liveStream.js
packageA/pages/liveStreamDetails/liveStreamDetails.js
packageA/pages/liveStreamDetails/liveStreamDetails.wxml
@@ -44,12 +44,12 @@ Page({
     wx.navigateTo({
       url: '/packageA/pages/liveStreamDetails/liveStreamDetails?id=' + e.currentTarget.dataset.id + '&live=' + e.currentTarget.dataset.live
     })
-    console.log('options-->');
+    // console.log('options-->');
   },
   // 点击 订阅/观看直播/观看回放 按钮，跳转直播组件
   clickLive: function (e) {
-    console.log('当前房间号roomid：', e.currentTarget.dataset.roomid);
+    // console.log('当前房间号roomid：', e.currentTarget.dataset.roomid);
     let roomId = e.currentTarget.dataset.roomid;
     let customParams = encodeURIComponent(JSON.stringify({
       path: 'pages/index/index',
@@ -77,74 +77,74 @@ Page({
     });
   },
-  loadLiveList: function (curPage) {
-    // console.log('---->curPage', curPage);
-    // var live = {};
-    // live.toBegin = []; // 即将开始
-    // live.ing = []; // 直播中
-    // var liveOver = []; // 已结束
-    var that = this;
-    var storeId = o.stoid;
-
-    // 请求数据
-    getApp().request.promiseGet("/api/weshop/wx/livelist/page", {
-      data: {
-        storedId: o.stoid,
-        page: curPage,
-        live_status: 103
-      }
-    }).then(res => {
-      if (res.data.code == 0) {
-        console.log('res------------>', res);
-        // 计算总页数
-        // var total = res.data.data.total;
-        // console.log("total", total);
-        // var pageSize = res.data.data.pageSize;
-        // console.log("pageSize", pageSize);
-        // var pageNum = that.pageTotal(total, pageSize);
-        // that.setData({
-        //   pageNum: that.pageTotal(total, pageSize)
-        // });
-
-        // 如果当前请求的是第一页数据，则执行赋值，否则执行合并再赋值
-        if (curPage == 1) {
-          that.setData({
-            liveOver: that.data.liveOver.concat(res.data.data.pageData)
-          })
-        } else {
-          that.setData({
-            liveOver: that.data.liveOver.concat(res.data.data.pageData)
-          })
-        };
-
-        // var list = that.data.list;
-        // for(var i in list) {
-        // var liveStatus = list[i].live_status;
-        // if (liveStatus == '101') {
-        //   live.ing.push(list[i]);
-        // } else if (liveStatus == '102') {
-        //   live.toBegin.push(list[i]);
-        // } else if (liveStatus == '103') {
-        //   live.over.push(list[i]);
-        // }
-        // }
-
-        // that.setData({
-        //   liveOver: list
-        // });
-
-        curPage++;
-        that.setData({
-          curPage
-        });
-
-        console.log('上拉已经触发，当前page------------------------->',that.data.curPage);
-
-      } else {
-        console.error('请求失败！！！！！');
-      }
-    })
-  },
+  // loadLiveList: function (curPage) {
+  //   // console.log('---->curPage', curPage);
+  //   // var live = {};
+  //   // live.toBegin = []; // 即将开始
+  //   // live.ing = []; // 直播中
+  //   // var liveOver = []; // 已结束
+  //   var that = this;
+  //   var storeId = o.stoid;
+
+  //   // 请求数据
+  //   getApp().request.promiseGet("/api/weshop/wx/livelist/page", {
+  //     data: {
+  //       storedId: o.stoid,
+  //       page: curPage,
+  //       live_status: 103
+  //     }
+  //   }).then(res => {
+  //     if (res.data.code == 0) {
+  //       // console.log('res------------>', res);
+  //       // 计算总页数
+  //       // var total = res.data.data.total;
+  //       // console.log("total", total);
+  //       // var pageSize = res.data.data.pageSize;
+  //       // console.log("pageSize", pageSize);
+  //       // var pageNum = that.pageTotal(total, pageSize);
+  //       // that.setData({
+  //       //   pageNum: that.pageTotal(total, pageSize)
+  //       // });
+
+  //       // 如果当前请求的是第一页数据，则执行赋值，否则执行合并再赋值
+  //       if (curPage == 1) {
+  //         that.setData({
+  //           liveOver: that.data.liveOver.concat(res.data.data.pageData)
+  //         })
+  //       } else {
+  //         that.setData({
+  //           liveOver: that.data.liveOver.concat(res.data.data.pageData)
+  //         })
+  //       };
+
+  //       // var list = that.data.list;
+  //       // for(var i in list) {
+  //       // var liveStatus = list[i].live_status;
+  //       // if (liveStatus == '101') {
+  //       //   live.ing.push(list[i]);
+  //       // } else if (liveStatus == '102') {
+  //       //   live.toBegin.push(list[i]);
+  //       // } else if (liveStatus == '103') {
+  //       //   live.over.push(list[i]);
+  //       // }
+  //       // }
+
+  //       // that.setData({
+  //       //   liveOver: list
+  //       // });
+
+  //       curPage++;
+  //       that.setData({
+  //         curPage
+  //       });
+
+  //       console.log('上拉已经触发，当前page------------------------->',that.data.curPage);
+
+  //     } else {
+  //       console.error('请求失败！！！！！');
+  //     }
+  //   })
+  // },
   // pageTotal: function (rowCount, pageSize) {
   //   if (rowCount == null || rowCount == "") {
@@ -338,7 +338,7 @@ Page({
     //   })
     // }
-		console.log('触底啦');
+		// console.log('触底啦');
 		this.scrollToLower('/api/weshop/wx/livelist/page', {
 			storedId: o.stoid,
 			live_status: 103
@@ -351,7 +351,7 @@ Page({
   onShareAppMessage: function () {
     if (res.from === 'button') {
       // 来自页面内转发按钮
-      console.log(res.target)
+      // console.log(res.target)
     }
     return {
       title: '直播列表'
@@ -362,7 +362,7 @@ Page({
   onShareTimeline: function (res) {
     if (res.from === 'button') {
       // 来自页面内转发按钮
-      console.log(res.target)
+      // console.log(res.target)
     }
     return {
       title: '直播列表'
@@ -79,14 +79,18 @@ Page({
   //生成海报
   createPlaybill: function () {
     // 1.提示 “正在生成海报...”
+    wx.showLoading({
+      title: '正在生成海报...'
+    });
-    // 2.生成海报，如果生成完毕,关闭提示
-    this.drawPlaybill();
     // 3.展示生成的海报
     this.setData({
       showActionSheet: 'false',
-      showPlaybill: !this.data.showPlaybill
+      // showPlaybill: !this.data.showPlaybill
     });
+		
+		// 2.生成海报，如果生成完毕,关闭提示
+		this.drawPlaybill();
   },
@@ -103,8 +107,8 @@ Page({
         })
       }
     });
-    console.log('宽度',this.data.windowWidth);
-    console.log('高度',this.data.windowHeight);
+    // console.log('宽度',this.data.windowWidth);
+    // console.log('高度',this.data.windowHeight);
   },
 //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
@@ -140,9 +144,9 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un
    // 生成海报
   drawPlaybill: function () {
-    wx.showLoading({
-      title: '正在生成海报...'
-    });
+    // wx.showLoading({
+    //   title: '正在生成海报...'
+    // });
     // 数据准备
     const title = this.data.details.name;
@@ -196,26 +200,52 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un
     ctx.fillText(this.data.nickName, 106, 60);
     // 绘制主图
-    ctx.drawImage(this.data.coverImg, 0, 104, 480, 382);
-    // ctx.draw(true);
+		ctx.setFillStyle('#f8f8f8');
+		ctx.fillRect(0, 104, 480, 380);
+		
+		// var w = this.data.coverImgWidth;
+		// var h = this.data.coverImgHeight;
+				var w = this.data.coverImgSize.imageWidth;
+		    var h = this.data.coverImgSize.imageHeight;
+		    // var dw = 480/w          //canvas与图片的宽高比
+		    // var dh = 380/h
+		    // var ratio       
+		    // // 裁剪图片中间部分
+		    // if(w > 480 && h > 380 || w < 480 && h < 380){
+		    //     if (dw > dh) {
+		    //         ctx.drawImage(this.data.coverImg, 0, (h - 380/dw)/2, w, 380/dw, 0, 104, 480, 380);
+		    //     } else {
+		    //         ctx.drawImage(this.data.coverImg, (w - 480/dh)/2, 0, 480/dh, h, 0, 104, 480, 380);
+		    //     };
+		    // }
+		    // // 拉伸图片
+		    // else{
+		    //     if(w < 300){
+		    //         ctx.drawImage(this.data.coverImg, 0, (h - 380/dw)/2, w, 380/dw, 0, 104, 480, 380);
+		    //     }else {
+		    //         ctx.drawImage(this.data.coverImg, (w - 480/dh)/2, 0, 480/dh, h, 0, 104, 480, 380);
+		    //     }
+		    // };
+    ctx.drawImage(this.data.coverImg, (480-w)/2, (380-h)/2+104, w, h);
+    
     // 绘制文字
     ctx.setFontSize(24);
     ctx.setFillStyle('#1E1E1E');
-    this.drawText(ctx, title, 51, 563, 300, 360, 2);
+		this.drawText(ctx, title, 30, 600, 200, 460, 2);
     // 绘制小程序码
-    ctx.drawImage(this.data.ewm, 310, 525, 132, 132);
-    // ctx.draw(true);
+    ctx.drawImage(this.data.ewm, 310, 540, 132, 132);
+    
     //绘制文字：长按识别
     ctx.setFontSize(20);
     ctx.setFillStyle('#1E1E1E');
-    ctx.fillText('长按识别小程序', 309, 675);
+    ctx.fillText('长按识别小程序', 309, 710);
     ctx.draw(true, function() {
       setTimeout(function() {
-        console.log("我进来了~~~~~");
+        // console.log("我进来了~~~~~");
         wx.canvasToTempFilePath({
           x: 0,
           y: 0,
@@ -228,10 +258,12 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un
           success: function(res) {
             wx.hideLoading();
             that.setData({
-              canvasToImgPath: res.tempFilePath
+              canvasToImgPath: res.tempFilePath,
+							showPlaybill: !that.data.showPlaybill
             });
+						// console.log('生成海报陈宫啦', that.data.canvasToImgPath);
             // that.saveImageToPhotosAlbum(res.tempFilePath);
-            console.log('截图陈宫：', that.data.canvasToImgPath);
+            // console.log('截图陈宫：', that.data.canvasToImgPath);
             // wx.previewImage({
             //   //将图片预览出来
             //   urls: [that.data.canvasToImgPath]
@@ -446,9 +478,13 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un
           // 请求主图
           that.getImageInfo(that.data.details['share_img']).then(res => {
             that.setData({
-              coverImg: res.path
+              coverImg: res.path,
+							coverImgWidth: res.width,
+							coverImgHeight: res.height,
+							coverImgSize: that.imageResize(res.width, res.height),
+							// coverImgHeight: res.height,
             });
-            console.log('主图加载成功~')
+            // console.log('主图加载成功~', that.data.coverImgSize);
           });
           // 请求头像
@@ -568,7 +604,7 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
+  onShareAppMessage: function (res) {
     this.setData({
       showActionSheet: 'false'
     })
@@ -597,6 +633,36 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un
       title: this.data.details.name
       // path: '/page/user?id=123'
     }
-  }
+  },
+	
+	
+	imageResize(imgWidth, imgHeight) { 
+	 var imageSize = {}; 
+	 var originalWidth = imgWidth;//图片原始宽 
+	 var originalHeight = imgHeight;//图片原始高 
+	 var originalScale = originalHeight/originalWidth;//图片高宽比 
+	 // console.log('originalWidth: ' + originalWidth) 
+	 // console.log('originalHeight: ' + originalHeight)
+		
+	 //获取屏幕宽高  
+	 var winWidth = 480;
+	 var winHeight = 380; 
+	 var winScale = winHeight/winWidth;//屏幕高宽比 
+	 // console.log('windowWidth: ' + winWidth) 
+	 // console.log('windowHeight: ' + winHeight) 
+	 if(originalScale < winScale){//图片高宽比小于屏幕高宽比 
+	  //图片缩放后的宽为屏幕宽 
+	   imageSize.imageWidth = winWidth; 
+	   imageSize.imageHeight = (winWidth * originalHeight) / originalWidth; 
+	 }else{//图片高宽比大于屏幕高宽比 
+	  //图片缩放后的高为屏幕高 
+	   imageSize.imageHeight = winHeight; 
+	   imageSize.imageWidth = (winHeight * originalWidth) / originalHeight; 
+	 }
+	 console.log('缩放后的宽: ' + imageSize.imageWidth) 
+	 console.log('缩放后的高: ' + imageSize.imageHeight) 
+	 return imageSize; 
+	},
+	 
 })
@@ -75,7 +75,6 @@
   <!-- 生成海报 -->
   <view class="{{showPlaybill ? 'playbill':'playbill active'}}" hidden="{{showPlaybill}}">
     <image src="{{canvasToImgPath}}" class="playbill-pic" mode="widthFix" bindtap="closeWin"></image>
-    <canvas canvas-id="myCanvas" catchtouchmove="true" style="width:480px;height:738px;position:absolute;left:5000%;"></canvas>
     <!-- style="width:{{windowWidth}}px;height:{{windowHeight}}px;" -->
     <view class="playbill-save" bindtap="onSaveToPhone">保存至相册</view>
   </view>
@@ -88,5 +87,7 @@
 </view>
+<canvas canvas-id="myCanvas" catchtouchmove="true" style="width:480px;height:738px;position:absolute;left:-9999px;"></canvas>
+
 <!-- <canvas canvas-id="myCanvas" class="" catchtouchmove="true" style="width:480px;height:738px;position:absolute;left:5000%"></canvas> -->
 <!-- <canvas canvas-id='share' style='width:750rpx;height:1217rpx;' wx:if='{{!canvasHidden}}'></canvas> -->