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 {