@@ -1,3 +1,5 @@ | |||
const imgurl = require("../../utils/imgurl"); | |||
Component({ | |||
properties: { | |||
mallList: { | |||
@@ -7,6 +9,7 @@ Component({ | |||
}, | |||
data: { | |||
telJpgUrl: imgurl.teljpg.url, | |||
list: [], // 广场、商户列表 | |||
mallNum: 0, // 适用商户数量 | |||
}, | |||
@@ -68,7 +71,13 @@ Component({ | |||
this.setData({ | |||
list: arr | |||
}) | |||
} | |||
}, | |||
phone(e) { | |||
tt.makePhoneCall({ | |||
phoneNumber: e.target.dataset.merchantlinkphone | |||
}); | |||
}, | |||
}, | |||
ready() { | |||
@@ -2,6 +2,7 @@ | |||
display: block; | |||
height: auto; | |||
margin-top: 15rpx; | |||
margin-bottom: 15rpx; | |||
background-color: #fff; | |||
.header { | |||
@@ -38,11 +39,14 @@ | |||
} | |||
.body { | |||
border-bottom: 10rpx solid #f4f5f9; | |||
// border-bottom: 10rpx solid #f4f5f9; | |||
.mall { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-top: 15rpx; | |||
margin-bottom: 15rpx; | |||
// margin-bottom: 15rpx; | |||
padding-left: 25rpx; | |||
padding-right: 65rpx; | |||
@@ -62,38 +66,42 @@ | |||
font-size: 28rpx; | |||
} | |||
} | |||
} | |||
.goExpand { | |||
text-align: center; | |||
font-size: 25rpx; | |||
color: #a6a6a6; | |||
.goExpand { | |||
font-size: 25rpx; | |||
color: #a6a6a6; | |||
.rightArrowDown { | |||
position: relative; | |||
left: 50%; | |||
transform: translate(-50%); | |||
display: block; | |||
width: 14rpx; | |||
transform: rotate(90deg); | |||
} | |||
.text { | |||
display: inline-block; | |||
margin-right: 20rpx; | |||
} | |||
.rightArrowUp { | |||
position: relative; | |||
left: 50%; | |||
transform: translate(-50%); | |||
display: block; | |||
width: 14rpx; | |||
transform: rotate(-90deg); | |||
.rightArrowDown { | |||
display: inline-block; | |||
position: relative; | |||
top: 5rpx; | |||
width: 14rpx; | |||
transform: rotate(90deg); | |||
} | |||
.rightArrowUp { | |||
display: inline-block; | |||
position: relative; | |||
top: 5rpx; | |||
width: 14rpx; | |||
transform: rotate(-90deg); | |||
} | |||
} | |||
} | |||
.shop { | |||
.posi { | |||
/* position: relative; */ | |||
width: 100%; | |||
background: #FFF; | |||
margin-bottom: 20rpx; | |||
margin-bottom: 5rpx; | |||
.posi_logo { | |||
position: relative; | |||
@@ -120,7 +128,7 @@ | |||
font-size: 32rpx; | |||
color: #333; | |||
letter-spacing: 0; | |||
width: 500rpx; | |||
width: 400rpx; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
@@ -129,7 +137,7 @@ | |||
.shopVoList { | |||
white-space: nowrap !important; | |||
overflow-y: scroll; | |||
height: 90rpx !important; | |||
height: 60rpx !important; | |||
width: 360rpx; | |||
font-size: 16px; | |||
color: #333; | |||
@@ -163,10 +171,10 @@ | |||
.certificationBox { | |||
position: absolute; | |||
right: 30rpx; | |||
right: 80rpx; | |||
top: 0; | |||
bottom: 0; | |||
margin: auto; | |||
// margin: auto; | |||
.certificationImg { | |||
width: 50rpx; | |||
@@ -204,7 +212,19 @@ | |||
height: 40rpx; | |||
} | |||
} | |||
.dividerInside { | |||
width: 100%; | |||
height: 5rpx; | |||
background-color: #DCDFE6; | |||
} | |||
} | |||
} | |||
.divider { | |||
width: 100%; | |||
height: 12rpx; | |||
background-color: #f4f5f9; | |||
} | |||
} | |||
} |
@@ -7,26 +7,29 @@ | |||
</view> | |||
<view tt:for="{{list}}" tt:for-index="index" tt:key="index" class="body"> | |||
<view class="mall"> | |||
<image class="img" src="../../assets/itemImg/merchantImgCover.png"></image> | |||
<view class="mallItem"> | |||
<view class="title">{{item.mallName}}</view> | |||
</view> | |||
</view> | |||
<!-- 当商户数量不大于三个时 --> | |||
<view class="goExpand" catchtap="expandList" data-index="{{index}}"> | |||
<view> | |||
<view>{{item.merchantVoList.length+'家门店适用'}}</view> | |||
<image tt:if="{{!item.expand}}" src="../../assets/itemImg/chevron.png" mode="widthFix" | |||
class="rightArrowDown"> | |||
</image> | |||
<image tt:else src="../../assets/itemImg/chevron.png" mode="widthFix" class="rightArrowUp"></image> | |||
<image class="img" src="../../assets/itemImg/merchantImgCover.png"></image> | |||
<view class="mallItem"> | |||
<view class="title">{{item.mallName}}</view> | |||
</view> | |||
</view> | |||
<!-- 当商户数量不大于三个时 --> | |||
<view class="goExpand" catchtap="expandList" data-index="{{index}}"> | |||
<view> | |||
<text class="text">{{item.merchantVoList.length+'家门店适用'}}</text> | |||
<image tt:if="{{!item.expand}}" src="../../assets/itemImg/chevron.png" mode="widthFix" | |||
class="rightArrowDown"> | |||
</image> | |||
<image tt:else src="../../assets/itemImg/chevron.png" mode="widthFix" class="rightArrowUp"></image> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 当item.expand为true且商户数量不大于三个时 --> | |||
<view class="shop" tt:if="{{item.expand}}"> | |||
<view class='posi' tt:for="{{item.merchantVoList}}" tt:key="index"> | |||
<view class='posi' tt:for="{{item.merchantVoList}}" tt:for-index="itemIndex" tt:key="{{itemIndex}}"> | |||
<view class='posi_logo'> | |||
<view bindtap='gotoDetail' data-id='{{item.id}}' data-tenantId='{{item.tenantId}}'> | |||
<image src='{{item.merchantImgUrl}}'></image> | |||
@@ -42,7 +45,7 @@ | |||
</view> | |||
<view class="telBox" tt:if="{{item.linkLinePhone}}"> | |||
<image bindtap='phone' data-merchantLinkPhone='{{item.linkLinePhone}}' class="telImg" | |||
src="{{teljpgUrl}}" mode="widthFix" /> | |||
src="{{telJpgUrl}}" mode="widthFix" /> | |||
<view class="telText">电话</view> | |||
</view> | |||
<view class="certificationBox" tt:if="{{item.latitude&&item.longitude}}" bindtap="goCertification" | |||
@@ -55,7 +58,9 @@ | |||
<view class="siteText">{{item.addr}}</view> | |||
<image class="siteImg" src="../../assets/imgData/siteImg.png" mode="widthFix" /> | |||
</view> | |||
<view class="dividerInside" tt:if="{{(itemIndex+1)<list[index].merchantVoList.length}}"></view> | |||
</view> | |||
</view> | |||
<view class="divider" tt:if="{{(index+1)<list.length}}"></view> | |||
</view> | |||
</view> |
@@ -2,6 +2,7 @@ | |||
display: block; | |||
height: auto; | |||
margin-top: 15rpx; | |||
margin-bottom: 15rpx; | |||
background-color: #fff; | |||
} | |||
.components .header { | |||
@@ -33,12 +34,11 @@ | |||
width: 14rpx; | |||
margin: 24rpx 30rpx 0 10rpx; | |||
} | |||
.components .body { | |||
border-bottom: 10rpx solid #f4f5f9; | |||
} | |||
.components .body .mall { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-top: 15rpx; | |||
margin-bottom: 15rpx; | |||
padding-left: 25rpx; | |||
padding-right: 65rpx; | |||
} | |||
@@ -56,24 +56,25 @@ | |||
.components .body .mall .mallItem .title { | |||
font-size: 28rpx; | |||
} | |||
.components .body .goExpand { | |||
text-align: center; | |||
.components .body .mall .goExpand { | |||
font-size: 25rpx; | |||
color: #a6a6a6; | |||
} | |||
.components .body .goExpand .rightArrowDown { | |||
.components .body .mall .goExpand .text { | |||
display: inline-block; | |||
margin-right: 20rpx; | |||
} | |||
.components .body .mall .goExpand .rightArrowDown { | |||
display: inline-block; | |||
position: relative; | |||
left: 50%; | |||
transform: translate(-50%); | |||
display: block; | |||
top: 5rpx; | |||
width: 14rpx; | |||
transform: rotate(90deg); | |||
} | |||
.components .body .goExpand .rightArrowUp { | |||
.components .body .mall .goExpand .rightArrowUp { | |||
display: inline-block; | |||
position: relative; | |||
left: 50%; | |||
transform: translate(-50%); | |||
display: block; | |||
top: 5rpx; | |||
width: 14rpx; | |||
transform: rotate(-90deg); | |||
} | |||
@@ -81,7 +82,7 @@ | |||
/* position: relative; */ | |||
width: 100%; | |||
background: #FFF; | |||
margin-bottom: 20rpx; | |||
margin-bottom: 5rpx; | |||
} | |||
.components .body .shop .posi .posi_logo { | |||
position: relative; | |||
@@ -103,7 +104,7 @@ | |||
font-size: 32rpx; | |||
color: #333; | |||
letter-spacing: 0; | |||
width: 500rpx; | |||
width: 400rpx; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
@@ -111,7 +112,7 @@ | |||
.components .body .shop .posi .posi_logo .shopVoList { | |||
white-space: nowrap !important; | |||
overflow-y: scroll; | |||
height: 90rpx !important; | |||
height: 60rpx !important; | |||
width: 360rpx; | |||
font-size: 16px; | |||
color: #333; | |||
@@ -140,10 +141,9 @@ | |||
} | |||
.components .body .shop .posi .posi_logo .certificationBox { | |||
position: absolute; | |||
right: 30rpx; | |||
right: 80rpx; | |||
top: 0; | |||
bottom: 0; | |||
margin: auto; | |||
} | |||
.components .body .shop .posi .posi_logo .certificationBox .certificationImg { | |||
width: 50rpx; | |||
@@ -175,3 +175,13 @@ | |||
width: 40rpx; | |||
height: 40rpx; | |||
} | |||
.components .body .shop .posi .dividerInside { | |||
width: 100%; | |||
height: 5rpx; | |||
background-color: #DCDFE6; | |||
} | |||
.components .body .divider { | |||
width: 100%; | |||
height: 12rpx; | |||
background-color: #f4f5f9; | |||
} |