From c0e4e6f1f65e626d21f878061f75fcd7c95a4c4d Mon Sep 17 00:00:00 2001 From: luqc Date: Tue, 21 May 2019 13:27:55 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=88=86=E4=BA=AB=E6=B5=B7=E6=8A=A5=E7=94=9F?= =?UTF-8?q?=E6=88=90]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/searchbar/detail/index.js | 208 +++++++++++------------- pages/index/searchbar/detail/index.wxml | 2 +- 2 files changed, 100 insertions(+), 110 deletions(-) diff --git a/pages/index/searchbar/detail/index.js b/pages/index/searchbar/detail/index.js index 5d0bc7a..3daf4d9 100644 --- a/pages/index/searchbar/detail/index.js +++ b/pages/index/searchbar/detail/index.js @@ -19,6 +19,7 @@ Page({ imglist: null, shopVoList: [], couponList: [], //活动劵列表 + qrCodeL:'',//小程序码 currentTab: 0, isshare: false, showpost: false, @@ -68,6 +69,11 @@ Page({ * 绘制分享海报 */ begainDrawShareImage() { + + wx.showLoading({ + title: '生成中...', + }) + var that = this // 适配屏幕 let scale = this.data.windowWidth / 375.0 @@ -96,7 +102,7 @@ Page({ success: function(res) { ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight) // 覆盖黑色蒙层 - ctx.setFillStyle('rgba(0,0,0,0.3)') + ctx.setFillStyle('rgba(0,0,0,0.3)') ctx.fillRect(0, 0, topImageWidth, topImageHeight) ctx.draw(true) @@ -118,59 +124,57 @@ Page({ //name ctx.setFillStyle('white'); ctx.setFontSize(30 * scale); - this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 200 * scale, 30 * scale, 258 * scale, 1) + this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 210 * scale, 30 * scale, 258 * scale, 1) // address ctx.setFillStyle('#000'); ctx.setFontSize(18 * scale); - this.canvasTextAutoLine("地址:" + this.data.data.shopVoList[0].floorName + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 270 * scale, 22 * scale, 305 * scale, 1) - - // this.drawNormalText(ctx, '探索新鲜好去处', 82 * scale, 596 * scale, 14 * scale, '#3C3C3C', 'left', 'middle', scale); - // this.drawNormalText(ctx, '长按右侧小程序码', 82 * scale, 620 * scale, 12 * scale, '#9A9CAC', 'left', 'middle', scale); - // this.drawNormalText(ctx, '查看更多店铺信息和热评', 82 *scale,635*scale, 12*scale, '#9A9CAC', 'left', 'middle', scale); - + this.canvasTextAutoLine("地址:" + this.data.data.shopVoList[0].floorName + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 265 * scale, 20 * scale, 305 * scale, 1) + // if (this.data.couponList) { + // this.drawNormalText(ctx, '长按右侧小程序码', 102 * scale, 596 * scale, 18 * scale, '#A3A3A3', 'left', 'middle', scale); + // }else{ + // this.drawNormalText(ctx, '长按识别小程序码', 102 * scale, 580 * scale, 18 * scale, '#1E1E1E', 'left', 'middle', scale); + // } ctx.draw(true) }, // 绘制活动图片 drawOtherImage(ctx, scale) { - - let that = this + var that = this // 如果该商户有活动商品 - if (this.data.couponList.length > 0) { - let cotentImageWidth = parseInt(136 * scale) - let cotentImageHeight = parseInt(136 * scale) - for (let i = 0; i < this.data.couponList.length; i++) { - let imageItem = this.data.couponList[i].coverImg + if (that.data.couponList.length>0) { + let cotentImageWidth = parseInt(100 * scale) + let cotentImageHeight = parseInt(100 * 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(imgOrgUrl, imgNewUrl) wx.getImageInfo({ - src: src1, + src: src2, success: function(res) { - ctx.drawImage(res.path, 15 * scale + i * 180 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) + ctx.drawImage(res.path, 15 * scale + i * 120 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) ctx.draw(true) + } }) } //没有活动商品生成小程序码 } else { if (this.data.qrCode) { - let coImageWidth = parseInt(336 * scale) - let coImageHeight = parseInt(336 * scale) - let src1 = this.data.qrCode + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` + let coImageWidth = parseInt(260 * scale) + let coImageHeight = parseInt(260 * scale) + let src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` + let src2 = src1.replace(imgOrgUrl, imgNewUrl) wx.getImageInfo({ - src: src1, + src: src2, success: function(res) { - ctx.drawImage(res.path, 0, 0, coImageWidth, coImageHeight) + ctx.drawImage(res.path, 50 * scale, 320 * scale, coImageWidth, coImageHeight) ctx.draw(true) } }) } } - // icon - // ctx.setShadow(0, 8 * scale, 20, 'rgba(0,0,0,0.1)') - // ctx.drawImage('./../../../assets/images/download.png', 13 * scale, 590 * scale, 54*scale, 54*scale) - // ctx.setShadow(0, 0, 0, 'white') - // ctx.draw(true) + wx.hideLoading() }, // 绘制只有一行的文字 @@ -220,90 +224,75 @@ Page({ } } }, - // 保存图片 - saveImage() { - var _this = this - var image = _this.data.poster - - wx.getImageInfo({ - src: image, - success: function(sres) { - var imgSrc = sres.path; - - wx.showLoading({ - title: '保存中', - mask: true - }) - setTimeout(function() { - wx.saveImageToPhotosAlbum({ - filePath: imgSrc, - success: function(data) { - // wx.showToast({ - // title: '保存成功', - // icon: 'success', - // duration: 2000 - // }) - console.log(data) - wx.showModal({ - title: '友情提示', - content: '图片保存成功,请到相册查找分享', - success(res) { - if (res.confirm) { - - } else if (res.cancel) { - - } + // 保存图片 + saveImage(){ + 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) { + that.saveImageToPhotos(res.tempFilePath); + }, + fail: function (res) { + wx.showToast({ + title: '图片生成失败', + icon: 'none', + duration: 2000 + }) + } + }) +}, +saveImageToPhotos: function (tempFilePath) { + wx.saveImageToPhotosAlbum({ + filePath: tempFilePath, + success(result) { + wx.showToast({ + title: '保存成功,从相册中分享到朋友圈吧', + icon: 'none', + duration: 4000 + }) + }, + fail: function (err) { + if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { + // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用 + wx.showModal({ + title: '提示', + content: '需要您授权保存相册', + showCancel: false, + success:modalSuccess=>{ + wx.openSetting({ + success(settingdata) { + console.log("settingdata", settingdata) + if (settingdata.authSetting['scope.writePhotosAlbum']) { + wx.showModal({ + title: '提示', + content: '获取权限成功,再次点击图片即可保存', + showCancel: false, + }) + } else { + wx.showModal({ + title: '提示', + content: '获取权限失败,将无法保存到相册哦~', + showCancel: false, + }) } - }) - - }, - fail: function(err) { - // console.log(err); - if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { - console.log("当初用户拒绝,再次发起授权") - wx.openSetting({ - success(settingdata) { - console.log(settingdata) - if (settingdata.authSetting['scope.writePhotosAlbum']) { - console.log('获取权限成功,给出再次点击图片保存到相册的提示。') - } else { - console.log('获取权限失败,给出不给权限就无法正常使用的提示') - } - } - }) + }, + fail(failData) { + console.log("failData",failData) + }, + complete(finishData) { + console.log("finishData", finishData) } - }, - complete(res) { - console.log(res); - } - }) - wx.hideLoading(); - }, 2000) - } - }) - }, - /** - * 获取access_token - */ - getaccess_token: function(access_token) { - wx.request({ - url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token, - method: 'POST', - data: { - path: 'pages/index/index', // 必须是已经发布的小程序存在的页面(否则报错) - width: 430, - auto_color: false, // 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调 - line_color: { - "r": "0", - "g": "0", - "b": "0" - } // auto_color 为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示 - }, - success: function(res) { - console.log(res); + }) + } + }) } - }) - }, + }, + }) +}, /** * 拨打电话 */ @@ -410,7 +399,8 @@ Page({ data: data }).then(res => { that.setData({ - couponList: res.data.list, + couponList: res.data.page.list, + qrCode:res.data.qrCode, }) }) .catch(err => { diff --git a/pages/index/searchbar/detail/index.wxml b/pages/index/searchbar/detail/index.wxml index 68a9832..ee53396 100644 --- a/pages/index/searchbar/detail/index.wxml +++ b/pages/index/searchbar/detail/index.wxml @@ -100,7 +100,7 @@ - +