diff --git a/assets/images/download.png b/assets/images/download.png new file mode 100644 index 0000000..77b7a1b Binary files /dev/null and b/assets/images/download.png differ 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