소스 검색

[商户详情和劵详情][修改][分享生成海报样式]

tags/江西版6.1.0
luqc 6 년 전
부모
커밋
dbd30c299d
1개의 변경된 파일246개의 추가작업 그리고 170개의 파일을 삭제
  1. +246
    -170
      pages/canvas/index.js

+ 246
- 170
pages/canvas/index.js 파일 보기

@@ -4,7 +4,6 @@ const Http = require("../../utils/HttpBasics");
const util = require("../../utils/util");
const imgurl = require("../../utils/imgurl");
Page({

/**
* 页面的初始数据
*/
@@ -13,15 +12,16 @@ Page({
windowWidth: wx.getSystemInfoSync().windowWidth,
windowHeight: wx.getSystemInfoSync().screenHeight,
totalHeight: 0,
qrCodeL: '', //小程序码
mallname:'',//商场名字
qrCodeL: "", //小程序码
couponList: [], //活动劵列表
canvasScale: 1.0, // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
canvasScale: 1.0 // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
onLoad: function(options) {
let that = this;
//劵详情
if (options && options.couponChannelId) {
@@ -31,13 +31,14 @@ Page({
that.getCouponList(options.merchantId);
}
this.getUserInfo();
this.getMallInfo();
this.begainDrawShareImage(options);
},

/**
* 获取劵详情
*/
getDetail: function (couponChannelId) {
getDetail: function(couponChannelId) {
let that = this;
// 获取用户信息
Http.get({
@@ -45,192 +46,196 @@ Page({
data: {
couponChannelId: couponChannelId
}
})
.then(res => {
console.log(res)
that.setData({
data: res.data,
})
})
}).then(res => {
that.setData({
data: res.data
});
});
},
/**
* 获取商户详情
*/
getList: function (id) {
* 获取商户详情
*/
getList: function(id) {
let that = this;
let data;
data = {
pageNum: 1,
pageSize: 15,
id: id
}
};
Http.get({
url: config.api.merchantList,
data: data
}).then(res => {
that.setData({
data: res.data.list[0],
})
})
.then(res => {
that.setData({
data: res.data.list[0]
});
})
.catch(err => {
wx.showToast({
title: err.errMsg,
icon: 'none',
icon: "none",
duration: 2000,
mask: false
});
})
});
},
/**
* 绘制分享海报
*/
begainDrawShareImage(options) {
wx.showLoading({
title: '生成中...',
})
title: "生成中..."
});

var that = this
var that = this;
// 适配屏幕
let scale = this.data.windowWidth / 375.0
let scale = this.data.windowWidth / 375.0;
this.setData({
totalHeight: 767 * scale
})
});
// 获取Canvas
let ctx = wx.createCanvasContext('myCanvas')
let ctx = wx.createCanvasContext("myCanvas");
// 获取宽高
let wW = that.data.windowWidth;
let wH = that.data.windowHeight;
// 放大 因为不放大的话,生成的分享图会模糊。暂时先注释
ctx.scale(this.data.canvasScale, this.data.canvasScale)
ctx.scale(this.data.canvasScale, this.data.canvasScale);
// 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容
let bgimg1 = that.data.poterbg + `?imageView/2/w/${wW}/h/${wH}`
let bgimg2 = util.getProxyImgUrl(bgimg1)
let bgimg1 = that.data.poterbg + `?imageView/2/w/${wW}/h/${wH}`;
let bgimg2 = util.getProxyImgUrl(bgimg1);
wx.getImageInfo({
src: bgimg2,
success: function (res) {
ctx.drawImage(res.path, 0, 0, wW - 20, wH);
success: function(res) {
that.drawshopimg(ctx, scale, options);
ctx.draw(true)
ctx.draw(true);
}
})

});
},

