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}}
+
{{data.summary}}
@@ -91,13 +102,14 @@
-
+
-
+
+
\ 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