// component/shar-dialog/shar-dialog.js
import httpRequestApi from '../../utils/APIClient';
Component({
/**
* 组件的属性列表
*/
properties: {
shareType: {
type: 'String',
value: ''
},
shareId: {
type: 'String',
value: ''
}
},
/**
* 组件的初始数据
*/
data: {
shareFlag: false,
imgUrls: '',
avatar: '',
author: '',
iconImg: '',
title: '',
path: '',
QRCodeImagePath: '',
QRCodeImageLocalPath: '',
groupPurchaseInfo: {},
groupType: '',
animationData: {},
touchMove: true
},
/**
* 组件的方法列表
*/
methods: {
touchMove: function () {
return false
},
poster: function () {
const that = this;
const ctx = wx.createCanvasContext('myCanvas');
// 先画背景
this.drawBg(ctx)
.then(() => {
// 下载保存图片
console.log('背景画完');
return this.saveImg(ctx);
})
.then(() => {
// 画头像和作者||发起者
console.log('头像画完');
return this.drawAuthor(ctx);
})
.then(() => {
console.log(this.data.shareType)
if (this.data.shareType === 'works') {
// 分享作品的主题内容
console.log('主题画完');
return this.drawWorksGut(ctx)
} else {
return this.drawGroupGut(ctx)
}
})
.then(() => {
wx.getImageInfo({
src: this.data.QRCodeImagePath, //服务器返回的图片地址
success: function (res) {
//res.path是网络图片的本地地址
ctx.drawImage(res.path, 35, 353, 90, 90);
ctx.draw(true, function (res) {
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 525,
// destWidth: 370,
destWidth: 1200,
// destHeight: 507,
destHeight: 2100,
canvasId: 'myCanvas',
success: (res) => {
console.log(res.tempFilePath)
that.setData({
imgUrls: res.tempFilePath
}, () => {
wx.hideLoading();
})
},
fail: (res) => {
console.log(res)
}
})
}, 200)
})
},
fail: function (res) {
//失败回调
console.log(res)
}
});
})
},
share: function (data) {
console.log(data)
if (this.data.shareType === 'works') {
this.setData({
shareFlag: !this.data.shareFlag,
avatar: data.avatar,
author: data.author,
iconImg: data.iconImg,
title: data.title,
productId: data.productId,
// path: data.path,
QRData: {
page: data.path,
scene: data.scene,
qrCodeId: this.data.shareId
}
})
}
if (this.data.shareType === 'group') {
console.log(data)
console.log('团购分享')
this.setData({
shareFlag: !this.data.shareFlag,
avatar: data.avatar,
author: data.author,
iconImg: data.iconImg,
title: data.title,
// path: data.path,
QRData: {
page: data.path,
scene: data.scene,
qrCodeId: this.data.shareId
},
groupPurchaseInfo: data.groupPurchaseInfo,
groupType: data.groupType
})
}
this.poster();
if (this.data.shareType === 'class') {
console.log('课程分享')
this.setData({
shareFlag: !this.data.shareFlag
})
}
// 动画测试
this.animation = wx.createAnimation({
duration: 700,
timingFunction: 'ease',
})
this.animation.bottom(0).step();
this.setData({
animationData: this.animation.export()
})
// 动画测试
},
//关闭弹框
close: function (e) {
this.animation = wx.createAnimation({
duration: 400,
timingFunction: 'ease',
})
this.animation.bottom(-300).step();
this.setData({
animationData: this.animation.export()
}, () => {
setTimeout(() => {
this.setData({
shareFlag: !this.data.shareFlag,
imgUrls: ''
})
this.triggerEvent('ShareDialogClose', {})
}, 200)
})
},
nothing: function (e) {
return
},
// 保存图片到本地
saveImg: function () {
console.log('yibuububu')
let download = new Promise((resolve, reject) => {
let QRCode = () => {
// 生成二维码并下载
httpRequestApi.createQRCode(this.data.QRData).success(res => {
console.log(this.data.QRData);
this.setData({
QRCodeImagePath: res.data.data
})
// wx.downloadFile({
// url: res,
// success: (res) => {
// console.log(res)
// console.log('下载二维码成功')
// // this.setData({
// // avatar: res.tempFilePath
// // }, () => {
// // })
// }
// });
resolve();
})
}
let downAvatar = () => {
wx.downloadFile({
url: this.data.avatar,
success: (res) => {
console.log('下载头像成功')
console.log(this.data.avatar)
this.setData({
avatar: res.tempFilePath
}, () => {
QRCode();
})
}
});
}
// resolve(()=>{
// 下载icon
wx.downloadFile({
url: this.data.iconImg,
success: (res) => {
console.log('下载icon成功')
console.log(this.data.iconImg)
this.setData({
iconImg: res.tempFilePath
}, () => {
// 下载头像
downAvatar();
})
}
});
})
return download;
},
// 先画出背景
drawBg: function (ctx) {
let background = new Promise((resolve, reject) => {
wx.showLoading({
title: '海报生成中',
// mask: true
})
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)
ctx.fillText('大声朗读是语感形成的必走之路', (300 - ctx.measureText('大声朗读是语感形成的必走之路').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)
resolve();
});
return background;
},
// 画头像和作者||发起者
drawAuthor: function (ctx) {
let author = new Promise((resolve, reject) => {
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.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)
} 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)
}
resolve();
})
return author;
},
// 分享作品的主题内容
drawWorksGut: function (ctx) {
let works = new Promise((resolve, reject) => {
// resolve(() => {
console.log('开始画内容')
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)
resolve();
})
return works;
},
// 分享团购的主体内容
drawGroupGut: function (ctx) {
let group = new Promise((resolve, reject) => {
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)
resolve();
})
return group;
},
// 保存最终图片
PreservationImg: function () {
// this.getImgAuthorize()
wx.saveImageToPhotosAlbum({
filePath: this.data.imgUrls,
success: (res) => {
console.log(res)
const data = {};
console.log('productId', this.data.productId)
// 团购分享记录
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.shareRecord(data).success((res) => {
console.log(res)
})
this.setData({
imgUrls: false
})
},
fail: res => {
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
// wx.showToast({
// title: '无权限操作',
// icon: 'fail',
// duration: 800
// })
wx.showModal({
title: '无法保存分享图片到相册',
content: '点击右上角浮点按钮->进入关于->点击右上角按钮->设置，进行授权',
confirmText: '我知道了',
showCancel: false,
success(res) {
console.log('用户点击确定')
}
})
}
}
})
}
})
},
shareFriend: function () {
this.triggerEvent('customevent', {})
}
},
onShareAppMessage: (res) => {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: this.data.title,
path: this.data.path
}
},
})