//绘制商品图片
drawshopimg(ctx, scale, options) {
var that = this
let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int
let topImageHeight = parseInt(200 * scale)
let src1 = ""
let src2 = ''
var that = this;
let topImageWidth = parseInt(375 * scale); // 因为小数有时候会请求不到图片,所以转成int
let topImageHeight = parseInt(260 * scale);
let src1 = "";
let src2 = "";
//劵详情海报
if (options && options.couponChannelId) {
src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
src2 = util.getProxyImgUrl(src1)
this.drawNormalText(ctx, "长按二维码识别小程序享优惠", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale);
} else if (options && options.merchantId) {//商户详情海报
src1 = that.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
src2 = util.getProxyImgUrl(src1)
this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale);
src1 =that.data.data.coverImg +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`;
src2 = util.getProxyImgUrl(src1);
} else if (options && options.merchantId) {
//商户详情海报
src1 =that.data.data.merchantImgUrl +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`;
src2 = util.getProxyImgUrl(src1);
}
wx.getImageInfo({
src: src2,
success: function (res) {
if (options && options.merchantId) {
// 绘制白色背景
ctx.setFillStyle('#fff')
ctx.fillRect(15, 45, topImageWidth + 10, topImageHeight + 10)
ctx.drawImage(res.path, 20, 50, topImageWidth, topImageHeight)
that.drawOtherImage(ctx, scale)
that.drawOtherContent(ctx, scale)
} else if ((options && options.couponChannelId)) {
ctx.setFillStyle('#fff')
ctx.fillRect(15, 95, topImageWidth + 10, topImageHeight + 10)
ctx.drawImage(res.path, 20, 100, topImageWidth, topImageHeight)
that.drawCouponContent(ctx, scale)
success: function(res) {
// 绘制白色背景
ctx.setFillStyle("#fbfbfb");
ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight);
// that.roundRect(ctx,0, 320, that.data.windowWidth, 320,50)
ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight);
ctx.setFillStyle("blue");
that.roundRect(ctx,12, 270, 330, 150,10)
that.drawOtherImage(ctx, scale);
that.drawOtherContent(ctx, scale,options);
that.darwAvatarArc(ctx, that.data.avatarUrl, 10, 8, 35, 35);
that.drawqrCode(ctx, scale);
}
wx.hideLoading()
wx.hideLoading();
}
})
});
},
// 商户海报绘制
drawOtherContent(ctx, scale) {
//昵称
this.drawNormalText(ctx, this.data.nickName + " 向您推荐", 20 * 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);
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,300 * 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,340 * scale,18 * scale,"#F4AA91","left","middle",scale);
this.drawNormalText(ctx,"商户电话:"+this.data.data.merchantLinkPhone,40 * scale,380 * scale,16 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"长按识别,进店去看看",155 * scale,500 * 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[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[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);
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);
}

}

