|
|
|
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 ;
|
|
|
|
|
|
|
|
Component({
|
|
|
|
/**
|
|
|
|
* 组件的属性列表
|
|
|
|
*/
|
|
|
|
properties: {
|
|
|
|
isShow: {
|
|
|
|
type: Boolean,
|
|
|
|
value: false,
|
|
|
|
observer: "_creatSnapshoot"
|
|
|
|
},
|
|
|
|
|
|
|
|
sourceType: {
|
|
|
|
type: String,
|
|
|
|
value: ""
|
|
|
|
},
|
|
|
|
|
|
|
|
shareData: {
|
|
|
|
type: Object,
|
|
|
|
value: null,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 组件的初始数据
|
|
|
|
*/
|
|
|
|
data: {
|
|
|
|
screenHeight,
|
|
|
|
windowWidth,
|
|
|
|
windowHeight,
|
|
|
|
scale,
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 组件的方法列表
|
|
|
|
*/
|
|
|
|
methods: {
|
|
|
|
hidden() {
|
|
|
|
this.triggerEvent("hiddenSheet");
|
|
|
|
},
|
|
|
|
|
|
|
|
saveToAlbum() {
|
|
|
|
var that = this;
|
|
|
|
if (wx.getSetting) {
|
|
|
|
wx.getSetting({
|
|
|
|
success(res) {
|
|
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
|
wx.authorize({
|
|
|
|
scope: 'scope.writePhotosAlbum',
|
|
|
|
success: function (res) {
|
|
|
|
that.saveSnapShoot();
|
|
|
|
},
|
|
|
|
fail: function (error) {
|
|
|
|
wx.openSetting({
|
|
|
|
success: function (res) {
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
that.saveSnapShoot();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
wx.showModal({
|
|
|
|
title: '提示',
|
|
|
|
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
saveSnapShoot() {
|
|
|
|
var that = this
|
|
|
|
var source = that.properties.sourceType;
|
|
|
|
var canvasId = '';
|
|
|
|
if (source === 'shop') {
|
|
|
|
canvasId = 'shopCanvas';
|
|
|
|
} else if (source === 'product') {
|
|
|
|
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 (err) {
|
|
|
|
that.hidden();
|
|
|
|
}
|
|
|
|
}, );
|
|
|
|
},
|
|
|
|
fail: function (error) {
|
|
|
|
that.hidden();
|
|
|
|
},
|
|
|
|
complete: function (res) {
|
|
|
|
that.hidden();
|
|
|
|
}
|
|
|
|
}, this);
|
|
|
|
},
|
|
|
|
|
|
|
|
_creatSnapshoot: function(newValue, oldValue) {
|
|
|
|
if(newValue) {
|
|
|
|
var that = this;
|
|
|
|
var type = that.properties.sourceType
|
|
|
|
if (type === "shop") {
|
|
|
|
that.createShopSnapShoot();
|
|
|
|
} else if (type === "product") {
|
|
|
|
that.creatProductDetailSnapShoot();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
createShopSnapShoot() {
|
|
|
|
var that = this;
|
|
|
|
var shareData = that.properties.shareData;
|
|
|
|
if (shareData) {
|
|
|
|
var sCtx = wx.createCanvasContext("shopCanvas", this);
|
|
|
|
sCtx.setFillStyle('white');
|
|
|
|
sCtx.fillRect(0, 0, windowWidth, screenHeight);
|
|
|
|
// console.log(shareData.bannerUrl)
|
|
|
|
|
|
|
|
var bannerUrl = shareData.bannerUrl;
|
|
|
|
if (bannerUrl.indexOf("https://") == -1) {
|
|
|
|
bannerUrl = bannerUrl.replace('http://', 'https://');
|
|
|
|
}
|
|
|
|
// console.log(bannerUrl)
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: bannerUrl,
|
|
|
|
success: function (res) {
|
|
|
|
sCtx.drawImage(res.path, 0, 0, windowWidth, 117 * scale);
|
|
|
|
sCtx.setFillStyle('white');
|
|
|
|
sCtx.setShadow(-5, -2, 40, 'darkgray');
|
|
|
|
sCtx.fillRect(27 * scale, 88 * scale, 320 * scale, 320 * scale);
|
|
|
|
sCtx.setShadow(0, 0, 0, 'white');
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: shareData.shop_logo,
|
|
|
|
success: function (res) {
|
|
|
|
sCtx.drawImage(res.path, 127 * scale, 107 * scale, 120 * scale, 120 * scale);
|
|
|
|
sCtx.draw(true);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
sCtx.setFontSize(19);
|
|
|
|
sCtx.setFillStyle('black');
|
|
|
|
sCtx.setTextAlign('center');
|
|
|
|
sCtx.fillText(shareData.shop_name, 187.5 * scale, 259 * scale);
|
|
|
|
that.drawLongText(shareData.shop_intro_simple, sCtx, 46 * scale, 291 * scale, 'black');
|
|
|
|
sCtx.draw(true);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
// console.log(shareData.shop_qrCode)
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: shareData.shop_qrCode,
|
|
|
|
success: function (res) {
|
|
|
|
sCtx.drawImage(res.path, 140.5 * scale, 470 * scale, 90 * scale, 90 * scale);
|
|
|
|
sCtx.draw(true);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
sCtx.setFillStyle('black');
|
|
|
|
sCtx.setTextAlign('center');
|
|
|
|
sCtx.setFontSize(11)
|
|
|
|
sCtx.fillText('长按扫码查看详情', 187.5 * scale, 596.5 * scale);
|
|
|
|
sCtx.drawImage("../../../static/images/share-logo@2x.png", 132 * scale, 613 * scale, 111 * scale, 20 * scale);
|
|
|
|
sCtx.draw();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
creatProductDetailSnapShoot() {
|
|
|
|
var that = this;
|
|
|
|
var product = that.properties.shareData;
|
|
|
|
var pCtx = wx.createCanvasContext("productDetailCanvas", this);
|
|
|
|
pCtx.setFillStyle('white');
|
|
|
|
pCtx.fillRect(0, 0, windowWidth, screenHeight);
|
|
|
|
pCtx.drawImage('../../../static/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);
|
|
|
|
// console.log(product.default_image)
|
|
|
|
|
|
|
|
var defaultImage = product.default_image;
|
|
|
|
if (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, 73 * scale, 402 * scale, 'white');
|
|
|
|
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("../../../static/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("../../../static/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();
|
|
|
|
},
|
|
|
|
|
|
|
|
drawLongText(longtext, cxt, begin_width, begin_height, color) {
|
|
|
|
var linelenght = 20 * scale;//行间距
|
|
|
|
var numsForLine = 20;
|
|
|
|
var numberOfLine = 2;
|
|
|
|
var text = "";
|
|
|
|
var count = 0;
|
|
|
|
var lineNumber = 1;
|
|
|
|
var begin_width = begin_width;
|
|
|
|
var begin_height = begin_height;
|
|
|
|
var stringLenght = longtext.length;
|
|
|
|
var newtext = longtext.split("");
|
|
|
|
|
|
|
|
cxt.setFillStyle(color);
|
|
|
|
cxt.setFontSize(14 * scale);
|
|
|
|
cxt.setTextAlign('left');
|
|
|
|
|
|
|
|
for (var i = 0; i <= stringLenght; i++) {
|
|
|
|
if (count == numsForLine) {
|
|
|
|
if (lineNumber === numberOfLine) {
|
|
|
|
var 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) |
