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