|
@@ -26,9 +26,9 @@ Component({
|
|
|
iconImg: '',
|
|
|
title: '',
|
|
|
path: '',
|
|
|
- QRCodeImagePath:'',
|
|
|
- QRCodeImageLocalPath:'',
|
|
|
- groupPurchaseInfo:{}
|
|
|
+ QRCodeImagePath: '',
|
|
|
+ QRCodeImageLocalPath: '',
|
|
|
+ groupPurchaseInfo: {}
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -61,33 +61,36 @@ Component({
|
|
|
}
|
|
|
})
|
|
|
.then(() => {
|
|
|
- debugger;
|
|
|
wx.getImageInfo({
|
|
|
- src: this.data.QRCodeImagePath,//服务器返回的图片地址
|
|
|
+ src: this.data.QRCodeImagePath, //服务器返回的图片地址
|
|
|
success: function (res) {
|
|
|
+ console.log('下载content成功1')
|
|
|
+ console.log(res.path)
|
|
|
//res.path是网络图片的本地地址
|
|
|
- ctx.drawImage(res.path, 227, 364, 135, 135);
|
|
|
-
|
|
|
+ ctx.drawImage(res.path,127, 423, 121, 121);
|
|
|
|
|
|
|
|
|
|
|
|
+ console.log('下载content成功2')
|
|
|
ctx.draw(true, function (res) {
|
|
|
wx.canvasToTempFilePath({
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
- width: 370,
|
|
|
- height: 507,
|
|
|
- destWidth: 370,
|
|
|
- destHeight: 507,
|
|
|
+ width: 375,
|
|
|
+ height: 667,
|
|
|
+ // destWidth: 370,
|
|
|
+ destWidth: 1500,
|
|
|
+ // destHeight: 507,
|
|
|
+ destHeight: 2668,
|
|
|
canvasId: 'myCanvas',
|
|
|
success: (res) => {
|
|
|
console.log(res.tempFilePath)
|
|
|
- wx.saveImageToPhotosAlbum({
|
|
|
- filePath: res.path,
|
|
|
- success(res) {
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- })
|
|
|
+ // wx.saveImageToPhotosAlbum({
|
|
|
+ // filePath: res.path,
|
|
|
+ // success(res) {
|
|
|
+ // console.log(res);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
that.setData({
|
|
|
imgUrls: res.tempFilePath
|
|
|
}, () => {
|
|
@@ -99,6 +102,7 @@ Component({
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
+ console.log('下载content成功3')
|
|
|
|
|
|
|
|
|
|
|
@@ -114,7 +118,6 @@ Component({
|
|
|
|
|
|
},
|
|
|
share: function (data) {
|
|
|
- debugger;
|
|
|
if (this.data.shareType === 'works') {
|
|
|
|
|
|
this.setData({
|
|
@@ -124,7 +127,7 @@ Component({
|
|
|
iconImg: data.iconImg,
|
|
|
title: data.title,
|
|
|
// path: data.path,
|
|
|
- QRData:{
|
|
|
+ QRData: {
|
|
|
page: data.path,
|
|
|
scene: data.scene,
|
|
|
qrCodeId: this.data.shareId
|
|
@@ -141,7 +144,7 @@ Component({
|
|
|
iconImg: data.iconImg,
|
|
|
title: data.title,
|
|
|
// path: data.path,
|
|
|
- QRData:{
|
|
|
+ QRData: {
|
|
|
page: data.path,
|
|
|
scene: data.scene,
|
|
|
qrCodeId: this.data.shareId
|
|
@@ -156,13 +159,23 @@ Component({
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ //关闭弹框
|
|
|
+ close: function (e) {
|
|
|
+ console.log(e)
|
|
|
+ this.setData({
|
|
|
+ shareFlag: !this.data.shareFlag,
|
|
|
+ imgUrls: ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ nothing: function (e) {
|
|
|
+ return
|
|
|
+ },
|
|
|
// 保存图片到本地
|
|
|
saveImg: function () {
|
|
|
console.log('yibuububu')
|
|
|
let download = new Promise((resolve, reject) => {
|
|
|
let QRCode = () => {
|
|
|
// 生成二维码并下载
|
|
|
- debugger;
|
|
|
httpRequestApi.createQRCode(this.data.QRData).success(res => {
|
|
|
// let base64 = wx.arrayBufferToBase64(res.data);
|
|
|
// console.log(a)
|
|
@@ -179,7 +192,7 @@ Component({
|
|
|
// // }, () => {
|
|
|
|
|
|
// // })
|
|
|
-
|
|
|
+
|
|
|
// }
|
|
|
// });
|
|
|
console.log(this.data.QRCodeImagePath)
|
|
@@ -229,33 +242,45 @@ Component({
|
|
|
title: '海报生成中',
|
|
|
mask: true
|
|
|
})
|
|
|
- console.log('开始画背景')
|
|
|
- ctx.rect(0, 0, 370, 507)
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
- ctx.fill()
|
|
|
+ if (this.data.shareType === 'works') {
|
|
|
+ ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 1500, 2668,0,0,750,1334); //插入图片
|
|
|
+ } else {
|
|
|
+ ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1500, 2668,0,0,750,1334); //插入图片
|
|
|
+ }
|
|
|
ctx.save()
|
|
|
ctx.beginPath()
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
ctx.fill()
|
|
|
- ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
|
|
|
- ctx.clip(); //画
|
|
|
resolve();
|
|
|
});
|
|
|
return background;
|
|
|
},
|
|
|
// 画头像和作者||发起者
|
|
|
drawAuthor: function (ctx) {
|
|
|
-
|
|
|
let author = new Promise((resolve, reject) => {
|
|
|
- // resolve(() => {
|
|
|
- console.log('开始画头像')
|
|
|
- ctx.drawImage(this.data.avatar, 148, 8, 100, 100); //插入图片
|
|
|
- ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('#535353')
|
|
|
- ctx.fillText(this.data.author, (370 - ctx.measureText(this.data.author).width) / 2, 115)
|
|
|
- ctx.setFillStyle('#FF4400')
|
|
|
- // })
|
|
|
+ if (this.data.shareType === 'works') {
|
|
|
+ ctx.arc(187.5, 171, 36, 0, 2 * Math.PI, false)
|
|
|
+ ctx.clip(); //剪切头像区域
|
|
|
+ ctx.fill('red')
|
|
|
+ ctx.drawImage(this.data.avatar, 157, 135, 72, 72); //插入图片
|
|
|
+ ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.setFillStyle('#444444')
|
|
|
+ ctx.fillText(this.data.author, (375 - ctx.measureText(this.data.author).width) / 2, 232)
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('#ff9209')
|
|
|
+ ctx.fillText('播音主持特长生', (375 - ctx.measureText('播音主持特长生').width) / 2, 253)
|
|
|
+ } else {
|
|
|
+ ctx.arc(52, 58, 36, 0, 2 * Math.PI, false)
|
|
|
+ ctx.clip(); //剪切头像区域
|
|
|
+ ctx.fill('red')
|
|
|
+ ctx.drawImage(this.data.avatar, 15, 22, 72, 72); //插入图片
|
|
|
+ ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
+ ctx.setFontSize(20)
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
+ ctx.fillText(this.data.author, 97, 49)
|
|
|
+ ctx.setFontSize(22)
|
|
|
+ ctx.fillText('邀您一起来拼团', 97, 77)
|
|
|
+ }
|
|
|
resolve();
|
|
|
})
|
|
|
return author;
|
|
@@ -265,19 +290,30 @@ Component({
|
|
|
let works = new Promise((resolve, reject) => {
|
|
|
// resolve(() => {
|
|
|
console.log('开始画内容')
|
|
|
- ctx.fillText('已使出洪荒之力,声情并茂的为', (370 - ctx.measureText('已使出洪荒之力,声情并茂的为').width) / 2, 138)
|
|
|
- ctx.fillText(`《${this.data.title}》`, (370 - ctx.measureText(`《${this.data.title}》`).width) / 2, 160)
|
|
|
- ctx.fillText(`配了一段惊世之作`, (370 - ctx.measureText(`配了一段惊世之作`).width) / 2, 182)
|
|
|
- ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.setFillStyle('#000')
|
|
|
- ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('red')
|
|
|
- ctx.fillText('为TA疯狂打CALL', 9, 467)
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
ctx.setFontSize(18)
|
|
|
+ ctx.fillText('小学语文 最新全国统一教材', (375 - ctx.measureText('小学语文 最新全国统一教材').width) / 2, 55);
|
|
|
+ ctx.setFontSize(30)
|
|
|
+ ctx.fillText('课文朗读 从未如此有趣', (375 - ctx.measureText('课文朗读 从未如此有趣').width) / 2 ,103);
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('#444')
|
|
|
+ ctx.fillText('使出洪荒之力,声情并茂地朗诵了', (375 - ctx.measureText('使出洪荒之力,声情并茂地朗诵了').width) / 2 ,297)
|
|
|
+ // ctx.fillText(`配了一段惊世之作`, 90, 240)
|
|
|
+ // ctx.setFontSize(16)
|
|
|
+ // ctx.setFillStyle('red')
|
|
|
+ ctx.fillText(`《${this.data.title}》`, (375 - ctx.measureText(`《${this.data.title}》`).width) / 2, 322)
|
|
|
+
|
|
|
+ // ctx.drawImage('../../../static/image/reading_poster.jpg', 11, 276, 351, 145);
|
|
|
+ ctx.setFontSize(16)
|
|
|
ctx.setFillStyle('#000')
|
|
|
- ctx.fillText('长按识别二维码,快去听听', 9, 493)
|
|
|
+ // ctx.setFillStyle('#000')
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ // ctx.setFillStyle('#c90000')
|
|
|
+ ctx.setFillStyle('#ff9209')
|
|
|
+ ctx.fillText('为TA疯狂打CALL 快去听听', (375 - ctx.measureText('为TA疯狂打CALL 快去听听').width) / 2 , 401)
|
|
|
+ ctx.setFontSize(12)
|
|
|
+ ctx.setFillStyle('#666666')
|
|
|
+ ctx.fillText('长按识别二维码', (375 - ctx.measureText('长按识别二维码').width) / 2, 574)
|
|
|
// })
|
|
|
resolve();
|
|
|
})
|
|
@@ -287,34 +323,27 @@ Component({
|
|
|
// 分享团购的主体内容
|
|
|
drawGroupGut: function (ctx) {
|
|
|
let group = new Promise((resolve, reject) => {
|
|
|
- //resolve(() => {
|
|
|
- ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
|
|
|
- ctx.drawImage(this.data.groupPurchaseInfo.bgImg, 9, 205, 352, 145);
|
|
|
- ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
|
|
|
- ctx.setFontSize(14)
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
- ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 149, 373)
|
|
|
+ ctx.setFontSize(28)
|
|
|
+ ctx.setFillStyle('#ff670d')
|
|
|
+ ctx.fillText('小学语文 朗读配音', (375 - ctx.measureText('小学语文 朗读配音').width) / 2 , 152)
|
|
|
ctx.setFontSize(16)
|
|
|
- ctx.setFillStyle('#A95A00')
|
|
|
- ctx.fillText('原价', 20, 373)
|
|
|
- ctx.setStrokeStyle('red')
|
|
|
- ctx.moveTo(64, 368)
|
|
|
- ctx.lineTo(114, 368)
|
|
|
- ctx.stroke()
|
|
|
- ctx.fillText(`¥${parseFloat(this.data.groupPurchaseInfo.originPrice / 100).toFixed(2)}元`, 64, 373)
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.fillText('团购价仅需', 20, 403)
|
|
|
- ctx.fillText('元', 174, 403)
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('red')
|
|
|
- ctx.fillText(`¥${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}`, 109, 403)
|
|
|
- ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('red')
|
|
|
- ctx.fillText('名额有限,售完截止', 9, 467)
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.setFillStyle('#000')
|
|
|
- ctx.fillText('长按识别二维码参加团购', 9, 493)
|
|
|
+ ctx.setFillStyle('#444')
|
|
|
+ ctx.fillText('郎朗读书声,是世上最美的声音', (375 - ctx.measureText('郎朗读书声,是世上最美的声音').width) / 2 ,351)
|
|
|
+ ctx.drawImage(this.data.iconImg, 12, 176, 351, 145);
|
|
|
+ // ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
|
|
|
+ ctx.setFontSize(17)
|
|
|
+ ctx.setFillStyle('#A95A00')
|
|
|
+ ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 96, 412)
|
|
|
+ ctx.setFontSize(19)
|
|
|
+ ctx.fillText('每人仅需', 151, 412)
|
|
|
+ // ctx.fillText('元', 120, 495)
|
|
|
+ ctx.setFontSize(28)
|
|
|
+ ctx.setStrokeStyle('red')
|
|
|
+ ctx.setFillStyle('red')
|
|
|
+ ctx.fillText(`${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}元`, 235, 415)
|
|
|
+ ctx.setFontSize(12)
|
|
|
+ ctx.setFillStyle('#666666')
|
|
|
+ ctx.fillText('长按识别二维码', (375 - ctx.measureText('长按识别二维码').width) / 2, 574)
|
|
|
//})
|
|
|
resolve();
|
|
|
})
|
|
@@ -326,8 +355,11 @@ Component({
|
|
|
PreservationImg: function () {
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
filePath: this.data.imgUrls,
|
|
|
- success(res) {
|
|
|
- console.log('保存成功')
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res)
|
|
|
+ this.setData({
|
|
|
+ imgUrls: false
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
},
|