|
|
@@ -9,8 +9,8 @@ Page({ |
|
|
|
* 页面的初始数据 |
|
|
|
*/ |
|
|
|
data: { |
|
|
|
shareDefaultTp: imgurl.shareDefaultTp.url, |
|
|
|
navigationBarHeight, |
|
|
|
poterbg: imgurl.poterbg.url, |
|
|
|
windowWidth: wx.getSystemInfoSync().windowWidth, |
|
|
|
windowHeight: wx.getSystemInfoSync().screenHeight, |
|
|
|
totalHeight: 0, |
|
|
@@ -27,7 +27,7 @@ Page({ |
|
|
|
onLoad: function(options) { |
|
|
|
this.setCanvas() |
|
|
|
}, |
|
|
|
onShow: function(){ |
|
|
|
onShow: function() { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
@@ -35,20 +35,24 @@ Page({ |
|
|
|
drawAvatarimg(ctx, scale) { |
|
|
|
var that = this; |
|
|
|
//商户详情海报 |
|
|
|
console.log(that.data.avatarUrl,"???") |
|
|
|
console.log(that.data.avatarUrl, "???") |
|
|
|
let src1 = that.data.avatarUrl + `?imageView/2/w/${100}/h/${100}`; |
|
|
|
let src2 = util.getProxyImgUrl(src1); |
|
|
|
wx.getImageInfo({ |
|
|
|
src: src2, |
|
|
|
success: function (res) { |
|
|
|
success: function(res) { |
|
|
|
console.log(res.path) |
|
|
|
that.darwAvatarArc(ctx, res.path, 10, 8, 35, 35); |
|
|
|
that.darwAvatarArc(ctx, res.path, 10, 18, 35, 35); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
setCanvas() { |
|
|
|
wx.showLoading({ |
|
|
|
title: "生成中..." |
|
|
|
}); |
|
|
|
var tha |
|
|
|
// 适配屏幕 |
|
|
|
let scale = this.data.windowWidth / 375.0 |
|
|
|
console.log(scale) |
|
|
@@ -57,13 +61,21 @@ Page({ |
|
|
|
}) |
|
|
|
// 获取Canvas |
|
|
|
let ctx = wx.createCanvasContext("myCanvas"); |
|
|
|
this.getQrcodeFx(ctx, scale) |
|
|
|
this.getMallInfo(ctx, scale) |
|
|
|
this.getUserInfo(ctx, scale) |
|
|
|
this.drawNormalText(ctx, "适用门店:", 30 * scale, 348 * scale, 16 * scale, "#000", "left", "middle") |
|
|
|
this.drawNormalText(ctx, " 向您推荐", 70 * scale, 25 * scale, 16 * scale, "#848484", "left", "middle", scale); |
|
|
|
this.drawNormalText(ctx, " 向您推荐", 70 * scale, 35 * scale, 16 * scale, "#848484", "left", "middle", scale); |
|
|
|
this.drawNormalText(ctx, "长按二维码识别", 180 * scale, 360 * scale, 16 * scale, "#000", "left", "middle") |
|
|
|
this.drawNormalText(ctx, "尽享更多优惠活动!", 170 * scale, 390 * scale, 16 * scale, "#000", "left", "middle") |
|
|
|
ctx.draw(true); |
|
|
|
this.setData({ |
|
|
|
isdisable: false, |
|
|
|
}) |
|
|
|
setTimeout(function() { |
|
|
|
wx.hideLoading() |
|
|
|
}, 2000) |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 绘制只有一行的文字 |
|
|
|
drawNormalText(ctx, str, x, y, font, style, align, baseLine) { |
|
|
|
ctx.setFontSize(font); |
|
|
@@ -75,7 +87,7 @@ Page({ |
|
|
|
}, |
|
|
|
|
|
|
|
//商场信息 |
|
|
|
getMallInfo: function (ctx, scale) { |
|
|
|
getMallInfo: function(ctx, scale) { |
|
|
|
let that = this; |
|
|
|
// 获取用户信息 |
|
|
|
Http.get({ |
|
|
@@ -83,32 +95,62 @@ Page({ |
|
|
|
data: {} |
|
|
|
}).then(res => { |
|
|
|
console.log(res); |
|
|
|
if (res.data.img){ |
|
|
|
let src1 = res.data.img + `?imageView/2/w/${100}/h/${100}`; |
|
|
|
}else{ |
|
|
|
// let src1 = res.data.img + `?imageView/2/w/${100}/h/${100}`;//默认图片地址 |
|
|
|
let src1 = "" |
|
|
|
if (res.data.img) { |
|
|
|
src1 = res.data.img + `?imageView/2/w/${100}/h/${100}`; |
|
|
|
} else { |
|
|
|
src1 = that.data.shareDefaultTp + `?imageView/2/w/${100}/h/${100}`; //默认图片地址 |
|
|
|
} |
|
|
|
|
|
|
|
let src2 = util.getProxyImgUrl(src1); |
|
|
|
wx.getImageInfo({ |
|
|
|
src: src2, |
|
|
|
success: function (res) { |
|
|
|
ctx.drawImage(res.path, 20 * scale, 60 * scale, (that.data.windowWidth-60) * scale, 200*scale); |
|
|
|
success: function(res) { |
|
|
|
ctx.drawImage(res.path, 20 * scale, 80 * scale, (that.data.windowWidth - 60) * scale, 200 * scale); |
|
|
|
ctx.draw(true); |
|
|
|
} |
|
|
|
}); |
|
|
|
that.setData({ |
|
|
|
mallname: res.data.name |
|
|
|
}); |
|
|
|
that.drawNormalText(ctx, "---" + that.data.mallname + "---", 175 * scale, 25 * scale, 16 * scale, "#000", "left", "middle", scale); |
|
|
|
if (res.data.addr){ |
|
|
|
that.canvasTextAutoLine('详细地址:' + res.data.addr, ctx, 20 * scale, 480 * scale, 14 * scale, "#888", "left", "middle", 26 * scale, 330 * scale, 2) |
|
|
|
} |
|
|
|
if (res.data.servicePhone){ |
|
|
|
that.drawNormalText(ctx, '客服电话:' + res.data.servicePhone, 20 * scale, 540 * scale, 16 * scale, "#888", "left", "middle", scale); |
|
|
|
} |
|
|
|
|
|
|
|
that.drawNormalText(ctx, "---" + that.data.mallname + "---", 175 * scale, 35 * scale, 16 * scale, "#000", "left", "middle", scale); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获取分享小程序二维码 |
|
|
|
getQrcodeFx(ctx, scale) { |
|
|
|
let that = this |
|
|
|
let coImageWidth = parseInt(120 * scale); |
|
|
|
let coImageHeight = parseInt(120 * scale); |
|
|
|
Http.get({ |
|
|
|
url: config.api.getQrcodeFx, |
|
|
|
}).then(res => { |
|
|
|
console.log(res.data) |
|
|
|
let src1 = res.data + `?imageView/2/w/${100}/h/${100}`; |
|
|
|
let src2 = util.getProxyImgUrl(src1); |
|
|
|
wx.getImageInfo({ |
|
|
|
src: src2, |
|
|
|
success: function(res) { |
|
|
|
console.log(res.path) |
|
|
|
that.darwAvatarArc(ctx, res.path, 30 * scale, 310 * scale, coImageWidth, coImageHeight, scale); |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//获取头像和昵称 |
|
|
|
getUserInfo: function (ctx, scale) { |
|
|
|
getUserInfo: function(ctx, scale) { |
|
|
|
let that = this; |
|
|
|
|
|
|
|
|
|
|
|
// 获取用户信息 |
|
|
|
Http.get({ |
|
|
|
url: config.api.getScore, |
|
|
@@ -123,7 +165,8 @@ Page({ |
|
|
|
nickName: nickName, //用户名 |
|
|
|
avatarUrl: data.userInfo.avatarUrl //用户头像 |
|
|
|
}); |
|
|
|
this.drawNormalText(ctx, nickName, 48 * scale, 24 * scale, 16 * scale, "#000", "left", "middle"); |
|
|
|
console.log(data.userInfo.avatarUrl, "????--**") |
|
|
|
this.drawNormalText(ctx, nickName, 48 * scale, 34 * scale, 16 * scale, "#000", "left", "middle"); |
|
|
|
that.drawAvatarimg(ctx, scale) |
|
|
|
} |
|
|
|
}) |
|
|
@@ -133,13 +176,46 @@ Page({ |
|
|
|
nickName: nickName, |
|
|
|
avatarUrl: res.data.avatarUrl |
|
|
|
}); |
|
|
|
this.drawNormalText(ctx, nickName, 48 * scale, 24 * scale, 16 * scale, "#000", "left", "middle"); |
|
|
|
this.drawNormalText(ctx, nickName, 48 * scale, 34 * scale, 16 * scale, "#000", "left", "middle"); |
|
|
|
that.drawAvatarimg(ctx, scale) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
canvasTextAutoLine: function(str, ctx, initX, initY, font, style, align, baseLine, lineHeight, maxWidth, row = 1) { |
|
|
|
var lineWidth = 0; |
|
|
|
var lastSubStrIndex = 0; |
|
|
|
var currentRow = 1; |
|
|
|
for (let i = 0; i < str.length; i++) { |
|
|
|
lineWidth += ctx.measureText(str[i]).width; |
|
|
|
if (lineWidth > maxWidth) { |
|
|
|
currentRow++; |
|
|
|
let newStr = str.substring(lastSubStrIndex, i); |
|
|
|
if (currentRow > row && str.length > i) { |
|
|
|
newStr = str.substring(lastSubStrIndex, i - 2) + "..."; |
|
|
|
} |
|
|
|
ctx.setFontSize(font); |
|
|
|
ctx.setFillStyle(style); |
|
|
|
ctx.setTextAlign(align); |
|
|
|
ctx.setTextBaseline(baseLine); |
|
|
|
ctx.fillText(newStr, initX, initY); |
|
|
|
initY += lineHeight; |
|
|
|
lineWidth = 0; |
|
|
|
lastSubStrIndex = i; |
|
|
|
|
|
|
|
if (currentRow > row) { |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
if (i == str.length - 1) { |
|
|
|
ctx.setFontSize(font); |
|
|
|
ctx.setFillStyle(style); |
|
|
|
ctx.setTextAlign(align); |
|
|
|
ctx.setTextBaseline(baseLine); |
|
|
|
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|