diff --git a/pages/index/searchbar/detail/index.js b/pages/index/searchbar/detail/index.js index 5eb85cc..5bfe860 100644 --- a/pages/index/searchbar/detail/index.js +++ b/pages/index/searchbar/detail/index.js @@ -11,39 +11,39 @@ Page({ teljpgUrl: imgurl.teljpg.url, share01: imgurl.share01.url, actUrl: imgurl.act.url, - poster: './../../../../assets/images/picture.png', + poster:'./../../../../assets/images/picture.png', page: 1, - imglist: null, - shopVoList: [], - couponList: [],//活动劵列表 - data: { + 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 - }) - }, + /** + * 分享海报的生成 + */ + //关闭海报 + closePoste: function() { + this.setData({ + showpost: false + }) + }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { - let that = this; - if (options && options.id) { + let that=this; + if (options && options.id){ this.setData({ id: options.id }); @@ -54,8 +54,8 @@ Page({ }) } // 获取到屏幕的宽高等信息 - wx.getSystemInfo({ - success: function (res) { + wx.getSystemInfo({ + success: function(res) { that.setData({ windowWidth: res.windowWidth, windowHeight: res.windowHeight @@ -70,8 +70,8 @@ Page({ var that = this // 适配屏幕 let scale = this.data.windowWidth / 375.0 - - this.setData({ totalHeight: 767 * scale }) + + this.setData({ totalHeight: 767* scale}) // 获取Canvas let ctx = wx.createCanvasContext('myCanvas') @@ -89,8 +89,8 @@ Page({ 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) + 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) @@ -98,7 +98,7 @@ Page({ ctx.draw(true) that.drawOtherContent(ctx, scale) - that.drawOtherImage(ctx, scale) + that.drawOtherImage(ctx,scale) } }) }, @@ -118,7 +118,7 @@ Page({ // 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.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); @@ -133,30 +133,30 @@ Page({ 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) { + 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) + success: function(res) { + ctx.drawImage(res.path, 0, 0, coImageWidth, coImageHeight) ctx.draw(true) } }) @@ -190,7 +190,7 @@ Page({ maxWidth: 文本最大宽度 row: 最大行数 */ - canvasTextAutoLine: function (str, ctx, initX, initY, lineHeight, maxWidth, row = 1) { + canvasTextAutoLine: function(str, ctx, initX, initY, lineHeight, maxWidth, row = 1) { var lineWidth = 0; var lastSubStrIndex = 0; var currentRow = 1; @@ -216,16 +216,16 @@ Page({ } } }, - // 保存图片 - saveImage() { - var _this = this - var image = _this.data.poster + // 保存图片 + 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 @@ -245,9 +245,9 @@ Page({ content: '图片保存成功,请到相册查找分享', success(res) { if (res.confirm) { - + } else if (res.cancel) { - + } } }) @@ -286,45 +286,45 @@ Page({ }) }, - /** - * 获取access_token - */ - getaccess_token: function (access_token) { + /** + * 获取access_token + */ + getaccess_token:function(access_token){ wx.request({ - url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token, + 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"} 十进制表示 + 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); + success:function(res){ + console.log(res); } - }) - }, - /** - * 拨打电话 - */ + }) + }, + /** + * 拨打电话 + */ phone: function (e) { let that = this; wx.makePhoneCall({ phoneNumber: e.target.dataset.merchantlinkphone }); }, - /** - * 显示分享弹框 - */ - showshare: function () { + /** + * 显示分享弹框 + */ + showshare:function(){ this.setData({ - isshare: true + isshare:true, }) }, - /** -* 隐藏分享弹框 -*/ - hidemodal: function () { + /** + * 隐藏分享弹框 + */ + hidemodal:function(){ this.setData({ isshare: false, }) @@ -335,18 +335,18 @@ Page({ currentTab: e.detail.current }); }, - /** -* 隐藏分享海报 -*/ - hideposter: function () { + /** + * 隐藏分享海报 + */ + hideposter:function(){ this.setData({ showpost: false, }) }, - /** -* 显示分享海报 -*/ - showPoster: function () { + /** + * 显示分享海报 + */ + showPoster:function(){ this.setData({ showpost: true, }) @@ -368,11 +368,11 @@ Page({ getList: function (id) { let that = this; let data; - data = { - pageNum: that.data.page, - pageSize: 15, - id: id - } + data = { + pageNum: that.data.page, + pageSize: 15, + id:id + } Http.get({ url: config.api.merchantList, data: data @@ -400,8 +400,8 @@ Page({ let that = this; let data; data = { - status: 0, - merchantId: id, + status:0, + merchantId:id, pageNum: that.data.page, pageSize: 15, } @@ -425,7 +425,7 @@ Page({ /** * 获取多商铺列表 */ - shopList: function (e) { + shopList:function(e){ wx.navigateTo({ url: `/pages/index/merchantList/index?id=${e.currentTarget.dataset.id}` }) diff --git a/pages/index/searchbar/detail/index.json b/pages/index/searchbar/detail/index.json index 1399980..a6f2974 100644 --- a/pages/index/searchbar/detail/index.json +++ b/pages/index/searchbar/detail/index.json @@ -4,6 +4,6 @@ "enablePullDownRefresh": true, "usingComponents": { "c-banner": "../../../../components/banner/index", - "c-coupons": "../../../../components/coupons/index" + "c-coupons": "../../../../components/merchantcoupons/index" } } \ No newline at end of file diff --git a/pages/index/searchbar/detail/index.wxml b/pages/index/searchbar/detail/index.wxml index e05a8d7..c9397b6 100644 --- a/pages/index/searchbar/detail/index.wxml +++ b/pages/index/searchbar/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}} + @@ -47,30 +48,40 @@ - - 商家简介 - - - {{data.summary}} - 信息完善中,敬请期待。 - - + - 优惠信息 + + 优惠信息 + + + 商家简介 + - - - + + + + + + + + + + 请您敬请期待 + 我们正在筹备一大波优惠活动 + + + + {{content}} + + {{loadingtext}} - - - 请您敬请期待 - 我们正在筹备一大波优惠活动 + + + {{data.summary}} + {{"信息完善中,敬请期待。"}} - - {{content}} - {{loadingtext}} + - + - - - - - + + + + + + \ No newline at end of file diff --git a/pages/index/searchbar/detail/index.wxss b/pages/index/searchbar/detail/index.wxss index 1d36130..b050b17 100644 --- a/pages/index/searchbar/detail/index.wxss +++ b/pages/index/searchbar/detail/index.wxss @@ -108,7 +108,6 @@ padding: 20rpx 0; display: block; font-size: 30rpx; - border-top: 1rpx solid #efefef; } .tel { right: 0; @@ -165,13 +164,12 @@ flex-flow: row; height: 88rpx; line-height: 88rpx; - margin-left: -30rpx; + margin-bottom: 20rpx; } .swiper-tab-item { color: #434343; font-size: 30rpx; - padding-left:30rpx; - margin-right:30rpx; + margin-right:50rpx; } .active-tab { color: #1693FC; @@ -190,6 +188,18 @@ 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; @@ -208,15 +218,91 @@ vertical-align: middle; margin-right: 10rpx; } -.intro{ - font-size:30rpx; - line-height: 36rpx; +.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%; 分享图不显示在页面上面,就将画布设置在页面之外*/ } -.user-motto { - width:118rpx; - background:none; - height:60rpx; - color:#fff; - border: none; + +.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); } -button::after{ border: none;} + +.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