Browse Source

选择商户样式修改

shopAdd
HolyKnightIX 2 years ago
parent
commit
a68fcef491
3 changed files with 55 additions and 32 deletions
  1. BIN
      assets/images/merchantImgCover.png
  2. +20
    -14
      components/shop/shop.wxml
  3. +35
    -18
      components/shop/shop.wxss

BIN
assets/images/merchantImgCover.png View File

Before After
Width: 200  |  Height: 200  |  Size: 8.3 KiB Width: 128  |  Height: 128  |  Size: 1.7 KiB

+ 20
- 14
components/shop/shop.wxml View File

@@ -1,31 +1,35 @@
<view class="components">
<view class="header">
<view class='applyshop'>适用门店</view>
<view class='applyshop'>{{"适用门店("+mallNum+"家)"}}</view>
<!-- <image src="../../assets/itemImg/chevron.png" mode="widthFix" class="rightArrow">
</image> -->
<view class="goShop">{{'共'+mallNum+'家门店适用'}}</view>
<!-- <view class="goShop">{{'共'+mallNum+'家门店适用'}}</view> -->
</view>
<view wx:for="{{list}}" wx:for-index="index" wx:key="index" class="body">
<view class="mall">
<image class="img" src="../../assets/images/merchantImgCover.png"></image>
<view class="mallItem">
<view class="title">{{item.mallName}}</view>
<view>
<image class="img" src="../../assets/images/merchantImgCover.png"></image>
<view class="mallItem">
<view class="title">{{item.mallName}}</view>
</view>
</view>
</view>

<!-- 当商户数量不大于三个时 -->
<view class="goExpand" catchtap="expandList" data-index="{{index}}">
<view>
<view>{{item.merchantVoList.length+'家门店适用'}}</view>
<image wx:if="{{!item.expand}}" src="../../assets/images/chevron.png" mode="widthFix" class="rightArrowDown">
</image>
<image wx:else src="../../assets/images/chevron.png" mode="widthFix" class="rightArrowUp"></image>
<!-- 当商户数量不大于三个时 -->
<view class="goExpand" catchtap="expandList" data-index="{{index}}">
<view>
<view class="text">{{item.merchantVoList.length+'家门店适用'}}</view>
<image wx:if="{{!item.expand}}" src="../../assets/images/chevron.png" mode="widthFix" class="rightArrowDown">
</image>
<image wx:else src="../../assets/images/chevron.png" mode="widthFix" class="rightArrowUp"></image>
</view>
</view>
</view>



<!-- 当item.expand为true且商户数量不大于三个时 -->
<view class="shop" wx:if="{{item.expand}}">
<view class='posi' wx:for="{{item.merchantVoList}}" wx:key="index">
<view class='posi' wx:for="{{item.merchantVoList}}" wx:for-index="itemIndex" wx:key="{{itemIndex}}">
<view class='posi_logo'>
<view bindtap='gotoDetail' data-id='{{item.id}}' data-tenantId='{{item.tenantId}}'>
<image class="img" src='{{item.merchantImgUrl}}'></image>
@@ -52,7 +56,9 @@
<view class="siteText">{{item.addr}}</view>
<image class="siteImg" src="../../assets/images/siteImg.png" mode="widthFix" />
</view>
<view class="dividerInside" wx:if="{{(itemIndex+1)<list[index].merchantVoList.length}}"></view>
</view>
</view>
<view class="divider" wx:if="{{(index+1)<list.length}}"></view>
</view>
</view>

+ 35
- 18
components/shop/shop.wxss View File

@@ -2,6 +2,7 @@
display: block;
height: auto;
margin-top: 15rpx;
margin-bottom: 15rpx;
background-color: #fff;
}

@@ -20,7 +21,7 @@
}

.components .header .goShop {
float: right;
float: left;
font-size: 22rpx;
height: 70rpx;
line-height: 70rpx;
@@ -53,40 +54,44 @@
}

.components .body .mall .img {
width: 120rpx;
height: 120rpx;
display: inline-block;
width: 75rpx;
height: 75rpx;
}

.components .body .mall .mallItem {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
top: -26rpx;
display: inline-block;
margin-left: 25rpx;
}

.components .body .mall .mallItem .title {
font-size: 35rpx;
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);
}
@@ -129,7 +134,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;
@@ -202,4 +207,16 @@
float: right;
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…
Cancel
Save