odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

罗世杰：feat：商铺展示列表提供两种样式

Browse Source
This commit is contained in:
LuoShijie
2023-11-06 13:33:46 +08:00
parent fe193fff99
commit 7523e0e262
6 changed files with 122 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
components/ShowShopListItem/ShowShopListItem.vue
View File

@@ -6,27 +6,62 @@
</view>
<view class="text-area">
<text style="font-weight: 500;">{{shopInfo.title}}</text>
<view class="pos-and-sqr">
<view v-if="showStyle == 0" class="pos-and-sqr" >
<view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbdw.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.pos}}</text>
</view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.sqr}}m2</text>
<u-image src="/static/shoplist/sy_icon_lbdw.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.pos}}</text>
</view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.sqr}}m2</text>
</view>
</view>
<view v-else class="pos-and-sqr pos-only" >
<view>
<view>
<u-image src="/static/shoplist/dp_icon_hhhdw.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.exactPos}}</text>
</view>
</view>
<view class="rent-and-date">
<text>租金：{{shopInfo.price}}元/月</text>
<text>发布日期：{{shopInfo.date}}</text>
<text v-if="showStyle==0">发布日期：{{shopInfo.date}}</text>
<text v-else="showStyle==1 ">{{shopInfo.zrfText}}</text>
</view>
</view>
</view>
<view class="list-ads" style="font-size: 11px;">
<view class="cart-and-date" v-if="showStyle==1">
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.sqr}}m2</text>
</view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lblhy.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.category}}</text>
</view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbxm.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.uname}}</text>
</view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.phoneNum}}</text>
</view>
</view>
<view v-if="isADShow" class="list-ads" style="font-size: 11px;">
<view>
<text>已将该店推给 </text>
<text style="color:#ce3b3b;margin: 0 4px;"> {{shopInfo.promotionNum}} </text>
@@ -47,17 +82,22 @@
type:Object,
default(){
return {
imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
title: '琴行铺面转让',
promotionNum: 23,
price: 5000,
date: '2023-11-02',
pos: '锦江区',
sqr: 200
}
}
},
showStyle:{
type: Number,
default() {
return 1
}
},
isADShow: {
type: Boolean,
default() {
return true
}
}
},
data() {
@@ -79,11 +119,11 @@
background-color: #fff;
border-radius: 7px;
box-shadow: 0 1px 2px 0 rgba(224, 224, 224, 0.50);
font-size: 12px;
.list-container {
display: flex;
height: 80px;
margin-bottom: 10px;
font-size: 12px;
}
.text-area {
margin-left: 10px;
@@ -93,6 +133,7 @@
> text {
font-size: 14px;
}
.pos-and-sqr {
display: flex;
text {
@@ -107,6 +148,11 @@
}
}
}
.pos-only {
text {
color: #A0A0A0;
}
}
.rent-and-date {
text {
font-weight: 500;
@@ -115,6 +161,25 @@
}
}
}
.cart-and-date {
display: flex;
border-top: 1px solid #f7f7f7;
padding-top: 5px;
margin-bottom: 6px;
justify-content: space-between;
font-weight: 500;
text {
color: #359867;
line-height: 12px;
}
>view {
flex:1;
display: flex;
>view {
margin-right: 4px;
}
}
}
.list-ads {
border-top: 1px solid #f7f7f7;
padding-top: 5px;