diff --git a/app.json b/app.json index a513ca1..7c05f8f 100644 --- a/app.json +++ b/app.json @@ -48,6 +48,7 @@ "pages/payrule/payrule", "pages/grade/grade", "pages/game/index", + "pages/canvas/index", "pages/main/gameentry/gentry", "pages/index/gameentry/gentry", "pages/specialcourtesy/specialcourtesy", diff --git a/components/shareposter/index.js b/components/shareposter/index.js new file mode 100644 index 0000000..77a308f --- /dev/null +++ b/components/shareposter/index.js @@ -0,0 +1,40 @@ +// pages/index/sw/index.js +Component({ + /** + * 组件的属性列表 + */ + properties: { + paramAtoB: String, + from: String, + data: { + value: {}, + type: Object + }, + }, + + /** + * 组件的初始数据 + */ + data: { + isshare: true, + }, + methods: { + /** + * 隐藏分享弹框 + */ + hidemodal: function() { + this.setData({ + isshare: false, + }) + }, + /** + * 显示分享海报 + */ + showPoster: function() { + //跳转到海报生成页 + wx.navigateTo({ + url: `/pages/canvas/index?merchantId=${this.data.id}` + }) + }, + } +}); \ No newline at end of file diff --git a/components/shareposter/index.json b/components/shareposter/index.json new file mode 100644 index 0000000..32640e0 --- /dev/null +++ b/components/shareposter/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/components/shareposter/index.wxml b/components/shareposter/index.wxml new file mode 100644 index 0000000..b71ae18 --- /dev/null +++ b/components/shareposter/index.wxml @@ -0,0 +1,14 @@ + + + + + + + 微信好友 + + + + 微信朋友圈 + + + \ No newline at end of file diff --git a/components/shareposter/index.wxss b/components/shareposter/index.wxss new file mode 100644 index 0000000..107dac7 --- /dev/null +++ b/components/shareposter/index.wxss @@ -0,0 +1,46 @@ +.modal { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 10; + color: #fff; +} + +.modal-content { + width: 540rpx; + height: 233rpx; + line-height: 60rpx; + overflow: hidden; + position: fixed; + top: 50%; + left: 0; + z-index: 11; + background: #f9f9f9; + margin: -130rpx 105rpx; + border-radius: 36rpx; + display: flex; +} + +.modal-content view { + display: inline-block; + flex: 1; + text-align: center; +} + +.modal-content view>text { + color: #000; + display: block; + font-size: 30rpx; + height: 80rpx; + line-height: 80rpx; +} + +.modal-content view>image { + margin-top: 30rpx; + width: 90rpx; + height: 90rpx; +} \ No newline at end of file diff --git a/pages/canvas/index.js b/pages/canvas/index.js new file mode 100644 index 0000000..dc6ab7f --- /dev/null +++ b/pages/canvas/index.js @@ -0,0 +1,416 @@ +var config = require("../../config/config.js"); +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({ + + /** + * 页面的初始数据 + */ + data: { + poterbg: imgurl.poterbg.url, + windowWidth: wx.getSystemInfoSync().windowWidth, + windowHeight: wx.getSystemInfoSync().screenHeight, + totalHeight: 0, + qrCodeL: '', //小程序码 + couponList: [], //活动劵列表 + canvasScale: 1.0, // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function(options) { + let that = this; + //劵详情 + if (options && options.couponChannelId){ + that.getDetail(options.couponChannelId); + }else if(options && options.merchantId){ + that.getList(options.merchantId); + that.getCouponList(options.merchantId); + } + this.getUserInfo(); + this.begainDrawShareImage(options); + }, + + /** + * 获取劵详情 + */ + getDetail: function (couponChannelId) { + let that = this; + // 获取用户信息 + Http.get({ + url: config.api.couponDetail, + data: { + couponChannelId: couponChannelId + } + }) + .then(res => { + console.log(res) + that.setData({ + data: res.data, + }) + }) + }, + /** + * 获取商户详情 + */ + getList: function(id) { + let that = this; + let data; + data = { + pageNum: 1, + pageSize: 15, + id: id + } + Http.get({ + url: config.api.merchantList, + data: data + }).then(res => { + that.setData({ + data: res.data.list[0], + }) + }) + .catch(err => { + wx.showToast({ + title: err.errMsg, + icon: 'none', + duration: 2000, + mask: false + }); + }) + }, + /** + * 绘制分享海报 + */ + begainDrawShareImage(options) { + wx.showLoading({ + title: '生成中...', + }) + + var that = this + // 适配屏幕 + let scale = this.data.windowWidth / 375.0 + this.setData({ + totalHeight: 767 * scale + }) + // 获取Canvas + let ctx = wx.createCanvasContext('myCanvas') + // 获取宽高 + let wW = that.data.windowWidth; + 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)) + wx.getImageInfo({ + src: bgimg2, + success: function(res) { + ctx.drawImage(res.path, 0, 0, wW-20, wH); + that.drawshopimg(ctx, scale,options); + } + }) + + }, + //判断图片路径 + 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 = 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){ + that.drawOtherImage(ctx, scale) + that.drawOtherContent(ctx, scale) + // 绘制白色背景 + ctx.setFillStyle('#fff') + ctx.fillRect(15, 45, topImageWidth + 10, topImageHeight + 10) + ctx.drawImage(res.path, 20, 50, topImageWidth, topImageHeight) + ctx.draw() + }else if((options && options.couponChannelId)){ + ctx.setFillStyle('#fff') + ctx.fillRect(15, 95, topImageWidth + 10, topImageHeight + 10) + ctx.drawImage(res.path, 20, 100, topImageWidth, topImageHeight) + ctx.draw() + that.drawCouponContent(ctx, scale) + that.drawqrCode(ctx, scale); + } + + 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); + } + + } + + 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) + } + }) + } + + } + 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; + + if (currentRow > row) { + break; + } + } + 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, + } + Http.get({ + url: config.api.listByMerchant, + data: data + }).then(res => { + that.setData({ + couponList: res.data.page.list, + qrCode: res.data.qrCode, + }) + }) + .catch(err => { + wx.showToast({ + title: err.errMsg, + icon: 'none', + duration: 2000, + mask: false + }); + }) +}, + //获取头像和昵称 + getUserInfo: function() { + let that = this; + // 获取用户信息 + Http.get({ + url: config.api.getScore, + data: {} + }) + .then(res => { + console.log(res) + that.setData({ + nickName: res.data.nickName, + avatarUrl: res.data.avatarUrl + }) + }) + }, + /** + * 保存图片 + */ + 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(failData) { + console.log("failData", failData) + }, + complete(finishData) { + console.log("finishData", finishData) + } + }) + } + }) + } + }, + }) + }, + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + } +}) \ No newline at end of file diff --git a/pages/canvas/index.json b/pages/canvas/index.json new file mode 100644 index 0000000..a793d1a --- /dev/null +++ b/pages/canvas/index.json @@ -0,0 +1,4 @@ +{ + "navigationBarTitleText": "分享", + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/canvas/index.wxml b/pages/canvas/index.wxml new file mode 100644 index 0000000..2196350 --- /dev/null +++ b/pages/canvas/index.wxml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/pages/canvas/index.wxss b/pages/canvas/index.wxss new file mode 100644 index 0000000..557a5da --- /dev/null +++ b/pages/canvas/index.wxss @@ -0,0 +1,38 @@ +/* pages/canvas/index.wxss */ +.content { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + background: #f3f3f3; + position: relative; +} +.poster{ + width: 100%; + height: 100%; + padding: 20rpx; + position: absolute; + top: 0; + left: 0; +} +.bottomsave { + width: 100%; + height: 140rpx; + line-height: 140rpx; + margin: auto 0; + bottom:0; + left: 0; + right: 0; + border-top: 1px solid #ccc; + box-shadow: 0 0rpx 150rpx #ccc; + background: #fff; +} +.saveposter { + color: #fff; + width: 380rpx; + height: 80rpx; + border-radius: 50rpx; + background: #f08f04; + margin-top: 30rpx; + font-size: 32rpx; +} diff --git a/pages/coupon/detail/index.js b/pages/coupon/detail/index.js index b3ce745..d2a8180 100644 --- a/pages/coupon/detail/index.js +++ b/pages/coupon/detail/index.js @@ -5,6 +5,7 @@ const util = require("../../../utils/util"); const imgurl = require("../../../utils/imgurl"); Page({ data: { + isshowposter:false,//是否显示分享弹框 fenxiangUrl: imgurl.fenxiang.url, clockUrl: imgurl.clock.url, teljpgUrl: imgurl.teljpg.url, @@ -76,7 +77,24 @@ Page({ min02: "00", sec02: "00", countdown: "", - showbutton1: false + showbutton1: false, + + }, + /** + * 显示分享弹框 + */ + showshare: function() { + this.setData({ + isshowposter: true, + }) + }, + /** + * 隐藏分享弹框 + */ + hidemodal: function() { + this.setData({ + isshowposter: false, + }) }, /** * 跳转到门店列表的详情页面 @@ -85,6 +103,15 @@ Page({ wx.navigateTo({ url: `/pages/index/detail/index?id=${e.currentTarget.dataset.id}` }) + }, + /** + * 显示分享海报 + */ + showPoster: function() { + //跳转到海报生成页 + wx.navigateTo({ + url: `/pages/canvas/index?couponChannelId=${this.data.data.id}` + }) }, swiperChange: function (e) { this.setData({ @@ -858,6 +885,7 @@ Page({ } }) }, + onShow() { this.setData({ showbutton: false, @@ -891,7 +919,7 @@ Page({ // 来自页面内的按钮的转发 if (options.from == 'button') { var eData = options.target.dataset.id; - shareObj.path = `/pages/index/index?couponChannelId=${eData}`; + shareObj.path = `/pages/index/index?couponChannelId=${eData}&frommd=JC`; } // 返回shareObj return shareObj; diff --git a/pages/coupon/detail/index.json b/pages/coupon/detail/index.json index f7e2842..ee480c2 100644 --- a/pages/coupon/detail/index.json +++ b/pages/coupon/detail/index.json @@ -1,4 +1,7 @@ { + "usingComponents": { + "c-shareposter": "../../../../components/shareposter/index" + }, "navigationBarTitleText": "", "backgroundColor":"#f4f4f4", "enablePullDownRefresh": true diff --git a/pages/coupon/detail/index.wxml b/pages/coupon/detail/index.wxml index 6a36359..dd98202 100644 --- a/pages/coupon/detail/index.wxml +++ b/pages/coupon/detail/index.wxml @@ -18,9 +18,9 @@ - + - + @@ -191,4 +191,20 @@ + + + + + + + + + 微信好友 + + + + 微信朋友圈 + + + \ No newline at end of file diff --git a/pages/coupon/detail/index.wxss b/pages/coupon/detail/index.wxss index 138b700..32e5e05 100644 --- a/pages/coupon/detail/index.wxss +++ b/pages/coupon/detail/index.wxss @@ -88,13 +88,13 @@ button::after { } .user-motto { - width: 118rpx; + width: 270rpx; border: 0; background: none; - height: 60rpx; + height: 260rpx; color: #fff; + position: fixed; } - .user-motto::after { border: none; } @@ -727,3 +727,86 @@ checkbox-group, radio-group { width: 100%; margin-bottom: 20rpx; } +.content { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + background: #f3f3f3; + position: relative; +} +.poster{ + width: 100%; + height: 100%; + padding: 20rpx; + position: absolute; + top: 0; + left: 0; +} +.bottomsave { + width: 100%; + height: 140rpx; + line-height: 140rpx; + margin: auto 0; + bottom:0; + left: 0; + right: 0; + border-top: 1px solid #ccc; + box-shadow: 0 0rpx 150rpx #ccc; + background: #fff; +} +.saveposter { + color: #fff; + width: 380rpx; + height: 80rpx; + border-radius: 50rpx; + background: #f08f04; + margin-top: 30rpx; + font-size: 32rpx; +} +.modal { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 10; + color: #fff; +} + +.modal-content { + width: 540rpx; + height: 233rpx; + line-height: 60rpx; + overflow: hidden; + position: fixed; + top: 50%; + left: 0; + z-index: 11; + background: #f9f9f9; + margin: -130rpx 105rpx; + border-radius: 36rpx; + display: flex; +} + +.modal-content view { + display: inline-block; + flex: 1; + text-align: center; +} + +.modal-content view>text { + color: #000; + display: block; + font-size: 30rpx; + height: 80rpx; + line-height: 80rpx; +} + +.modal-content view>image { + margin-top: 30rpx; + width: 90rpx; + height: 90rpx; +} \ No newline at end of file diff --git a/pages/index/searchbar/detail/index.js b/pages/index/searchbar/detail/index.js index 910b839..986fb98 100644 --- a/pages/index/searchbar/detail/index.js +++ b/pages/index/searchbar/detail/index.js @@ -51,320 +51,6 @@ Page({ currentTab: 0 }) } - this.getUserInfo() - }, - goback: function () { - wx.switchTab({ - url: '/pages/main/index', - }) - }, - /** - * 绘制分享海报 - */ - begainDrawShareImage() { - wx.showLoading({ - title: '生成中...', - }) - - var that = this - // 适配屏幕 - let scale = this.data.windowWidth / 375.0 - - this.setData({ - totalHeight: 767 * scale - }) - // 获取Canvas - let ctx = wx.createCanvasContext('myCanvas') - // 获取宽高 - let wW = that.data.windowWidth; - let wH = that.data.windowHeight; - - // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 - ctx.scale(this.data.canvasScale, this.data.canvasScale) - - // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容 - // 绘制背景图 - let bgimg1 = this.data.poterbg + `?imageView/2/w/${wW}/h/${wH}` - let bgimg2 = util.getProxyImgUrl(bgimg1) - wx.getImageInfo({ - src: bgimg2, - success: function(res) { - ctx.drawImage(res.path, 0, 0, wW, wH); - that.drawshopimg(ctx, scale); - // that.drawavatarimg(ctx, scale,wW,wH); - } - }) - - }, - // //绘制头像 - // drawavatarimg(ctx, scale,wW,wH){ - // //绘制头像 - // let avatar1 = this.data.avatarUrl + `?imageView/2/w/${wW}/h/${wH}` - // let avatar2 = avatar1.replace(imgOrgUrl, imgNewUrl) - // wx.getImageInfo({ - // src: avatar2, - // success: function(res) { - // ctx.drawImage(res.path, 15, 10, 30*scale,30*scale); - // } - // }) - // }, - //绘制商品图片 - drawshopimg(ctx, scale){ - var that = this - let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int - let topImageHeight = parseInt(200 * scale) - let src1 = this.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}` - let src2 = util.getProxyImgUrl(src1) - wx.getImageInfo({ - src: src2, - success: function(res) { - // 绘制白色背景 - ctx.setFillStyle('#fff') - ctx.fillRect(25, 45, topImageWidth + 10, topImageHeight + 10) - ctx.draw() - ctx.drawImage(res.path, 30, 50, topImageWidth, topImageHeight) - that.drawOtherContent(ctx, scale) - that.drawOtherImage(ctx, scale) - } - }) - }, - //获取头像和昵称 - getUserInfo: function() { - let that = this; - // 获取用户信息 - Http.get({ - url: config.api.getScore, - data: {} - }) - .then(res => { - console.log(res) - that.setData({ - nickName: res.data.nickName, - avatarUrl: res.data.avatarUrl - }) - }) - }, - // 绘制除了图片之外的剩余内容 - drawOtherContent(ctx, scale) { - //昵称 - this.drawNormalText(ctx, this.data.nickName+" 向您推荐", 30 * 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); - //店铺电话 - // this.drawNormalText(ctx, "商铺电话:"+this.data.data.merchantLinkPhone, 100 * scale, 405 * scale, 16 * scale, '#000', 'left', '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), 40 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); - this.drawNormalText(ctx, "价格:" + this.data.couponList[1].salePrice, 40 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); - //第二个商品信息 - this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 155 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); - this.drawNormalText(ctx, "价格:" + this.data.couponList[2].salePrice, 155 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); - //第三个商品信息 - this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 270 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale); - this.drawNormalText(ctx, "价格:" + this.data.couponList[3].salePrice, 270 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale); - } - - } - this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale); - ctx.draw(true) - - }, - // - getnewimgurl(str){ - if(str.indexOf(imgOrgUrl)!=-1){ - return imgNewUrl - }else if(str.indexOf(imgOrgUrl1)!=-1){ - return imgNewUrl1; - } - }, - //截取商品名 - substrTile(str) { - return str.substr(0, 5) + '...' - }, - // 绘制活动图片 - 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.setFillStyle('rgba(255,255,255,0.3)') - // ctx.fillRect(25,300, 300*scale, 200*scale) - // ctx.draw(true) - ctx.drawImage(res.path, 45 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight) - } - }) - } - - } - if (this.data.qrCode) { - let coImageWidth = parseInt(120 * scale) - let coImageHeight = parseInt(120 * scale) - let src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}` - let src2 = util.getProxyImgUrl(src1) - wx.getImageInfo({ - src: src2, - success: function(res) { - ctx.drawImage(res.path, 125 * scale, 425 * scale, coImageWidth, coImageHeight) - ctx.draw(true) - } - }) - } - - wx.hideLoading() - }, - // 绘制只有一行的文字 - 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); - } - } - }, - /** - * 图片预览方法 - * 此处注意的一点就是,调用 "wx.previewImage"时,第二个参数要求为数组形式哦 - * 当然,做过图片上传功能的应该会注意到,如果涉及到多张图片预览,图片链接数组集合即为参数 urls! - */ - previewImage: function() { - 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) { - var current = res.tempFilePath; - wx.previewImage({ - current: current, - urls: [current] - }) - }, - fail: function(res) { - wx.showToast({ - title: '图片生成失败', - icon: 'none', - duration: 2000 - }) - } - }) - - }, - // 保存图片 - 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(failData) { - console.log("failData", failData) - }, - complete(finishData) { - console.log("finishData", finishData) - } - }) - } - }) - } - }, - }) }, /** * 拨打电话 @@ -397,22 +83,14 @@ Page({ currentTab: e.detail.current }); }, - /** - * 隐藏分享海报 - */ - hideposter: function() { - this.setData({ - showpost: false, - }) - }, /** * 显示分享海报 */ showPoster: function() { - this.setData({ - showpost: true, + //跳转到海报生成页 + wx.navigateTo({ + url: `/pages/canvas/index?merchantId=${this.data.id}` }) - this.begainDrawShareImage(); }, //点击切换 clickTab: function(e) { @@ -439,8 +117,6 @@ Page({ url: config.api.merchantList, data: data }).then(res => { - console.log(res) - console.log("-----------------------------onShow---------------------------------------") let imgList = []; imgList.push(res.data.list[0].merchantImgUrl) that.setData({ diff --git a/pages/index/searchbar/detail/index.wxml b/pages/index/searchbar/detail/index.wxml index af4dbd4..6c79e88 100644 --- a/pages/index/searchbar/detail/index.wxml +++ b/pages/index/searchbar/detail/index.wxml @@ -116,14 +116,6 @@ - - - - - - \ No newline at end of file diff --git a/pages/index/searchbar/detail/index.wxss b/pages/index/searchbar/detail/index.wxss index 553f5e8..47b75a2 100644 --- a/pages/index/searchbar/detail/index.wxss +++ b/pages/index/searchbar/detail/index.wxss @@ -365,20 +365,6 @@ 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; -} - .dingdan image { display: block; width: 300rpx; diff --git a/pages/spellGroup/mySpellGroup/index.js b/pages/spellGroup/mySpellGroup/index.js index 66effbb..d95ab20 100644 --- a/pages/spellGroup/mySpellGroup/index.js +++ b/pages/spellGroup/mySpellGroup/index.js @@ -9,6 +9,7 @@ Page({ * 页面的初始数据 */ data: { + isshowposter:false,//是否显示分享弹框 teljpgUrl: imgurl.teljpg.url, wmhome: imgurl.wmhome.url, share01: imgurl.share01.url, @@ -44,6 +45,31 @@ Page({ this.getOneSpell(options.couponId) } this.getUserInfo(); + }, + /** + * 显示分享海报 + */ + showPoster: function() { + //跳转到海报生成页 + wx.navigateTo({ + url: `/pages/canvas/index?couponChannelId=${this.data.data.id}` + }) + }, + /** + * 显示分享弹框 + */ + showshare: function() { + this.setData({ + isshowposter: true, + }) + }, + /** + * 隐藏分享弹框 + */ + hidemodal: function() { + this.setData({ + isshowposter: false, + }) }, getUserInfo: function() { let that = this; @@ -530,7 +556,7 @@ Page({ // 来自页面内的按钮的转发 if (options.from == 'button') { var eData = options.target.dataset.id; - shareObj.path = `/pages/index/index?couponChannelId=${eData}&spellGroup=spellGroup`; + shareObj.path = `/pages/index/index?couponChannelId=${eData}&spellGroup=spellGroup&frommd=JC`; } // 返回shareObj return shareObj; diff --git a/pages/spellGroup/mySpellGroup/index.wxml b/pages/spellGroup/mySpellGroup/index.wxml index 9f623de..cb799b3 100644 --- a/pages/spellGroup/mySpellGroup/index.wxml +++ b/pages/spellGroup/mySpellGroup/index.wxml @@ -17,9 +17,8 @@ {{data.title}} {{data.subTitle}} - + - 【拼团购】{{data.pressLimitNum}}人拼团成功,单价仅需 @@ -92,5 +91,20 @@ + + + + + + + + 微信好友 + + + + 微信朋友圈 + + + \ No newline at end of file diff --git a/pages/spellGroup/mySpellGroup/index.wxss b/pages/spellGroup/mySpellGroup/index.wxss index 236fa95..bfe2ab2 100644 --- a/pages/spellGroup/mySpellGroup/index.wxss +++ b/pages/spellGroup/mySpellGroup/index.wxss @@ -410,14 +410,17 @@ button::after{ border: none; } z-index: 10; } .user-motto { - position: relative; - z-index: 100; - width:118rpx; - border:0; - background:none; - height:60rpx; - color:#fff; + width: 270rpx; + border: 0; + background: none; + height: 260rpx; + color: #fff; + position: fixed; +} +.user-motto::after { + border: none; } + .notes view:nth-child(1) { height: 87rpx; line-height: 87rpx; @@ -498,4 +501,79 @@ button::after{ border: none; } display: block; width: 100%; margin-bottom: 20rpx; +} +.poster{ + width: 100%; +height: 100%; +padding: 20rpx; +position: absolute; +top: 0; +left: 0; +} +.bottomsave { +width: 100%; +height: 140rpx; +line-height: 140rpx; +margin: auto 0; +bottom:0; +left: 0; +right: 0; +border-top: 1px solid #ccc; +box-shadow: 0 0rpx 150rpx #ccc; +background: #fff; +} +.saveposter { +color: #fff; +width: 380rpx; +height: 80rpx; +border-radius: 50rpx; +background: #f08f04; +margin-top: 30rpx; +font-size: 32rpx; +} +.modal { +width: 100%; +height: 100%; +position: fixed; +top: 0; +left: 0; +background: rgba(0, 0, 0, 0.5); +overflow: hidden; +z-index: 1001; +color: #fff; +} + +.modal-content { +width: 540rpx; +height: 233rpx; +line-height: 60rpx; +overflow: hidden; +position: fixed; +top: 50%; +left: 0; +z-index: 11; +background: #f9f9f9; +margin: -130rpx 105rpx; +border-radius: 36rpx; +display: flex; +} + +.modal-content view { +display: inline-block; +flex: 1; +text-align: center; +} + +.modal-content view>text { +color: #000; +display: block; +font-size: 30rpx; +height: 80rpx; +line-height: 80rpx; +} + +.modal-content view>image { +margin-top: 30rpx; +width: 90rpx; +height: 90rpx; } \ No newline at end of file