| @@ -3,11 +3,6 @@ var app = getApp(); | |||
| const Http = require("../../utils/HttpBasics"); | |||
| const util = require("../../utils/util"); | |||
| const imgurl = require("../../utils/imgurl"); | |||
| const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {} | |||
| let imgOrgUrl = extConfig.attr.imgOrgUrl; | |||
| let imgOrgUrl1 = extConfig.attr.imgOrgUrl1; | |||
| let imgNewUrl = extConfig.attr.imgNewUrl; | |||
| let imgNewUrl1 = extConfig.attr.imgNewUrl1; | |||
| Page({ | |||
| /** | |||
| @@ -26,19 +21,19 @@ Page({ | |||
| /** | |||
| * 生命周期函数--监听页面加载 | |||
| */ | |||
| onLoad: function(options) { | |||
| onLoad: function (options) { | |||
| let that = this; | |||
| //劵详情 | |||
| if (options && options.couponChannelId){ | |||
| if (options && options.couponChannelId) { | |||
| that.getDetail(options.couponChannelId); | |||
| }else if(options && options.merchantId){ | |||
| } else if (options && options.merchantId) { | |||
| that.getList(options.merchantId); | |||
| that.getCouponList(options.merchantId); | |||
| } | |||
| this.getUserInfo(); | |||
| this.begainDrawShareImage(options); | |||
| }, | |||
| /** | |||
| * 获取劵详情 | |||
| */ | |||
| @@ -58,10 +53,10 @@ Page({ | |||
| }) | |||
| }) | |||
| }, | |||
| /** | |||
| * 获取商户详情 | |||
| */ | |||
| getList: function(id) { | |||
| /** | |||
| * 获取商户详情 | |||
| */ | |||
| getList: function (id) { | |||
| let that = this; | |||
| let data; | |||
| data = { | |||
| @@ -70,13 +65,13 @@ Page({ | |||
| id: id | |||
| } | |||
| Http.get({ | |||
| url: config.api.merchantList, | |||
| data: data | |||
| }).then(res => { | |||
| that.setData({ | |||
| data: res.data.list[0], | |||
| }) | |||
| url: config.api.merchantList, | |||
| data: data | |||
| }).then(res => { | |||
| that.setData({ | |||
| data: res.data.list[0], | |||
| }) | |||
| }) | |||
| .catch(err => { | |||
| wx.showToast({ | |||
| title: err.errMsg, | |||
| @@ -104,203 +99,188 @@ Page({ | |||
| let ctx = wx.createCanvasContext('myCanvas') | |||
| // 获取宽高 | |||
| let wW = that.data.windowWidth; | |||
| let wH = that.data.windowHeight; | |||
| let wH = that.data.windowHeight; | |||
| // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 | |||
| ctx.scale(this.data.canvasScale, this.data.canvasScale) | |||
| // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容 | |||
| let bgimg1 = that.data.poterbg + `?imageView/2/w/${wW}/h/${wH}` | |||
| let bgimg2 = bgimg1.replace(this.getimgurl(this.data.poterbg), this.getnewimgurl(this.data.poterbg)) | |||
| let bgimg2 = util.getProxyImgUrl(bgimg1) | |||
| wx.getImageInfo({ | |||
| src: bgimg2, | |||
| success: function(res) { | |||
| ctx.drawImage(res.path, 0, 0, wW-20, wH); | |||
| that.drawshopimg(ctx, scale,options); | |||
| ctx.draw(true) | |||
| success: function (res) { | |||
| ctx.drawImage(res.path, 0, 0, wW - 20, wH); | |||
| that.drawshopimg(ctx, scale, options); | |||
| ctx.draw(true) | |||
| } | |||
| }) | |||
| }, | |||
| //判断图片路径 | |||
| getimgurl(str){ | |||
| if(str.indexOf(imgOrgUrl)!=-1){ | |||
| return imgOrgUrl | |||
| }else if(str.indexOf(imgOrgUrl1)!=-1){ | |||
| return imgOrgUrl1; | |||
| } | |||
| }, | |||
| getnewimgurl(str){ | |||
| if(str.indexOf(imgOrgUrl)!=-1){ | |||
| return imgNewUrl | |||
| }else if(str.indexOf(imgOrgUrl1)!=-1){ | |||
| return imgNewUrl1; | |||
| //绘制商品图片 | |||
| drawshopimg(ctx, scale, options) { | |||
| var that = this | |||
| let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int | |||
| let topImageHeight = parseInt(200 * 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); | |||
| } | |||
| }, | |||
| //绘制商品图片 | |||
| drawshopimg(ctx, scale,options){ | |||
| var that = this | |||
| let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int | |||
| let topImageHeight = parseInt(200 * scale) | |||
| let src1="" | |||
| let src2='' | |||
| //劵详情海报 | |||
| if(options && options.couponChannelId){ | |||
| src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` | |||
| src2 = src1.replace(that.getimgurl(that.data.data.coverImg), that.getnewimgurl(that.data.data.coverImg)) | |||
| 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 = src1.replace(that.getimgurl(that.data.data.merchantImgUrl), that.getnewimgurl(that.data.data.merchantImgUrl)) | |||
| this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale); | |||
| } | |||
| 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) | |||
| 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) | |||
| 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); | |||
| 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) { | |||
| //昵称 | |||
| 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); | |||
| 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); | |||
| } | |||
| } | |||
| } | |||
| ctx.draw(true) | |||
| 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) | |||
| }, | |||
| // 劵海报绘制 | |||
| 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) | |||
| }, | |||
| //绘制小程序码 | |||
| drawqrCode(ctx, scale) { | |||
| 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 = src1.replace(this.getimgurl(this.data.qrCode), this.getnewimgurl(this.data.qrCode)) | |||
| }else{ | |||
| src1 = this.data.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` | |||
| src2 = src1.replace(this.getimgurl(this.data.data.qrCode), this.getnewimgurl(this.data.data.qrCode)) | |||
| } | |||
| wx.getImageInfo({ | |||
| src: src2, | |||
| success: function(res) { | |||
| ctx.drawImage(res.path, 125 * scale, 425 * scale, coImageWidth, coImageHeight) | |||
| ctx.draw(true) | |||
| } | |||
| }) | |||
| }, | |||
| // 绘制活动图片 | |||
| drawOtherImage(ctx, scale) { | |||
| var that = this | |||
| // 如果该商户有活动商品 | |||
| if (that.data.couponList.length > 0) { | |||
| 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 = src1.replace(this.getimgurl(imageItem), this.getnewimgurl(imageItem)) | |||
| wx.getImageInfo({ | |||
| src: src2, | |||
| success: function(res) { | |||
| ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) | |||
| } | |||
| }) | |||
| }, | |||
| //绘制小程序码 | |||
| drawqrCode(ctx, scale) { | |||
| 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) | |||
| } else { | |||
| 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) | |||
| } | |||
| }) | |||
| }, | |||
| // 绘制活动图片 | |||
| drawOtherImage(ctx, scale) { | |||
| var that = this | |||
| // 如果该商户有活动商品 | |||
| if (that.data.couponList.length > 0) { | |||
| 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) | |||
| wx.getImageInfo({ | |||
| src: src2, | |||
| success: function (res) { | |||
| ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) | |||
| } | |||
| }) | |||
| } | |||
| } | |||
| that.drawqrCode(ctx, scale); | |||
| }, | |||
| } | |||
| that.drawqrCode(ctx, scale); | |||
| }, | |||
| //截取商品名 | |||
| substrTile(str) { | |||
| return str.substr(0, 5) + '...' | |||
| }, | |||
| // 绘制只有一行的文字 | |||
| drawNormalText(ctx, str, x, y, font, style, align, baseLine) { | |||
| ctx.setFontSize(font); | |||
| ctx.setFillStyle(style); | |||
| ctx.setTextAlign(align); | |||
| ctx.setTextBaseline(baseLine); | |||
| ctx.fillText(str, x, y); | |||
| }, | |||
| /* | |||
| * 绘制多行文本,自动换行,超出添加... | |||
| * | |||
| */ | |||
| canvasTextAutoLine: function(str, ctx, initX, initY, 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.fillText(newStr, initX, initY); | |||
| initY += lineHeight; | |||
| lineWidth = 0; | |||
| lastSubStrIndex = i; | |||
| // 绘制只有一行的文字 | |||
| drawNormalText(ctx, str, x, y, font, style, align, baseLine) { | |||
| ctx.setFontSize(font); | |||
| ctx.setFillStyle(style); | |||
| ctx.setTextAlign(align); | |||
| ctx.setTextBaseline(baseLine); | |||
| ctx.fillText(str, x, y); | |||
| }, | |||
| /* | |||
| * 绘制多行文本,自动换行,超出添加... | |||
| * | |||
| */ | |||
| canvasTextAutoLine: function (str, ctx, initX, initY, 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.fillText(newStr, initX, initY); | |||
| initY += lineHeight; | |||
| lineWidth = 0; | |||
| lastSubStrIndex = i; | |||
| if (currentRow > row) { | |||
| break; | |||
| if (currentRow > row) { | |||
| break; | |||
| } | |||
| } | |||
| if (i == str.length - 1) { | |||
| ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY); | |||
| } | |||
| } | |||
| if (i == str.length - 1) { | |||
| ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY); | |||
| }, | |||
| //获取商户优惠劵信息 | |||
| getCouponList: function (id) { | |||
| let that = this; | |||
| let data; | |||
| data = { | |||
| status: 0, | |||
| merchantId: id, | |||
| pageNum: 1, | |||
| pageSize: 15, | |||
| } | |||
| } | |||
| }, | |||
| //获取商户优惠劵信息 | |||
| getCouponList: function(id) { | |||
| let that = this; | |||
| let data; | |||
| data = { | |||
| status: 0, | |||
| merchantId: id, | |||
| pageNum: 1, | |||
| pageSize: 15, | |||
| } | |||
| Http.get({ | |||
| Http.get({ | |||
| url: config.api.listByMerchant, | |||
| data: data | |||
| }).then(res => { | |||
| @@ -309,23 +289,23 @@ getCouponList: function(id) { | |||
| qrCode: res.data.qrCode, | |||
| }) | |||
| }) | |||
| .catch(err => { | |||
| wx.showToast({ | |||
| title: err.errMsg, | |||
| icon: 'none', | |||
| duration: 2000, | |||
| mask: false | |||
| }); | |||
| }) | |||
| }, | |||
| .catch(err => { | |||
| wx.showToast({ | |||
| title: err.errMsg, | |||
| icon: 'none', | |||
| duration: 2000, | |||
| mask: false | |||
| }); | |||
| }) | |||
| }, | |||
| //获取头像和昵称 | |||
| getUserInfo: function() { | |||
| getUserInfo: function () { | |||
| let that = this; | |||
| // 获取用户信息 | |||
| Http.get({ | |||
| url: config.api.getScore, | |||
| data: {} | |||
| }) | |||
| url: config.api.getScore, | |||
| data: {} | |||
| }) | |||
| .then(res => { | |||
| console.log(res) | |||
| that.setData({ | |||
| @@ -334,9 +314,9 @@ getCouponList: function(id) { | |||
| }) | |||
| }) | |||
| }, | |||
| /** | |||
| * 保存图片 | |||
| */ | |||
| /** | |||
| * 保存图片 | |||
| */ | |||
| saveImage() { | |||
| let that = this | |||
| wx.canvasToTempFilePath({ | |||
| @@ -345,10 +325,10 @@ getCouponList: function(id) { | |||
| width: this.data.windowWidth * this.data.canvasScale, | |||
| height: this.data.totalHeight * this.data.canvasScale, | |||
| canvasId: 'myCanvas', | |||
| success: function(res) { | |||
| success: function (res) { | |||
| that.saveImageToPhotos(res.tempFilePath); | |||
| }, | |||
| fail: function(res) { | |||
| fail: function (res) { | |||
| wx.showToast({ | |||
| title: '图片生成失败', | |||
| icon: 'none', | |||
| @@ -357,7 +337,7 @@ getCouponList: function(id) { | |||
| } | |||
| }) | |||
| }, | |||
| saveImageToPhotos: function(tempFilePath) { | |||
| saveImageToPhotos: function (tempFilePath) { | |||
| wx.saveImageToPhotosAlbum({ | |||
| filePath: tempFilePath, | |||
| success(result) { | |||
| @@ -367,7 +347,7 @@ getCouponList: function(id) { | |||
| duration: 4000 | |||
| }) | |||
| }, | |||
| fail: function(err) { | |||
| fail: function (err) { | |||
| if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { | |||
| // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用 | |||
| wx.showModal({ | |||