Merge pull request '罗世杰：合并首页修改' (#23) from lj into master

Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/23

components/HomeNavCard/HomeNavCard.vue

@@ -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 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>

components/SearchShopList/SearchShopList.vue

@@ -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>

components/SearchShopListItem/SearchShopListItem.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="list-border">
+		<view class="list-container">
+			<view class="text-area">
+				<text>{{shopInfo.title}}</text>
+				<view class="pos-and-sqr">
+					<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_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>
+			</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" scoped>
+	.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: 90px;
+			font-size: 12px;
+		}
+		.text-area {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			> text {
+				font-size: 14px;
+			}
+			>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 {
+					color: #359867;
+					line-height: 12px;
+				}
+				>view {
+					display: flex;
+					>view {
+						margin-right: 4px;
+					}
+				}
+			}
+			.cart-and-date {
+				border-top: 1px solid #f7f7f7;
+				padding-top: 5px;
+				justify-content: space-between;
+				font-weight: 500;
+				text {
+					color: #CC3333;
+					line-height: 12px;
+				}
+			}
+		}
+	}
+</style>

components/ShowShopList/ShowShopList.vue

@@ -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
 						}
 					]
 				}

components/ShowShopListItem/ShowShopListItem.vue

@@ -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,15 +74,15 @@
 
 <style lang="scss" scoped>
 	.list-border {
-		margin: 10px;
+		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;
-			// background-color: #000;
-			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;
 				}

components/TabBar/TabBar.vue

@@ -1,6 +1,8 @@
 <template>
-	<view class="tabbar-container">
-		<block>
+	<view class="">
+		<view class="tabbar-bug"></view>
+		<view class="tabbar-container">
+			<block>
 			<view class="tabbar-item" v-for="(item,index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']"
 				@click="changeItem(item)">
 				<view class="item-top">
@@ -12,6 +14,8 @@
 			</view>
 		</block>
 		<publishSlide v-if="slideVisit" @quitSlide="quitSlide"></publishSlide>
+		</view>
+		
 	</view>
 </template>
 
@@ -85,6 +89,11 @@
 	}
 </script>
 <style scoped>
+	.tabbar-bug {
+		position: absolute;
+		width: 100%;
+		height: 98rpx;
+	}
 	view {
 		padding: 0;
 		margin: 0;

pages/index/HomeNavCard.vue

@@ -0,0 +1,77 @@
+<template>
+	<view class="nav-card">
+		<u-grid :col="4" customStyle="height: 334rpx;align-content: normal" >
+			<u-grid-item v-for="(item, index) in navItems" :key="item.icon" @click="handleItemClick(index)">
+				<u-icon :name="item.icon" :size="46"></u-icon>
+				<view class="grid-text">{{ item.text }}</view>
+			</u-grid-item>
+		</u-grid>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				navItems: [{
+						icon: "/static/navbar/sy_icon_zrxx.png",
+						text: "转让信息"
+					},
+					{
+						icon: "/static/navbar/sy_icon_zdxx.png",
+						text: "找店信息"
+					},
+					{
+						icon: "/static/navbar/sy_icon_czxx.png",
+						text: "出租信息"
+					},
+					{
+						icon: "/static/navbar/sy_icon_xmzs.png",
+						text: "项目招商"
+					},
+					{
+						icon: "/static/navbar/sy_icon_cjal.png",
+						text: "成交案例"
+					},
+					{
+						icon: "/static/navbar/sy_icon_spdt.png",
+						text: "速配地图"
+					},
+					{
+						icon: "/static/navbar/sy_icon_zmhb.png",
+						text: "招募合伙"
+					},
+					{
+						icon: "/static/navbar/sy_icon_lxwm.png",
+						text: "联系我们"
+					}
+					// 可以继续添加更多的项目
+				]
+			};
+		},
+		methods: {
+			handleItemClick(index) {
+				// 在这里处理点击事件，并使用下标值
+				console.log(`项目 ${index} 被点击了`);
+				// 或者执行其他需要的操作
+			}
+		}
+	};
+</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: 12px;
+		}
+	}
+</style>

