| @@ -4,7 +4,6 @@ const Http = require("../../utils/HttpBasics"); | |||||
| const util = require("../../utils/util"); | const util = require("../../utils/util"); | ||||
| const imgurl = require("../../utils/imgurl"); | const imgurl = require("../../utils/imgurl"); | ||||
| Page({ | Page({ | ||||
| /** | /** | ||||
| * 页面的初始数据 | * 页面的初始数据 | ||||
| */ | */ | ||||
| @@ -13,15 +12,16 @@ Page({ | |||||
| windowWidth: wx.getSystemInfoSync().windowWidth, | windowWidth: wx.getSystemInfoSync().windowWidth, | ||||
| windowHeight: wx.getSystemInfoSync().screenHeight, | windowHeight: wx.getSystemInfoSync().screenHeight, | ||||
| totalHeight: 0, | totalHeight: 0, | ||||
| qrCodeL: '', //小程序码 | |||||
| mallname:'',//商场名字 | |||||
| qrCodeL: "", //小程序码 | |||||
| couponList: [], //活动劵列表 | 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; | let that = this; | ||||
| //劵详情 | //劵详情 | ||||
| if (options && options.couponChannelId) { | if (options && options.couponChannelId) { | ||||
| @@ -31,13 +31,14 @@ Page({ | |||||
| that.getCouponList(options.merchantId); | that.getCouponList(options.merchantId); | ||||
| } | } | ||||
| this.getUserInfo(); | this.getUserInfo(); | ||||
| this.getMallInfo(); | |||||
| this.begainDrawShareImage(options); | this.begainDrawShareImage(options); | ||||
| }, | }, | ||||
| /** | /** | ||||
| * 获取劵详情 | * 获取劵详情 | ||||
| */ | */ | ||||
| getDetail: function (couponChannelId) { | |||||
| getDetail: function(couponChannelId) { | |||||
| let that = this; | let that = this; | ||||
| // 获取用户信息 | // 获取用户信息 | ||||
| Http.get({ | Http.get({ | ||||
| @@ -45,192 +46,196 @@ Page({ | |||||
| data: { | data: { | ||||
| couponChannelId: couponChannelId | 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 that = this; | ||||
| let data; | let data; | ||||
| data = { | data = { | ||||
| pageNum: 1, | pageNum: 1, | ||||
| pageSize: 15, | pageSize: 15, | ||||
| id: id | id: id | ||||
| } | |||||
| }; | |||||
| Http.get({ | Http.get({ | ||||
| url: config.api.merchantList, | url: config.api.merchantList, | ||||
| data: data | data: data | ||||
| }).then(res => { | |||||
| that.setData({ | |||||
| data: res.data.list[0], | |||||
| }) | |||||
| }) | }) | ||||
| .then(res => { | |||||
| that.setData({ | |||||
| data: res.data.list[0] | |||||
| }); | |||||
| }) | |||||
| .catch(err => { | .catch(err => { | ||||
| wx.showToast({ | wx.showToast({ | ||||
| title: err.errMsg, | title: err.errMsg, | ||||
| icon: 'none', | |||||
| icon: "none", | |||||
| duration: 2000, | duration: 2000, | ||||
| mask: false | mask: false | ||||
| }); | }); | ||||
| }) | |||||
| }); | |||||
| }, | }, | ||||
| /** | /** | ||||
| * 绘制分享海报 | * 绘制分享海报 | ||||
| */ | */ | ||||
| begainDrawShareImage(options) { | begainDrawShareImage(options) { | ||||
| 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; | |||||
| this.setData({ | this.setData({ | ||||
| totalHeight: 767 * scale | totalHeight: 767 * scale | ||||
| }) | |||||
| }); | |||||
| // 获取Canvas | // 获取Canvas | ||||
| let ctx = wx.createCanvasContext('myCanvas') | |||||
| let ctx = wx.createCanvasContext("myCanvas"); | |||||
| // 获取宽高 | // 获取宽高 | ||||
| let wW = that.data.windowWidth; | let wW = that.data.windowWidth; | ||||
| let wH = that.data.windowHeight; | 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({ | wx.getImageInfo({ | ||||
| src: bgimg2, | src: bgimg2, | ||||
| success: function (res) { | |||||
| ctx.drawImage(res.path, 0, 0, wW - 20, wH); | |||||
| success: function(res) { | |||||
| that.drawshopimg(ctx, scale, options); | that.drawshopimg(ctx, scale, options); | ||||
| ctx.draw(true) | |||||
| ctx.draw(true); | |||||
| } | } | ||||
| }) | |||||
| }); | |||||
| }, | }, | ||||
| //绘制商品图片 | //绘制商品图片 | ||||
| drawshopimg(ctx, scale, options) { | 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) { | 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({ | wx.getImageInfo({ | ||||
| src: src2, | 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); | 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) { | if (this.data.couponList.length > 0) { | ||||
| for (let i = 0; i < this.data.couponList.length; i++) { | 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) { | 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) { | 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 { | } 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({ | wx.getImageInfo({ | ||||
| src: src2, | 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) { | drawOtherImage(ctx, scale) { | ||||
| var that = this | |||||
| var that = this; | |||||
| // 如果该商户有活动商品 | // 如果该商户有活动商品 | ||||
| if (that.data.couponList.length > 0) { | 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++) { | 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({ | wx.getImageInfo({ | ||||
| src: src2, | 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); | that.drawqrCode(ctx, scale); | ||||
| }, | }, | ||||
| //截取商品名 | //截取商品名 | ||||
| substrTile(str) { | substrTile(str) { | ||||
| return str.substr(0, 5) + '...' | |||||
| return str.substr(0, 5) + "..."; | |||||
| }, | }, | ||||
| // 绘制只有一行的文字 | // 绘制只有一行的文字 | ||||
| drawNormalText(ctx, str, x, y, font, style, align, baseLine) { | drawNormalText(ctx, str, x, y, font, style, align, baseLine) { | ||||
| @@ -241,10 +246,18 @@ Page({ | |||||
| ctx.fillText(str, x, y); | 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 lineWidth = 0; | ||||
| var lastSubStrIndex = 0; | var lastSubStrIndex = 0; | ||||
| var currentRow = 1; | var currentRow = 1; | ||||
| @@ -252,9 +265,9 @@ Page({ | |||||
| lineWidth += ctx.measureText(str[i]).width; | lineWidth += ctx.measureText(str[i]).width; | ||||
| if (lineWidth > maxWidth) { | if (lineWidth > maxWidth) { | ||||
| currentRow++; | currentRow++; | ||||
| let newStr = str.substring(lastSubStrIndex, i) | |||||
| let newStr = str.substring(lastSubStrIndex, i); | |||||
| if (currentRow > row && str.length > i) { | if (currentRow > row && str.length > i) { | ||||
| newStr = str.substring(lastSubStrIndex, i - 2) + '...' | |||||
| newStr = str.substring(lastSubStrIndex, i - 2) + "..."; | |||||
| } | } | ||||
| ctx.fillText(newStr, initX, initY); | ctx.fillText(newStr, initX, initY); | ||||
| initY += lineHeight; | 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 that = this; | ||||
| let data; | let data; | ||||
| data = { | data = { | ||||
| status: 0, | status: 0, | ||||
| merchantId: id, | merchantId: id, | ||||
| pageNum: 1, | pageNum: 1, | ||||
| pageSize: 15, | |||||
| } | |||||
| pageSize: 15 | |||||
| }; | |||||
| Http.get({ | Http.get({ | ||||
| url: config.api.listByMerchant, | url: config.api.listByMerchant, | ||||
| data: data | 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 => { | .catch(err => { | ||||
| wx.showToast({ | wx.showToast({ | ||||
| title: err.errMsg, | title: err.errMsg, | ||||
| icon: 'none', | |||||
| icon: "none", | |||||
| duration: 2000, | duration: 2000, | ||||
| mask: false | mask: false | ||||
| }); | }); | ||||
| }) | |||||
| }); | |||||
| }, | }, | ||||
| //获取头像和昵称 | //获取头像和昵称 | ||||
| getUserInfo: function () { | |||||
| getUserInfo: function() { | |||||
| let that = this; | let that = this; | ||||
| // 获取用户信息 | // 获取用户信息 | ||||
| Http.get({ | Http.get({ | ||||
| url: config.api.getScore, | url: config.api.getScore, | ||||
| data: {} | 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() { | saveImage() { | ||||
| let that = this | |||||
| let that = this; | |||||
| wx.canvasToTempFilePath({ | wx.canvasToTempFilePath({ | ||||
| x: 0, | x: 0, | ||||
| y: 0, | y: 0, | ||||
| width: this.data.windowWidth * this.data.canvasScale, | width: this.data.windowWidth * this.data.canvasScale, | ||||
| height: this.data.totalHeight * this.data.canvasScale, | height: this.data.totalHeight * this.data.canvasScale, | ||||
| canvasId: 'myCanvas', | |||||
| success: function (res) { | |||||
| canvasId: "myCanvas", | |||||
| success: function(res) { | |||||
| that.saveImageToPhotos(res.tempFilePath); | that.saveImageToPhotos(res.tempFilePath); | ||||
| }, | }, | ||||
| fail: function (res) { | |||||
| fail: function(res) { | |||||
| wx.showToast({ | wx.showToast({ | ||||
| title: '图片生成失败', | |||||
| icon: 'none', | |||||
| title: "图片生成失败", | |||||
| icon: "none", | |||||
| duration: 2000 | duration: 2000 | ||||
| }) | |||||
| }); | |||||
| } | } | ||||
| }) | |||||
| }); | |||||
| }, | }, | ||||
| saveImageToPhotos: function (tempFilePath) { | |||||
| saveImageToPhotos: function(tempFilePath) { | |||||
| wx.saveImageToPhotosAlbum({ | wx.saveImageToPhotosAlbum({ | ||||
| filePath: tempFilePath, | filePath: tempFilePath, | ||||
| success(result) { | success(result) { | ||||
| wx.showToast({ | wx.showToast({ | ||||
| title: '保存成功,从相册中分享到朋友圈吧', | |||||
| icon: 'none', | |||||
| title: "保存成功,从相册中分享到朋友圈吧", | |||||
| icon: "none", | |||||
| duration: 4000 | 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({ | wx.showModal({ | ||||
| title: '提示', | |||||
| content: '需要您授权保存相册', | |||||
| title: "提示", | |||||
| content: "需要您授权保存相册", | |||||
| showCancel: false, | showCancel: false, | ||||
| success: modalSuccess => { | success: modalSuccess => { | ||||
| wx.openSetting({ | wx.openSetting({ | ||||
| success(settingdata) { | success(settingdata) { | ||||
| console.log("settingdata", settingdata) | |||||
| if (settingdata.authSetting['scope.writePhotosAlbum']) { | |||||
| console.log("settingdata", settingdata); | |||||
| if (settingdata.authSetting["scope.writePhotosAlbum"]) { | |||||
| wx.showModal({ | wx.showModal({ | ||||
| title: '提示', | |||||
| content: '获取权限成功,再次点击图片即可保存', | |||||
| showCancel: false, | |||||
| }) | |||||
| title: "提示", | |||||
| content: "获取权限成功,再次点击图片即可保存", | |||||
| showCancel: false | |||||
| }); | |||||
| } else { | } else { | ||||
| wx.showModal({ | wx.showModal({ | ||||
| title: '提示', | |||||
| content: '获取权限失败,将无法保存到相册哦~', | |||||
| showCancel: false, | |||||
| }) | |||||
| title: "提示", | |||||
| content: "获取权限失败,将无法保存到相册哦~", | |||||
| showCancel: false | |||||
| }); | |||||
| } | } | ||||
| }, | }, | ||||
| fail(failData) { | fail(failData) { | ||||
| console.log("failData", failData) | |||||
| console.log("failData", failData); | |||||
| }, | }, | ||||
| complete(finishData) { | complete(finishData) { | ||||
| console.log("finishData", finishData) | |||||
| console.log("finishData", finishData); | |||||
| } | } | ||||
| }) | |||||
| }); | |||||
| } | } | ||||
| }) | |||||
| }); | |||||
| } | } | ||||
| }, | |||||
| }) | |||||
| } | |||||
| }); | |||||
| } | } | ||||
| }) | |||||
| }); | |||||