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-04 11:16:12 +08:00
parent 839a49f1c7
commit 11cfc1acfc
1 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/ShowShopListItem/ShowShopListItem.vue
View File

@@ -2,24 +2,28 @@
<view class="list-border"> <view class="list-border">
<view class="list-container"> <view class="list-container">
<view class="shop-list-img"> <view class="shop-list-img">
<u-image width="80px" height="80px" :src="imageUrl" radius="8px"></u-image> <u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image>
</view> </view>
<view class="text-area"> <view class="text-area">
<text>{{title}}</text> <text>{{shopInfo.title}}</text>
<view class="pos-and-sqr"> <view class="pos-and-sqr">
<text>锦江区</text> <view>
<text>200m2</text> <text>锦江区</text>
</view>
<view>
<text>200m2</text>
</view>
</view> </view>
<view class="rent-and-date"> <view class="rent-and-date">
<text>租金{{price}}</text> <text>租金：{{shopInfo.price}}元/月</text>
<text>发布日期{{date}}</text> <text>发布日期：{{shopInfo.date}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="list-ads" style="font-size: 14px;"> <view class="list-ads" style="font-size: 11px;">
<view> <view>
<text>已将该店推给 </text> <text>已将该店推给 </text>
<text style="color:#ce3b3b;margin: 0 4px;"> {{promotionNum}} </text> <text style="color:#ce3b3b;margin: 0 4px;"> {{shopInfo.promotionNum}} </text>
<text> 位潜在客户</text> <text> 位潜在客户</text>
</view> </view>
<text style="color:#ce3b3b">我也要推广>></text> <text style="color:#ce3b3b">我也要推广>></text>
@@ -30,24 +34,19 @@
<script> <script>
export default { export default {
props: { props: {
imageUrl: { shopInfo: {
type: String, type:Object,
default(){ default(){
return 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg' return {
imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
title: '琴行铺面转让',
promotionNum: 23,
price: 5000,
date: '2023-11-02'
}
} }
}, },
promotionNum:{
type:Number,
default(){
return 23
}
},
title:{
type:String,
default(){
return "琴行铺面转让"
}
}
}, },
data() { data() {
@@ -72,16 +71,30 @@
display: flex; display: flex;
height: 80px; height: 80px;
// background-color: #000; // background-color: #000;
margin-bottom: 5px; margin-bottom: 5px;
.shop-list-img { font-size: 12px;
// border-radius: 8px;
}
} }
.text-area { .text-area {
margin-left: 10px; margin-left: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; justify-content: space-between;
> text {
font-size: 14px;
}
.pos-and-sqr {
display: flex;
text {
margin-right: 6px;
color: #359867;
}
}
.rent-and-date {
text {
margin-right: 6px;
color: #CC3333;
}
}
} }
.list-ads { .list-ads {
border-top: 1px solid #f7f7f7; border-top: 1px solid #f7f7f7;