From 056665461779589ca284aaf081ee5c32ef8d876d Mon Sep 17 00:00:00 2001 From: luqc Date: Wed, 15 May 2019 18:33:02 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=95=86=E6=88=B7=E8=AF=A6=E6=83=85][?= =?UTF-8?q?=E6=96=B0=E5=A2=9E][=E7=94=9F=E6=88=90=E6=B5=B7=E6=8A=A5]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/images/download.png | Bin 0 -> 6244 bytes components/merchantcoupons/index.wxml | 37 +--- components/merchantcoupons/index.wxss | 5 - pages/index/detail/index.js | 290 +++++++++++++++++++++++++- pages/index/detail/index.wxml | 43 ++-- pages/index/detail/index.wxss | 39 ++++ 6 files changed, 354 insertions(+), 60 deletions(-) create mode 100644 assets/images/download.png diff --git a/assets/images/download.png b/assets/images/download.png new file mode 100644 index 0000000000000000000000000000000000000000..77b7a1bdffc24b6afe86aff759da307966c73879 GIT binary patch literal 6244 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 ayEnVl-cNVlJ-Yurz>$|#LX^lDqW=q+?ZQL= literal 0 HcmV?d00001 diff --git a/components/merchantcoupons/index.wxml b/components/merchantcoupons/index.wxml index 0a45920..0afb4a1 100644 --- a/components/merchantcoupons/index.wxml +++ b/components/merchantcoupons/index.wxml @@ -1,41 +1,6 @@ - - - - - - {{data.title}} - {{data.subTitle}} - - - {{data.salePriceStr}} - - {{data.priceStr}}元 - {{data.priceStr}}小时 - - - - {{data.priceStr}}元 - {{data.priceStr}}小时 - - - - - - - - - 免费领 - 马上购 - 已售罄 - 已下架 - - - - - + diff --git a/components/merchantcoupons/index.wxss b/components/merchantcoupons/index.wxss index 074be8b..98e8e35 100644 --- a/components/merchantcoupons/index.wxss +++ b/components/merchantcoupons/index.wxss @@ -256,9 +256,4 @@ navigator{ } navigator:nth-of-type(2n+1){ margin-right: 10rpx; -} -/* 限时抢购样式 */ -.xianshicoupons{ - width: 100%; - position: relative } \ No newline at end of file diff --git a/pages/index/detail/index.js b/pages/index/detail/index.js index d5c366d..2424ee5 100644 --- a/pages/index/detail/index.js +++ b/pages/index/detail/index.js @@ -11,16 +11,32 @@ Page({ teljpgUrl: imgurl.teljpg.url, share01: imgurl.share01.url, actUrl: imgurl.act.url, + poster:'./../../../assets/images/picture.png', page: 1, imglist:null, shopVoList:[], couponList:[],//活动劵列表 data:{ currentTab: 0, - isshare:false + isshare:false, + showpost: false, + imgHeight: 0, }, - id:null + id:null, + windowWidth: 0, + windowHeight: 0, + totalHeight: 0, + canvasScale: 1.0,// 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 }, + /** + * 分享海报的生成 + */ + //关闭海报 + closePoste: function() { + this.setData({ + showpost: false + }) + }, /** * 生命周期函数--监听页面加载 @@ -37,7 +53,257 @@ Page({ currentTab: 0 }) } + // 获取到屏幕的宽高等信息 + wx.getSystemInfo({ + success: function(res) { + that.setData({ + windowWidth: res.windowWidth, + windowHeight: res.windowHeight + }) + } + }) }, + /** + * 绘制分享海报 + */ + begainDrawShareImage() { + var that = this + // 适配屏幕 + let scale = this.data.windowWidth / 375.0 + + this.setData({ totalHeight: 767* scale}) + // 获取Canvas + let ctx = wx.createCanvasContext('myCanvas') + + // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 + ctx.scale(this.data.canvasScale, this.data.canvasScale) + + // 绘制主背景白色 + ctx.setFillStyle('#ffffff') + ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight) + ctx.draw() + + // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容 + let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片,所以转成int + let topImageHeight = parseInt(250 * scale) + let src1 = this.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` + wx.getImageInfo({ + src: src1, + success: function(res) { + ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight) + // 覆盖黑色蒙层 + ctx.setFillStyle('rgba(0,0,0,0.3)') + ctx.fillRect(0, 0, topImageWidth, topImageHeight) + + ctx.draw(true) + + that.drawOtherContent(ctx, scale) + that.drawOtherImage(ctx,scale) + } + }) + }, + + // 绘制除了图片之外的剩余内容 + drawOtherContent(ctx, scale) { + + // 绘制中间的灰色背景 + ctx.setFillStyle('rgba(246,246,246,1)') + //(x轴,y轴,宽,高) + ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 58 * scale) + + //name + ctx.setFillStyle('white'); + ctx.setFontSize(30 * scale); + this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 200 * 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); + + ctx.draw(true) + + }, + + // 绘制活动图片 + drawOtherImage(ctx, scale) { + + let 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 + let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}` + wx.getImageInfo({ + src: src1, + success: function (res) { + ctx.drawImage(res.path, 15 * scale + i*180*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}` + wx.getImageInfo({ + src: src1, + success: function(res) { + ctx.drawImage(res.path, 0, 0, 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) + }, + + // 绘制只有一行的文字 + 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); + }, + + + /* + * 绘制多行文本,自动换行,超出添加... + * + str:要绘制的字符串 + canvas:canvas对象 + initX:绘制字符串起始x坐标 + initY:绘制字符串起始y坐标 + lineHeight:字行高,自己定义个值即可 + maxWidth: 文本最大宽度 + row: 最大行数 + */ + 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 (i == str.length - 1) { + ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY); + } + } + }, + // 保存图片 + 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) { + + } + } + }) + + }, + 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('获取权限失败,给出不给权限就无法正常使用的提示') + } + } + }) + } + }, + 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); + } + }) + }, /** * 拨打电话 */ @@ -68,6 +334,23 @@ Page({ this.setData({ currentTab: e.detail.current }); + }, + /** + * 隐藏分享海报 + */ + hideposter:function(){ + this.setData({ + showpost: false, + }) + }, + /** + * 显示分享海报 + */ + showPoster:function(){ + this.setData({ + showpost: true, + }) + this.begainDrawShareImage(); }, //点击切换 clickTab: function (e) { @@ -127,7 +410,7 @@ Page({ data: data }).then(res => { that.setData({ - couponList: res.data, + couponList: res.data.list, }) }) .catch(err => { @@ -154,7 +437,6 @@ Page({ }, onShareAppMessage: function (res) { - debugger var that = this; var shareObj = { title: that.data.data.title, diff --git a/pages/index/detail/index.wxml b/pages/index/detail/index.wxml index 60275a6..12258ab 100644 --- a/pages/index/detail/index.wxml +++ b/pages/index/detail/index.wxml @@ -1,4 +1,4 @@ - + @@ -19,7 +19,6 @@ - @@ -30,7 +29,9 @@ 商户位置 - {{item.buildingName}}{{item.floorName}}--{{item.shopNumber}} + + {{item.buildingName}}{{item.floorName}}--{{item.shopNumber}} + @@ -49,15 +50,17 @@ - 优惠信息 - 商家简介 + + 优惠信息 + + + 商家简介 + - + - - @@ -67,36 +70,46 @@ 我们正在筹备一大波优惠活动 - {{content}} + + {{content}} + {{loadingtext}} - {{data.summary}} - {{"信息完善中,敬请期待。"}}     + {{"信息完善中,敬请期待。"}} + - + - - + 微信好友 - + 生成海报 + + + + + + + + + \ No newline at end of file diff --git a/pages/index/detail/index.wxss b/pages/index/detail/index.wxss index 57428af..b050b17 100644 --- a/pages/index/detail/index.wxss +++ b/pages/index/detail/index.wxss @@ -224,6 +224,7 @@ position:fixed; } .swiperactive{ min-height: 300rpx; + margin-bottom:20rpx; } /* modal */ .modal{ @@ -266,4 +267,42 @@ position:fixed; margin-top: 30rpx; width: 100rpx; height: 100rpx; +} +/*分享海报样式*/ +.canvas-content{ + display: flex; + top: 0; + left: 0; + /* left: 500%; 分享图不显示在页面上面,就将画布设置在页面之外*/ +} + +.save-button { + position: fixed; + width: 80rpx; + height: 80rpx; + bottom: 40rpx; + right: 40rpx; + border-radius: 50rpx; + z-index: 200; + background: rgba(0, 0, 0, 0.75); +} + +.save-button .share-image { + position: absolute; + top: 22rpx; + left: 22rpx; + width: 36rpx; + height: 36rpx; +} +/*分享海报蒙层*/ +.postermodal{ + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0,0,0,0.5); + overflow: hidden; + z-index: 50; + color: #fff; } \ No newline at end of file