直播列表添加显示时间和主播，直播详情生成和保存海报图片

后端研发-倪永富
1 parent 4642cf56
Showing 5 changed files with 217 additions and 156 deletions
packageA/pages/liveStream/liveStream.wxml
packageA/pages/liveStream/liveStream.wxss
packageA/pages/liveStreamDetails/liveStreamDetails.js
packageA/pages/liveStreamDetails/liveStreamDetails.wxml
packageA/pages/liveStreamDetails/liveStreamDetails.wxss
@@ -9,19 +9,18 @@
 			<block wx:for="{{live.toBegin}}">
 				<view class="list-item" data-id="{{item.id}}" data-live="toBegin" catchtap="clickItem">
 					<view class="list-item-left">
-						<image src="{{item.cover_img}}" class="item-pic" mode="aspectFill"></image>
-						<!-- <view class="item-desc">
-							<view>{{item.name}}</view>
-							<view>{{filter.format_time(item.start_time)}}</view>
-						</view> -->
+						<image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
 					</view>
 					<view class="list-item-right">
-						<view class="item-title">{{item.name}}</view>
+						<view>
+							<view class="item-title">{{item.name}}</view>
+							<view class="item-time">{{filter.format_time(item.start_time, 2)}} 开始</view>
+							<view></view>
+						</view>
 						<subscribe room-id="{{item.roomid}}" stopPropagation="{{true}}"></subscribe>
 					</view>
-					
 				</view>
-				
+			
 			</block>
 		</view>
 	</block>
@@ -34,7 +33,7 @@
 			<block wx:for="{{live.ing}}">
 				<view class="list-item" catchtap="clickItem" data-id="{{item.id}}" data-live="ing">
 					<view class="list-item-left">
-						<image src="{{item.cover_img}}" class="item-pic" mode="aspectFill"></image>
+						<image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
 					</view>
 					<view class="list-item-right">
 						<view class="item-title">{{item.name}}</view>
@@ -53,10 +52,14 @@
 			<block wx:for="{{live.over}}">
 				<view class="list-item" bindtap="clickItem" data-id="{{item.id}}"  data-live="over">
 					<view class="list-item-left">
-						<image src="{{item.cover_img}}" class="item-pic" mode="aspectFill"></image>
+						<image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
 					</view>
 					<view class="list-item-right">
-						<view class="item-title">{{item.name}}</view>
+						<view>
+							<view class="item-title">{{item.name}}</view>
+							<view class="item-time">{{filter.format_time(item.start_time, 2)}} 开始</view>
+							<view class="item-anchor">主播：{{item['anchor_name']}}</view>
+						</view>
 						<view class="item-btn" catchtap="clickLive" data-roomid="{{item.roomid}}">观看回放</view>
 					</view>
 				</view>
@@ -9,8 +9,8 @@
 }
 .list-item-left {
   position: relative;
-  width: 300rpx;
-  height: 300rpx;
+  width: 340rpx;
+  height: 220rpx;
   flex-shrink: 0;
 }
 .list-item-right {
@@ -55,9 +55,18 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 2;
   overflow: hidden;
 }
