Преглед изворни кода

集团版商户显示#4

soldDate
HolyKnightIX пре 2 година
родитељ
комит
7ba488db44
4 измењених фајлова са 106 додато и 62 уклоњено
  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 Прегледај датотеку

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


+ 47
- 27
components/shop/shop.less Прегледај датотеку

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

+ 20
- 15
components/shop/shop.ttml Прегледај датотеку

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

+ 29
- 19
components/shop/shop.ttss Прегледај датотеку

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

Loading…
Откажи
Сачувај