罗世杰：feat：初始化统计色块，完成店铺列表和找店列表的切换，完成首页导航

.hbuilderx/launch.json

@@ -1,20 +1,23 @@
-{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+{
-  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
-    "version": "0.0",
+    // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
-    "configurations": [{
+    "version" : "0.0",
-     	"app-plus" : 
+    "configurations" : [
-     	{
+        {
-     		"launchtype" : "local"
+            "app-plus" : {
-     	},
+                "launchtype" : "local"
-     	"default" : 
+            },
-     	{
+            "default" : {
-     		"launchtype" : "local"
+                "launchtype" : "local"
-     	},
+            },
-     	"mp-weixin" : 
+            "mp-weixin" : {
-     	{
+                "launchtype" : "local"
-     		"launchtype" : "local"
+            },
-     	},
+            "type" : "uniCloud"
-     	"type" : "uniCloud"
+        },
-     }
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-android"
+        }
     ]
 }

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

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

@@ -4,24 +4,47 @@
 			<view class="text-area">
 				<text>{{shopInfo.title}}</text>
 				<view class="pos-and-sqr">
+					<view>
 						<view>
-							<text>{{shopInfo.sqr}}m2</text>
+							<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
-						</view>
-						<view>
-							<text>{{shopInfo.uname}}</text>
-						</view>
-						<view>
-							<text>{{shopInfo.phoneNum}}</text>
 						</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;
+			height: 90px;
-			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 {
+			>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>

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

@@ -18,14 +18,14 @@
 
 <script>
 	/**
-	 * @property @property {String} 需要显示的消息 
+	 * @property {String}  text 需要显示的消息 
 	 */
 	export default {
 		props: {
 			text: {
 				type: String,
 				default() {
-					return '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶'
+					return ' '
 				}
 			}
 		}

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

@@ -3,10 +3,17 @@
 		<InputAndSwiper></InputAndSwiper>
 		<view class="home-content">
 			<HomeNavCard></HomeNavCard>
-			<HomeNoticeBar></HomeNoticeBar>
+			<HomeNoticeBar :text="notice"/>
-			<ShowShopList/>
+			<Statistics :data="statisticsNum"/>
-			<SearchShopListItem></SearchShopListItem>
+			<view class="show-and-search">
-			<SearchShopListItem></SearchShopListItem>
+				<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>
 		<TabBar :current-page="0"></TabBar>
 	</view>
@@ -14,13 +21,19 @@
 
 <script>
 	import HomeNoticeBar from "./HomeNoticeBar.vue"
+	import HomeNavCard from "./HomeNavCard.vue"
+	import Statistics from "./Statistics.vue"
 	export default {
 		components: {
-			HomeNoticeBar
+			HomeNavCard,
+			HomeNoticeBar,
+			Statistics
 		},
 		data() {
 			return {
-				
+				notice: '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶',
+				chooseIndex: 0,
+				statisticsNum: [231753, 1345]
 			}
 		},
 		onLoad() {
@@ -28,6 +41,11 @@
 		},
 		methods: {
 
+		},
+		computed: {
+			isActive(currentIndex) {
+				// 怎么完善此处的代码
+			}
 		}
 	}
 </script>
@@ -39,6 +57,31 @@
 		.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>