+.item-time {
+  color: #999;
+  font-size: 22rpx;
+  padding-top: 10rpx;
+}
+.item-anchor {
+  color: #999;
+  font-size: 22rpx;
+}
 .item-btn {
   width: 172rpx;
@@ -29,7 +29,11 @@ Page({
     nickName: '',
     avatarUrl: '',
     coverImg: '',
-    canvasToImgPath: ''
+    canvasToImgPath: '',
+    screenWidth: 0,
+    canvasHidden: 1,
+    gid: '',
+    shareImgPath: ''
   },
   // 点击商品
@@ -64,16 +68,15 @@ Page({
   //生成海报
   createPlaybill: function () {
     // 1.提示 “正在生成海报...”
-    wx.showLoading({
-      title: '正在生成海报...'
-    });
+    
     // 2.生成海报，如果生成完毕,关闭提示
     this.drawPlaybill();
     // 3.展示生成的海报
     this.setData({
-      showPlaybill: !this.data.showPlaybill,
-      showActionSheet: 'false'
+      showActionSheet: 'false',
+      showPlaybill: !this.data.showPlaybill
     });
+    
   },
   // 获取设备信息
@@ -84,150 +87,153 @@ Page({
         that.setData({
           windowWidth: res.windowWidth,
           windowHeight: res.windowHeight,
+          screenWidth: res.screenWidth,
           dpr: res.pixelRatio
         })
       }
     });
+    console.log('宽度',this.data.windowWidth);
+    console.log('高度',this.data.windowHeight);
   },
-    //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
-    drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, unit) {
-      var lineWidth = 0;
-      var lastSubStrIndex = 0; //每次开始截取的字符串的索引
-      var han = 0;
-      for (let i = 0; i < str.length; i++) {
-        if (han == 2) return;
-        //lineWidth += ctx.measureText(str[i]).width;
-        lineWidth += ut.measureText(str[i], 21.3 * unit);
-        if (lineWidth > canvasWidth) {
-          han++;
-  
-          if (han == 2) {
-            ctx.textAlign = 'justify';
-            ctx.fillText(str.substring(lastSubStrIndex, i) + '...', leftWidth, initHeight); //绘制截取部分
-          } else {
-            ctx.textAlign = 'justify';
-            ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight);
-          }
-          initHeight += 22; //22为字体的高度
-          lineWidth = 0;
-          lastSubStrIndex = i;
-          titleHeight += 20;
-        }
-        if (i == str.length - 1) { //绘制剩余部分
-          ctx.textAlign = 'justify';
-          ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
-        }
+//文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
+drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, unit) {
+  var lineWidth = 0;
+  var lastSubStrIndex = 0; //每次开始截取的字符串的索引
+  var han = 0;
+  for (let i = 0; i < str.length; i++) {
+    if (han == 2) return;
+    //lineWidth += ctx.measureText(str[i]).width;
+    lineWidth += ut.measureText(str[i], 21.3 * unit);
+    if (lineWidth > canvasWidth) {
+      han++;
+
+      if (han == 2) {
+        ctx.textAlign = 'justify';
+        ctx.fillText(str.substring(lastSubStrIndex, i) + '...', leftWidth, initHeight); //绘制截取部分
+      } else {
+        ctx.textAlign = 'justify';
+        ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight);
       }
-    },
+      initHeight += 22; //22为字体的高度
+      lineWidth = 0;
+      lastSubStrIndex = i;
+      titleHeight += 20;
+    }
+    if (i == str.length - 1) { //绘制剩余部分
+      ctx.textAlign = 'justify';
+      ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
+    }
+  }
+},
    // 生成海报
   drawPlaybill: function () {
-    var that = this
-    // 适配屏get幕
-    let scale = this.data.windowWidth / 375.0
- 
-    this.setData({ totalHeight: 667*scale})
-    // 获取Canvas
-    let ctx = wx.createCanvasContext('myCanvas')
-
-    // 放大 因为不放大的话，生成的分享图会模糊。暂时先注释
-    ctx.scale(this.data.canvasScale, this.data.canvasScale)
+    wx.showLoading({
+      title: '正在生成海报...'
+    });
-    // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
-    // os.stoid;
+    // 数据准备
+    const title = this.data.details.name;
+    // const headImg = app.globalData.userInfo['head_pic'];
+    const that = this;
+
+    // console.log('----------------v', headImg);
     var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
       os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
-   + "?sceneValue=1012" + "&pageValue=packageA/pages/liveStreamDetails/liveStreamDetails"
-  //  console.log('path3---->', path3);
+    
+    // 以iPhone6为例，375/750 = 0.5
+    // let scale = this.data.windowWidth / 375;
+    let scale = this.data.screenWidth / 750 * 1.35
-    // 绘制主背景白色
-    ctx.setFillStyle('#ffffff')
-    ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight)
-    ctx.draw(true);
+    // 适配屏get幕
+    // let scale = this.data.windowWidth / 375.0;
+    // this.setData({totalHeight: 667 * scale});
+
+    // 获取Canvas
+    let ctx = wx.createCanvasContext('myCanvas');
+    // 放大 因为不放大的话，生成的分享图会模糊。暂时先注释
+    // ctx.scale(this.data.canvasScale, this.data.canvasScale)
+    
-    const coverImag = this.data.details['cover_img'];
-    const title = this.data.details.name;
-    console.log('detail--->', this.data.details);
+  //   var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
+  //     os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
+  //  + "?sceneValue=1012" + "&pageValue=packageA/pages/liveStreamDetails/liveStreamDetails"
+  //  console.log('path3---->', path3);
-    //绘制头像
-    wx.getImageInfo({
-      src: that.data.avatarUrl,
-      success: function(res) {
-        ctx.save();
-        ctx.beginPath();
-        ctx.arc(29*scale, 27*scale, 14*scale, 0, 2*Math.PI);
-        ctx.clip();
-        ctx.drawImage(res.path, 15*scale, 13*scale, 28*scale, 28*scale);
-        ctx.restore()
-        ctx.draw(true);
-      }
-    })
+
+    // 绘制主背景白色
+    ctx.setFillStyle('#ffffff');
+    ctx.fillRect(0, 0, 480, 738);
+
+    // 绘制头像
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(58, 63, 28, 0, 2*Math.PI);
+    ctx.clip();
+    // console.log('1__________________>',app.globalData.userInfo['head_pic']);
+    ctx.drawImage(this.data.avatarUrl, 30, 35, 56, 56);
+    ctx.restore();
     // 绘制昵称
