From c7ffd3bbb173bdedc0b8e1fecc217d2194af7f95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Thu, 10 Jul 2025 18:20:46 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20=E5=88=B0=E5=AE=B6=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/homeServer/index/index.css | 382 ++++++++++++++++++++++++++++
 packages/homeServer/index/index.vue | 256 +++++++++++++++++--
 pages.json                          |   5 +-
 3 files changed, 614 insertions(+), 29 deletions(-)

diff --git a/packages/homeServer/index/index.css b/packages/homeServer/index/index.css
index e69de29b..b1b7a004 100644
--- a/packages/homeServer/index/index.css
+++ b/packages/homeServer/index/index.css
@@ -0,0 +1,382 @@
+.container {
+    margin-top: 87rpx;
+    padding: 0 15rpx;
+    background-color: whte;
+    min-height: 100vh;
+}
+
+/* 头部样式 */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20rpx 20rpx;
+    background-color: #fff;
+}
+
+.title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+}
+
+.header-right {
+    display: flex;
+    gap: 30rpx;
+}
+
+.icon {
+    width: 40rpx;
+    height: 40rpx;
+}
+
+/* 位置和搜索样式 */
+.location-search {
+    display: flex;
+    padding: 16rpx 30rpx;
+    background-color: #f5f7fb;
+    border-radius: 60rpx;
+    gap: 16rpx;
+    display: flex;
+    height: 35rpx;
+    margin-top: 15rpx;
+}
+
+.location {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding-right: 16rpx;
+    border-right: 2rpx solid #eee;
+}
+
+.location-text {
+    font-size: 26rpx;
+    color: #333;
+}
+
+.arrow-down {
+    width: 24rpx;
+    height: 24rpx;
+}
+
+.search-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    background-color: #f5f7fb;
+    border-radius: 60rpx;
+    padding: 14rpx 24rpx;
+}
+
+.search-icon {
+    width: 25rpx;
+    height: 25rpx;
+    margin-right: 5rpx;
+}
+
+.search-placeholder {
+    font-size: 26rpx;
+    color: #999;
+}
+
+/* 服务分类样式 */
+.service-category {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 20rpx;
+    padding: 20rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+}
+
+.category-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.category-icon {
+    width: 80rpx;
+    height: 80rpx;
+    margin-bottom: 12rpx;
+}
+
+.category-name {
+    font-size: 24rpx;
+    color: #333;
+}
+
+/* 公告样式 */
+.announcement {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 20rpx;
+    background-color: #f4f4f4;
+    margin-bottom: 20rpx;
+    border-radius: 15rpx;
+}
+
+.announcement-title {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #FF512A;
+}
+
+.hrStyle{
+    margin: 0 15rpx;
+    color: #c5c5c5;
+}
+
+.announcement-content {
+    flex: 1;
+    font-size: 26rpx;
+    color: #666;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.arrow-right {
+    width: 28rpx;
+    height: 28rpx;
+}
+
+/* 广告横幅样式 */
+.banner-container {
+    padding: 0 20rpx 20rpx;
+}
+
+.banner-swiper {
+    border-radius: 16rpx;
+    overflow: hidden;
+}
+
+.banner-img {
+    width: 100%;
+}
+
+
+.serverList {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.serverItem {
+	border-radius: 30rpx;
+	width: 208rpx;
+	height: 114rpx;
+	box-sizing: border-box;
+	padding-top: 11rpx;
+	padding-left: 13rpx;
+	font-weight: 600;
+	font-size: 26rpx;
+	color: #222222;
+	position: relative;
+	margin-bottom: 12rpx;
+}
+.serverList_left {
+	display: block;
+	width: 260rpx;
+	height: 369rpx;
+	margin-right: 17rpx;
+
+}
+
+.serverList_left swiper{
+	height: 100%;
+}
+
+.serverList_right {
+	flex: 1;
+	display: flex;
+	flex-wrap: wrap; 
+}
+
+.serverItem1 {
+	background: linear-gradient(139deg, #FEF4F4 0%, #FEDCD2 100%);
+	margin-right: 12rpx; 
+}
+
+.serverItem2 {
+	background: #FFF4E5; 
+}
+
+.serverItem1 image {
+	position: absolute;
+	right: 12rpx;
+	top: 14rpx;
+	width: 103rpx;
+	height: 100rpx; 
+}
+
+.serverItem2 image {
+	position: absolute;
+	right: 6rpx;
+	top: 8rpx;
+	width: 108rpx;
+	height: 108rpx; 
+}
+
+/* 立即联系样式 */
+.contact-section {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 24rpx;
+    background-color: #fcf4f0;
+    margin: 20rpx 0;
+    border-radius: 16rpx;
+}
+
+.contact-icon {
+    width: 60rpx;
+    height: 60rpx;
+}
+
+.contact-text {
+    flex: 1;
+}
+
+.contact-title {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 4rpx;
+}
+
+.contact-subtitle {
+    font-size: 24rpx;
+    color: #999;
+}
+
+/*  */
+.interval{
+    width: 100vw;
+    height: 20rpx;
+    background-color: #f7f6fb;
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+}
+
+/* 热门服务样式 */
+.hot-services {
+    padding: 20rpx;
+}
+
+.section-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20rpx;
+}
+
+.section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+}
+
+.section-arrow {
+    width: 32rpx;
+    height: 32rpx; 
+    margin-right: 10rpx;
+}
+
+.service-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+}
+
+.service-card {
+    background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+}
+
+/* 服务信息样式 */
+.service-info {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    padding: 20rpx;
+}
+
+.service-info-left {
+    width: 60%;
+}
+
+.service-info-right {
+    width: 35%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.service-footer {
+    align-items: center;
+    gap: 15rpx;
+}
+
+.service-image {
+    width: 100%;
+    height: 240rpx;
+}
+
+.service-badge {
+    position: absolute;
+    top: 20rpx;
+    left: 20rpx;
+    background-color: #FF512A;
+    color: #fff;
+    font-size: 24rpx;
+    padding: 4rpx 16rpx;
+    border-radius: 20rpx;
+}
+
+.service-name {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 8rpx;
+}
+
+.service-tag {
+    display: inline-block;
+    /* background-color: #f5f5f5; */
+    color: #e1ca9b;
+    font-size: 22rpx;
+    padding: 2rpx 16rpx;
+    border-radius: 20rpx;
+    margin-bottom: 16rpx;
+}
+
+.service-desc {
+    font-size: 24rpx;
+    color: #666;
+    margin-bottom: 20rpx;
+    line-height: 1.5;
+}
+
+.service-footer {
+    /* display: flex;
+    justify-content: space-between;
+    align-items: center; */
+}
+
+.service-count {
+    font-size: 24rpx;
+    color: #999;
+    margin-left: 15rpx;
+}
+
+.service-button {
+    background-color: #FF512A;
+    color: #fff;
+    font-size: 26rpx;
+    padding: 12rpx 36rpx;
+    border-radius: 60rpx;
+}
\ No newline at end of file
diff --git a/packages/homeServer/index/index.vue b/packages/homeServer/index/index.vue
index dc343d9e..61d3920c 100644
--- a/packages/homeServer/index/index.vue
+++ b/packages/homeServer/index/index.vue
@@ -1,44 +1,244 @@
 <template>
-    <view class="container">
-
+  <view class="container">
+    <!-- 头部标题 -->
+    <view class="header">
+      <text class="title">榴园到家 服务至上</text>
     </view>
+
+    <!-- 位置和搜索 -->
+    <view class="location-search">
+      <view class="location" @click="chooseLocation">
+        <text class="location-text">{{ currentLocation }}</text>
+        <image src="" class="arrow-down"></image>
+      </view>
+      <view class="search-box" @click="searchService">
+        <image
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
+          class="search-icon"
+        ></image>
+        <text class="search-placeholder">请输入您要找的服务</text>
+      </view>
+    </view>
+
+    <!-- 服务分类 -->
+    <view class="service-category">
+      <view
+        class="category-item"
+        v-for="(item, index) in serviceCategories"
+        :key="index"
+        @click="navigateToService(item)"
+      >
+        <image :src="item.icon" class="category-icon"></image>
+        <text class="category-name">{{ item.name }}</text>
+      </view>
+    </view>
+
+    <!-- 到家公告 -->
+    <view class="announcement">
+      <text>到家<text class="announcement-title">公告</text></text>
+      <view class="hrStyle">|</view>
+      <text class="announcement-content"
+        >公告内容公告内容公告内容公告内容...</text
+      >
+      <image src="" class="arrow-right"></image>
+    </view>
+
+    <!-- 广告横幅 -->
+    <view class="serverList">
+      <view class="serverList_left">
+        <swiper>
+          <swiper-item v-for="(item, index) in homeLeftList" :key="index">
+            <image :src="item.pic_src" alt="" mode="aspectFit" />
+          </swiper-item>
+        </swiper>
+      </view>
+      <view class="serverList_right">
+        <view
+          :class="['serverItem', `serverItem${index + 1}`]"
+          @tap="headerServerClick(item)"
+          v-for="(item, index) in homeRightList"
+          :key="index"
+        >
+          <view class="serverTit">{{ item.title }}</view>
+          <image :src="item.pic_src" mode="" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 立即联系 -->
+    <view class="contact-section" @click="contactService">
+      <image src="" class="contact-icon"></image>
+      <view class="contact-text">
+        <text class="contact-title">立即联系</text>
+        <br />
+        <text class="contact-subtitle">未找到您需要的服务？</text>
+      </view>
+      <image src="" class="arrow-right"></image>
+    </view>
+    <view class="interval"></view>
+
+    <!-- 推荐热门服务 -->
+    <view class="hot-services">
+      <view class="section-header">
+        <image src="" class="section-arrow"></image>
+        <text class="section-title">推荐热门服务</text>
+      </view>
+      <view class="service-list">
+        <view
+          class="service-card"
+          v-for="(service, index) in hotServiceList"
+          :key="index"
+        >
+          <image :src="service.image" class="service-image"></image>
+          <!-- <view class="service-badge" v-if="service.badge">
+            <text class="badge-text">{{ service.badge }}</text>
+          </view> -->
+          <view class="service-info">
+            <view class="service-info-left">
+              <text class="service-name">{{ service.name }}</text>
+              <text class="service-tag">{{ service.tag }}</text>
+              <br />
+              <text class="service-desc">{{ service.description }}</text>
+            </view>
+            <view class="service-info-right">
+              <view class="service-footer">
+                <view
+                  class="service-button"
+                  @click="navigateToReservation(service)"
+                >
+                  <text class="button-text">去预约</text>
+                </view>
+                <text class="service-count">{{ service.count }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <nav-footer :current="3" />
+  </view>
 </template>
 
 <script>
-import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
-import { apiArr } from '../../../api/reservation';
+import {
+  request,
+  picUrl,
+  NavgateTo,
+  menuButtonInfo,
+} from "../../../utils/index";
+import { apiArr } from "../../../api/reservation";
+import nav from "../../../components/nav/nav";
 
 export default {
-    data() {
-        return {
-            top: "",
-            localHeight: ""
-        }
+  components: {
+    nav,
+  },
+  data() {
+    return {
+      // 当前位置
+      currentLocation: "衡水市桃城区",
+      // 服务分类数据
+      serviceCategories: [
+        {
+          name: "家电维修",
+          icon: "",
+        },
+        {
+          name: "数码维修",
+          icon: "",
+        },
+        {
+          name: "电器清洗",
+          icon: "",
+        },
+        {
+          name: "洗衣洗鞋",
+          icon: "",
+        },
+        {
+          name: "精细擦窗",
+          icon: "",
+        },
+        {
+          name: "整理收纳",
+          icon: "",
+        },
+        {
+          name: "家庭保姆",
+          icon: "",
+        },
+        {
+          name: "母婴服务",
+          icon: "",
+        },
+        {
+          name: "管道疏通",
+          icon: "",
+        },
+        {
+          name: "家庭保洁",
+          icon: "",
+        },
+      ],
+      // 热门服务数据
+      hotServiceList: [
+        {
+          id: 1,
+          name: "空调清洗",
+          image:
+            "",
+          badge: "推荐",
+          tag: "平台保障",
+          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
+          count: "已预约100+",
+        },
+      ],
+    };
+  },
+  methods: {
+    // 选择位置
+    chooseLocation() {
+      uni.navigateTo({
+        url: "/packages/areaPopup/index",
+      });
     },
-    methods: {
-
+    // 搜索服务
+    searchService() {
+      uni.navigateTo({
+        url: "/packages/homeServer/search/index",
+      });
     },
-    onReady() {
-
+    // 导航到服务详情
+    navigateToService(item) {
+      uni.navigateTo({
+        url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
+          JSON.stringify(item)
+        )}`,
+      });
     },
-
-    onload(options) {
-        const meun = menuButtonInfo();
-        this.top = meun.top;
-        this.localHeight = meun.height;
+    // 导航到预约页面
+    navigateToReservation(service) {
+      uni.navigateTo({
+        url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
+      });
     },
-    onShow() {
-
+    // 联系客服
+    contactService() {
+      uni.makePhoneCall({
+        phoneNumber: "400-123-4567",
+      });
     },
-
-    /**
-    * 页面上拉触底事件的处理函数
-    */
-    onReachBottom() {
-
+    // 获取当前位置
+    getCurrentLocation() {
+      // 实际项目中应该调用定位API获取真实位置
+      console.log("获取当前位置信息");
     },
-
-}
+  },
+  onLoad() {
+    this.getCurrentLocation();
+  },
+};
 </script>
 
 <style>
diff --git a/pages.json b/pages.json
index 5f4f2be2..408d37e5 100644
--- a/pages.json
+++ b/pages.json
@@ -616,7 +616,10 @@
 					"path": "index/index",
 					"style": {
 						"navigationBarBackgroundColor": "#fff",
-						"navigationStyle": "custom"
+						"navigationStyle": "custom",
+						"usingComponents": {
+							"nav-footer": "/components/nav/nav"
+						}
 					}
 				},
 				{