ctx.draw(true)

},
// 劵海报绘制
drawCouponContent(ctx, scale) {
//昵称
this.drawNormalText(ctx, this.data.data.title, 20 * scale, 25 * scale, 30 * scale, '#fff', 'left', 'middle', scale);
this.drawNormalText(ctx, "售价:" + this.data.data.salePriceStr, 50 * scale, 65 * scale, 30 * scale, '#fff', '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,300 * scale,23 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"售价:" + this.data.data.salePriceStr,40 * scale,330 * scale,20* scale,"#F4AA91","left","middle",scale);
this.drawNormalText(ctx,"原价:" + this.data.data.salePriceStr,120 * scale,330 * scale,16 * scale,"#DFDCDB","left","middle",scale);
this.drawNormalText(ctx,"适用门店:",40 * scale,360 * 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,390 * scale,16 * scale,"#000","left","middle",scale);
}
ctx.draw(true);
}
ctx.draw(true);
},
//绘制小程序码
drawqrCode(ctx, scale) {
let coImageWidth = parseInt(120 * scale)
let coImageHeight = parseInt(120 * scale)
let src1 = ""
let src2 = ''
let coImageWidth = parseInt(120 * scale);
let coImageHeight = parseInt(120 * scale);
let src1 = "";
let src2 = "";
if (this.data.qrCode) {
src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`
src2 = util.getProxyImgUrl(src1)
src1 =
this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`;
src2 = util.getProxyImgUrl(src1);
} else {
src1 = this.data.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`
src2 = util.getProxyImgUrl(src1)
src1 =
this.data.data.qrCode +
`?imageView/2/w/${coImageWidth}/h/${coImageHeight}`;
src2 = util.getProxyImgUrl(src1);
}
wx.getImageInfo({
src: src2,
success: function (res) {
ctx.drawImage(res.path, 125 * scale, 425 * scale, coImageWidth, coImageHeight)
ctx.draw(true)
success: function(res) {
ctx.drawImage(res.path,25 * scale,435 * scale,coImageWidth,coImageHeight);
ctx.draw(true);
}
})
});
},
// 绘制活动图片
drawOtherImage(ctx, scale) {
var that = this
var that = this;
// 如果该商户有活动商品
if (that.data.couponList.length > 0) {
let cotentImageWidth = parseInt(80 * scale)
let cotentImageHeight = parseInt(80 * scale)
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}`
let src2 = util.getProxyImgUrl(src1)
let imageItem = that.data.couponList[i].coverImg;
let src1 =imageItem +`?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`;
let src2 = util.getProxyImgUrl(src1);
wx.getImageInfo({
src: src2,
success: function (res) {
ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
success: function(res) {
ctx.drawImage(res.path,35 * scale + i * 110 * scale,300 * scale,cotentImageWidth,cotentImageHeight);
}
})
});
}

}
that.drawqrCode(ctx, scale);
},
//截取商品名
substrTile(str) {
return str.substr(0, 5) + '...'
return str.substr(0, 5) + "...";
},
// 绘制只有一行的文字
drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
@@ -241,10 +246,18 @@ Page({
ctx.fillText(str, x, y);
},
/*
* 绘制多行文本,自动换行,超出添加...
*
*/
canvasTextAutoLine: function (str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
* 绘制多行文本,自动换行,超出添加...
*
*/
canvasTextAutoLine: function(
str,
ctx,
initX,
initY,
lineHeight,
maxWidth,
row = 1
) {
var lineWidth = 0;
var lastSubStrIndex = 0;
var currentRow = 1;
@@ -252,9 +265,9 @@ Page({
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > maxWidth) {
currentRow++;
let newStr = str.substring(lastSubStrIndex, i)
let newStr = str.substring(lastSubStrIndex, i);
if (currentRow > row && str.length > i) {
newStr = str.substring(lastSubStrIndex, i - 2) + '...'
newStr = str.substring(lastSubStrIndex, i - 2) + "...";
}
ctx.fillText(newStr, initX, initY);
initY += lineHeight;
@@ -270,119 +283,182 @@ Page({
}
}
},
//绘制圆角图像
darwAvatarArc: function(ctx, src, x, y, w, h = w) {
/*
ctx: 画布对象
src: 头像缓存路径
x: 头像起始位置 横坐标
y: 头像起始位置 纵坐标
w: 头像宽度
h: 头像高度,不传为w
*/
// 保存绘图上下文。
ctx.save();
// 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
ctx.beginPath();
// 设创建一个圆可以指定 起始弧度为 0,终止弧度为 2 * Math.PI。
// 用 stroke 或者 fill 方法来在 canvas 中画弧线。
ctx.arc(x + w / 2, y + h / 2, w / 2, 0, Math.PI * 2, false);
/* 从原始画布中剪切任意形状和尺寸。
一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(
不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。
*/
ctx.clip();
// 画头像
ctx.drawImage(src, x, y, w, h);
// 恢复之前保存的绘图上下文。
ctx.restore();
// 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
ctx.draw(true);
},
//绘制圆角矩形
roundRect:function(ctx, x, y, w, h, r) {
ctx.save();
if (w < 2 * r) {r = w / 2;}
if (h < 2 * r){ r = h / 2;}
ctx.beginPath();
// ctx.setStrokeStyle('white');
ctx.setFillStyle('white')
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.fill();
ctx.closePath();
ctx.draw(true);
},
//获取商户优惠劵信息
getCouponList: function (id) {
getCouponList: function(id) {
let that = this;
let data;
data = {
status: 0,
merchantId: id,
pageNum: 1,
pageSize: 15,
}
pageSize: 15
};
Http.get({
url: config.api.listByMerchant,
data: data
}).then(res => {
that.setData({
couponList: res.data.page.list,
qrCode: res.data.qrCode,
})
})
.then(res => {
that.setData({
couponList: res.data.page.list,
qrCode: res.data.qrCode
});
})
.catch(err => {
wx.showToast({
title: err.errMsg,
icon: 'none',
icon: "none",
duration: 2000,
mask: false
});
})
});
},
//获取头像和昵称
getUserInfo: function () {
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
})
})
}).then(res => {
that.setData({
nickName: res.data.nickName,
avatarUrl: res.data.avatarUrl
});
});
},
//商场信息
getMallInfo: function() {
let that = this;
// 获取用户信息
Http.get({
url: config.api.getMallInfo,
data: {}
}).then(res => {
console.log(res);
that.setData({
mallname:res.data.name
});
});
},
/**
* 保存图片
*/
* 保存图片
*/
saveImage() {
let that = this
let that = this;
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) {
canvasId: "myCanvas",
success: function(res) {
that.saveImageToPhotos(res.tempFilePath);
},
fail: function (res) {
fail: function(res) {
wx.showToast({
title: '图片生成失败',
icon: 'none',
title: "图片生成失败",
icon: "none",
duration: 2000
})
});
}
})
});
},
saveImageToPhotos: function (tempFilePath) {
saveImageToPhotos: function(tempFilePath) {
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(result) {
wx.showToast({
title: '保存成功,从相册中分享到朋友圈吧',
icon: 'none',
title: "保存成功,从相册中分享到朋友圈吧",
icon: "none",
duration: 4000
})
});
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
fail: function(err) {
if (
err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
err.errMsg === "saveImageToPhotosAlbum:fail auth deny"
) {
// 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
title: "提示",
content: "需要您授权保存相册",
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log("settingdata", settingdata);
if (settingdata.authSetting["scope.writePhotosAlbum"]) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击图片即可保存',
showCancel: false,
})
title: "提示",
content: "获取权限成功,再次点击图片即可保存",
showCancel: false
});
} else {
wx.showModal({
title: '提示',
content: '获取权限失败,将无法保存到相册哦~',
showCancel: false,
})
title: "提示",
content: "获取权限失败,将无法保存到相册哦~",
showCancel: false
});
}
},
fail(failData) {
console.log("failData", failData)
console.log("failData", failData);
},
complete(finishData) {
console.log("finishData", finishData)
console.log("finishData", finishData);
}
})
});
}
})
});
}
},
})
}
});
}
})
});

불러오는 중...
취소
저장