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 00:08:37 +08:00
parent 79d26d70cf
commit 237f2451b8
19 changed files with 323 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/HomeNavCard/HomeNavCard.vue
View File

@@ -1,63 +0,0 @@
<template>
<view class="nav-card">
<u-grid :col="4">
<u-grid-item>
<u-icon name="photo" :size="30"></u-icon>
<view class="grid-text">图片</view>
</u-grid-item>
<u-grid-item>
<u-icon name="lock" :size="30"></u-icon>
<view class="grid-text">锁头</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
<u-grid-item>
<u-icon name="photo" :size="30"></u-icon>
<view class="grid-text">图片</view>
</u-grid-item>
<u-grid-item>
<u-icon name="lock" :size="30"></u-icon>
<view class="grid-text">锁头</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
</u-grid>
</view>
</template>
<script>
export default {
name:"HomeNavCard",
data() {
return {
};
}
}
</script>
<style lang="scss">
.nav-card {
margin: 15px 0px;
padding: 10px 0;
background-color: $uni-bg-color;
border-radius: $uni-border-radius-lg;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
.grid-text {
font-size: 14px;
}
}
</style>

55
components/SearchShopList/SearchShopList.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<view>
<SearchShopListItem
v-for="item in shopInfoList"
:shopInfo="item"
></SearchShopListItem>
</view>
</template>
<script>
/**
* @property {Array} shopInfoList 对象数组，（不带图片）需要展示的商铺列表
*/
export default {
name:"SearchShopList",
data() {
return {
};
},
props: {
shopInfoList: {
type: Array,
default() {
return [
{
title: '寻找旺铺,200平米左右，寻找旺铺,200平米左右寻找旺铺,200平米左右寻找旺铺,200平米左右',
price: 5000,
date: '2023-11-02',
phoneNum: 13348946108,
pos: '锦江区',
category: '餐饮美食',
uname: 'A先生',
sqr: 500
},
{
title: '寻找旺铺,200平米左右，寻找旺铺,200平米左右寻找旺铺,200平米左右寻找旺铺,200平米左右',
price: 7000,
date: '2023-11-02',
phoneNum: 13348946108,
pos: '锦江区',
category: '餐饮美食',
uname: '王先生',
sqr: 200
}
]
}
}
}
}
</script>
<style lang="scss">
</style>

89
components/SearchShopListItem/SearchShopListItem.vue
View File

@@ -4,24 +4,47 @@
<view class="text-area">
<text>{{shopInfo.title}}</text>
<view class="pos-and-sqr">
<view>
<view>
<text>{{shopInfo.sqr}}m2</text>
</view>
<view>
<text>{{shopInfo.uname}}</text>
</view>
<view>
<text>{{shopInfo.phoneNum}}</text>
<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_lbxm.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.uname}}</text>
</view>
<view style="flex:2">
<view>
<u-image src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.phoneNum}}</text>
</view>
</view>
<view class="cart-and-date">
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbhy.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.category}}</text>
</view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbhdw.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.pos}}</text>
</view>
<view style="flex:2">
<view>
<u-image src="/static/shoplist/sy_icon_lbrq.png" width="12px" height="15px"></u-image>
</view>
<text>发布日期：{{shopInfo.date}}</text>
</view>
<view class="rent-and-date">
<text>{{shopInfo.category}}</text>
<text>发布日期：{{shopInfo.pos}}</text>
<text>发布日期：{{shopInfo.date}}</text>
</view>
</view>
</view>
</view>
</template>
@@ -58,7 +81,7 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.list-border {
margin: 10px 0;
padding: 10px;
@@ -67,37 +90,51 @@
box-shadow: 0 1px 2px 0 rgba(224, 224, 224, 0.50);
.list-container {
display: flex;
height: 80px;
margin-bottom: 5px;
height: 90px;
font-size: 12px;
}
.text-area {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
> text {
font-size: 14px;
}
.pos-and-sqr {
>view {
display: flex;
>view {
flex:1;
display: flex;
>view {
margin-right: 4px;
}
}
}
.pos-and-sqr {
justify-content: space-between;
margin-top: 5px;
padding-bottom: 6px;
text {
margin-right: 24px;
color: #359867;
line-height: 12px;
}
>view {
display: flex;
>view {
margin-right: 4px;
}
}
}
.rent-and-date {
.cart-and-date {
border-top: 1px solid #f7f7f7;
padding-top: 5px;
justify-content: space-between;
font-weight: 500;
text {
margin-right: 6px;
color: #CC3333;
line-height: 12px;
}
}
}
.list-ads {
border-top: 1px solid #f7f7f7;
padding-top: 5px;
display: flex;
justify-content: space-between;
}
}
</style>