@@ -7,9 +7,4 @@ | |||
</swiper-item> | |||
</block> | |||
</swiper> | |||
<!-- <view class="dots"> | |||
<block wx:for="{{list}}" wx:key="unique"> | |||
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> | |||
</block> | |||
</view> --> | |||
</view> |
@@ -76,6 +76,14 @@ Page({ | |||
countdown: "", | |||
showbutton1:false | |||
}, | |||
/** | |||
* 跳转到门店列表的详情页面 | |||
*/ | |||
gotoDetail(e) { | |||
wx.navigateTo({ | |||
url: `/pages/index/detail/index?id=${e.currentTarget.dataset.id}` | |||
}) | |||
}, | |||
phone: function(e) { | |||
let that = this; | |||
wx.makePhoneCall({ | |||
@@ -70,13 +70,17 @@ | |||
</view> | |||
<view class='applyshop'>适用门店</view> | |||
<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> | |||
<image src='{{item.merchantImgUrl}}'></image> | |||
</view> | |||
<view> | |||
<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> | |||
<image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | |||
</view> | |||
@@ -177,23 +177,19 @@ button::after{ border: none; } | |||
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; | |||
color: #a9a9a9; | |||
} | |||
} */ | |||
/* | |||
.posi>view:nth-child(2) text:nth-child(2) { | |||
font-size: 30rpx; | |||
color: #a9a9a9; | |||
} | |||
} */ | |||
.posi_logo { | |||
position: relative; | |||
width: 100%; | |||
display: flex; | |||
padding: 20rpx 0; | |||
@@ -201,9 +197,10 @@ button::after{ border: none; } | |||
} | |||
.posi_logo view:nth-child(1) { | |||
width: 100rpx; | |||
/* width: 100rpx; */ | |||
/* margin-right: 16rpx; */ | |||
border-radius: 16rpx; | |||
height: 100rpx; | |||
/* height: 100rpx; */ | |||
} | |||
.posi_logo view:nth-child(1) image { | |||
@@ -211,39 +208,38 @@ button::after{ border: none; } | |||
width: 100rpx; | |||
height: 100rpx; | |||
border-radius: 16rpx; | |||
margin-right: 16rpx; | |||
border: 1px solid #e5e5e5; | |||
} | |||
.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) { | |||
font-size: 32rpx; | |||
color: #333; | |||
letter-spacing: 0; | |||
height:55rpx; | |||
line-height:64rpx; | |||
white-space: nowrap; | |||
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; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
color: #b8b8b8!important; | |||
} | |||
.notes view:nth-child(1) { | |||
height: 87rpx; | |||
line-height: 87rpx; | |||
@@ -324,6 +320,7 @@ button::after{ border: none; } | |||
} | |||
.tel { | |||
position: absolute; | |||
right: 0; | |||
top: 0; | |||
bottom: 0; | |||
@@ -55,7 +55,7 @@ Page({ | |||
that.setData({ | |||
data: res.data.list[0], | |||
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 => { | |||
@@ -7,14 +7,11 @@ | |||
</swiper-item> | |||
</block> | |||
</swiper> | |||
<!-- <view class='merchant-detail'> | |||
<view>{{data.merchantName}}</view> | |||
</view> --> | |||
<view class='merchant-detail'> | |||
<!-- 品牌信息 --> | |||
<view class='merchant-brand'> | |||
<view> | |||
<image src='{{data.merchantImgUrl}}'></image> | |||
<image src='{{data.merchantImgUrl}}' mode='aspectFill'></image> | |||
</view> | |||
<view> | |||
<text>{{data.merchantName}}</text> | |||
@@ -22,25 +19,14 @@ | |||
</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> | |||
<view> | |||
<text>商户位置</text> | |||
</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> | |||
@@ -50,21 +36,21 @@ | |||
<text>联系商户</text> | |||
</view> | |||
<view> | |||
<view> | |||
<view style='display:block;text-align:right;margin-right:20rpx;'> | |||
<text>{{data.merchantLinkPhone}}</text> | |||
</view> | |||
<image bindtap='phone' data-merchantLinkPhone='{{data.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | |||
</view> | |||
</view> | |||
<!-- 商户简介 --> | |||
<view class='merchant-phone'> | |||
<view class='merchant-phones'> | |||
<view> | |||
<text>商户简介</text> | |||
</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> |
@@ -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 { | |||
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) { | |||
width:160rpx; | |||
border-radius:16rpx; | |||
height:160rpx; | |||
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; | |||
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; | |||
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; | |||
} | |||
.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; | |||
} | |||
.merchant-info{ | |||
padding:0 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; | |||
@@ -105,15 +116,30 @@ padding-left:30rpx; | |||
width: 50rpx; | |||
height: 50rpx; | |||
} | |||
.shoplists{ | |||
.shoplists { | |||
display: flex; | |||
} | |||
.shoplists text{ | |||
.shoplists text { | |||
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> | |||
<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> | |||
<image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" /> | |||
@@ -92,7 +92,7 @@ | |||
} | |||
.merchants view:nth-child(1) { | |||
width: 100rpx; | |||
/* width: 100rpx; */ | |||
/* height: 100rpx; */ | |||
border-radius: 16rpx; | |||
} | |||
@@ -106,13 +106,17 @@ | |||
} | |||
.merchants view:nth-child(2) { | |||
display: flex; | |||
/* display: flex; | |||
flex-direction: column; | |||
flex: 8; | |||
flex: 8; */ | |||
padding-left: 30rpx; | |||
} | |||
.shopVo{ | |||
display: flex; | |||
padding-left: 0!important; | |||
} | |||
.merchants view:nth-child(2) text:nth-child(1) { | |||
display: block; | |||
overflow: hidden; | |||
font-size: 32rpx; | |||
color: #333; | |||
@@ -356,4 +360,17 @@ page { | |||
} | |||
.all{ | |||
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; | |||
} |