diff --git a/pages/index/detail/index.js b/pages/index/detail/index.js deleted file mode 100644 index 2424ee5..0000000 --- a/pages/index/detail/index.js +++ /dev/null @@ -1,465 +0,0 @@ -const Http = require("../../../utils/HttpBasics"); -const imgurl = require("../../../utils/imgurl"); -const config = require("../../../config/config"); -let app = getApp(); -Page({ - - /** - * 页面的初始数据 - */ - data: { - 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, - showpost: false, - imgHeight: 0, - }, - id:null, - windowWidth: 0, - windowHeight: 0, - totalHeight: 0, - canvasScale: 1.0,// 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 - }, - /** - * 分享海报的生成 - */ - //关闭海报 - closePoste: function() { - this.setData({ - showpost: false - }) - }, - - /** - * 生命周期函数--监听页面加载 - */ - onLoad: function (options) { - let that=this; - if (options && options.id){ - this.setData({ - id: options.id - }); - that.getList(options.id); - that.getCouponList(options.id); - this.setData({ - 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); - } - }) - }, - /** - * 拨打电话 - */ - phone: function (e) { - let that = this; - wx.makePhoneCall({ - phoneNumber: e.target.dataset.merchantlinkphone - }); - }, - /** - * 显示分享弹框 - */ - showshare:function(){ - this.setData({ - isshare:true, - }) - }, - /** - * 隐藏分享弹框 - */ - hidemodal:function(){ - this.setData({ - isshare: false, - }) - }, - //滑动切换 - swiperTabView: function (e) { - this.setData({ - currentTab: e.detail.current - }); - }, - /** - * 隐藏分享海报 - */ - hideposter:function(){ - this.setData({ - showpost: false, - }) - }, - /** - * 显示分享海报 - */ - showPoster:function(){ - this.setData({ - showpost: true, - }) - this.begainDrawShareImage(); - }, - //点击切换 - clickTab: function (e) { - if (this.data.currentTab === e.target.dataset.current) { - return false; - } else { - this.setData({ - currentTab: e.target.dataset.current - }) - } - }, - /** - * 获取商户详情 - */ - getList: function (id) { - let that = this; - let data; - data = { - pageNum: that.data.page, - pageSize: 15, - id:id - } - Http.get({ - url: config.api.merchantList, - data: data - }).then(res => { - that.setData({ - data: res.data.list[0], - shopVoList: res.data.list[0].shopVoList, - imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl, - }) - }) - .catch(err => { - wx.showToast({ - title: err.errMsg, - icon: 'none', - duration: 2000, - mask: false - }); - }) - }, - /** - * 获取商户活动信息 券类型(1.满减券,2.代金券,3.团购券,4.礼品券,5.停车券,6.多商户券,8.砍价券,9.团购券,50.积分券,51.积分停车券 100.消费卡) - * 投放频道:(1.列表, 2.限时抢购, 3. banner图 4. 游戏 5.卡频道 6.砍价频道 7.拼团频道 8专题) - */ - getCouponList: function (id) { - let that = this; - let data; - data = { - status:0, - merchantId:id, - pageNum: that.data.page, - pageSize: 15, - } - Http.get({ - url: config.api.merchantCouponList, - data: data - }).then(res => { - that.setData({ - couponList: res.data.list, - }) - }) - .catch(err => { - wx.showToast({ - title: err.errMsg, - icon: 'none', - duration: 2000, - mask: false - }); - }) - }, - /** - * 获取多商铺列表 - */ - shopList:function(e){ - wx.navigateTo({ - url: `/pages/index/merchantList/index?id=${e.currentTarget.dataset.id}` - }) - }, - /** - * 生命周期函数--监听页面隐藏 - */ - onHide: function () { - - }, - onShareAppMessage: function (res) { - var that = this; - var shareObj = { - title: that.data.data.title, - path: `/pages/index/index?couponChannelId=${that.data.couponChannelId}`, - success: function (res) { - if (res.errMsg == 'shareAppMessage:ok') { } - }, - fail: function (error) { - if (res.errMsg == 'shareAppMessage:fail cancel') { } else if (res.errMsg == 'shareAppMessage:fail') { } - } - }; - // 来自页面内的按钮的转发 - if (res.from === 'button') { - var eData = res.target.dataset.id; - shareObj.path = `/pages/index/index?couponChannelId=${eData}`; - } - // 返回shareObj - return shareObj; - }, - /** - * 页面相关事件处理函数--监听用户下拉动作 - */ - onPullDownRefresh: function () { - - }, -}) \ No newline at end of file diff --git a/pages/index/detail/index.json b/pages/index/detail/index.json deleted file mode 100644 index 92dce2e..0000000 --- a/pages/index/detail/index.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "navigationBarTitleText": "商户详情", - "backgroundColor": "#f4f4f4", - "enablePullDownRefresh": true, - "usingComponents": { - "c-banner": "../../../components/banner/index", - "c-coupons": "../../../components/merchantcoupons/index" - } -} \ No newline at end of file diff --git a/pages/index/detail/index.wxml b/pages/index/detail/index.wxml deleted file mode 100644 index 12258ab..0000000 --- a/pages/index/detail/index.wxml +++ /dev/null @@ -1,115 +0,0 @@ - - - - - - - - - - - - - - - - - {{data.merchantName}} - {{data.title}} - - - - - - - - - - - 商户位置 - - - - {{item.buildingName}}{{item.floorName}}--{{item.shopNumber}} - - - - - - - - 联系商户 - - - - {{data.merchantLinkPhone}} - - - - - - - - - 优惠信息 - - - 商家简介 - - - - - - - - - - - - 请您敬请期待 - 我们正在筹备一大波优惠活动 - - - - {{content}} - - {{loadingtext}} - - - - {{data.summary}} - {{"信息完善中,敬请期待。"}} - - - - - - - - - - - - - - 微信好友 - - - - 生成海报 - - - - - - - - - - - - - - \ No newline at end of file diff --git a/pages/index/detail/index.wxss b/pages/index/detail/index.wxss deleted file mode 100644 index b050b17..0000000 --- a/pages/index/detail/index.wxss +++ /dev/null @@ -1,308 +0,0 @@ -.index-slide, swiper-item - .index-slide-image { - display: block; - width: 750rpx; - margin: 0 auto; - overflow: hidden; - position: relative; - height: 576rpx; -} - -.index-slide-view .dots { - position: absolute; - left: 0; - right: 0; - bottom: 20rpx; - display: flex; - justify-content: center; -} - -.index-slide-view .dots .dot { - margin: 0 8rpx; - width: 12rpx; - height: 12rpx; - background: #b6b6b7; - border-radius: 50%; - transition: all 0.6s; -} - -.index-slide-view .dots .dot.active { - background: #02c0ff; - width: 30rpx; - height: 12rpx; - border-radius: 10rpx; - opacity: 1; -} - -.bannerbg { - width: 100%; -} - -.bannerbg image { - display: block; - width: 100%; -} - -.merchant-detail { - width:92%; - padding:30rpx 4% 0; - background:#fff; - border-top-left-radius:20rpx; - border-top-right-radius:20rpx; - margin-top:-25rpx; -} - -.merchant-brand, .merchant-shop, .merchant-phone { - width: 100%; - display: flex; - padding: 20rpx 0; - background: #fff; - border-bottom: 1rpx solid #efefef; -} - -.merchant-brand view:nth-child(1) { - width: 160rpx; - border-radius: 16rpx; - height: 160rpx; -} - -.merchant-brand view:nth-child(1) image { - display: block; - width: 160rpx; - height: 160rpx; - border-radius: 16rpx; - border: 1px solid #e5e5e5; -} - -.merchant-brand view:nth-child(2) { - display: flex; - flex-direction: column; - flex: 6; - padding-left: 30rpx; -} - -.merchant-brand view:nth-child(2) text:nth-child(1) { - margin-top: 20rpx; -} - -.merchant-shop text, .merchant-phone text { - font-size: 30rpx; -} - -.merchant-shop view, .merchant-phone view { - display: flex; - flex: 2; - color: #333; -} - -.merchant-shop view:nth-child(2){ - font-size: 30rpx; -} - -.merchant-info { - display: block!important; - color: #999; - font-size: 28rpx; -} -.merchant-phones{ - padding: 20rpx 0; - display: block; - font-size: 30rpx; -} -.tel { - right: 0; - top: 0; - bottom: 0; - margin: auto; - width: 50rpx; - height: 50rpx; -} - -.shoplists { - display: flex; -} - -.shoplists text { - flex: 2; -} - -.godetail { - color: #999; - font-size: 30rpx; - position: absolute; - right: 10rpx; -} -.merchants text{ - display: block; - text-align: left; - font-size:26rpx; - margin-bottom: 6rpx; -} -.merchants{ - display: block!important; -} -.merchant-brand{ - border: none!important; -} -.tabs-item.selected { - color:rgba(171,149,109,.8); - border-bottom:2px solid rgba(171,149,109,.8); -} -.tabs-item { - width:33.3%; - color:#C7C7CB; - font-size:28rpx; - display:flex; - align-items:center; - justify-content:center; - border-bottom:1rpx solid #D0D0D7; -} -.swiper-tab{ - text-align: left; - width: 100%; - display: flex; - flex-flow: row; - height: 88rpx; - line-height: 88rpx; - margin-bottom: 20rpx; -} -.swiper-tab-item { - color: #434343; - font-size: 30rpx; - margin-right:50rpx; -} -.active-tab { - color: #1693FC; - border-bottom: 10rpx solid #1693FC; -} -.fenxiang { - position: absolute; - right: 0; - top: 27rpx; - width: 108rpx; -} - -.fenxiang image { - width: 108rpx; - position: absolute; - top: 0; - right: 0; -} -.user-motto { -width:270rpx; -border:0; -background:none; -height:260rpx; -color:#fff; -position:fixed; -} - -.user-motto::after { - border: none; -} -/* 商户活动列表 */ -.coupons c-coupons{ - width: 335rpx; - height: 354rpx; - margin-bottom: 22rpx; -} -.coupons c-coupons:nth-of-type(2n+1){ - float: left; -} -.coupons c-coupons:nth-of-type(2n){ - float: right; -} -.loading image { - width: 60rpx; - height: 60rpx; - vertical-align: middle; - margin-right: 10rpx; -} -.dingdan text{ - display: block; - text-align: center; -} -.swiperactive{ - min-height: 300rpx; - margin-bottom:20rpx; -} -/* modal */ -.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: 260rpx; - 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; - height: 80rpx; - line-height: 80rpx; -} -.modal-content view>image{ - 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 diff --git a/pages/index/searchbar/detail/index.js b/pages/index/searchbar/detail/index.js index 0630bfc..c24d299 100644 --- a/pages/index/searchbar/detail/index.js +++ b/pages/index/searchbar/detail/index.js @@ -10,20 +10,38 @@ Page({ data: { teljpgUrl: imgurl.teljpg.url, share01: imgurl.share01.url, + actUrl: imgurl.act.url, + poster: './../../../../assets/images/picture.png', page: 1, imglist: null, shopVoList: [], - couponList: [], //活动劵列表 + couponList: [],//活动劵列表 data: { - currentTab: 0 + currentTab: 0, + 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 + }) }, /** * 生命周期函数--监听页面加载 */ - onLoad: function(options) { + onLoad: function (options) { let that = this; if (options && options.id) { this.setData({ @@ -31,21 +49,323 @@ Page({ }); that.getList(options.id); that.getCouponList(options.id); + this.setData({ + currentTab: 0 + }) } + // 获取到屏幕的宽高等信息 + wx.getSystemInfo({ + success: function (res) { + that.setData({ + windowWidth: res.windowWidth, + windowHeight: res.windowHeight + }) + } + }) }, /** - * 拨打电话 + * 绘制分享海报 */ - phone: function(e) { + 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); + } + }) + }, + /** + * 拨打电话 + */ + phone: function (e) { let that = this; wx.makePhoneCall({ phoneNumber: e.target.dataset.merchantlinkphone }); }, + /** + * 显示分享弹框 + */ + showshare: function () { + this.setData({ + isshare: true, + }) + }, + /** +* 隐藏分享弹框 +*/ + hidemodal: function () { + this.setData({ + isshare: false, + }) + }, + //滑动切换 + swiperTabView: function (e) { + this.setData({ + currentTab: e.detail.current + }); + }, + /** +* 隐藏分享海报 +*/ + hideposter: function () { + this.setData({ + showpost: false, + }) + }, + /** +* 显示分享海报 +*/ + showPoster: function () { + this.setData({ + showpost: true, + }) + this.begainDrawShareImage(); + }, + //点击切换 + clickTab: function (e) { + if (this.data.currentTab === e.target.dataset.current) { + return false; + } else { + this.setData({ + currentTab: e.target.dataset.current + }) + } + }, /** * 获取商户详情 */ - getList: function(id) { + getList: function (id) { let that = this; let data; data = { @@ -54,15 +374,15 @@ Page({ id: id } Http.get({ - url: config.api.merchantList, - data: data - }).then(res => { - that.setData({ - data: res.data.list[0], - shopVoList: res.data.list[0].shopVoList, - imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl, - }) + url: config.api.merchantList, + data: data + }).then(res => { + that.setData({ + data: res.data.list[0], + shopVoList: res.data.list[0].shopVoList, + imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl, }) + }) .catch(err => { wx.showToast({ title: err.errMsg, @@ -73,10 +393,10 @@ Page({ }) }, /** - * 获取商户活动信息 券类型(1.满减券,2.代金券,3.团购券,4.礼品券,5.停车券,6.多商户券,8.砍价券,9.团购券,50.积分券,51.积分停车券 100.消费卡) - * 投放频道:(1.列表, 2.限时抢购, 3. banner图 4. 游戏 5.卡频道 6.砍价频道 7.拼团频道 8专题) - */ - getCouponList: function(id) { + * 获取商户活动信息 券类型(1.满减券,2.代金券,3.团购券,4.礼品券,5.停车券,6.多商户券,8.砍价券,9.团购券,50.积分券,51.积分停车券 100.消费卡) + * 投放频道:(1.列表, 2.限时抢购, 3. banner图 4. 游戏 5.卡频道 6.砍价频道 7.拼团频道 8专题) + */ + getCouponList: function (id) { let that = this; let data; data = { @@ -86,13 +406,13 @@ Page({ pageSize: 15, } Http.get({ - url: config.api.merchantCouponList, - data: data - }).then(res => { - that.setData({ - couponList: res.data.list, - }) + url: config.api.merchantCouponList, + data: data + }).then(res => { + that.setData({ + couponList: res.data.list, }) + }) .catch(err => { wx.showToast({ title: err.errMsg, @@ -102,11 +422,10 @@ Page({ }); }) }, - /** * 获取多商铺列表 */ - shopList: function(e) { + shopList: function (e) { wx.navigateTo({ url: `/pages/index/merchantList/index?id=${e.currentTarget.dataset.id}` }) @@ -114,24 +433,24 @@ Page({ /** * 生命周期函数--监听页面隐藏 */ - onHide: function() { + onHide: function () { }, - onShareAppMessage: function(options) { + onShareAppMessage: function (res) { var that = this; var shareObj = { title: that.data.data.title, path: `/pages/index/index?couponChannelId=${that.data.couponChannelId}`, - success: function(res) { - if (res.errMsg == 'shareAppMessage:ok') {} + success: function (res) { + if (res.errMsg == 'shareAppMessage:ok') { } }, - fail: function(error) { - if (res.errMsg == 'shareAppMessage:fail cancel') {} else if (res.errMsg == 'shareAppMessage:fail') {} + fail: function (error) { + if (res.errMsg == 'shareAppMessage:fail cancel') { } else if (res.errMsg == 'shareAppMessage:fail') { } } }; // 来自页面内的按钮的转发 - if (options.from == 'button') { - var eData = options.target.dataset.id; + if (res.from === 'button') { + var eData = res.target.dataset.id; shareObj.path = `/pages/index/index?couponChannelId=${eData}`; } // 返回shareObj @@ -140,7 +459,7 @@ Page({ /** * 页面相关事件处理函数--监听用户下拉动作 */ - onPullDownRefresh: function() { + onPullDownRefresh: function () { }, }) \ No newline at end of file diff --git a/pages/index/searchbar/detail/index.wxml b/pages/index/searchbar/detail/index.wxml index 40f826c..6ea2a17 100644 --- a/pages/index/searchbar/detail/index.wxml +++ b/pages/index/searchbar/detail/index.wxml @@ -60,7 +60,7 @@ - + @@ -77,5 +77,27 @@ + + + + + + + 微信好友 + + + + 生成海报 + + + + + + + + + + + \ No newline at end of file diff --git a/pages/index/searchbar/detail/index.wxss b/pages/index/searchbar/detail/index.wxss index 4af361b..1d36130 100644 --- a/pages/index/searchbar/detail/index.wxss +++ b/pages/index/searchbar/detail/index.wxss @@ -211,4 +211,12 @@ .intro{ font-size:30rpx; line-height: 36rpx; -} \ No newline at end of file +} +.user-motto { + width:118rpx; + background:none; + height:60rpx; + color:#fff; + border: none; +} +button::after{ border: none;}