-    ctx.setFontSize(12*scale);
+    ctx.setFontSize(14);
     ctx.setFillStyle('#ADADAD');
-    ctx.fillText(this.data.nickName, 54*scale, 32*scale);
+    ctx.fillText(this.data.nickName, 106, 68);
-    //绘制主图
-    wx.getImageInfo({
-      src: coverImag,
-      success: function(res) {
-        ctx.drawImage(res.path, 0, 52*scale, 240*scale, 191*scale);
-        ctx.draw(true);
-      }
-    })
+    // 绘制主图
+    ctx.drawImage(this.data.coverImg, 0, 104, 480, 382);
+    // ctx.draw(true);
-    //绘制文字
-    ctx.setFontSize(14*scale);
+    // 绘制文字
+    ctx.setFontSize(24);
     ctx.setFillStyle('#1E1E1E');
-    // ctx.fillText(title, 10*scale, 281*scale, 97*scale);
-    this.drawText(ctx, title, 10*scale, 281*scale, 130*scale, 130*scale, scale);
-    // ctx.draw(true);
+    this.drawText(ctx, '发的电视剧覅是覅世界佛教阿松i范吉奥i是房间都是金佛ex哎', 51, 563, 300, 300, 2);
-    //绘制小程序码
-    wx.getImageInfo({
-      src: path3,
-      success: function(res) {
-        ctx.drawImage(res.path, 152*scale, 262*scale, 66*scale, 66*scale);
-        ctx.draw(true);
-      }
-    })
+    // 绘制小程序码
+    ctx.drawImage(this.data.ewm, 310, 525, 132, 132);
+    // ctx.draw(true);
-    //绘制文字：常按识别
-    ctx.setFontSize(14*scale);
+    //绘制文字：长按识别
+    ctx.setFontSize(20);
     ctx.setFillStyle('#1E1E1E');
-    ctx.fillText('长按识别小程序', 135*scale, 350*scale);
-
+    ctx.fillText('长按识别小程序', 309, 675);
-    //把画板内容绘制成图片，并回调 画板图片路径
     ctx.draw(true, function() {
       setTimeout(function() {
+        console.log("我进来了~~~~~");
         wx.canvasToTempFilePath({
           x: 0,
           y: 0,
-          destWidth: that.data.windowWidth*2,
-          destHeight: that.data.windowHeight*2,
-          fileType: 'jpg',
-          quality: 1,
+          width: 750,
+          height: 1217,
+          destWidth: 750,
+          destHeight: 1217,
           canvasId: 'myCanvas',
+          fileType: 'jpg',
           success: function(res) {
             wx.hideLoading();
             that.setData({
-              canvasToImgPath: res.tempFilePath,
+              canvasToImgPath: res.tempFilePath
             });
-            console.log(res.tempFilePath);
+            // that.saveImageToPhotosAlbum(res.tempFilePath);
+            console.log('截图陈宫：', that.data.canvasToImgPath);
+            // wx.previewImage({
+            //   //将图片预览出来
+            //   urls: [that.data.canvasToImgPath]
+            // });
           }
         })
-      }, 3000)
+      }, 1000)
     });
