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