|
|
@@ -3,6 +3,7 @@ const imgurl = require("../../../../utils/imgurl"); |
|
|
|
const config = require("../../../../config/config"); |
|
|
|
const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {} |
|
|
|
let imgOrgUrl = extConfig.attr.imgOrgUrl; |
|
|
|
let imgOrgUrl1 = extConfig.attr.imgOrgUrl1; |
|
|
|
let imgNewUrl = extConfig.attr.imgNewUrl; |
|
|
|
let app = getApp(); |
|
|
|
Page({ |
|
|
@@ -11,6 +12,7 @@ Page({ |
|
|
|
* 页面的初始数据 |
|
|
|
*/ |
|
|
|
data: { |
|
|
|
poterbg: imgurl.poterbg.url, |
|
|
|
teljpgUrl: imgurl.teljpg.url, |
|
|
|
share01: imgurl.share01.url, |
|
|
|
actUrl: imgurl.act.url, |
|
|
@@ -25,8 +27,8 @@ Page({ |
|
|
|
showpost: false, |
|
|
|
imgHeight: 0, |
|
|
|
id: null, |
|
|
|
windowWidth: 0, |
|
|
|
windowHeight: 0, |
|
|
|
windowWidth: wx.getSystemInfoSync().windowWidth, |
|
|
|
windowHeight: wx.getSystemInfoSync().screenHeight, |
|
|
|
totalHeight: 0, |
|
|
|
canvasScale: 1.0, // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 |
|
|
|
}, |
|
|
@@ -55,15 +57,7 @@ Page({ |
|
|
|
currentTab: 0 |
|
|
|
}) |
|
|
|
} |
|
|
|
// 获取到屏幕的宽高等信息 |
|
|
|
wx.getSystemInfo({ |
|
|
|
success: function(res) { |
|
|
|
that.setData({ |
|
|
|
windowWidth: res.windowWidth, |
|
|
|
windowHeight: res.windowHeight |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.getUserInfo() |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 绘制分享海报 |
|
|
@@ -83,66 +77,77 @@ Page({ |
|
|
|
}) |
|
|
|
// 获取Canvas |
|
|
|
let ctx = wx.createCanvasContext('myCanvas') |
|
|
|
|
|
|
|
// 获取宽高 |
|
|
|
let wW = that.data.windowWidth; |
|
|
|
let wH = that.data.windowHeight; |
|
|
|
// 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 |
|
|
|
ctx.scale(this.data.canvasScale, this.data.canvasScale) |
|
|
|
|
|
|
|
// 绘制主背景白色 |
|
|
|
ctx.setFillStyle('#ffffff') |
|
|
|
ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight) |
|
|
|
ctx.draw() |
|
|
|
|
|
|
|
// 绘制背景图 |
|
|
|
let bgimg1 = this.data.poterbg + `?imageView/2/w/${wW}/h/${wH}` |
|
|
|
let bgimg2 = bgimg1.replace(imgOrgUrl1, imgNewUrl) |
|
|
|
ctx.drawImage(bgimg2, 0, 0, wW, wH); |
|
|
|
//绘制头像 |
|
|
|
let avatar1 = this.data.avatarUrl + `?imageView/2/w/${wW}/h/${wH}` |
|
|
|
let avatar2 = avatar1.replace(imgOrgUrl, imgNewUrl) |
|
|
|
ctx.drawImage(avatar2, 15, 10, 30*scale,30*scale); |
|
|
|
// 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容 |
|
|
|
let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片,所以转成int |
|
|
|
let topImageHeight = parseInt(250 * scale) |
|
|
|
let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int |
|
|
|
let topImageHeight = parseInt(200 * scale) |
|
|
|
let src1 = this.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` |
|
|
|
let src2 = src1.replace(imgOrgUrl, imgNewUrl) |
|
|
|
wx.getImageInfo({ |
|
|
|
src: src2, |
|
|
|
success: function(res) { |
|
|
|
ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight) |
|
|
|
// 覆盖黑色蒙层 |
|
|
|
ctx.setFillStyle('rgba(0,0,0,0.3)') |
|
|
|
ctx.fillRect(0, 0, topImageWidth, topImageHeight) |
|
|
|
|
|
|
|
ctx.draw(true) |
|
|
|
|
|
|
|
// 绘制白色背景 |
|
|
|
ctx.setFillStyle('#fff') |
|
|
|
ctx.fillRect(25,45, topImageWidth+10, topImageHeight+10) |
|
|
|
ctx.draw() |
|
|
|
ctx.drawImage(res.path, 30,50, topImageWidth, topImageHeight) |
|
|
|
that.drawOtherContent(ctx, scale) |
|
|
|
that.drawOtherImage(ctx, scale) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//获取头像和昵称 |
|
|
|
getUserInfo: function () { |
|
|
|
let that = this; |
|
|
|
// 获取用户信息 |
|
|
|
Http.get({ |
|
|
|
url: config.api.getScore, |
|
|
|
data: {} |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
console.log(res) |
|
|
|
that.setData({ |
|
|
|
nickName: res.data.nickName, |
|
|
|
avatarUrl: res.data.avatarUrl |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 绘制除了图片之外的剩余内容 |
|
|
|
drawOtherContent(ctx, scale) { |
|
|
|
|
|
|
|
// 绘制中间的灰色背景 |
|
|
|
ctx.setFillStyle('rgba(246,246,246,1)') |
|
|
|
//(x轴,y轴,宽,高) |
|
|
|
ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 58 * scale) |
|
|
|
|
|
|
|
//name |
|
|
|
ctx.setFillStyle('white'); |
|
|
|
ctx.setFontSize(30 * scale); |
|
|
|
this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 210 * scale, 30 * scale, 258 * scale, 1) |
|
|
|
// address |
|
|
|
ctx.setFillStyle('#000'); |
|
|
|
ctx.setFontSize(18 * scale); |
|
|
|
this.canvasTextAutoLine("地址:" + this.data.data.shopVoList[0].floorName + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 265 * scale, 20 * scale, 305 * scale, 1) |
|
|
|
//昵称 |
|
|
|
this.drawNormalText(ctx, this.data.nickName+" 向您推荐", 50 * scale, 25 * scale, 16 * scale, '#fff', 'left', 'middle', scale); |
|
|
|
//店铺名 |
|
|
|
this.drawNormalText(ctx, this.data.data.merchantName, 180 * scale, 280 * scale, 30 * scale, '#fff', 'center', 'middle', scale); |
|
|
|
//店铺电话 |
|
|
|
// this.drawNormalText(ctx, "商铺电话:"+this.data.data.merchantLinkPhone, 100 * scale, 405 * scale, 16 * scale, '#000', 'left', 'middle', scale); |
|
|
|
if (this.data.couponList.length>0) { |
|
|
|
for (let i = 0; i < this.data.couponList.length; i++) { |
|
|
|
// 第一个商品信息 |
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 15 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, "价格:"+this.data.couponList[1].salePrice, 15 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 40 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, "价格:"+this.data.couponList[1].salePrice, 40 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); |
|
|
|
//第二个商品信息 |
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 130 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, "价格:"+this.data.couponList[2].salePrice, 130 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 155 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, "价格:"+this.data.couponList[2].salePrice, 155 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); |
|
|
|
//第三个商品信息 |
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 255 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, "价格:"+this.data.couponList[3].salePrice, 255 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 270 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); |
|
|
|
this.drawNormalText(ctx, "价格:"+this.data.couponList[3].salePrice, 270 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); |
|
|
|
} |
|
|
|
this.drawNormalText(ctx, "点击下载保存海报到相册", 185 * scale, 506 * scale, 16 * scale, '#000', 'left', 'middle', scale); |
|
|
|
|
|
|
|
} |
|
|
|
this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale); |
|
|
|
ctx.draw(true) |
|
|
|
|
|
|
|
}, |
|
|
@@ -155,10 +160,8 @@ Page({ |
|
|
|
var that = this |
|
|
|
// 如果该商户有活动商品 |
|
|
|
if (that.data.couponList.length>0) { |
|
|
|
let cotentImageWidth = parseInt(100 * scale) |
|
|
|
let cotentImageHeight = parseInt(100 * scale) |
|
|
|
let src3 = this.data.qrCode + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`//小程序码 |
|
|
|
let src4 = src3.replace(imgOrgUrl, imgNewUrl) |
|
|
|
let cotentImageWidth = parseInt(80 * scale) |
|
|
|
let cotentImageHeight = parseInt(80 * scale) |
|
|
|
for (let i = 0; i < that.data.couponList.length; i++) { |
|
|
|
let imageItem = that.data.couponList[i].coverImg |
|
|
|
let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}` |
|
|
@@ -167,40 +170,31 @@ Page({ |
|
|
|
wx.getImageInfo({ |
|
|
|
src: src2, |
|
|
|
success: function(res) { |
|
|
|
ctx.drawImage(res.path, 15 * scale + i * 120 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) |
|
|
|
ctx.draw(true) |
|
|
|
|
|
|
|
// ctx.setFillStyle('rgba(255,255,255,0.3)') |
|
|
|
// ctx.fillRect(25,300, 300*scale, 200*scale) |
|
|
|
// ctx.draw(true) |
|
|
|
ctx.drawImage(res.path, 45 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
//有活动商品小程序码 |
|
|
|
wx.getImageInfo({ |
|
|
|
src: src4, |
|
|
|
success: function(res) { |
|
|
|
ctx.drawImage(res.path, 15 * scale * scale, 450 * scale, 150, 150) |
|
|
|
ctx.draw(true) |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
//没有活动商品生成小程序码 |
|
|
|
} else { |
|
|
|
|
|
|
|
} |
|
|
|
if (this.data.qrCode) { |
|
|
|
let coImageWidth = parseInt(260 * scale) |
|
|
|
let coImageHeight = parseInt(260 * scale) |
|
|
|
let coImageWidth = parseInt(120 * scale) |
|
|
|
let coImageHeight = parseInt(120 * scale) |
|
|
|
let src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` |
|
|
|
let src2 = src1.replace(imgOrgUrl, imgNewUrl) |
|
|
|
wx.getImageInfo({ |
|
|
|
src: src2, |
|
|
|
success: function(res) { |
|
|
|
ctx.drawImage(res.path, 50 * scale, 320 * scale, coImageWidth, coImageHeight) |
|
|
|
ctx.drawImage(res.path, 115 * scale, 425 * scale, coImageWidth, coImageHeight) |
|
|
|
ctx.draw(true) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
wx.hideLoading() |
|
|
|
}, |
|
|
|
|
|
|
|
// 绘制只有一行的文字 |
|
|
|
drawNormalText(ctx, str, x, y, font, style, align, baseLine) { |
|
|
|
ctx.setFontSize(font); |
|
|
@@ -248,6 +242,35 @@ Page({ |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 图片预览方法 |
|
|
|
* 此处注意的一点就是,调用 "wx.previewImage"时,第二个参数要求为数组形式哦 |
|
|
|
* 当然,做过图片上传功能的应该会注意到,如果涉及到多张图片预览,图片链接数组集合即为参数 urls! |
|
|
|
*/ |
|
|
|
previewImage: function() { |
|
|
|
wx.canvasToTempFilePath({ |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
width: this.data.windowWidth * this.data.canvasScale, |
|
|
|
height: this.data.totalHeight * this.data.canvasScale, |
|
|
|
canvasId: 'myCanvas', |
|
|
|
success: function (res) { |
|
|
|
var current = res.tempFilePath; |
|
|
|
wx.previewImage({ |
|
|
|
current: current, |
|
|
|
urls: [current] |
|
|
|
}) |
|
|
|
}, |
|
|
|
fail: function (res) { |
|
|
|
wx.showToast({ |
|
|
|
title: '图片生成失败', |
|
|
|
icon: 'none', |
|
|
|
duration: 2000 |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
// 保存图片 |
|
|
|
saveImage(){ |
|
|
|
let that = this |
|
|
|