From 0f26777965539bdd9a2dd3a57a10a9126b1b895d Mon Sep 17 00:00:00 2001 From: taiyuan Date: Mon, 13 Jul 2020 08:57:20 +0800 Subject: [PATCH] 直播列表添加显示时间和主播，直播详情生成和保存海报图片 --- packageA/pages/liveStream/liveStream.wxml | 25 ++++++++++++++----------- packageA/pages/liveStream/liveStream.wxss | 15 ++++++++++++--- packageA/pages/liveStreamDetails/liveStreamDetails.js | 298 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------- packageA/pages/liveStreamDetails/liveStreamDetails.wxml | 23 ++++++++++++++--------- packageA/pages/liveStreamDetails/liveStreamDetails.wxss | 12 ++++++++---- 5 files changed, 217 insertions(+), 156 deletions(-) diff --git a/packageA/pages/liveStream/liveStream.wxml b/packageA/pages/liveStream/liveStream.wxml index ee02d20..e16789f 100644 --- a/packageA/pages/liveStream/liveStream.wxml +++ b/packageA/pages/liveStream/liveStream.wxml @@ -9,19 +9,18 @@ - - + - {{item.name}} + + {{item.name}} + {{filter.format_time(item.start_time, 2)}} 开始 + + - - + @@ -34,7 +33,7 @@ - + {{item.name}} @@ -53,10 +52,14 @@ - + - {{item.name}} + + {{item.name}} + {{filter.format_time(item.start_time, 2)}} 开始 + 主播：{{item['anchor_name']}} + 观看回放 diff --git a/packageA/pages/liveStream/liveStream.wxss b/packageA/pages/liveStream/liveStream.wxss index af00582..42777db 100644 --- a/packageA/pages/liveStream/liveStream.wxss +++ b/packageA/pages/liveStream/liveStream.wxss @@ -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; diff --git a/packageA/pages/liveStreamDetails/liveStreamDetails.js b/packageA/pages/liveStreamDetails/liveStreamDetails.js index cfc2011..1235639 100644 --- a/packageA/pages/liveStreamDetails/liveStreamDetails.js +++ b/packageA/pages/liveStreamDetails/liveStreamDetails.js @@ -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 + // }) + // } + // }) }, // 获取图片信息 diff --git a/packageA/pages/liveStreamDetails/liveStreamDetails.wxml b/packageA/pages/liveStreamDetails/liveStreamDetails.wxml index 59a390f..e676284 100644 --- a/packageA/pages/liveStreamDetails/liveStreamDetails.wxml +++ b/packageA/pages/liveStreamDetails/liveStreamDetails.wxml @@ -5,7 +5,7 @@ - + - + {{item.name}} - {{item.price}} + {{filter.toFix(item.price, 2)}} @@ -74,15 +74,20 @@ + + - + + + + diff --git a/packageA/pages/liveStreamDetails/liveStreamDetails.wxss b/packageA/pages/liveStreamDetails/liveStreamDetails.wxss index 55f26ca..a23b30e 100644 --- a/packageA/pages/liveStreamDetails/liveStreamDetails.wxss +++ b/packageA/pages/liveStreamDetails/liveStreamDetails.wxss @@ -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 { -- libgit2 0.21.4