| @@ -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; | |||
| } | |||