|
@@ -12,7 +12,7 @@ Page({ |
|
|
windowWidth: wx.getSystemInfoSync().windowWidth, |
|
|
windowWidth: wx.getSystemInfoSync().windowWidth, |
|
|
windowHeight: wx.getSystemInfoSync().screenHeight, |
|
|
windowHeight: wx.getSystemInfoSync().screenHeight, |
|
|
totalHeight: 0, |
|
|
totalHeight: 0, |
|
|
mallname:'',//商场名字 |
|
|
|
|
|
|
|
|
mallname: '', //商场名字 |
|
|
qrCodeL: "", //小程序码 |
|
|
qrCodeL: "", //小程序码 |
|
|
couponList: [], //活动劵列表 |
|
|
couponList: [], //活动劵列表 |
|
|
canvasScale: 1.0 // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 |
|
|
canvasScale: 1.0 // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 |
|
@@ -64,9 +64,9 @@ Page({ |
|
|
id: id |
|
|
id: id |
|
|
}; |
|
|
}; |
|
|
Http.get({ |
|
|
Http.get({ |
|
|
url: config.api.merchantList, |
|
|
|
|
|
data: data |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
url: config.api.merchantList, |
|
|
|
|
|
data: data |
|
|
|
|
|
}) |
|
|
.then(res => { |
|
|
.then(res => { |
|
|
that.setData({ |
|
|
that.setData({ |
|
|
data: res.data.list[0] |
|
|
data: res.data.list[0] |
|
@@ -88,13 +88,14 @@ Page({ |
|
|
wx.showLoading({ |
|
|
wx.showLoading({ |
|
|
title: "生成中..." |
|
|
title: "生成中..." |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
var that = this; |
|
|
var that = this; |
|
|
// 适配屏幕 |
|
|
// 适配屏幕 |
|
|
let scale = this.data.windowWidth / 375.0; |
|
|
|
|
|
|
|
|
let scale = this.data.windowWidth / 375.0 |
|
|
|
|
|
console.log(scale) |
|
|
this.setData({ |
|
|
this.setData({ |
|
|
totalHeight: 767 * scale |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
totalHeight: 667 * scale |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
// 获取Canvas |
|
|
// 获取Canvas |
|
|
let ctx = wx.createCanvasContext("myCanvas"); |
|
|
let ctx = wx.createCanvasContext("myCanvas"); |
|
|
// 获取宽高 |
|
|
// 获取宽高 |
|
@@ -123,27 +124,26 @@ Page({ |
|
|
let src2 = ""; |
|
|
let src2 = ""; |
|
|
//劵详情海报 |
|
|
//劵详情海报 |
|
|
if (options && options.couponChannelId) { |
|
|
if (options && options.couponChannelId) { |
|
|
src1 =that.data.data.coverImg +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; |
|
|
|
|
|
|
|
|
src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; |
|
|
src2 = util.getProxyImgUrl(src1); |
|
|
src2 = util.getProxyImgUrl(src1); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else if (options && options.merchantId) { |
|
|
} else if (options && options.merchantId) { |
|
|
//商户详情海报 |
|
|
//商户详情海报 |
|
|
src1 =that.data.data.merchantImgUrl +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; |
|
|
|
|
|
|
|
|
src1 = that.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; |
|
|
src2 = util.getProxyImgUrl(src1); |
|
|
src2 = util.getProxyImgUrl(src1); |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
wx.getImageInfo({ |
|
|
wx.getImageInfo({ |
|
|
src: src2, |
|
|
src: src2, |
|
|
success: function(res) { |
|
|
success: function(res) { |
|
|
// 绘制白色背景 |
|
|
// 绘制白色背景 |
|
|
ctx.setFillStyle("#fbfbfb"); |
|
|
ctx.setFillStyle("#fbfbfb"); |
|
|
ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight); |
|
|
|
|
|
ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight); |
|
|
|
|
|
that.roundRect(ctx,12, 270, 320, 150,10) |
|
|
|
|
|
that.drawOtherImage(ctx, scale); |
|
|
|
|
|
that.drawOtherContent(ctx, scale,options); |
|
|
|
|
|
that.drawAvatarimg(ctx, scale); |
|
|
|
|
|
that.drawqrCode(ctx, scale); |
|
|
|
|
|
|
|
|
ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight); |
|
|
|
|
|
ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight); |
|
|
|
|
|
that.roundRect(ctx, 15 * scale, 270 * scale, 325 * scale, 125 * scale, 10); |
|
|
|
|
|
that.drawOtherImage(ctx, scale); |
|
|
|
|
|
that.drawOtherContent(ctx, scale, options); |
|
|
|
|
|
that.drawAvatarimg(ctx, scale); |
|
|
|
|
|
that.drawqrCode(ctx, scale); |
|
|
wx.hideLoading(); |
|
|
wx.hideLoading(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
@@ -151,52 +151,59 @@ Page({ |
|
|
//绘制微信头像 |
|
|
//绘制微信头像 |
|
|
drawAvatarimg(ctx, scale) { |
|
|
drawAvatarimg(ctx, scale) { |
|
|
var that = this; |
|
|
var that = this; |
|
|
//商户详情海报 |
|
|
|
|
|
let src1 =that.data.avatarUrl +`?imageView/2/w/${100}/h/${100}`; |
|
|
|
|
|
let src2 = util.getProxyImgUrl(src1); |
|
|
|
|
|
|
|
|
//商户详情海报 |
|
|
|
|
|
let src1 = that.data.avatarUrl + `?imageView/2/w/${100}/h/${100}`; |
|
|
|
|
|
let src2 = util.getProxyImgUrl(src1); |
|
|
wx.getImageInfo({ |
|
|
wx.getImageInfo({ |
|
|
src: src2, |
|
|
src: src2, |
|
|
success: function(res) { |
|
|
success: function(res) { |
|
|
that.darwAvatarArc(ctx, res.path, 10, 8, 35, 35); |
|
|
|
|
|
|
|
|
that.darwAvatarArc(ctx, res.path, 10, 8, 35, 35); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
// 商户海报绘制 |
|
|
// 商户海报绘制 |
|
|
drawOtherContent(ctx, scale,options) { |
|
|
|
|
|
//昵称 |
|
|
|
|
|
this.drawNormalText(ctx,this.data.nickName,60 * scale,25 * scale,16 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx," 向您推荐",120 * scale,25 * scale,16 * scale,"#848484","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"---"+this.data.mallname+"---",175 * scale,530 * scale,16 * scale,"#000","left","middle",scale); |
|
|
|
|
|
if (options && options.merchantId) { |
|
|
|
|
|
//店铺名 |
|
|
|
|
|
this.drawNormalText(ctx,"商户名称:"+this.data.data.merchantName,40 * scale,310 * scale,22 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"商户位置:"+this.data.data.shopVoList[0].buildingName+this.data.data.shopVoList[0].floorName+"--"+this.data.data.shopVoList[0].shopNumber,40 * scale,350 * scale,18 * scale,"#F4AA91","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"商户电话:"+this.data.data.merchantLinkPhone,40 * scale,390 * scale,16 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"长按识别,进店去看看",155 * scale,510 * 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),30 * scale,396 * scale,14 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"价格:" + this.data.couponList[1].salePrice,30 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale); |
|
|
|
|
|
//第二个商品信息 |
|
|
|
|
|
this.drawNormalText(ctx,this.substrTile(this.data.couponList[2].title),145 * scale,396 * scale,14 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"价格:" + this.data.couponList[2].salePrice,145 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale); |
|
|
|
|
|
//第三个商品信息 |
|
|
|
|
|
this.drawNormalText(ctx,this.substrTile(this.data.couponList[3].title),260 * scale,396 * scale,14 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"价格:" + this.data.couponList[3].salePrice,260 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale); |
|
|
|
|
|
|
|
|
drawOtherContent(ctx, scale, options) { |
|
|
|
|
|
let that = this; |
|
|
|
|
|
//昵称 |
|
|
|
|
|
this.drawNormalText(ctx, this.data.nickName, 43 * scale, 24 * scale, 16 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, " 向您推荐", 120 * scale, 25 * scale, 16 * scale, "#848484", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "---" + this.data.mallname + "---", 175 * scale, 500 * scale, 16 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
if (options && options.merchantId) { |
|
|
|
|
|
//店铺名 |
|
|
|
|
|
this.drawNormalText(ctx, "商户名称:" + this.data.data.merchantName, 40 * scale, 310 * scale, 22 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "商户位置:" + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].floorName + "--" + this.data.data.shopVoList[0].shopNumber, 40 * scale, 350 * scale, 18 * scale, "#F4AA91", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "商户电话:" + this.data.data.merchantLinkPhone, 40 * scale, 390 * scale, 16 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "长按识别,进店去看看", 155 * scale, 470 * 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), 30 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "价格:" + this.data.couponList[1].salePrice, 30 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale); |
|
|
|
|
|
//第二个商品信息 |
|
|
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 145 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "价格:" + this.data.couponList[2].salePrice, 145 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale); |
|
|
|
|
|
//第三个商品信息 |
|
|
|
|
|
this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 260 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "价格:" + this.data.couponList[3].salePrice, 260 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} else if (options && options.couponChannelId) { |
|
|
|
|
|
this.drawNormalText(ctx, "长按识别,进店去看看", 155 * scale, 470 * scale, 16 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, this.data.data.title, 30 * scale, 295 * scale, 20 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "售价:" + this.data.data.salePriceStr + "元", 30 * scale, 320 * scale, 15 * scale, "#F4AA91", "left", "middle", scale); |
|
|
|
|
|
// this.drawNormalText(ctx, "原价:" + this.data.data.salePriceStr, 120 * scale, 340 * scale, 16 * scale, "#DFDCDB", "left", "middle", scale); |
|
|
|
|
|
this.drawNormalText(ctx, "适用门店:", 30 * scale, 348 * scale, 16 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
|
|
|
|
|
|
//适用门店字体的排列 |
|
|
|
|
|
this.data.data.merchantVoList.map(function (file, index) { |
|
|
|
|
|
let word = file.merchantName; |
|
|
|
|
|
let metrics = ctx.measureText(word).width; |
|
|
|
|
|
metrics += metrics; |
|
|
|
|
|
that.drawNormalText(ctx, that.data.data.merchantVoList[index].merchantName,metrics, 375 * scale, 14 * scale, "#000", "left", "middle", scale); |
|
|
|
|
|
}) |
|
|
|
|
|
ctx.draw(true); |
|
|
} |
|
|
} |
|
|
} else if (options && options.couponChannelId) { |
|
|
|
|
|
this.drawNormalText(ctx,"长按识别,享优惠",155 * scale,500 * scale,16 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,this.data.data.title,40 * scale,310 * scale,23 * scale,"#000","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"售价:" + this.data.data.salePriceStr,40 * scale,340 * scale,20* scale,"#F4AA91","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"原价:" + this.data.data.salePriceStr,120 * scale,340 * scale,16 * scale,"#DFDCDB","left","middle",scale); |
|
|
|
|
|
this.drawNormalText(ctx,"适用门店:",40 * scale,370 * scale,16 * scale,"#000","left","middle",scale); |
|
|
|
|
|
for(var i=0;i<this.data.data.merchantVoList.length;i++){ |
|
|
|
|
|
this.drawNormalText(ctx,this.data.data.merchantVoList[i].merchantName+"、",40 * scale+40*i,400 * scale,16 * scale,"#000","left","middle",scale); |
|
|
|
|
|
} |
|
|
|
|
|
ctx.draw(true); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
ctx.draw(true); |
|
|
ctx.draw(true); |
|
|
}, |
|
|
}, |
|
|
//绘制小程序码 |
|
|
//绘制小程序码 |
|
@@ -218,7 +225,7 @@ Page({ |
|
|
wx.getImageInfo({ |
|
|
wx.getImageInfo({ |
|
|
src: src2, |
|
|
src: src2, |
|
|
success: function(res) { |
|
|
success: function(res) { |
|
|
ctx.drawImage(res.path,25 * scale,455 * scale,coImageWidth,coImageHeight); |
|
|
|
|
|
|
|
|
ctx.drawImage(res.path, 25 * scale, 420 * scale, coImageWidth, coImageHeight); |
|
|
ctx.draw(true); |
|
|
ctx.draw(true); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
@@ -232,12 +239,12 @@ Page({ |
|
|
let cotentImageHeight = parseInt(80 * scale); |
|
|
let cotentImageHeight = parseInt(80 * scale); |
|
|
for (let i = 0; i < that.data.couponList.length; i++) { |
|
|
for (let i = 0; i < that.data.couponList.length; i++) { |
|
|
let imageItem = that.data.couponList[i].coverImg; |
|
|
let imageItem = that.data.couponList[i].coverImg; |
|
|
let src1 =imageItem +`?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`; |
|
|
|
|
|
|
|
|
let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`; |
|
|
let src2 = util.getProxyImgUrl(src1); |
|
|
let src2 = util.getProxyImgUrl(src1); |
|
|
wx.getImageInfo({ |
|
|
wx.getImageInfo({ |
|
|
src: src2, |
|
|
src: src2, |
|
|
success: function(res) { |
|
|
success: function(res) { |
|
|
ctx.drawImage(res.path,35 * scale + i * 110 * scale,300 * scale,cotentImageWidth,cotentImageHeight); |
|
|
|
|
|
|
|
|
ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
@@ -324,23 +331,27 @@ Page({ |
|
|
ctx.draw(true); |
|
|
ctx.draw(true); |
|
|
}, |
|
|
}, |
|
|
//绘制圆角矩形 |
|
|
//绘制圆角矩形 |
|
|
roundRect:function(ctx, x, y, w, h, r) { |
|
|
|
|
|
|
|
|
roundRect: function(ctx, x, y, w, h, r) { |
|
|
ctx.save(); |
|
|
ctx.save(); |
|
|
if (w < 2 * r) {r = w / 2;} |
|
|
|
|
|
if (h < 2 * r){ r = h / 2;} |
|
|
|
|
|
|
|
|
if (w < 2 * r) { |
|
|
|
|
|
r = w / 2; |
|
|
|
|
|
} |
|
|
|
|
|
if (h < 2 * r) { |
|
|
|
|
|
r = h / 2; |
|
|
|
|
|
} |
|
|
ctx.beginPath(); |
|
|
ctx.beginPath(); |
|
|
// ctx.setStrokeStyle('white'); |
|
|
// ctx.setStrokeStyle('white'); |
|
|
ctx.setFillStyle('white') |
|
|
|
|
|
|
|
|
ctx.setFillStyle('#fff') |
|
|
ctx.setLineWidth(4); |
|
|
ctx.setLineWidth(4); |
|
|
ctx.moveTo(x+r, y); |
|
|
|
|
|
ctx.arcTo(x+w, y, x+w, y+h, r); |
|
|
|
|
|
ctx.arcTo(x+w, y+h, x, y+h, r); |
|
|
|
|
|
ctx.arcTo(x, y+h, x, y, r); |
|
|
|
|
|
ctx.arcTo(x, y, x+w, y, r); |
|
|
|
|
|
|
|
|
ctx.moveTo(x + r, y); |
|
|
|
|
|
ctx.arcTo(x + w, y, x + w, y + h, r); |
|
|
|
|
|
ctx.arcTo(x + w, y + h, x, y + h, r); |
|
|
|
|
|
ctx.arcTo(x, y + h, x, y, r); |
|
|
|
|
|
ctx.arcTo(x, y, x + w, y, r); |
|
|
ctx.fill(); |
|
|
ctx.fill(); |
|
|
ctx.closePath(); |
|
|
ctx.closePath(); |
|
|
ctx.draw(true); |
|
|
ctx.draw(true); |
|
|
}, |
|
|
|
|
|
|
|
|
}, |
|
|
//获取商户优惠劵信息 |
|
|
//获取商户优惠劵信息 |
|
|
getCouponList: function(id) { |
|
|
getCouponList: function(id) { |
|
|
let that = this; |
|
|
let that = this; |
|
@@ -352,9 +363,9 @@ Page({ |
|
|
pageSize: 15 |
|
|
pageSize: 15 |
|
|
}; |
|
|
}; |
|
|
Http.get({ |
|
|
Http.get({ |
|
|
url: config.api.listByMerchant, |
|
|
|
|
|
data: data |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
url: config.api.listByMerchant, |
|
|
|
|
|
data: data |
|
|
|
|
|
}) |
|
|
.then(res => { |
|
|
.then(res => { |
|
|
that.setData({ |
|
|
that.setData({ |
|
|
couponList: res.data.page.list, |
|
|
couponList: res.data.page.list, |
|
@@ -384,20 +395,20 @@ Page({ |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
//商场信息 |
|
|
|
|
|
getMallInfo: function() { |
|
|
|
|
|
let that = this; |
|
|
|
|
|
// 获取用户信息 |
|
|
|
|
|
Http.get({ |
|
|
|
|
|
url: config.api.getMallInfo, |
|
|
|
|
|
data: {} |
|
|
|
|
|
}).then(res => { |
|
|
|
|
|
console.log(res); |
|
|
|
|
|
that.setData({ |
|
|
|
|
|
mallname:res.data.name |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
//商场信息 |
|
|
|
|
|
getMallInfo: function() { |
|
|
|
|
|
let that = this; |
|
|
|
|
|
// 获取用户信息 |
|
|
|
|
|
Http.get({ |
|
|
|
|
|
url: config.api.getMallInfo, |
|
|
|
|
|
data: {} |
|
|
|
|
|
}).then(res => { |
|
|
|
|
|
console.log(res); |
|
|
|
|
|
that.setData({ |
|
|
|
|
|
mallname: res.data.name |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
/** |
|
|
/** |
|
|
* 保存图片 |
|
|
* 保存图片 |
|
|
*/ |
|
|
*/ |
|
@@ -472,4 +483,4 @@ Page({ |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
}); |