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-02 22:49:10 +08:00
parent 3e81148948
commit 839a49f1c7
5 changed files with 123 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/HomeNavCard/HomeNavCard.vue Normal file
View File

@@ -0,0 +1,63 @@
<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 7px;
padding: 10px 0;
background-color: $uni-bg-color;
border-radius: $uni-border-radius-lg;
box-shadow: 0 3px 3px 0 $u-border-color;
.grid-text {
font-size: 14px;
}
}
</style>

67
components/ShowShopListItem/ShowShopListItem.vue
View File

@@ -2,14 +2,29 @@
<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" border-radius='6px'></u-image> <u-image width="80px" height="80px" :src="imageUrl" radius="8px"></u-image>
</view>
<view class="text-area">
<text>{{title}}</text>
<view class="pos-and-sqr">
<text>锦江区</text>
<text>200m2</text>
</view>
<view class="rent-and-date">
<text>租金{{price}}</text>
<text>发布日期{{date}}</text>
</view>
</view> </view>
</view> </view>
<view class="list-ads"> <view class="list-ads" style="font-size: 14px;">
<view>
<text>已将该店推给 </text>
<text style="color:#ce3b3b;margin: 0 4px;"> {{promotionNum}} </text>
<text> 位潜在客户</text>
</view>
<text style="color:#ce3b3b">我也要推广>></text>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
@@ -20,6 +35,18 @@
default(){ default(){
return 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg' return 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg'
} }
},
promotionNum:{
type:Number,
default(){
return 23
}
},
title:{
type:String,
default(){
return "琴行铺面转让"
}
} }
}, },
@@ -37,15 +64,31 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.list-border { .list-border {
padding: 10px;
}
.list-container {
height: 80px;
background-color: #fff;
background-color: #000;
margin: 10px; margin: 10px;
.shop-list-img { padding: 10px;
border-radius: $uni-border-radius-lg; background-color: #fff;
border-radius: 7px;
.list-container {
display: flex;
height: 80px;
// background-color: #000;
margin-bottom: 5px;
.shop-list-img {
// border-radius: 8px;
}
}
.text-area {
margin-left: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.list-ads {
border-top: 1px solid #f7f7f7;
padding-top: 5px;
display: flex;
justify-content: space-between;
} }
} }
</style> </style>

2
manifest.json
View File

@@ -50,7 +50,7 @@
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "", "appid" : "wxda178d12ae834c45",
"setting" : { "setting" : {
"urlCheck" : false "urlCheck" : false
}, },

127
pages/index/childComps/HomeHeader.vue
View File

@@ -1,127 +0,0 @@
<template>
<view class="header-area">
<view class="search-box u-flex u-flex-nowarp u-row-between">
<view class="search-box-input" >
<u-input
:placeholder="hotSearchWord"
prefixIcon="search"
prefixIconStyle="font-size: 14px;color: #909399;margin-left:30rpx"
/>
</view>
<view class="search-box-location">
<view><u-icon name="map" color="#909399" size="15"></u-icon></view>
<view class="localtion-text"><text>{{position}}</text></view>
</view>
</view>
<view class="swiper">
<u-swiper :list="headerBgList"/>
<!-- <u-image :src=headerBgURL
class="header-bgimg" width="100vw" height="25vh"/> -->
</view>
</view>
</template>
<script>
export default{
name: "HomeHeader",
props: {
hotSearchWord:{
type: String,
default() {
return '热门关键词'
}
},
headerBgList:{
type: Array,
default() {
return ["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg","https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"]
}
},
position:{
type: String,
default() {
return '定位中'
}
}
},
data() {
return {
// hotSearchWord:'',
// headerBgList:[]
}
},
options: {
styleIsolation: 'shared' // 解除样式隔离
},
computed:{
}
}
</script>
<style lang="scss">
// 搜索区域样式
.header-area {
position: relative;
.search-box {
// background: #000;
position: absolute;
z-index: 1;
left: 50%;
width: 84.6%;
transform: translateX(-50%);
.search-box-input {
border-radius: 10px;
padding-top: 3px !important;
margin-top: 8px;
background-color: #fff;
.u-border{
border: none;
}
// 组件内部样式修改
.u-input__content {
background-color: #fff;
border-radius: 1;
height: 10px;
.u-input__content__field-wrapper__field {
// height: 10px !important;
font-size: 10px !important;
}
}
}
.search-box-location{
position: absolute;
z-index: 1;
height: 25px;
// width: 15vw;
top: 15px;
right: 10%;
// transform: translate(-100%);
display: flex;
.localtion-text{
padding-left: 8px;
font-size: 10px;
}
}
.header-bgimg {
width: 100vw;
z-index: 0;
}
}
// 轮播图样式
.swiper {
.u-swiper {
border-radius:0 !important;
}
.u-swiper__wrapper__item__wrapper__image{
border-radius:0 !important;
}
}
}
</style>

59
pages/index/index.vue
View File

@@ -1,49 +1,9 @@
<template> <template>
<view class="home-base-bg"> <view class="home-base-bg">
<view class="search_box"> <view class="search_box">
<view class="search_box_border">
<!-- <u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx" readonly>
</u-input> -->
</view>
<InputAndSwiper></InputAndSwiper>
<TabBar :current-page="0"></TabBar> <TabBar :current-page="0"></TabBar>
<view class="nav-card"> <InputAndSwiper></InputAndSwiper>
<u-grid :col="4"> <HomeNavCard></HomeNavCard>
<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>
<view class="news-box"> <view class="news-box">
<u-notice-bar <u-notice-bar
:text="newsTextLists" :text="newsTextLists"
@@ -54,7 +14,7 @@
<ShowShopListItem></ShowShopListItem> <ShowShopListItem></ShowShopListItem>
</view> </view>
</view>
</template> </template>
<script> <script>
@@ -85,17 +45,6 @@
background-color: $uni-bg-color-grey; background-color: $uni-bg-color-grey;
width: 100%; width: 100%;
} }
.nav-card {
margin: 15px 7px;
padding: 10px 0;
background-color: $uni-bg-color;
border-radius: $uni-border-radius-lg;
box-shadow: 0 3px 3px 0 $u-border-color;
.grid-text {
font-size: 14px;
}
}
</style> </style>