|
@@ -28,6 +28,7 @@ Component({
|
|
|
path: '',
|
|
|
QRCodeImagePath: '',
|
|
|
QRCodeImageLocalPath: '',
|
|
|
+ activityImg: '',
|
|
|
groupPurchaseInfo: {},
|
|
|
groupType: '',
|
|
|
animationData: {},
|
|
@@ -43,7 +44,9 @@ Component({
|
|
|
'在朗读中 提升孩子的思辨能力',
|
|
|
'重温经典课文 享受亲子美好时光',
|
|
|
'大声朗读 能帮助孩子提高写作能力'
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ shareStep: 'firend',
|
|
|
+ activity: ''
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -60,10 +63,12 @@ Component({
|
|
|
// mask: true
|
|
|
})
|
|
|
httpRequestApi.createQRCode(this.data.QRData).success(res => {
|
|
|
+ console.log('----------------->分享二维码222',res.data.data)
|
|
|
// 下载二维码
|
|
|
wx.downloadFile({
|
|
|
url: res.data.data,
|
|
|
success: res => {
|
|
|
+ console.log('----------------->分享二维码',res.tempFilePath)
|
|
|
this.setData({
|
|
|
QRCodeImagePath: res.tempFilePath
|
|
|
}, () => {
|
|
@@ -76,72 +81,92 @@ Component({
|
|
|
makeImage: function () {
|
|
|
const ctx = wx.createCanvasContext('myCanvas');
|
|
|
// 画出背景和相同内容
|
|
|
- if (this.data.shareType === 'works') {
|
|
|
- ctx.drawImage('../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
|
|
|
+ if(this.data.activity) {
|
|
|
+ ctx.drawImage(this.data.activityImg, 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
|
|
|
} else {
|
|
|
- ctx.drawImage('../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
|
|
|
+ if (this.data.shareType === 'works') {
|
|
|
+ ctx.drawImage('../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
|
|
|
+ } else {
|
|
|
+ ctx.drawImage('../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
|
|
|
+ }
|
|
|
}
|
|
|
- ctx.save()
|
|
|
- ctx.beginPath()
|
|
|
- ctx.fill()
|
|
|
- ctx.setFontSize(25)
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
- ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
|
|
|
- ctx.setFontSize(16)
|
|
|
- let randomSologan = this.data.randomSologan[Math.floor(Math.random() * 10)];
|
|
|
- ctx.fillText(randomSologan, (300 - ctx.measureText(randomSologan).width) / 2, 75.5)
|
|
|
- ctx.setFontSize(15)
|
|
|
- ctx.setFillStyle('#838383')
|
|
|
- ctx.fillText('长按识别二维码', 130.5, 391)
|
|
|
- ctx.setFontSize(12)
|
|
|
- ctx.setFillStyle('#838383')
|
|
|
- ctx.fillText('接收邀请,获得你的课程吧', 130.5, 409.5) /* */
|
|
|
- // 头像
|
|
|
- console.log('画头像')
|
|
|
- if (this.data.shareType === 'works') {
|
|
|
- ctx.arc(150, 160, 36, 0, 2 * Math.PI, true)
|
|
|
+ if (this.data.activity) {
|
|
|
+ ctx.save()
|
|
|
+ ctx.arc(49, 50, 29, 0, 2 * Math.PI, true)
|
|
|
ctx.clip(); //剪切头像区域
|
|
|
- ctx.drawImage(this.data.avatar, 116, 126, 68, 68);
|
|
|
- ctx.arc(150, 160, 34, 0, 2 * Math.PI, false)
|
|
|
- ctx.setFillStyle('#ff6f42')
|
|
|
- ctx.fill();
|
|
|
+ ctx.drawImage(this.data.avatar, 20, 20, 61, 61);
|
|
|
ctx.clip(); //剪切头像区域
|
|
|
- ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
- ctx.setFontSize(15)
|
|
|
- ctx.setFillStyle('#ff6f42')
|
|
|
- ctx.fillText(this.data.author, (300 - ctx.measureText(this.data.author).width) / 2, 220)
|
|
|
- ctx.setFillStyle('#434343')
|
|
|
- ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 243)
|
|
|
- ctx.setFontSize(15)
|
|
|
+ ctx.restore();
|
|
|
+ ctx.setFontSize(16)
|
|
|
ctx.setFillStyle('#434343')
|
|
|
- ctx.fillText('使出洪荒之力,声情并茂地朗诵了', (300 - ctx.measureText('使出洪荒之力,声情并茂地朗诵了').width) / 2, 262)
|
|
|
- ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 284)
|
|
|
+ ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 285)
|
|
|
+ // 二维码
|
|
|
+ ctx.drawImage(this.data.QRCodeImagePath, 104, 299, 92, 92);
|
|
|
+ ctx.draw();
|
|
|
} else {
|
|
|
- ctx.arc(64, 146, 29, 0, 2 * Math.PI, true)
|
|
|
- ctx.clip(); //剪切头像区域
|
|
|
- ctx.drawImage(this.data.avatar, 37, 119, 54, 54);
|
|
|
- ctx.arc(64, 146, 27, 0, 2 * Math.PI, false)
|
|
|
- ctx.setFillStyle('#ff6f42')
|
|
|
- ctx.fill();
|
|
|
- ctx.clip(); //剪切头像区域
|
|
|
- //插入图片
|
|
|
- ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.setFillStyle('#ff6f42')
|
|
|
- ctx.fillText(this.data.author, 100, 143.5)
|
|
|
+ ctx.save()
|
|
|
+ ctx.beginPath()
|
|
|
+ ctx.fill()
|
|
|
+ ctx.setFontSize(25)
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
+ ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
|
|
|
ctx.setFontSize(16)
|
|
|
- ctx.setFillStyle('#434343')
|
|
|
- ctx.fillText('邀您和我一起大声朗读', 100, 167.5)
|
|
|
- ctx.drawImage(this.data.iconImg, 27, 194, 247, 103.5);
|
|
|
+ let randomSologan = this.data.randomSologan[Math.floor(Math.random() * 10)];
|
|
|
+ ctx.fillText(randomSologan, (300 - ctx.measureText(randomSologan).width) / 2, 75.5)
|
|
|
ctx.setFontSize(15)
|
|
|
- ctx.setFillStyle('#434343')
|
|
|
- ctx.fillText('朗朗读书声,是世界上最美妙的声音', (300 - ctx.measureText('朗朗读书声,是世界上最美妙的声音').width) / 2, 327.5)
|
|
|
+ ctx.setFillStyle('#838383')
|
|
|
+ ctx.fillText('长按识别二维码', 130.5, 391)
|
|
|
+ ctx.setFontSize(12)
|
|
|
+ ctx.setFillStyle('#838383')
|
|
|
+ ctx.fillText('接收邀请,获得你的课程吧', 130.5, 409.5) /* */
|
|
|
+ // 头像
|
|
|
+ console.log('画头像')
|
|
|
+ if (this.data.shareType === 'works') {
|
|
|
+ ctx.arc(150, 160, 36, 0, 2 * Math.PI, true)
|
|
|
+ ctx.clip(); //剪切头像区域
|
|
|
+ ctx.drawImage(this.data.avatar, 116, 126, 68, 68);
|
|
|
+ ctx.arc(150, 160, 34, 0, 2 * Math.PI, false)
|
|
|
+ ctx.setFillStyle('#ff6f42')
|
|
|
+ ctx.fill();
|
|
|
+ ctx.clip(); //剪切头像区域
|
|
|
+ ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
+ ctx.setFontSize(15)
|
|
|
+ ctx.setFillStyle('#ff6f42')
|
|
|
+ ctx.fillText(this.data.author, (300 - ctx.measureText(this.data.author).width) / 2, 220)
|
|
|
+ ctx.setFillStyle('#434343')
|
|
|
+ ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 243)
|
|
|
+ ctx.setFontSize(15)
|
|
|
+ ctx.setFillStyle('#434343')
|
|
|
+ ctx.fillText('使出洪荒之力,声情并茂地朗诵了', (300 - ctx.measureText('使出洪荒之力,声情并茂地朗诵了').width) / 2, 262)
|
|
|
+ ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 284)
|
|
|
+ } else {
|
|
|
+ ctx.arc(64, 146, 29, 0, 2 * Math.PI, true)
|
|
|
+ ctx.clip(); //剪切头像区域
|
|
|
+ ctx.drawImage(this.data.avatar, 37, 119, 54, 54);
|
|
|
+ ctx.arc(64, 146, 27, 0, 2 * Math.PI, false)
|
|
|
+ ctx.setFillStyle('#ff6f42')
|
|
|
+ ctx.fill();
|
|
|
+ ctx.clip(); //剪切头像区域
|
|
|
+ //插入图片
|
|
|
+ ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.setFillStyle('#ff6f42')
|
|
|
+ ctx.fillText(this.data.author, 100, 143.5)
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('#434343')
|
|
|
+ ctx.fillText('邀您和我一起大声朗读', 100, 167.5)
|
|
|
+ ctx.drawImage(this.data.iconImg, 27, 194, 247, 103.5);
|
|
|
+ ctx.setFontSize(15)
|
|
|
+ ctx.setFillStyle('#434343')
|
|
|
+ ctx.fillText('朗朗读书声,是世界上最美妙的声音', (300 - ctx.measureText('朗朗读书声,是世界上最美妙的声音').width) / 2, 327.5)
|
|
|
+ }
|
|
|
+ console.log('花二维码')
|
|
|
+ console.log(this.data)
|
|
|
+ console.log(this.data.avatar)
|
|
|
+ ctx.drawImage(this.data.QRCodeImagePath, 35, 351, 90, 90);
|
|
|
+ ctx.draw();
|
|
|
}
|
|
|
- console.log('花二维码')
|
|
|
- console.log(this.data)
|
|
|
- console.log(this.data.avatar)
|
|
|
- ctx.drawImage(this.data.QRCodeImagePath, 35, 351, 90, 90);
|
|
|
- ctx.draw();
|
|
|
+
|
|
|
setTimeout(() => {
|
|
|
wx.canvasToTempFilePath({
|
|
|
x: 0,
|
|
@@ -158,7 +183,7 @@ Component({
|
|
|
wx.hideLoading()
|
|
|
},
|
|
|
fail: (res) => {
|
|
|
- console.log('史称失败',res)
|
|
|
+ console.log('史称失败', res)
|
|
|
wx.hideLoading();
|
|
|
}
|
|
|
})
|
|
@@ -178,6 +203,7 @@ Component({
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ /** 需要优化 */
|
|
|
saveAvatar: function () {
|
|
|
wx.downloadFile({
|
|
|
url: this.data.avatar,
|
|
@@ -185,17 +211,26 @@ Component({
|
|
|
this.setData({
|
|
|
avatar: res.tempFilePath
|
|
|
}, () => {
|
|
|
- if (this.data.shareType === 'group') {
|
|
|
- this.saveIcon();
|
|
|
- } else {
|
|
|
- this.makeImage();
|
|
|
- }
|
|
|
+ wx.downloadFile({
|
|
|
+ url: 'https://reader-wx.ai160.com/images/reader/activity/activity_bg.jpg',
|
|
|
+ success: res => {
|
|
|
+ this.setData({
|
|
|
+ activityImg: res.tempFilePath
|
|
|
+ }, () => {
|
|
|
+ if (this.data.shareType === 'group') {
|
|
|
+ this.saveIcon();
|
|
|
+ } else {
|
|
|
+ this.makeImage();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
share: function (data) {
|
|
|
- console.log('分享内容',data)
|
|
|
+ console.log('分享内容', data)
|
|
|
if (this.data.shareType === 'works') {
|
|
|
|
|
|
this.setData({
|
|
@@ -205,11 +240,13 @@ Component({
|
|
|
iconImg: data.iconImg,
|
|
|
title: data.title,
|
|
|
productId: data.productId,
|
|
|
- id:data.scene,
|
|
|
- type:data.type,
|
|
|
- grade:data.grade,
|
|
|
+ id: data.scene,
|
|
|
+ type: data.type,
|
|
|
+ grade: data.grade,
|
|
|
shareImg: data.shareImg,
|
|
|
- // path: data.path,
|
|
|
+ shareStep: 'firend',
|
|
|
+ shareIndex: data.index,
|
|
|
+ activity: data.activity,
|
|
|
QRData: {
|
|
|
page: data.path,
|
|
|
scene: data.scene
|
|
@@ -234,8 +271,6 @@ Component({
|
|
|
groupType: data.groupType
|
|
|
})
|
|
|
}
|
|
|
- this.poster();
|
|
|
-
|
|
|
if (this.data.shareType === 'class') {
|
|
|
console.log('课程分享')
|
|
|
this.setData({
|
|
@@ -252,6 +287,7 @@ Component({
|
|
|
animationData: this.animation.export()
|
|
|
})
|
|
|
// 动画测试
|
|
|
+ // this.poster();
|
|
|
},
|
|
|
//关闭弹框
|
|
|
close: function (e) {
|
|
@@ -287,31 +323,26 @@ Component({
|
|
|
content: '快去分享给小伙伴吧',
|
|
|
confirmText: '我知道了',
|
|
|
showCancel: false,
|
|
|
- success(res) {
|
|
|
+ success: (res) => {
|
|
|
console.log('用户点击确定')
|
|
|
+ this.close();
|
|
|
+ httpRequestApi.shareImgLog({
|
|
|
+ readId: this.data.id,
|
|
|
+ }).success((oRes) => {
|
|
|
+ this.triggerEvent('addShareAmount', {
|
|
|
+ index:this.data.shareIndex
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ if (oRes.data.count > 0) {
|
|
|
+ this.setData({
|
|
|
+ flowerNum: oRes.data.count
|
|
|
+ })
|
|
|
+ this.flowerAnimationHandler();
|
|
|
+ }
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
- /* const data = {};
|
|
|
- // 团购分享记录
|
|
|
- if (this.data.shareType === 'group') {
|
|
|
- data.shareTypeEnum = 'POSTER';
|
|
|
- data.shareContentEnum = 'GROUP';
|
|
|
- data.productId = this.data.groupPurchaseInfo.productId;
|
|
|
- }
|
|
|
- // 朗读分享记录
|
|
|
- if (this.data.shareType === 'works') {
|
|
|
- data.shareTypeEnum = 'POSTER';
|
|
|
- data.shareContentEnum = 'READ';
|
|
|
- data.productId = this.data.productId;
|
|
|
- } */
|
|
|
-
|
|
|
- httpRequestApi.shareLog({
|
|
|
- readId:this.data.id,
|
|
|
- type:this.data.type,
|
|
|
- grade:this.data.grade
|
|
|
- }).success((res) => {
|
|
|
- console.log('分享记录',res)
|
|
|
- })
|
|
|
|
|
|
this.setData({
|
|
|
imgUrls: false
|
|
@@ -342,27 +373,44 @@ Component({
|
|
|
})
|
|
|
},
|
|
|
shareFriend: function () {
|
|
|
+ this.setData({
|
|
|
+ shareStep: 'circle'
|
|
|
+ })
|
|
|
+ this.poster();
|
|
|
httpRequestApi.shareLog({
|
|
|
- readId:this.data.id,
|
|
|
- type:this.data.type,
|
|
|
- grade:this.data.grade
|
|
|
+ readId: this.data.id,
|
|
|
+ type: this.data.type,
|
|
|
+ grade: this.data.grade
|
|
|
}).success((res) => {
|
|
|
- console.log('分享记录',res)
|
|
|
+ console.log('分享记录', res)
|
|
|
+ if (res.data.count > 0) {
|
|
|
+ this.setData({
|
|
|
+ flowerNum: res.data.count,
|
|
|
+ }, () => {
|
|
|
+ // this.flowerAnimationHandler();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.triggerEvent('addShareAmount', {
|
|
|
+ index:this.data.shareIndex
|
|
|
+ })
|
|
|
})
|
|
|
- this.triggerEvent('customevent', {})
|
|
|
- }
|
|
|
+ },
|
|
|
+ flowerAnimationHandler: function () {
|
|
|
+ this.flowerBox = this.selectComponent("#flower-toast");
|
|
|
+ console.log('this.flower', this.flowerBox)
|
|
|
+ this.flowerBox.comeOut();
|
|
|
+ },
|
|
|
},
|
|
|
onShareAppMessage: (e) => {
|
|
|
- console.log('点击分享按钮',e)
|
|
|
+ console.log('点击分享按钮', e)
|
|
|
if (res.from === 'button') {
|
|
|
// 来自页面内转发按钮
|
|
|
console.log(res.target)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
return {
|
|
|
title: '课文朗读,从未如此有趣。',
|
|
|
path: '/pages/index/index'
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- },
|
|
|
-})
|
|
|
+ }
|
|
|
+})
|