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

罗世杰：feat&fix：修复notice处的bug，完成商铺展示列表

Browse Source
This commit is contained in:
LuoShijie
2023-11-04 22:43:39 +08:00
parent b94ebd5486
commit 5010fb8538
11 changed files with 200 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
components/SearchShopListItem/SearchShopListItem.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<view class="list-border">
<view class="list-container">
<view class="text-area">
<text>{{shopInfo.title}}</text>
<view class="pos-and-sqr">
<view>
<text>{{shopInfo.sqr}}m2</text>
</view>
<view>
<text>{{shopInfo.uname}}</text>
</view>
<view>
<text>{{shopInfo.phoneNum}}</text>
</view>
</view>
<view class="rent-and-date">
<text>{{shopInfo.category}}</text>
<text>发布日期：{{shopInfo.pos}}</text>
<text>发布日期：{{shopInfo.date}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
shopInfo: {
type:Object,
default(){
return {
title: '寻找旺铺,200平米左右，寻找旺铺,200平米左右寻找旺铺,200平米左右寻找旺铺,200平米左右',
price: 5000,
date: '2023-11-02',
phoneNum: 13348946108,
pos: '锦江区',
category: '餐饮美食',
uname: '王先生',
sqr: 200
}
}
},
},
data() {
return {
}
},
computed: {
}
}
</script>
<style lang="scss">
.list-border {
margin: 10px 0;
padding: 10px;
background-color: #fff;
border-radius: 7px;
box-shadow: 0 1px 2px 0 rgba(224, 224, 224, 0.50);
.list-container {
display: flex;
height: 80px;
margin-bottom: 5px;
font-size: 12px;
}
.text-area {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
> text {
font-size: 14px;
}
.pos-and-sqr {
display: flex;
text {
margin-right: 24px;
color: #359867;
}
}
.rent-and-date {
text {
margin-right: 6px;
color: #CC3333;
}
}
}
.list-ads {
border-top: 1px solid #f7f7f7;
padding-top: 5px;
display: flex;
justify-content: space-between;
}
}
</style>

15
components/ShowShopList/ShowShopList.vue
View File

@@ -8,6 +8,9 @@
</template>
<script>
/**
* @property {Array} shopInfoList 对象数组，（带图片）需要展示的商铺列表
*/
export default {
name:"ShowShopList",
data() {
@@ -24,15 +27,19 @@
imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
title: '琴行铺面转让',
promotionNum: 23,
price: 5000,
date: '2023-11-02'
price: 6000,
date: '2023-11-02',
pos: '锦江区',
sqr: 100
},
{
imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
title: '琴行铺面转让',
promotionNum: 28,
price: 8000,
date: '2023-11-02'
price: 5000,
date: '2023-11-02',
pos: '锦江区',
sqr: 200
}
]
}

33
components/ShowShopListItem/ShowShopListItem.vue
View File

@@ -5,13 +5,19 @@
<u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image>
</view>
<view class="text-area">
<text>{{shopInfo.title}}</text>
<text style="font-weight: 500;">{{shopInfo.title}}</text>
<view class="pos-and-sqr">
<view>
<text>锦江区</text>
<view>
<u-image src="/static/shoplist/sy_icon_lbdw.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.pos}}</text>
</view>
<view>
<text>200m2</text>
<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 class="rent-and-date">
@@ -32,6 +38,9 @@
</template>
<script>
/**
* @property shopInfo {Object} 传入商铺对象数据
*/
export default {
props: {
shopInfo: {
@@ -42,7 +51,9 @@
title: '琴行铺面转让',
promotionNum: 23,
price: 5000,
date: '2023-11-02'
date: '2023-11-02',
pos: '锦江区',
sqr: 200
}
}
},
@@ -63,7 +74,7 @@
<style lang="scss" scoped>
.list-border {
margin-top: 10px;
margin: 10px 0;
padding: 10px;
background-color: #fff;
border-radius: 7px;
@@ -71,7 +82,7 @@
.list-container {
display: flex;
height: 80px;
margin-bottom: 5px;
margin-bottom: 10px;
font-size: 12px;
}
.text-area {
@@ -85,12 +96,20 @@
.pos-and-sqr {
display: flex;
text {
margin-right: 6px;
color: #359867;
line-height: 12px;
}
>view {
margin-right: 24px;
display: flex;
>view {
margin-right: 4px;
}
}
}
.rent-and-date {
text {
font-weight: 500;
margin-right: 6px;
color: #CC3333;
}