Browse Source

集团版商户显示#4

soldDate
HolyKnightIX 2 years ago
parent
commit
7ba488db44
4 changed files with 106 additions and 62 deletions
  1. +10
    -1
      components/shop/shop.js
  2. +47
    -27
      components/shop/shop.less
  3. +20
    -15
      components/shop/shop.ttml
  4. +29
    -19
      components/shop/shop.ttss

+ 10
- 1
components/shop/shop.js View File

@@ -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() {


+ 47
- 27
components/shop/shop.less View File

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

+ 20
- 15
components/shop/shop.ttml View File

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

+ 29
- 19
components/shop/shop.ttss View File

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

Loading…
Cancel
Save