From 51a971d4268b1001432bc420d855d4263c6fb3c7 Mon Sep 17 00:00:00 2001 From: meo <18801474720@163.com> Date: Tue, 21 May 2019 14:55:49 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=88=B8=E8=AF=A6=E6=83=85][=E4=BF=AE?= =?UTF-8?q?=E6=94=B9]:[=E5=A4=B4=E9=83=A8=E7=9A=84banner=E5=9B=BE]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/banner/index.wxml | 12 +- components/banner/index.wxss | 99 +++++++------ pages/coupon/detail/index.js | 21 ++- pages/coupon/detail/index.wxml | 70 ++++++--- pages/coupon/detail/index.wxss | 255 +++++++++++++++++++++------------ pages/integralmall/index.wxss | 1 + 6 files changed, 287 insertions(+), 171 deletions(-) diff --git a/components/banner/index.wxml b/components/banner/index.wxml index 7913af9..84ea8d4 100644 --- a/components/banner/index.wxml +++ b/components/banner/index.wxml @@ -1,10 +1,14 @@ - - - + + - + + + + + + \ No newline at end of file diff --git a/components/banner/index.wxss b/components/banner/index.wxss index f93113e..5a5b252 100644 --- a/components/banner/index.wxss +++ b/components/banner/index.wxss @@ -1,52 +1,51 @@ -.index-slide-view{ - position: relative; - width: 750rpx; - height: 258rpx; - overflow: hidden; - margin:0 auto; - /* border-radius:16rpx; */ - /* box-shadow: 0 6px 20px 0 rgba(0,0,0,0.15); */ - } - .index-slide, - swiper-item +.index-slide-view { + position: relative; + width: 750rpx; + height: 258rpx; + overflow: hidden; + margin: 0 auto; + /* border-radius:16rpx; *//* box-shadow: 0 6px 20px 0 rgba(0,0,0,0.15); */ +} + +.index-slide, swiper-item .index-slide-image { - display: block; - width: 690rpx; - height: 258rpx; - margin: 0 auto; - border-radius:16rpx; - /* border-radius:16rpx; */ - overflow: hidden; - position: relative; + display: block; + width: 690rpx; + height: 258rpx; + margin: 0 auto; + border-radius: 16rpx; + overflow: hidden; + position: relative; +} + +.dots { + position: absolute; + left: 0; + right: 0; + bottom: 20rpx; + display: flex; + justify-content: center; +} + +.dot { + margin: 0 8rpx; + width: 14rpx; + height: 14rpx; + background: #fff; + border-radius: 8rpx; + transition: all 0.6s; +} + +.dot.active { + width: 24rpx; + background: #f80; +} + +.bannerbg { + width: 100%; +} - } - .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 .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%; - } \ No newline at end of file +.bannerbg image { + display: block; + width: 100%; +} diff --git a/pages/coupon/detail/index.js b/pages/coupon/detail/index.js index 31070c6..cd54ffe 100644 --- a/pages/coupon/detail/index.js +++ b/pages/coupon/detail/index.js @@ -18,6 +18,8 @@ Page({ wmhome: imgurl.wmhome.url, hidden: "hidden", height: "", + detailPicture:[], + coverPicture:[], more: "点击查看更多", showMore: true, data: { @@ -83,6 +85,11 @@ Page({ url: `/pages/index/detail/index?id=${e.currentTarget.dataset.id}` }) }, + swiperChange: function (e) { + this.setData({ + swiperCurrent: e.detail.current + }); + }, phone: function(e) { let that = this; wx.makePhoneCall({ @@ -376,7 +383,6 @@ Page({ that.setData({ onshow: false }) - if (options && options.couponChannelId){ that.getDetail(options.couponChannelId, 'notendclock'); } @@ -414,9 +420,17 @@ Page({ that.setData({ couponId: res.data.couponId }) - if (res.code == 200) { + that.setData({ + showPage: true + }) + if (res && res.data && res.data.detailPicture) { that.setData({ - showPage: true + detailPicture: JSON.parse(res.data.detailPicture) + }) + } + if (res && res.data && res.data.coverPicture) { + that.setData({ + coverPicture: JSON.parse(res.data.coverPicture) }) } /** @@ -474,6 +488,7 @@ Page({ that.setData({ data: res.data }); + if (that.data.data.merchantVoList && that.data.data.merchantVoList.length <= 4) { that.setData({ height: that.data.data.merchantVoList.length * 140 + 'rpx', diff --git a/pages/coupon/detail/index.wxml b/pages/coupon/detail/index.wxml index b9fad31..e35e0da 100644 --- a/pages/coupon/detail/index.wxml +++ b/pages/coupon/detail/index.wxml @@ -2,9 +2,21 @@ - + + + 适用门店 @@ -96,9 +114,11 @@ -
+ - + @@ -111,19 +131,21 @@
-
+ - - - + + +
- + @@ -135,9 +157,9 @@ {{questionnaire.title}} - + @@ -152,8 +174,12 @@ - - + + + + + + {{cardData.userName}} {{cardData.userName+'送您一张消费卡'}} 等待好友领取 diff --git a/pages/coupon/detail/index.wxss b/pages/coupon/detail/index.wxss index c2e803c..9800348 100644 --- a/pages/coupon/detail/index.wxss +++ b/pages/coupon/detail/index.wxss @@ -3,7 +3,11 @@ page { background: #fff; } -button::after{ border: none; } + +button::after { + border: none; +} + .coupons { width: 100%; position: relative; @@ -17,18 +21,49 @@ button::after{ border: none; } height: 534.5rpx; } +.banner swiper { + width: 750rpx; + height: 534.5rpx; +} + .banner image { width: 100%; height: 100%; } -.refound{ - border:1rpx solid red; - padding:3rpx 0; - display:block; - width:130rpx; - text-align:center; + +.dots { + position: absolute; + left: 0; + right: 0; + bottom: 50rpx; + display: flex; + justify-content: center; +} + +.dot { + margin: 0 8rpx; + width: 14rpx; + height: 14rpx; + background: #fff; + border-radius: 8rpx; + transition: all 0.6s; +} + +.dot.active { + width: 24rpx; + background: #f80; +} + + +.refound { + border: 1rpx solid red; + padding: 3rpx 0; + display: block; + width: 130rpx; + text-align: center; margin-left: 14rpx; } + .coupons_info { width: 92%; padding: 0 4%; @@ -138,12 +173,14 @@ button::after{ border: none; } font-size: 40rpx; color: #ff4949; letter-spacing: 0; - line-height:40rpx; + line-height: 40rpx; } -.use{ + +.use { color: #ff4949; margin-left: 10rpx; } + .salePriceStr .yuan { font-size: 24rpx; color: #ff4949; @@ -159,7 +196,7 @@ button::after{ border: none; } .throgh { text-decoration: line-through; margin-left: 10rpx; - color: #999!important; + color: #999 !important; } .fl { @@ -177,11 +214,11 @@ button::after{ border: none; } margin: 0 auto; } - /* .posi>view:nth-child(2) text:nth-child(1) { font-size: 30rpx; color: #a9a9a9; } */ + /* .posi>view:nth-child(2) text:nth-child(2) { font-size: 30rpx; @@ -197,8 +234,7 @@ button::after{ border: none; } } .posi_logo view:nth-child(1) { - /* width: 100rpx; */ - /* margin-right: 16rpx; */ + /* width: 100rpx; *//* margin-right: 16rpx; */ border-radius: 16rpx; /* height: 100rpx; */ } @@ -213,33 +249,35 @@ button::after{ border: none; } } .posi_logo view:nth-child(2) { - /* display: flex; */ - /* flex-direction: column; */ - /* flex: 8; */ + /* display: flex; *//* flex-direction: column; *//* flex: 8; */ height: 100rpx; /* padding-left: 30rpx; */ } + .posi_logo view:nth-child(2) text:nth-child(1) { font-size: 32rpx; color: #333; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; + overflow: hidden; } -.shopVoList{ - display: flex!important; - padding-left: 0!important; - flex-direction:row!important; + +.shopVoList { + display: flex !important; + padding-left: 0 !important; + flex-direction: row !important; } -.shopVoList text{ - font-size: 20rpx!important; - display: inline-block!important; + +.shopVoList text { + font-size: 20rpx !important; + display: inline-block !important; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - color: #b8b8b8!important; + color: #b8b8b8 !important; } + .notes view:nth-child(1) { height: 87rpx; line-height: 87rpx; @@ -289,7 +327,7 @@ button::after{ border: none; } .buy { position: relative; - background: #AF6E34 ; + background: #af6e34; height: 94rpx; width: 560rpx; margin: 0 auto 30rpx; @@ -298,18 +336,20 @@ button::after{ border: none; } line-height: 94rpx; border-radius: 61rpx; } -.goback{ + +.goback { position: relative; float: left; - width:122rpx!important; - height:95rpx; - background:rgba(255,255,255,1); + width: 122rpx !important; + height: 95rpx; + background: rgba(255, 255, 255, 1); line-height: 95rpx; - border:1px solid rgba(227,227,227,1); - border-radius:48rpx; + border: 1px solid rgba(227, 227, 227, 1); + border-radius: 48rpx; margin-left: 25rpx; } -.goback image{ + +.goback image { position: absolute; width: 70rpx; left: 0; @@ -487,8 +527,8 @@ button::after{ border: none; } .elecard { display: inline-block; margin-left: 6rpx; - color: #AF6E34 ; - border: 1px solid #AF6E34 ; + color: #af6e34; + border: 1px solid #af6e34; border-radius: 8rpx; font-style: normal; font-size: 30rpx; @@ -501,63 +541,72 @@ button::after{ border: none; } height: 70rpx; line-height: 70rpx; color: #333; - text-indent:1em; + text-indent: 1em; } -.btns{ + +.btns { /* padding: 0 33rpx; */ position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: 37rpx; - padding-top:37rpx; + padding-top: 37rpx; z-index: 100; background: #fff; } -.btns > button{ + +.btns > button { width: 277rpx; height: 95rpx; - border-radius:48rpx; + border-radius: 48rpx; text-align: center; } -.btns .fl{ + +.btns .fl { margin-left: 20rpx; color: #fff; - background:rgba(255,169,2,1); - box-shadow:0px 8px 8px 1px rgba(255,169,2,0.32); + background: rgba(255, 169, 2, 1); + box-shadow: 0px 8px 8px 1px rgba(255, 169, 2, 0.32); } -.btns .fl text{ + +.btns .fl text { display: block; font-size: 30rpx; line-height: 34rpx; } -.btns .fl text:nth-of-type(1){ + +.btns .fl text:nth-of-type(1) { margin-top: 12rpx; } -.btns .fr{ + +.btns .fr { font-size: 30rpx; color: #fff; margin-right: 20rpx; line-height: 95rpx; - background:rgba(236,59,45,1); - box-shadow:0px 8px 8px 1px rgba(246,93,51,0.32); + background: rgba(236, 59, 45, 1); + box-shadow: 0px 8px 8px 1px rgba(246, 93, 51, 0.32); } -.support-tansfer{ + +.support-tansfer { width: 60%; border-radius: 50rpx; margin-top: 30rpx; - background: #02C0FF!important; + background: #02c0ff !important; } -.shaddow{ + +.shaddow { z-index: 100; - position:fixed; - width:100%; - height:100%; - top:0px; - background:rgba(0,0,0,0.8); - overflow:hidden; -} -.alert-box{ + position: fixed; + width: 100%; + height: 100%; + top: 0px; + background: rgba(0, 0, 0, 0.8); + overflow: hidden; +} + +.alert-box { position: fixed; top: 200rpx; left: 10%; @@ -568,7 +617,8 @@ button::after{ border: none; } z-index: 200; border-radius: 20rpx; } -.user-img{ + +.user-img { position: absolute; top: -50rpx; left: 250rpx; @@ -580,11 +630,13 @@ button::after{ border: none; } background: #fff; overflow: hidden; } -.user-img image{ + +.user-img image { width: 100rpx; height: 100rpx; } -.close{ + +.close { position: absolute; z-index: 300; right: 0; @@ -593,22 +645,25 @@ button::after{ border: none; } height: 100rpx; overflow: hidden; } -.close image{ + +.close image { display: block; width: 26rpx; height: 26rpx; margin: 20rpx 0 0 52rpx; } -.a-title{ + +.a-title { text-align: center; margin-top: 76rpx; - font-size:36rpx; - font-family:PingFang-SC-Medium; - font-weight:500; - color:rgba(51,51,51,1); - line-height:44rpx; + font-size: 36rpx; + font-family: PingFang-SC-Medium; + font-weight: 500; + color: rgba(51, 51, 51, 1); + line-height: 44rpx; } -.a-img{ + +.a-img { position: relative; width: 80%; border-radius: 20rpx; @@ -617,7 +672,8 @@ button::after{ border: none; } text-align: center; margin: 30rpx auto 0; } -.a-received{ + +.a-received { position: absolute; width: 100%; height: 294rpx; @@ -626,33 +682,48 @@ button::after{ border: none; } text-align: center; line-height: 294rpx; z-index: 320; - background:rgba(255,255,255,1); - border:0px solid rgba(151,57,117,1); - opacity:0.91; - font-size:36rpx; - color:rgba(255,51,50,1); - font-family:PingFang-SC-Medium; -} -.a-img image{ + background: rgba(255, 255, 255, 1); + border: 0px solid rgba(151, 57, 117, 1); + opacity: 0.91; + font-size: 36rpx; + color: rgba(255, 51, 50, 1); + font-family: PingFang-SC-Medium; +} + +.a-img image { width: 100%; height: 100%; } -.bottom{ + +.bottom { text-align: center; height: 70rpx; line-height: 70rpx; color: #999; font-size: 32rpx; } -.presslimit{ - color:red; - font-size:26rpx; - letter-spacing:1.16rpx; - overflow:hidden; - white-space:nowrap; - text-overflow:ellipsis; -} -checkbox-group,radio-group{ - height:400rpx; - overflow-y:scroll; -} \ No newline at end of file + +.presslimit { + color: red; + font-size: 26rpx; + letter-spacing: 1.16rpx; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +checkbox-group, radio-group { + height: 400rpx; + overflow-y: scroll; +} + +.detailImg { + width: 92%; + margin: 0 auto; +} + +.detailImg image { + display: block; + width: 100%; + margin-bottom: 20rpx; +} diff --git a/pages/integralmall/index.wxss b/pages/integralmall/index.wxss index c0ecdfd..13cce66 100644 --- a/pages/integralmall/index.wxss +++ b/pages/integralmall/index.wxss @@ -102,6 +102,7 @@ image{ width: 180rpx; height: 180rpx; margin: 25rpx; + border-radius: 8rpx; } .content .spell-center{ float: left;