You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
372 lines
10 KiB
372 lines
10 KiB
Page({
|
|
data: {
|
|
groupNo: '',
|
|
windowWidth: 0,
|
|
windowHeight: 0,
|
|
scaleW: 0.85,
|
|
scaleH: 1.15,
|
|
shareImgSrc: '',
|
|
showPopup: false,
|
|
show: false,
|
|
cancelWithMask: true,
|
|
actions: [{
|
|
name: '微信好友',
|
|
icon: '../../images/wechat_ico.png',
|
|
openType: 'share'
|
|
}, {
|
|
name: '朋友圈',
|
|
icon: '../../images/moments_ico.png'
|
|
}],
|
|
txtmoment: '保存图片，分享到朋友圈',
|
|
qrImageUrl: "",
|
|
bgImageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527496410439&di=54c111d35f3ca9d1e9b193834785c264&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013c81583fa08ea8012060c864c3b7.jpg',
|
|
},
|
|
|
|
onLoad: function (options) {
|
|
this.data.groupNo = options.groupNo;
|
|
console.log('options>' + this.data.groupNo);
|
|
wx.getSystemInfo({
|
|
success: (res) => {
|
|
this.setData({
|
|
windowWidth: res.windowWidth,
|
|
windowHeight: res.windowHeight,
|
|
})
|
|
}
|
|
});
|
|
var that = this;
|
|
wx.request({
|
|
url: getApp().gw.hostUrl + '/mall/wxa/activity/group/wxa_code',
|
|
method: 'get',
|
|
data: {
|
|
groupNo: that.data.groupNo,
|
|
width: 80,
|
|
page: 'index/index'
|
|
},
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'sessionId': wx.getStorageSync('sessionId')
|
|
},
|
|
success: function (res) {
|
|
if (res.statusCode == 200) {
|
|
that.data.qrImageUrl = res.data.msg;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//打败Actionsheet，进行分享
|
|
openActionsheet: function () {
|
|
if (this.data.qrImageUrl.length == 0) {
|
|
wx.showLoading({
|
|
title: '正在获取',
|
|
mask: true,
|
|
});
|
|
var that = this;
|
|
wx.request({
|
|
url: getApp().gw.hostUrl + '/mall/wxa/activity/group/wxa_code',
|
|
method: 'get',
|
|
data: {
|
|
groupNo: that.data.groupNo,
|
|
width: 80,
|
|
page: 'index/index'
|
|
},
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'sessionId': wx.getStorageSync('sessionId')
|
|
},
|
|
success: function (res) {
|
|
wx.hideLoading();
|
|
if (res.statusCode == 200) {
|
|
that.setData({
|
|
qrImageUrl: res.data.msg,
|
|
show: true
|
|
});
|
|
} else {
|
|
wx.showToast({
|
|
title: '获取信息失败!',
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
}
|
|
},
|
|
fail: function (res) {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: '网络错误!',
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
this.setData({
|
|
'show': true
|
|
});
|
|
}
|
|
},
|
|
|
|
closeActionSheet: function () {
|
|
this.setData({
|
|
'show': false
|
|
});
|
|
},
|
|
|
|
onShareAppMessage: function () {
|
|
return {
|
|
title: '1号家政',
|
|
imageUrl: this.data.qrImageUrl,
|
|
path: '/pages/index/index',
|
|
};
|
|
},
|
|
|
|
clickAction({ detail }) {
|
|
// 如果是分享按钮被点击, 不处理关闭
|
|
const { index } = detail;
|
|
if (index === 0) {
|
|
|
|
return
|
|
} else if (index == 1) {
|
|
this.showMomentImage();
|
|
}
|
|
this.setData({
|
|
[`show`]: false,
|
|
[`actions[${index}].loading`]: false
|
|
});
|
|
},
|
|
|
|
goActivityInfo: function () {
|
|
|
|
},
|
|
|
|
togglePopup: function () {
|
|
this.setData({
|
|
shareImgSrc: '',
|
|
showPopup: !this.data.showPopup,
|
|
})
|
|
},
|
|
|
|
//绘制图片，加上二维码和相关的信息；
|
|
drawMomentImage: function (avatarPath, imgPath, qrCodePath) {
|
|
var that = this;
|
|
console.log(avatarPath.length + "," + imgPath.length + "," + qrCodePath.length);
|
|
if (avatarPath.length == 0 || qrCodePath.length == 0 || imgPath.length == 0) {
|
|
return;
|
|
}
|
|
|
|
const ctx = wx.createCanvasContext('shareCanvas');
|
|
var viewWidth = that.data.windowWidth * that.data.scaleW;
|
|
var viewHight = that.data.windowWidth * that.data.scaleH;
|
|
|
|
ctx.clearRect(0, 0, viewWidth, viewHight)
|
|
ctx.setFillStyle('white')
|
|
ctx.fillRect(0, viewHight - 120, viewWidth, viewHight);
|
|
|
|
ctx.drawImage(imgPath, 0, 0, viewWidth, viewHight - 120)
|
|
ctx.drawImage(qrCodePath, viewWidth - 110, viewHight - 110, 100, 100);
|
|
ctx.save();
|
|
|
|
ctx.beginPath(); //开始绘制
|
|
ctx.arc(36 / 2 + 10, 36 / 2 + 200, 36 / 2, 0, Math.PI * 2, false);
|
|
ctx.clip();//
|
|
ctx.drawImage(avatarPath, 10, 200, 36, 36); // 推进去图片
|
|
ctx.drawImage(avatarPath, 10, viewHight - 113, 24, 24)
|
|
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
|
|
ctx.save();
|
|
|
|
ctx.setFontSize(15)
|
|
ctx.setTextBaseline('top')
|
|
ctx.setFillStyle('#333')
|
|
ctx.fillText(getApp().globalData.userInfo.nickName, 40, viewHight - 111)
|
|
|
|
ctx.setFontSize(16)
|
|
ctx.setFillStyle('#000')
|
|
ctx.fillText('宠友们快来围观萌宠靓照', 10, viewHight - 80)
|
|
ctx.fillText('我在萌爪幼稚园', 10, viewHight - 58)
|
|
|
|
ctx.setFontSize(13)
|
|
ctx.fillText('长按扫码查看详情', 10, viewHight - 26)
|
|
ctx.draw()
|
|
//将绘制的图片保存到内存，然后进行展示；
|
|
setTimeout(function () {
|
|
wx.canvasToTempFilePath({
|
|
x: 0,
|
|
y: 0,
|
|
width: viewWidth,
|
|
height: viewHight,
|
|
destWidth: viewWidth,
|
|
destHeight: viewHight,
|
|
canvasId: 'shareCanvas',
|
|
success: function (res) {
|
|
that.setData({
|
|
shareImgSrc: res.tempFilePath,
|
|
showPopup: !that.data.showPopup
|
|
})
|
|
wx.hideLoading();
|
|
},
|
|
fail: function (err) {
|
|
that.handleErr(err, false);
|
|
}
|
|
})
|
|
}, 2000);
|
|
},
|
|
|
|
handleErr: function (err, toast) {
|
|
if (!toast) {
|
|
toast = true;
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: '生成图片失败!',
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
}
|
|
},
|
|
|
|
showMomentImage: function () {
|
|
var that = this;
|
|
var toast = false;
|
|
var avatarPath = '';
|
|
var imgPath = '';
|
|
var qrCodePath = '';
|
|
wx.showLoading({
|
|
title: '正在生成图片',
|
|
mask: true,
|
|
});
|
|
console.log(getApp().globalData.userInfo);
|
|
//下载微信头像，保存到本地；
|
|
wx.downloadFile({
|
|
url: getApp().globalData.userInfo.avatarUrl,
|
|
success: (res) => {
|
|
if (res.statusCode == 200 && res.tempFilePath != undefined && res.tempFilePath.length > 0) {
|
|
avatarPath = res.tempFilePath;
|
|
that.drawMomentImage(avatarPath, imgPath, qrCodePath);
|
|
} else {
|
|
that.handleErr(err, toast);
|
|
toast = true;
|
|
}
|
|
},
|
|
fail: function (err) {
|
|
that.handleErr(err, toast);
|
|
toast = true;
|
|
}
|
|
});
|
|
//下载小程序的二维码，保存到本地；
|
|
wx.downloadFile({
|
|
url: that.data.qrImageUrl,
|
|
success: (res) => {
|
|
if (res.statusCode == 200 && res.tempFilePath != undefined && res.tempFilePath.length > 0) {
|
|
console.log(res);
|
|
qrCodePath = res.tempFilePath;
|
|
that.drawMomentImage(avatarPath, imgPath, qrCodePath);
|
|
} else {
|
|
that.handleErr(err, toast);
|
|
toast = true;
|
|
}
|
|
},
|
|
fail: function (err) {
|
|
that.handleErr(err, toast);
|
|
toast = true;
|
|
}
|
|
});
|
|
//下载背景图片，保存到本地；
|
|
wx.downloadFile({
|
|
url: that.data.bgImageUrl,
|
|
success: (res) => {
|
|
if (res.statusCode == 200 && res.tempFilePath != undefined && res.tempFilePath.length > 0) {
|
|
console.log(res);
|
|
imgPath = res.tempFilePath;
|
|
that.drawMomentImage(avatarPath, imgPath, qrCodePath);
|
|
} else {
|
|
that.handleErr(err, toast);
|
|
toast = true;
|
|
}
|
|
},
|
|
fail: function (err) {
|
|
that.handleErr(err, toast);
|
|
toast = true;
|
|
}
|
|
});
|
|
|
|
// wx.downloadFile({
|
|
// url: getApp().globalData.userInfo.avatarUrl,
|
|
// success: (aRes) => {
|
|
// wx.downloadFile({
|
|
// url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527496410439&di=54c111d35f3ca9d1e9b193834785c264&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013c81583fa08ea8012060c864c3b7.jpg',
|
|
// success: (res) => {
|
|
// //从服务器获二维码图片，保存到本地；
|
|
// wx.downloadFile({
|
|
// url: that.qrImageUrl,
|
|
// success: (qRres) => {
|
|
// that.drawMomentImage(aRes.tempFilePath, res.tempFilePath, qRres.tempFilePath);
|
|
// },
|
|
// fail: function (err) {
|
|
// wx.hideLoading();
|
|
// wx.showToast({
|
|
// title: '生成图片失败!qRres',
|
|
// icon: 'none',
|
|
// duration: 1000
|
|
// });
|
|
// }
|
|
// })
|
|
// },
|
|
// fail: function (err) {
|
|
// console.log(err);
|
|
// wx.hideLoading();
|
|
// wx.showToast({
|
|
// title: '生成图片失败!res',
|
|
// icon: 'none',
|
|
// duration: 1000
|
|
// });
|
|
// }
|
|
// })
|
|
// },
|
|
// fail: function (err) {
|
|
// wx.hideLoading();
|
|
// wx.showToast({
|
|
// title: '生成图片失败!' + err.errMsg,
|
|
// icon: 'none',
|
|
// duration: 1000
|
|
// });
|
|
// }
|
|
// });
|
|
},
|
|
|
|
//将图片保存到本地相册
|
|
saveImageToAlbum: function () {
|
|
wx.showLoading({
|
|
title: '正在保存成图片',
|
|
mask: true,
|
|
});
|
|
var that = this;
|
|
setTimeout(function () {
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: that.data.shareImgSrc,
|
|
success(res) {
|
|
wx.hideLoading();
|
|
that.togglePopup()
|
|
wx.showModal({
|
|
title: '保存图片成功',
|
|
content: '图片成功保存到相册了，去发圈噻~',
|
|
showCancel: false,
|
|
confirmText: '好哒',
|
|
confirmColor: '#333',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
}
|
|
}
|
|
})
|
|
},
|
|
fail: function (res) {
|
|
console.log(res)
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: '保存图片失败!aRres',
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
}
|
|
})
|
|
}, 3000)
|
|
},
|
|
|
|
})
|