| @@ -7,9 +7,4 @@ | |||||
| </swiper-item> | </swiper-item> | ||||
| </block> | </block> | ||||
| </swiper> | </swiper> | ||||
| <!-- <view class="dots"> | |||||
| <block wx:for="{{list}}" wx:key="unique"> | |||||
| <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> | |||||
| </block> | |||||
| </view> --> | |||||
| </view> | </view> | ||||
| @@ -76,6 +76,14 @@ Page({ | |||||
| countdown: "", | countdown: "", | ||||
| showbutton1:false | showbutton1:false | ||||
| }, | }, | ||||
| /** | |||||
| * 跳转到门店列表的详情页面 | |||||
| */ | |||||
| gotoDetail(e) { | |||||
| wx.navigateTo({ | |||||
| url: `/pages/index/detail/index?id=${e.currentTarget.dataset.id}` | |||||
| }) | |||||
| }, | |||||
| phone: function(e) { | phone: function(e) { | ||||
| let that = this; | let that = this; | ||||
| wx.makePhoneCall({ | wx.makePhoneCall({ | ||||
| @@ -70,13 +70,17 @@ | |||||
| </view> | </view> | ||||
| <view class='applyshop'>适用门店</view> | <view class='applyshop'>适用门店</view> | ||||
| <view class='posi' style='overflow:{{hidden}};height:{{height}}'> | <view class='posi' style='overflow:{{hidden}};height:{{height}}'> | ||||
| <view class='posi_logo' wx:for="{{data.merchantVoList}}" wx:key="index"> | |||||
| <view class='posi_logo' wx:for="{{data.merchantVoList}}" wx:key="index" bindtap='gotoDetail' data-id='{{item.id}}'> | |||||
| <view> | <view> | ||||
| <image src='{{item.merchantImgUrl}}'></image> | <image src='{{item.merchantImgUrl}}'></image> | ||||
| </view> | </view> | ||||
| <view> | <view> | ||||
| <text>{{item.merchantName}}</text> | <text>{{item.merchantName}}</text> | ||||
| <text>{{item.addr}}{{item.buildingName}}{{item.floorName}}</text> | |||||
| <view class='shopVoList'> | |||||
| <view wx:for="{{item.shopVoList}}" wx:key="{{index}}" wx:for-item="itemName"> | |||||
| <text>{{itemName.shopNumber}}{{itemName.buildingName}}{{itemName.floorName}}</text><text class='douhao' wx:if="{{item.shopVoList.length>1}}">,</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | </view> | ||||
| <image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | <image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | ||||
| </view> | </view> | ||||
| @@ -177,23 +177,19 @@ button::after{ border: none; } | |||||
| margin: 0 auto; | margin: 0 auto; | ||||
| } | } | ||||
| .posi>view:nth-child(2) { | |||||
| width: 100%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| } | |||||
| .posi>view:nth-child(2) text:nth-child(1) { | |||||
| /* .posi>view:nth-child(2) text:nth-child(1) { | |||||
| font-size: 30rpx; | font-size: 30rpx; | ||||
| color: #a9a9a9; | color: #a9a9a9; | ||||
| } | |||||
| } */ | |||||
| /* | |||||
| .posi>view:nth-child(2) text:nth-child(2) { | .posi>view:nth-child(2) text:nth-child(2) { | ||||
| font-size: 30rpx; | font-size: 30rpx; | ||||
| color: #a9a9a9; | color: #a9a9a9; | ||||
| } | |||||
| } */ | |||||
| .posi_logo { | .posi_logo { | ||||
| position: relative; | |||||
| width: 100%; | width: 100%; | ||||
| display: flex; | display: flex; | ||||
| padding: 20rpx 0; | padding: 20rpx 0; | ||||
| @@ -201,9 +197,10 @@ button::after{ border: none; } | |||||
| } | } | ||||
| .posi_logo view:nth-child(1) { | .posi_logo view:nth-child(1) { | ||||
| width: 100rpx; | |||||
| /* width: 100rpx; */ | |||||
| /* margin-right: 16rpx; */ | |||||
| border-radius: 16rpx; | border-radius: 16rpx; | ||||
| height: 100rpx; | |||||
| /* height: 100rpx; */ | |||||
| } | } | ||||
| .posi_logo view:nth-child(1) image { | .posi_logo view:nth-child(1) image { | ||||
| @@ -211,39 +208,38 @@ button::after{ border: none; } | |||||
| width: 100rpx; | width: 100rpx; | ||||
| height: 100rpx; | height: 100rpx; | ||||
| border-radius: 16rpx; | border-radius: 16rpx; | ||||
| margin-right: 16rpx; | |||||
| border: 1px solid #e5e5e5; | border: 1px solid #e5e5e5; | ||||
| } | } | ||||
| .posi_logo view:nth-child(2) { | .posi_logo view:nth-child(2) { | ||||
| display: flex; | |||||
| flex-direction: column; | |||||
| flex: 8; | |||||
| padding-left: 30rpx; | |||||
| /* display: flex; */ | |||||
| /* flex-direction: column; */ | |||||
| /* flex: 8; */ | |||||
| height: 100rpx; | |||||
| /* padding-left: 30rpx; */ | |||||
| } | } | ||||
| .posi_logo view:nth-child(2) text:nth-child(1) { | .posi_logo view:nth-child(2) text:nth-child(1) { | ||||
| font-size: 32rpx; | font-size: 32rpx; | ||||
| color: #333; | color: #333; | ||||
| letter-spacing: 0; | letter-spacing: 0; | ||||
| height:55rpx; | |||||
| line-height:64rpx; | |||||
| white-space: nowrap; | white-space: nowrap; | ||||
| text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
| overflow: hidden; | |||||
| overflow: hidden; | |||||
| } | } | ||||
| .posi_logo view:nth-child(2) text:nth-child(2) { | |||||
| font-size: 24rpx; | |||||
| color: #b8b8b8; | |||||
| padding-top: 3rpx; | |||||
| width: 450rpx; | |||||
| height:41rpx; | |||||
| line-height:40rpx; | |||||
| .shopVoList{ | |||||
| display: flex!important; | |||||
| padding-left: 0!important; | |||||
| flex-direction:row!important; | |||||
| } | |||||
| .shopVoList text{ | |||||
| font-size: 20rpx!important; | |||||
| display: inline-block!important; | |||||
| white-space: nowrap; | white-space: nowrap; | ||||
| text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| color: #b8b8b8!important; | |||||
| } | } | ||||
| .notes view:nth-child(1) { | .notes view:nth-child(1) { | ||||
| height: 87rpx; | height: 87rpx; | ||||
| line-height: 87rpx; | line-height: 87rpx; | ||||
| @@ -324,6 +320,7 @@ button::after{ border: none; } | |||||
| } | } | ||||
| .tel { | .tel { | ||||
| position: absolute; | |||||
| right: 0; | right: 0; | ||||
| top: 0; | top: 0; | ||||
| bottom: 0; | bottom: 0; | ||||
| @@ -55,7 +55,7 @@ Page({ | |||||
| that.setData({ | that.setData({ | ||||
| data: res.data.list[0], | data: res.data.list[0], | ||||
| shopVoList: res.data.list[0].shopVoList, | shopVoList: res.data.list[0].shopVoList, | ||||
| imglist: JSON.parse(res.data.list[0].coverPicture), | |||||
| imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl, | |||||
| }) | }) | ||||
| }) | }) | ||||
| .catch(err => { | .catch(err => { | ||||
| @@ -7,14 +7,11 @@ | |||||
| </swiper-item> | </swiper-item> | ||||
| </block> | </block> | ||||
| </swiper> | </swiper> | ||||
| <!-- <view class='merchant-detail'> | |||||
| <view>{{data.merchantName}}</view> | |||||
| </view> --> | |||||
| <view class='merchant-detail'> | <view class='merchant-detail'> | ||||
| <!-- 品牌信息 --> | <!-- 品牌信息 --> | ||||
| <view class='merchant-brand'> | <view class='merchant-brand'> | ||||
| <view> | <view> | ||||
| <image src='{{data.merchantImgUrl}}'></image> | |||||
| <image src='{{data.merchantImgUrl}}' mode='aspectFill'></image> | |||||
| </view> | </view> | ||||
| <view> | <view> | ||||
| <text>{{data.merchantName}}</text> | <text>{{data.merchantName}}</text> | ||||
| @@ -22,25 +19,14 @@ | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| <!-- 一个商铺 --> | <!-- 一个商铺 --> | ||||
| <!-- <view class='merchant-shop' wx:if="{{shopVoList.length==1}}"> | |||||
| <view> | |||||
| <text>商户位置</text> | |||||
| </view> | |||||
| <view> | |||||
| <text>{{shopVoList[0].buildingName}} {{shopVoList[0].floorName}} {{shopVoList[0].shopNumber}}</text> | |||||
| <text></text> | |||||
| </view> | |||||
| </view> --> | |||||
| <!-- 多个商铺 --> | <!-- 多个商铺 --> | ||||
| <view class='merchant-shop'> | <view class='merchant-shop'> | ||||
| <view> | <view> | ||||
| <view> | <view> | ||||
| <text>商户位置</text> | <text>商户位置</text> | ||||
| </view> | </view> | ||||
| <view> | |||||
| <text wx:if="{{shopVoList.length==1}}">{{shopVoList[0].buildingName}} {{shopVoList[0].floorName}} {{shopVoList[0].shopNumber}}</text> | |||||
| <text wx:else>{{shopVoList[0].buildingName}} {{shopVoList[0].floorName}} {{shopVoList[0].shopNumber}}..</text> | |||||
| <text wx:if="{{shopVoList.length!=1}}" class='godetail' data-id='{{data.id}}' bindtap='shopList'>详情 ></text> | |||||
| <view class='merchants'> | |||||
| <text wx:for="{{shopVoList}}" wx:key="{{index}}">{{item.buildingName}} {{item.floorName}} {{item.shopNumber}}</text> | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| @@ -50,21 +36,21 @@ | |||||
| <text>联系商户</text> | <text>联系商户</text> | ||||
| </view> | </view> | ||||
| <view> | <view> | ||||
| <view> | |||||
| <view style='display:block;text-align:right;margin-right:20rpx;'> | |||||
| <text>{{data.merchantLinkPhone}}</text> | <text>{{data.merchantLinkPhone}}</text> | ||||
| </view> | </view> | ||||
| <image bindtap='phone' data-merchantLinkPhone='{{data.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | <image bindtap='phone' data-merchantLinkPhone='{{data.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | ||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| <!-- 商户简介 --> | <!-- 商户简介 --> | ||||
| <view class='merchant-phone'> | |||||
| <view class='merchant-phones'> | |||||
| <view> | <view> | ||||
| <text>商户简介</text> | <text>商户简介</text> | ||||
| </view> | </view> | ||||
| </view> | |||||
| <view class='merchant-info'> | |||||
| <text wx:if="{{data.summary}}">{{data.summary}}</text> | |||||
| <text wx:else>{{"信息完善中,敬请期待。"}}</text> | |||||
| <view class='merchant-info'> | |||||
| <text wx:if="{{data.summary}}">{{data.summary}}</text> | |||||
| <text wx:else>{{"信息完善中,敬请期待。"}}</text> | |||||
| </view> | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| @@ -1,102 +1,113 @@ | |||||
| /* pages/index/detail/index.wxss */ | |||||
| .index-slide-view{ | |||||
| position: relative; | |||||
| width: 750rpx; | |||||
| height: 260rpx; | |||||
| overflow: hidden; | |||||
| /* margin:-132rpx auto 0; */ | |||||
| border-radius:16rpx; | |||||
| box-shadow: 0 6px 20px 0 rgba(0,0,0,0.15); | |||||
| } | |||||
| .index-slide, | |||||
| swiper-item | |||||
| .index-slide, swiper-item | |||||
| .index-slide-image { | .index-slide-image { | ||||
| display: block; | |||||
| width: 750rpx; | |||||
| height: 560rpx; | |||||
| margin: 0 auto; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| } | |||||
| .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%; | |||||
| } | |||||
| .merchant-detail{ | |||||
| width: 92%; | |||||
| margin: 0 auto; | |||||
| } | |||||
| .merchant-brand,.merchant-shop,.merchant-phone{ | |||||
| width:100%; | |||||
| display:flex; | |||||
| padding:20rpx 0; | |||||
| background:#fff; | |||||
| } | |||||
| display: block; | |||||
| width: 750rpx; | |||||
| margin: 0 auto; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| } | |||||
| .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) { | .merchant-brand view:nth-child(1) { | ||||
| width:160rpx; | |||||
| border-radius:16rpx; | |||||
| height:160rpx; | |||||
| width: 160rpx; | |||||
| border-radius: 16rpx; | |||||
| height: 160rpx; | |||||
| } | } | ||||
| .merchant-brand view:nth-child(1) image { | .merchant-brand view:nth-child(1) image { | ||||
| display:block; | |||||
| width:160rpx; | |||||
| height:160rpx; | |||||
| border-radius:16rpx; | |||||
| border:1px solid #e5e5e5; | |||||
| display: block; | |||||
| width: 160rpx; | |||||
| height: 160rpx; | |||||
| border-radius: 16rpx; | |||||
| border: 1px solid #e5e5e5; | |||||
| } | } | ||||
| .merchant-brand view:nth-child(2) { | .merchant-brand view:nth-child(2) { | ||||
| display:flex; | |||||
| flex-direction:column; | |||||
| flex:6; | |||||
| padding-left:30rpx; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| flex: 6; | |||||
| padding-left: 30rpx; | |||||
| } | } | ||||
| .merchant-brand view:nth-child(2) text:nth-child(1){ | |||||
| .merchant-brand view:nth-child(2) text:nth-child(1) { | |||||
| margin-top: 20rpx; | margin-top: 20rpx; | ||||
| } | } | ||||
| .merchant-shop,.merchant-phone{ | |||||
| height: 60rpx; | |||||
| line-height: 60rpx; | |||||
| .merchant-shop text, .merchant-phone text { | |||||
| font-size: 30rpx; | |||||
| } | } | ||||
| .merchant-shop view,.merchant-phone view{ | |||||
| display:flex; | |||||
| flex: 4; | |||||
| color:#333; | |||||
| .merchant-shop view, .merchant-phone view { | |||||
| display: flex; | |||||
| flex: 4; | |||||
| color: #333; | |||||
| } | } | ||||
| .merchant-shop view:nth-child(2),.merchant-phone view:nth-child(2){ | |||||
| .merchant-shop view:nth-child(2), .merchant-phone view:nth-child(2) { | |||||
| font-size: 30rpx; | font-size: 30rpx; | ||||
| } | } | ||||
| .merchant-info{ | |||||
| padding:0 30rpx; | |||||
| .merchant-info { | |||||
| display: block!important; | |||||
| color: #999; | |||||
| font-size: 28rpx; | font-size: 28rpx; | ||||
| } | } | ||||
| .merchant-phones{ | |||||
| padding: 20rpx 0; | |||||
| display: block; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .tel { | .tel { | ||||
| right: 0; | right: 0; | ||||
| top: 0; | top: 0; | ||||
| @@ -105,15 +116,30 @@ padding-left:30rpx; | |||||
| width: 50rpx; | width: 50rpx; | ||||
| height: 50rpx; | height: 50rpx; | ||||
| } | } | ||||
| .shoplists{ | |||||
| .shoplists { | |||||
| display: flex; | display: flex; | ||||
| } | } | ||||
| .shoplists text{ | |||||
| .shoplists text { | |||||
| flex: 2; | flex: 2; | ||||
| } | } | ||||
| .godetail{ | |||||
| color:#999999; | |||||
| font-size:30rpx; | |||||
| position: absolute; | |||||
| right: 10rpx; | |||||
| .godetail { | |||||
| color: #999; | |||||
| font-size: 30rpx; | |||||
| position: absolute; | |||||
| right: 10rpx; | |||||
| } | |||||
| .merchants text{ | |||||
| display: block; | |||||
| text-align: right; | |||||
| height: 50rpx; | |||||
| line-height: 50rpx; | |||||
| } | |||||
| .merchants{ | |||||
| display: block!important; | |||||
| } | |||||
| .merchant-brand{ | |||||
| border: none!important; | |||||
| } | } | ||||
| @@ -24,7 +24,11 @@ | |||||
| </view> | </view> | ||||
| <view> | <view> | ||||
| <text>{{item.merchantName}}</text> | <text>{{item.merchantName}}</text> | ||||
| <text>{{item.buildingName}}{{item.floorName}}</text> | |||||
| <view class='shopVo'> | |||||
| <view class='shopVoList' wx:for="{{item.shopVoList}}" wx:key="{{index}}" wx:for-item="itemName"> | |||||
| <text>{{itemName.shopNumber}}{{itemName.buildingName}}{{itemName.floorName}}</text><text class='douhao' wx:if="{{item.shopVoList.length>1}}">,</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| <image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | <image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | ||||
| @@ -92,7 +92,7 @@ | |||||
| } | } | ||||
| .merchants view:nth-child(1) { | .merchants view:nth-child(1) { | ||||
| width: 100rpx; | |||||
| /* width: 100rpx; */ | |||||
| /* height: 100rpx; */ | /* height: 100rpx; */ | ||||
| border-radius: 16rpx; | border-radius: 16rpx; | ||||
| } | } | ||||
| @@ -106,13 +106,17 @@ | |||||
| } | } | ||||
| .merchants view:nth-child(2) { | .merchants view:nth-child(2) { | ||||
| display: flex; | |||||
| /* display: flex; | |||||
| flex-direction: column; | flex-direction: column; | ||||
| flex: 8; | |||||
| flex: 8; */ | |||||
| padding-left: 30rpx; | padding-left: 30rpx; | ||||
| } | } | ||||
| .shopVo{ | |||||
| display: flex; | |||||
| padding-left: 0!important; | |||||
| } | |||||
| .merchants view:nth-child(2) text:nth-child(1) { | .merchants view:nth-child(2) text:nth-child(1) { | ||||
| display: block; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| font-size: 32rpx; | font-size: 32rpx; | ||||
| color: #333; | color: #333; | ||||
| @@ -356,4 +360,17 @@ page { | |||||
| } | } | ||||
| .all{ | .all{ | ||||
| padding-bottom: 80rpx; | padding-bottom: 80rpx; | ||||
| } | |||||
| .shopVoList{ | |||||
| display: flex!important; | |||||
| padding-left: 0!important; | |||||
| flex-direction:row!important; | |||||
| } | |||||
| .shopVoList text{ | |||||
| font-size: 20rpx!important; | |||||
| display: inline-block!important; | |||||
| white-space: nowrap; | |||||
| text-overflow: ellipsis; | |||||
| overflow: hidden; | |||||
| color: #b8b8b8!important; | |||||
| } | } | ||||