|
|
|
/* eslint-disable no-undef */
|
|
|
|
import Taro from '@tarojs/taro'
|
|
|
|
import event from '../../../utils/event.js'
|
|
|
|
import {getImgUrl} from '../../../utils';
|
|
|
|
import {globalData} from '../../../actions/globalData.js';
|
|
|
|
|
|
|
|
// 获取系统信息
|
|
|
|
let systemInfo = Taro.getSystemInfoSync();
|
|
...
|
...
|
@@ -38,7 +40,8 @@ Component({ |
|
|
|
windowWidth: systemInfo.windowWidth,
|
|
|
|
windowHeight: systemInfo.windowHeight,
|
|
|
|
scale,
|
|
|
|
ratio:2
|
|
|
|
ratio:2,
|
|
|
|
userInfo: {}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
...
|
...
|
@@ -149,7 +152,7 @@ Component({ |
|
|
|
|
|
|
|
var that = this;
|
|
|
|
var product = that.properties.shareData;
|
|
|
|
|
|
|
|
|
|
|
|
console.log('====================================');
|
|
|
|
console.log(product);
|
|
|
|
console.log('====================================');
|
|
...
|
...
|
@@ -161,89 +164,112 @@ Component({ |
|
|
|
let snapWidth = this.data.windowWidth * ratio
|
|
|
|
let snapHeight = this.data.screenHeight * ratio
|
|
|
|
let middle = snapWidth / 2
|
|
|
|
scale = snapWidth / 262.5
|
|
|
|
scale = snapWidth / 375
|
|
|
|
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 logoHeight = 50 * HScale;
|
|
|
|
let logoWidth = 50 * scale;
|
|
|
|
let logoTop = 40 * HScale;
|
|
|
|
let logoMarginBottom = 25 * HScale;
|
|
|
|
let logoLeft = 30 * scale //logo左边坐标
|
|
|
|
|
|
|
|
let nameTop = 60 * HScale;
|
|
|
|
let nameLeft = logoLeft + logoWidth + 15 * scale;
|
|
|
|
|
|
|
|
let tipsTop = nameTop + 20 * scale;
|
|
|
|
|
|
|
|
let imgtextContainerHeight = 393 * HScale
|
|
|
|
let imgContainerWidth = 315 * scale;
|
|
|
|
let imgContainerHeight = 315 * scale;
|
|
|
|
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 productNameTop = imgContainerTop + imgContainerHeight + 20 * scale
|
|
|
|
|
|
|
|
//以下为小程序码相关
|
|
|
|
let qrImgMarginTop = 21 * HScale
|
|
|
|
let qrCodeTop = imgContainerTop + imgContainerHeight + qrImgMarginTop
|
|
|
|
let qrImgWH = 56 * scale
|
|
|
|
let qrImgMarginTop = 20 * HScale
|
|
|
|
let qrCodeTop = imgContainerTop + imgtextContainerHeight + qrImgMarginTop
|
|
|
|
let qrImgWH = 70 * scale
|
|
|
|
let qrCodeLeft = (snapWidth - qrImgWH)/2
|
|
|
|
|
|
|
|
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
|
|
|
|
let tipLeft = (snapWidth - 180 * scale)/2
|
|
|
|
let tipTop = qrCodeTop + qrImgWH + 20 * scale
|
|
|
|
|
|
|
|
const app = getApp() || {};
|
|
|
|
let userInfo = app.props.globalData.userInfo;
|
|
|
|
|
|
|
|
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.drawImage(userInfo.avatarUrl, logoLeft , logoTop, logoWidth, logoHeight)//画logo
|
|
|
|
pCtx.setFillStyle('#ffffff');
|
|
|
|
pCtx.setStrokeStyle('#e0e0e0')
|
|
|
|
// pCtx.fillRect(imgContainerLeft,imgContainerTop,320*scale,430*scale)//图片容器
|
|
|
|
pCtx.strokeRect(imgContainerLeft, imgContainerTop, imgContainerWidth , imgContainerHeight)//图片容器
|
|
|
|
// pCtx.arc(logoLeft+logoWidth/2, logoTop+logoHeight/2, logoWidth/2, 0, 2*Math.PI)
|
|
|
|
// this.circleImg(pCtx, userInfo.avatarUrl, logoLeft, logoTop, logoWidth)
|
|
|
|
|
|
|
|
//昵称
|
|
|
|
pCtx.setFillStyle('#000')
|
|
|
|
pCtx.setFontSize(20*scale)
|
|
|
|
pCtx.fillText(userInfo.nickName, nameLeft, nameTop)
|
|
|
|
|
|
|
|
pCtx.setFillStyle('#000')
|
|
|
|
pCtx.setFontSize(12*scale)
|
|
|
|
pCtx.fillText('发现一件超棒的潮流好物分享给你！', nameLeft, tipsTop)
|
|
|
|
|
|
|
|
pCtx.strokeRect(imgContainerLeft, imgContainerTop, imgContainerWidth , imgtextContainerHeight)//图片容器
|
|
|
|
|
|
|
|
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
|
|
|
|
shareData: product,
|
|
|
|
userInfo
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
that.drawLongText(product.product_name, pCtx, middle, productNameTop, 'black', 20, 25, 2);
|
|
|
|
pCtx.setTextAlign('center');
|
|
|
|
pCtx.setFontSize(16.8 * scale);
|
|
|
|
pCtx.fillText(product.product_price, middle, priceTop);
|
|
|
|
pCtx.setFontSize(20 * scale);
|
|
|
|
pCtx.draw(true)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: product.product_qrCode,
|
|
|
|
success:function(res){
|
|
|
|
pCtx.drawImage(res.path, imgContainerLeft, qrCodeTop, qrImgWH, qrImgWH);//画小程序码
|
|
|
|
pCtx.drawImage(res.path, qrCodeLeft, 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.setFillStyle('#999999')
|
|
|
|
pCtx.setFontSize(12*scale)
|
|
|
|
pCtx.setTextAlign('center')
|
|
|
|
pCtx.fillText('扫一扫，发现你中意的潮流好物！', middle, tipTop)
|
|
|
|
pCtx.draw()
|
|
|
|
/*---------结束新的作画-----------*/
|
|
|
|
},
|
|
|
|
|
|
|
|
circleImg(ctx, img, x, y, r) {
|
|
|
|
ctx.save();
|
|
|
|
var d = 2 * r;
|
|
|
|
var cx = x + r;
|
|
|
|
var cy = y + r;
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
|
|
|
|
ctx.clip();
|
|
|
|
ctx.drawImage(img, x, y, d, d);
|
|
|
|
},
|
|
|
|
|
|
|
|
drawLongText(longtext, cxt, begin_width, begin_height, color, fontSize, numsForLine,numberOfLine,
|
|
|
|
isCenter = true,lineL = 0) {
|
|
|
|
let linelenght = lineL;//行间距
|
...
|
...
|
|