-  },
-  
+
+
+  },
+ 
   //点击观看直播
   clickBtn: function () {
@@ -240,17 +246,18 @@ Page({
  // 保存图片到手机
   onSaveToPhone() {
+    var self = this;
     // 获取用户的当前设置，返回值中有小程序已经向用户请求过的权限
     this.getSetting().then((res) => {
       // 判断用户是否授权了保存到相册的权限，如果没有发起授权
       if (!res.authSetting['scope.writePhotosAlbum']) {
         this.authorize().then(() => {
           // 同意授权后保存下载文件
-          this.savedownloadFile(this.data.canvasToImgPath)
+          this.saveImageToPhotosAlbum(self.data.canvasToImgPath)
         })
       } else {
         // 如果已经授权，保存下载文件
-        this.savedownloadFile(this.data.canvasToImgPath)
+        this.saveImageToPhotosAlbum(self.data.canvasToImgPath)
       }
     })
   },
@@ -259,7 +266,7 @@ Page({
   onOpenSetting() {
     wx.openSetting({
       success:(res) => {
-        console.log(res.authSetting)
+        // console.log(res.authSetting)
       }
     })
   },
@@ -269,7 +276,6 @@ Page({
     return new Promise((resolve, reject) => {
       wx.getSetting({
         success: res => {
-          console.log('getting---->', res);
           resolve(res)
         }
       })
@@ -286,7 +292,7 @@ Page({
         scope: 'scope.writePhotosAlbum',
         // 同意授权
         success: () => {
-          resolve()
+          resolve();
         },
         // 拒绝授权,这里是用户拒绝授权后的回调
         fail: res => { 
@@ -298,10 +304,10 @@ Page({
               duration: 1000
             })
           } else {
-            this.showModal()
+            this.showModal();
           }
           console.log('拒绝授权');
-          reject()
+          reject();
         }
       })
     })
@@ -311,12 +317,14 @@ Page({
   savedownloadFile(img) {
     this.downLoadFile(img).then((res) => {
       return this.saveImageToPhotosAlbum(res.tempFilePath)
-    }).then(() => {      
+    }).then(() => {
+      // resolve()
     })
   },
   //单文件下载(下载文件资源到本地)，客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。
   downLoadFile(img) {
+    var self = this;
     return new Promise((resolve, reject) => {
       wx.showLoading({
         title: '保存中...', 
@@ -325,8 +333,7 @@ Page({
       wx.downloadFile({
         url: img,
         success: (res) => {
-          console.log('downloadfile', res)
-          resolve(res)
+          resolve(res);
         }
       })
     })
@@ -346,7 +353,13 @@ Page({
           self.setData({
             showPlaybill: 'true'
           });
-          resolve()
+          resolve();
+        },
+        fail: () => {
+          wx.showToast({
+            title: '保存失败',
+            duration: 1000,
+          });
         }
       })
     })
@@ -384,6 +397,34 @@ Page({
           that.setData({
             details: obj
           })
+
+          
+          // 请求主图
+          that.getImageInfo(that.data.details['cover_img']).then(res => {
+            that.setData({
+              coverImg: res.path
+            });
+            console.log('主图加载成功~')
+          });
+
+          // 请求头像
+          that.getImageInfo(app.globalData.userInfo['head_pic']).then(res => {
+            that.setData({
+              avatarUrl: res.path
+            });
+            console.log('头像加载成功~')
+          });
+
+          // 请求二维码
+          var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
+      os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
+          that.getImageInfo(path3).then(res => {
+            that.setData({
+              ewm: res.path
+            });
+            console.log('二维码加载成功~')
+          });
+
         }
     })
@@ -409,22 +450,21 @@ Page({
     }
     this.setData({
-      nickName: app.globalData.userInfo.nickname,
-      avatarUrl: app.globalData.userInfo.head_pic
+      nickName: app.globalData.userInfo.nickname
     })
-    var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
-      os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
-    wx.getImageInfo({
-      src: path3,
-      success: function(res) {
+    // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
+    //   os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo";
+    // wx.getImageInfo({
+    //   src: path3,
+    //   success: function(res) {
         // ctx.drawImage(res.path, 152*scale, 262*scale, 66*scale, 66*scale);
         // ctx.draw(true);
-        that.setData({
-          ewm: res.path
-        })
-      }
-    })
+      //   that.setData({
+      //     ewm: res.path
+      //   })
+      // }
+    // })
   },
   // 获取图片信息
@@ -5,7 +5,7 @@
 <view class="content">
   <!-- 封面标题 -->
   <view class="cover-container">
-    <image src="{{details.cover_img}}" class="cover-img" mode="aspectFill"></image>
+    <image src="{{details.cover_img}}" class="cover-img" mode="aspectFit"></image>
     <!-- <view class="cover-desc">
       <view>{{details.name}}</view>
       <view>{{filter.format_time(details.start_time)}}</view>
@@ -29,13 +29,13 @@
     <block wx:for="{{details.goods}}">
       <view class="list-item" bindtap="clickgoods" data-url="{{item.url}}">
       <!-- {{item}} -->
-        <image src="{{item.cover_img}}" class="item-pic"></image>
+        <image src="{{item.cover_img}}" class="item-pic" mode="aspectFit"></image>
         <view class="item-desc-container">
           <view class="item-desc">
             <!-- <view>WEI</view> -->
             <view>{{item.name}}</view>
           </view>
-          <view class="item-price">{{item.price}}</view>
+          <view class="item-price">{{filter.toFix(item.price, 2)}}</view>
         </view>
       </view>
     </block>
@@ -74,15 +74,20 @@
   <!-- 生成海报 -->
   <view class="{{showPlaybill ? 'playbill':'playbill active'}}" hidden="{{showPlaybill}}">
-    <!-- <image src="{{canvasToImgPath}}" class="playbill-pic"></image> -->
-    <canvas canvas-id="myCanvas" class="playbill-pic" style="width:{{windowWidth*dpr}};height:width:{{windowHeight*dpr}}"></canvas>
-    <view class="playbill-save" bindtap="onSaveToPhone">
-      <image src="/packageA/images/liveStreamDetails/save.jpg"></image>保存至相册
-    </view>
+    <!-- <view class="playbill-save" bindtap="onSaveToPhone">保存至相册</view> -->
+    <image src="{{canvasToImgPath}}" class="playbill-pic" mode="aspectFill"></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>
+  <!-- <canvas canvas-id="myCanvas" class="" catchtouchmove="true" style="width:{{windowWidth}}px;height:{{windowHeight}}px;"></canvas> -->
+
   <!-- mask -->
   <!-- 这里mask必须强制放在actionsheet和playbill的后面 -->
-  <view class="mask"  bindtap="hiddenActionSheet"></view>
+  <view class="mask"  bindtap="hiddenActionSheet" catchtouchmove="true"></view>
 </view>
+
+<!-- <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> -->
@@ -6,6 +6,7 @@
 .content {
   background-color: white;
   padding-bottom: 168rpx;
+  position: relative;
 }
 .cover-container {
   height: 646rpx;
@@ -103,8 +104,8 @@
 }
 .share-container image {
   display: block;
-  width: 60rpx;
-  height: 60rpx;
+  width: 50rpx;
+  height: 50rpx;
   padding-top: 14rpx;
   padding-bottom: 11rpx;
 }
@@ -222,10 +223,13 @@
   display: block;
   width: 478rpx;
   height: 737rpx;
-  border-width: 31rpx 20rpx 51rpx;
+  /* border-width: 31rpx 20rpx 51rpx;
   border-color: #f23030;
-  border-style: solid;
+  border-style: solid; */
+  /* border: 4rpx solid #f23030; */
   margin: 0 auto 26rpx;
+  border-radius: 10rpx;
+  overflow: hidden;
 }
 .playbill-save {