|
|
|
let app = getApp();
|
|
|
|
const windowWidth = app.globalData.systemInfo.windowWidth;
|
|
|
|
const windowHeight = app.globalData.systemInfo.windowHeight;
|
|
|
|
const screenHeight = app.globalData.systemInfo.screenHeight;
|
|
|
|
const scale = windowWidth / 375;
|
|
|
|
|
|
|
|
var Point = function(x, y) {
|
|
|
|
return {
|
|
|
|
x: x,
|
|
|
|
y: y
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
Page({
|
|
|
|
/**
|
|
|
|
* 组件的初始数据
|
|
|
|
*/
|
|
|
|
data: {
|
|
|
|
screenHeight,
|
|
|
|
windowWidth,
|
|
|
|
windowHeight,
|
|
|
|
scale,
|
|
|
|
},
|
|
|
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
saveToAlbum() {
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
if (wx.getSetting) {
|
|
|
|
wx.getSetting({
|
|
|
|
success(res) {
|
|
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
|
wx.authorize({
|
|
|
|
scope: 'scope.writePhotosAlbum',
|
|
|
|
success: function() {
|
|
|
|
that.saveSnapShoot();
|
|
|
|
},
|
|
|
|
fail: function(error) {
|
|
|
|
if (res.authSetting['scope.writePhotosAlbum'] === false) {
|
|
|
|
wx.showModal({
|
|
|
|
title: '',
|
|
|
|
content: '需要打开小程序的设置，重新授权访问您的系统相册',
|
|
|
|
confirmText: '去开启',
|
|
|
|
confirmColor: '#000000',
|
|
|
|
success: function(r) {
|
|
|
|
if (r.confirm) {
|
|
|
|
wx.openSetting({
|
|
|
|
success: function() {}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
that.saveSnapShoot();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
wx.showModal({
|
|
|
|
title: '提示',
|
|
|
|
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
saveSnapShoot() {
|
|
|
|
var that = this;
|
|
|
|
var canvasId = 'productDetailCanvas';
|
|
|
|
|
|
|
|
wx.canvasToTempFilePath({
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
width: windowWidth,
|
|
|
|
height: screenHeight,
|
|
|
|
destWidth: windowWidth * 2,
|
|
|
|
destHeight: screenHeight * 2,
|
|
|
|
quality: 1.0,
|
|
|
|
canvasId: canvasId,
|
|
|
|
success: function(result) {
|
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
|
filePath: result.tempFilePath,
|
|
|
|
success(res) {
|
|
|
|
wx.showToast({
|
|
|
|
title: '保存成功',
|
|
|
|
icon: 'success',
|
|
|
|
duration: 2000
|
|
|
|
});
|
|
|
|
that.hidden();
|
|
|
|
},
|
|
|
|
fail: function() {
|
|
|
|
that.hidden();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
fail: function(error) {
|
|
|
|
that.hidden();
|
|
|
|
},
|
|
|
|
complete: function(res) {
|
|
|
|
that.hidden();
|
|
|
|
}
|
|
|
|
}, this);
|
|
|
|
},
|
|
|
|
|
|
|
|
creatProductDetailSnapShoot() {
|
|
|
|
let that = this;
|
|
|
|
let product = that.properties.shareData;
|
|
|
|
let pCtx = wx.createCanvasContext('productDetailCanvas', this);
|
|
|
|
|
|
|
|
pCtx.setFillStyle('white');
|
|
|
|
pCtx.fillRect(0, 0, windowWidth, screenHeight);
|
|
|
|
pCtx.drawImage('./images/snapshoot_share_bg@2x.png', 0, 0, windowWidth, 186 * scale);
|
|
|
|
pCtx.setFillStyle('white');
|
|
|
|
pCtx.setShadow(-5, -2, 40, 'darkgray');
|
|
|
|
pCtx.fillRect(27 * scale, 60 * scale, 320 * scale, 430 * scale);
|
|
|
|
|
|
|
|
let defaultImage = product.default_image;
|
|
|
|
|
|
|
|
if (defaultImage && defaultImage.indexOf('https://') === -1) {
|
|
|
|
defaultImage = defaultImage.replace('http://', 'https://');
|
|
|
|
}
|
|
|
|
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: defaultImage,
|
|
|
|
success: function(res) {
|
|
|
|
pCtx.drawImage(res.path, 27 * scale, 60 * scale, 320 * scale, 430 * scale);
|
|
|
|
pCtx.setFillStyle('rgba(0,0,0,0.8)');
|
|
|
|
pCtx.fillRect(27 * scale, 370 * scale, 320 * scale, 120 * scale);
|
|
|
|
pCtx.setFillStyle('white');
|
|
|
|
that.drawLongText(product.product_name, pCtx, 187.5 * scale, 402 * scale, 'white', 14, 20);
|
|
|
|
pCtx.setTextAlign('center');
|
|
|
|
pCtx.setFontSize(18 * scale);
|
|
|
|
pCtx.fillText(product.product_price, 187.5 * scale, 458.5 * scale);
|
|
|
|
pCtx.draw(true);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
pCtx.setShadow(0, 0, 0, 'white');
|
|
|
|
pCtx.drawImage('./images/share-logo@2x.png', 132 * scale, 505 * scale, 111 * scale, 20 * scale);
|
|
|
|
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: product.product_qrCode,
|
|
|
|
success: function(res) {
|
|
|
|
pCtx.drawImage(res.path, 148.5 * scale, 539.5 * scale, 78 * scale, 78 * scale);
|
|
|
|
pCtx.draw(true);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
pCtx.setFillStyle('black');
|
|
|
|
pCtx.setTextAlign('center');
|
|
|
|
pCtx.setFontSize(11);
|
|
|
|
pCtx.fillText('长按扫码查看详情', 187.5 * scale, 632.5 * scale);
|
|
|
|
pCtx.drawImage('./images/snapshoot_tip_ic@2x.png', 127 * scale, 645.5 * scale, 9 * scale, 9 * scale);
|
|
|
|
pCtx.setFillStyle('#b0b0b0');
|
|
|
|
pCtx.setFontSize(9);
|
|
|
|
pCtx.fillText('实际价格以页面展示为准', 187.5 * scale, 652.5 * scale);
|
|
|
|
pCtx.draw();
|
|
|
|
},
|
|
|
|
|
|
|
|
drawRoundedRect: function(rect, r, ctx) {
|
|
|
|
var ptA = Point(rect.x + r, rect.y);
|
|
|
|
var ptB = Point(rect.x + rect.width, rect.y);
|
|
|
|
var ptC = Point(rect.x + rect.width, rect.y + rect.height);
|
|
|
|
var ptD = Point(rect.x, rect.y + rect.height);
|
|
|
|
var ptE = Point(rect.x, rect.y);
|
|
|
|
|
|
|
|
ctx.setStrokeStyle('rgba(0,0,0,0)');
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
|
|
|
ctx.moveTo(ptA.x, ptA.y);
|
|
|
|
ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
|
|
|
|
ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
|
|
|
|
ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);
|
|
|
|
ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);
|
|
|
|
|
|
|
|
ctx.stroke();
|
|
|
|
},
|
|
|
|
|
|
|
|
Rect: function(x, y, w, h) {
|
|
|
|
return {
|
|
|
|
x: x,
|
|
|
|
y: y,
|
|
|
|
width: w,
|
|
|
|
height: h
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
drawLongText(longtext, cxt, begin_width, begin_height, color, fontSize, numsForLine) {
|
|
|
|
var linelenght = 20 * scale; // 行间距
|
|
|
|
var numberOfLine = 2;
|
|
|
|
var text = '';
|
|
|
|
var count = 0;
|
|
|
|
var lineNumber = 1;
|
|
|
|
var stringLenght = longtext.length;
|
|
|
|
var newtext = longtext.split('');
|
|
|
|
|
|
|
|
cxt.setFillStyle(color);
|
|
|
|
cxt.setFontSize(fontSize * scale);
|
|
|
|
cxt.setTextAlign('center');
|
|
|
|
|
|
|
|
for (let i = 0; i <= stringLenght; i++) {
|
|
|
|
if (count === numsForLine) {
|
|
|
|
if (lineNumber === numberOfLine) {
|
|
|
|
let t = text + '...';
|
|
|
|
|
|
|
|
cxt.fillText(t, begin_width, begin_height);
|
|
|
|
} else {
|
|
|
|
cxt.fillText(text, begin_width, begin_height);
|
|
|
|
}
|
|
|
|
begin_height = begin_height + linelenght;
|
|
|
|
text = '';
|
|
|
|
count = 0;
|
|
|
|
lineNumber++;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (i === stringLenght) {
|
|
|
|
cxt.fillText(text, begin_width, begin_height);
|
|
|
|
}
|
|
|
|
text = text + newtext[0];
|
|
|
|
count++;
|
|
|
|
newtext.shift();
|
|
|
|
if (lineNumber > numberOfLine) {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}); |
...
|
...
|
|
