|
|
|
import Taro from '@tarojs/taro'
|
|
|
|
import event from '../../../utils/event.js'
|
|
|
|
import {getImgUrl} from '../../../utils';
|
|
|
|
|
|
|
|
// 获取系统信息
|
|
|
|
let systemInfo = Taro.getSystemInfoSync();
|
|
|
|
const windowWidth = systemInfo.windowWidth;
|
|
|
|
const windowHeight = systemInfo.windowHeight;
|
|
|
|
const screenHeight = systemInfo.screenHeight;
|
|
|
|
|
|
|
|
let scale = windowWidth / 375;
|
|
|
|
let HScale = scale
|
|
|
|
|
|
|
|
const SHARE_CANCEL_MOMENTS = 'user-canel-share-moments';
|
|
|
|
|
|
|
|
Component({
|
|
|
|
/**
|
|
|
|
* 组件的属性列表
|
|
|
|
*/
|
|
|
|
properties: {
|
|
|
|
isShow: {
|
|
|
|
type: Boolean,
|
|
|
|
value: false,
|
|
|
|
observer: "_creatSnapshoot"
|
|
|
|
},
|
|
|
|
|
|
|
|
sourceType: {
|
|
|
|
type: String,
|
|
|
|
value: ""
|
|
|
|
},
|
|
|
|
|
|
|
|
shareData: {
|
|
|
|
type: Object,
|
|
|
|
value: null,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 组件的初始数据
|
|
|
|
*/
|
|
|
|
data: {
|
|
|
|
screenHeight: systemInfo.screenHeight,
|
|
|
|
windowWidth: systemInfo.windowWidth,
|
|
|
|
windowHeight: systemInfo.windowHeight,
|
|
|
|
scale,
|
|
|
|
ratio:2
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 组件的方法列表
|
|
|
|
*/
|
|
|
|
methods: {
|
|
|
|
hidden() {
|
|
|
|
// this.triggerEvent("hiddenSnaphotSheet");
|
|
|
|
|
|
|
|
event.emit(SHARE_CANCEL_MOMENTS);
|
|
|
|
},
|
|
|
|
|
|
|
|
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) {
|
|
|
|
if (res.authSetting['scope.writePhotosAlbum'] == false) {
|
|
|
|
wx.showModal({
|
|
|
|
title: '',
|
|
|
|
content: '需要打开小程序的设置，重新授权访问您的系统相册',
|
|
|
|
confirmText: "去开启",
|
|
|
|
confirmColor: "#000000",
|
|
|
|
success: function (res) {
|
|
|
|
if (res.confirm) {
|
|
|
|
wx.openSetting({
|
|
|
|
success: function (res) {
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
that.saveSnapShoot();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
wx.showModal({
|
|
|
|
title: '提示',
|
|
|
|
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
saveSnapShoot() {
|
|
|
|
var that = this;
|
|
|
|
var canvasWidth = windowWidth * that.data.ratio;
|
|
|
|
var canvasHeight = screenHeight * that.data.ratio;
|
|
|
|
var destWidth = windowWidth * 2 * that.data.ratio;
|
|
|
|
var destHeight = screenHeight * 2 * that.data.ratio;
|
|
|
|
var canvasId = 'productDetailCanvas';
|
|
|
|
|
|
|
|
wx.canvasToTempFilePath({
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
width: canvasWidth,
|
|
|
|
height: canvasHeight,
|
|
|
|
destWidth: destWidth,
|
|
|
|
destHeight: destHeight,
|
|
|
|
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) {
|
|
|
|
this.creatProductDetailSnapShoot();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
creatProductDetailSnapShoot() {
|
|
|
|
|
|
|
|
var that = this;
|
|
|
|
var product = that.properties.shareData;
|
|
|
|
|
|
|
|
console.log('====================================');
|
|
|
|
console.log(product);
|
|
|
|
console.log('====================================');
|
|
|
|
|
|
|
|
if(!product){
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let ratio = this.data.ratio
|
|
|
|
let snapWidth = this.data.windowWidth * ratio
|
|
|
|
let snapHeight = this.data.screenHeight * ratio
|
|
|
|
let middle = snapWidth / 2
|
|
|
|
scale = snapWidth / 262.5
|
|
|
|
HScale = scale
|
|
|
|
// console.log(windowWidth,screenHeight,snapWidth,snapHeight,scale)
|
|
|
|
let logoHeight = 15.4 * HScale;
|
|
|
|
let logoWidth = 78.4 * scale;
|
|
|
|
let logoTop = 25.2 * HScale;
|
|
|
|
let logoMarginBottom = 21 * HScale;
|
|
|
|
let logoLeft = (snapWidth - logoWidth) / 2 //logo左边坐标
|
|
|
|
|
|
|
|
let imgContainerWidth = 227.5 * scale;
|
|
|
|
let imgContainerHeight = 303.1 * HScale
|
|
|
|
let imgContainerLeft = (snapWidth - imgContainerWidth) / 2 //图片容器左边位置
|
|
|
|
let imgContainerTop = logoHeight + logoTop + logoMarginBottom //图片容器顶部位置
|
|
|
|
|
|
|
|
let namePriceBgHeight = 56 * HScale
|
|
|
|
let namePriceBgTop = imgContainerTop + (imgContainerHeight - namePriceBgHeight)
|
|
|
|
|
|
|
|
let x = 10 * scale
|
|
|
|
let nameTop = imgContainerTop + 255*scale + x
|
|
|
|
let priceTop = imgContainerTop + 280* scale + x
|
|
|
|
|
|
|
|
//以下为小程序码相关
|
|
|
|
let qrImgMarginTop = 21 * HScale
|
|
|
|
let qrCodeTop = imgContainerTop + imgContainerHeight + qrImgMarginTop
|
|
|
|
let qrImgWH = 56 * scale
|
|
|
|
|
|
|
|
let tipX = 10 * scale
|
|
|
|
let tipLeft = imgContainerLeft + qrImgWH + 13.7 * scale
|
|
|
|
let tip1Top = imgContainerTop + imgContainerHeight + 34.2*scale + tipX
|
|
|
|
let tip2Top = imgContainerTop + imgContainerHeight + 52.5 * scale + tipX
|
|
|
|
|
|
|
|
var pCtx = wx.createCanvasContext("productDetailCanvas", this);
|
|
|
|
pCtx.setFillStyle('white');
|
|
|
|
pCtx.fillRect(0, 0, snapWidth, snapHeight);
|
|
|
|
/*---------开始新的作画-----------*/
|
|
|
|
pCtx.drawImage('../../../assets/images/share-logo@2x.png',logoLeft , logoTop, logoWidth, logoHeight)//画logo
|
|
|
|
pCtx.setFillStyle('white');
|
|
|
|
pCtx.setStrokeStyle('#e0e0e0')
|
|
|
|
// pCtx.fillRect(imgContainerLeft,imgContainerTop,320*scale,430*scale)//图片容器
|
|
|
|
pCtx.strokeRect(imgContainerLeft, imgContainerTop, imgContainerWidth , imgContainerHeight)//图片容器
|
|
|
|
|
|
|
|
var defaultImage = getImgUrl(product.default_image, imgContainerWidth, imgContainerHeight);
|
|
|
|
if (defaultImage && defaultImage.indexOf("https://") == -1) {
|
|
|
|
defaultImage = defaultImage.replace('http://', 'https://');
|
|
|
|
}
|
|
|
|
product.default_image = defaultImage;
|
|
|
|
that.setData({
|
|
|
|
shareData: product
|
|
|
|
})
|
|
|
|
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: defaultImage,
|
|
|
|
success:function(res){
|
|
|
|
pCtx.drawImage(res.path, imgContainerLeft, imgContainerTop, imgContainerWidth, imgContainerHeight)
|
|
|
|
pCtx.setFillStyle("rgba(34,34,34,0.8)");//画名称价格背景
|
|
|
|
pCtx.fillRect(imgContainerLeft, namePriceBgTop, imgContainerWidth, namePriceBgHeight)
|
|
|
|
pCtx.setFillStyle('white');
|
|
|
|
that.drawLongText(product.product_name, pCtx, middle, nameTop, 'white', 9.8, 30,1);
|
|
|
|
pCtx.setTextAlign('center');
|
|
|
|
pCtx.setFontSize(16.8 * scale);
|
|
|
|
pCtx.fillText(product.product_price, middle, priceTop);
|
|
|
|
pCtx.draw(true)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
// wx.getImageInfo({
|
|
|
|
// src: product.product_qrCode,
|
|
|
|
// success:function(res){
|
|
|
|
// pCtx.drawImage(res.path, imgContainerLeft, qrCodeTop, qrImgWH, qrImgWH);//画小程序码
|
|
|
|
// pCtx.draw(true)
|
|
|
|
|
|
|
|
// }
|
|
|
|
// })
|
|
|
|
pCtx.setFillStyle('#444444')
|
|
|
|
pCtx.setFontSize(9.8*scale)
|
|
|
|
|
|
|
|
pCtx.fillText('长按扫码查看详情',tipLeft,tip1Top)
|
|
|
|
pCtx.setFillStyle('#b0b0b0')
|
|
|
|
pCtx.setFontSize(8.4*scale)
|
|
|
|
pCtx.fillText('实际价格以页面展示为准', tipLeft, tip2Top)
|
|
|
|
pCtx.draw()
|
|
|
|
/*---------结束新的作画-----------*/
|
|
|
|
},
|
|
|
|
|
|
|
|
drawLongText(longtext, cxt, begin_width, begin_height, color, fontSize, numsForLine,numberOfLine,
|
|
|
|
isCenter = true,lineL = 0) {
|
|
|
|
let linelenght = lineL;//行间距
|
|
|
|
if (linelenght == 0){
|
|
|
|
linelenght = (fontSize + 2) * scale
|
|
|
|
}
|
|
|
|
if(!numberOfLine){
|
|
|
|
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(fontSize * scale);
|
|
|
|
if(isCenter){
|
|
|
|
cxt.setTextAlign('center');
|
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) |
...
|
...
|
|