pages/index/HomeNoticeBar.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="news-box-bg">
+		<view class="hot-news-img">
+			<u-image src="/static/shoplist/sy_icon_zxzx.png" width='55px' height='22px'/>
+		</view>
+		<view class="news-box">
+			<u-notice-bar
+				:text="text"
+				bgColor="#fff"
+				customStyle="width:70vw"
+				color="#232323"
+				icon=" "
+			/>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	/**
+	 * @property {String}  text 需要显示的消息 
+	 */
+	export default {
+		props: {
+			text: {
+				type: String,
+				default() {
+					return ' '
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.news-box-bg {
+		display: flex;
+		border-radius: 8px;
+		background-color: #fff;
+		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
+		
+		.hot-news-img {
+			margin-left: 6px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+		
+		
+	}
+	
+</style>

pages/index/Statistics.vue

@@ -0,0 +1,56 @@
+<template>
+	<view class="root u-flex">
+		<view class="left">
+			<view>
+				<u-image src="/static/statistics/sy_icon_ljyh.png" 
+					width="356rpx"
+					height="320rpx"
+				/>
+			</view>
+			
+		</view>
+		<view class="right">
+			<view>
+				<u-image src="/static/statistics/sy_icon_ljzd1.png"
+					width="340rpx"
+					height="150rpx"
+				/>
+			</view>
+			<view>
+				<u-image src="/static/statistics/sy_icon_ljzd0.png"
+					width="340rpx"
+					height="150rpx"
+				/>
+			</view>
+		</view>
+
+		
+	</view>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+	.root {
+		position: relative;
+		margin: 10px 0;
+		display: flex;
+		justify-content: space-between;
+		text {
+			font-size: 13px;
+			font-weight: 800;
+		}
+		.left {
+			color: #06562E;
+			.text1 {
+				
+			}
+		}
+		.right{
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+	}
+</style>

pages/index/index.vue

@@ -1,24 +1,39 @@
 <template>
 	<view class="home-base-bg">
 		<InputAndSwiper></InputAndSwiper>
-		<TabBar :current-page="0"></TabBar>
-		<HomeNavCard></HomeNavCard>
-		<view class="news-box">
-			<u-notice-bar :text="newsText" bg-color="#ffffff"></u-notice-bar>
+		<view class="home-content">
+			<HomeNavCard></HomeNavCard>
+			<HomeNoticeBar :text="notice"/>
+			<Statistics :data="statisticsNum"/>
+			<view class="show-and-search">
+				<view class="show-tab list-tab" :class="{ 'tab-activate': chooseIndex === 0 }" @click="this.chooseIndex=0">
+					<text>店铺列表</text>
+				</view>
+				<view class="search-tab list-tab" :class="{ 'tab-activate': chooseIndex === 1 }" @click="this.chooseIndex=1">
+					<text>找店列表</text>
+				</view>
+			</view>
+			<SearchShopList v-if="chooseIndex"/><ShowShopList v-else/>
 		</view>
-
-		<ShowShopList></ShowShopList>
+		<TabBar :current-page="0"></TabBar>
 	</view>
 </template>
 
 <script>
+	import HomeNoticeBar from "./HomeNoticeBar.vue"
+	import HomeNavCard from "./HomeNavCard.vue"
+	import Statistics from "./Statistics.vue"
 	export default {
 		components: {
-
+			HomeNavCard,
+			HomeNoticeBar,
+			Statistics
 		},
 		data() {
 			return {
-				newsText: '寒雨连江夜入吴'
+				notice: '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶',
+				chooseIndex: 0,
+				statisticsNum: [231753, 1345]
 			}
 		},
 		onLoad() {
@@ -26,6 +41,9 @@
 		},
 		methods: {
 
+		},
+		computed: {
+
 		}
 	}
 </script>
@@ -34,5 +52,33 @@
 	.home-base-bg {
 		background-color: $uni-bg-color-grey;
 		width: 100%;
+		.home-content {
+			margin: 0 10px;
+		}
+		.show-and-search{
+			display: flex;
+			.list-tab {
+				z-index: 2;
+				width: 259rpx;
+				height: 70rpx;
+				background: #B7EBD2;
+				border-radius: 11px 100px 0px 0px;
+				color: #fff;
+				font-size: 15px;
+				line-height: 21px;
+				font-weight: 500;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.search-tab {
+				z-index: 1;
+				transform: translateX(-61rpx);
+			}
+			.tab-activate {
+				background: linear-gradient(#E86262,#CC3333);
+				z-index: 3;
+			}
+		}
 	}
 </style>