From b8b0b453e032770e64c8e37964e156dc7bf4c4b2 Mon Sep 17 00:00:00 2001
From: huangzhenbao <17818024429@163.com>
Date: Tue, 19 May 2026 23:10:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=B1=85=E5=AE=B6=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ges.consumer.2026-05-19T11-45-27-612Z.json |  461 +++++++
 ...ges.consumer.2026-05-19T11-45-44-349Z.json |  461 +++++++
 components/home/HomeMallContent.uvue          |  265 ++--
 pages/main/index.uvue                         |  901 ++++++++++++-
 .../consumer/home-service/service-detail.uvue | 1140 +++++++++++++----
 5 files changed, 2870 insertions(+), 358 deletions(-)
 create mode 100644 .pages-backup/pages.consumer.2026-05-19T11-45-27-612Z.json
 create mode 100644 .pages-backup/pages.consumer.2026-05-19T11-45-44-349Z.json

diff --git a/.pages-backup/pages.consumer.2026-05-19T11-45-27-612Z.json b/.pages-backup/pages.consumer.2026-05-19T11-45-27-612Z.json
new file mode 100644
index 00000000..60afb4ad
--- /dev/null
+++ b/.pages-backup/pages.consumer.2026-05-19T11-45-27-612Z.json
@@ -0,0 +1,461 @@
+{
+  "pages": [
+    {
+      "path": "pages/main/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/user/boot",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/user/login",
+      "style": {
+        "navigationBarTitleText": "用户登录",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/user/register",
+      "style": {
+        "navigationBarTitleText": "注册"
+      }
+    },
+    {
+      "path": "pages/user/forgot-password",
+      "style": {
+        "navigationBarTitleText": "忘记密码"
+      }
+    },
+    {
+      "path": "pages/user/terms",
+      "style": {
+        "navigationBarTitleText": "用户协议与隐私政策"
+      }
+    },
+    {
+      "path": "pages/user/center",
+      "style": {
+        "navigationBarTitleText": "用户中心"
+      }
+    },
+    {
+      "path": "pages/user/profile",
+      "style": {
+        "navigationBarTitleText": "个人资料"
+      }
+    },
+    {
+      "path": "pages/user/change-password",
+      "style": {
+        "navigationBarTitleText": "修改密码"
+      }
+    },
+    {
+      "path": "pages/user/bind-phone",
+      "style": {
+        "navigationBarTitleText": "绑定手机"
+      }
+    },
+    {
+      "path": "pages/user/bind-email",
+      "style": {
+        "navigationBarTitleText": "绑定邮箱"
+      }
+    },
+    {
+      "path": "pages/main/messages",
+      "style": {
+        "navigationBarTitleText": "消息",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/main/cart",
+      "style": {
+        "navigationBarTitleText": "购物车",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/main/profile",
+      "style": {
+        "navigationBarTitleText": "我的",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/main/category",
+      "style": {
+        "navigationBarTitleText": "分类",
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "subPackages": [
+    {
+      "root": "pages/mall/consumer",
+      "pages": [
+        {
+          "path": "settings",
+          "style": {
+            "navigationBarTitleText": "设置"
+          }
+        },
+        {
+          "path": "edit-profile",
+          "style": {
+            "navigationBarTitleText": "编辑资料"
+          }
+        },
+        {
+          "path": "wallet",
+          "style": {
+            "navigationBarTitleText": "我的钱包"
+          }
+        },
+        {
+          "path": "withdraw",
+          "style": {
+            "navigationBarTitleText": "余额提现"
+          }
+        },
+        {
+          "path": "search",
+          "style": {
+            "navigationBarTitleText": "搜索",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "product-detail",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "channel-detail",
+          "style": {
+            "navigationBarTitleText": "频道详情",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "shop-detail",
+          "style": {
+            "navigationBarTitleText": "店铺详情"
+          }
+        },
+        {
+          "path": "coupons",
+          "style": {
+            "navigationBarTitleText": "我的优惠券"
+          }
+        },
+        {
+          "path": "favorites",
+          "style": {
+            "navigationBarTitleText": "我的收藏"
+          }
+        },
+        {
+          "path": "footprint",
+          "style": {
+            "navigationBarTitleText": "我的足迹"
+          }
+        },
+        {
+          "path": "address",
+          "style": {
+            "navigationBarTitleText": "地址"
+          }
+        },
+        {
+          "path": "address-list",
+          "style": {
+            "navigationBarTitleText": "收货地址"
+          }
+        },
+        {
+          "path": "address-edit",
+          "style": {
+            "navigationBarTitleText": "编辑地址"
+          }
+        },
+        {
+          "path": "checkout",
+          "style": {
+            "navigationBarTitleText": "确认订单"
+          }
+        },
+        {
+          "path": "payment",
+          "style": {
+            "navigationBarTitleText": "收银台"
+          }
+        },
+        {
+          "path": "payment-success",
+          "style": {
+            "navigationBarTitleText": "支付成功",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "orders",
+          "style": {
+            "navigationBarTitleText": "我的订单",
+            "enablePullDownRefresh": true
+          }
+        },
+        {
+          "path": "order-detail",
+          "style": {
+            "navigationBarTitleText": "订单详情"
+          }
+        },
+        {
+          "path": "logistics",
+          "style": {
+            "navigationBarTitleText": "物流详情"
+          }
+        },
+        {
+          "path": "review",
+          "style": {
+            "navigationBarTitleText": "评价晒单"
+          }
+        },
+        {
+          "path": "refund",
+          "style": {
+            "navigationBarTitleText": "退款/售后"
+          }
+        },
+        {
+          "path": "apply-refund",
+          "style": {
+            "navigationBarTitleText": "申请售后"
+          }
+        },
+        {
+          "path": "refund-review",
+          "style": {
+            "navigationBarTitleText": "服务评价"
+          }
+        },
+        {
+          "path": "chat",
+          "style": {
+            "navigationBarTitleText": "客服聊天",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chat_new",
+          "style": {
+            "navigationBarTitleText": "客服聊天（新版）"
+          }
+        },
+        {
+          "path": "subscription/plan-list",
+          "style": {
+            "navigationBarTitleText": "软件订阅"
+          }
+        },
+        {
+          "path": "subscription/plan-detail",
+          "style": {
+            "navigationBarTitleText": "订阅详情"
+          }
+        },
+        {
+          "path": "subscription/subscribe-checkout",
+          "style": {
+            "navigationBarTitleText": "确认订阅"
+          }
+        },
+        {
+          "path": "subscription/my-subscriptions",
+          "style": {
+            "navigationBarTitleText": "我的订阅"
+          }
+        },
+        {
+          "path": "subscription/followed-shops",
+          "style": {
+            "navigationBarTitleText": "关注店铺"
+          }
+        },
+        {
+          "path": "points/index",
+          "style": {
+            "navigationBarTitleText": "积分管理"
+          }
+        },
+        {
+          "path": "points/signin",
+          "style": {
+            "navigationBarTitleText": "签到"
+          }
+        },
+        {
+          "path": "points/exchange",
+          "style": {
+            "navigationBarTitleText": "积分兑换"
+          }
+        },
+        {
+          "path": "points/exchange-records",
+          "style": {
+            "navigationBarTitleText": "兑换记录"
+          }
+        },
+        {
+          "path": "red-packets/index",
+          "style": {
+            "navigationBarTitleText": "我的红包"
+          }
+        },
+        {
+          "path": "bank-cards/index",
+          "style": {
+            "navigationBarTitleText": "银行卡管理"
+          }
+        },
+        {
+          "path": "bank-cards/add",
+          "style": {
+            "navigationBarTitleText": "添加银行卡"
+          }
+        },
+        {
+          "path": "home-service/index",
+          "style": {
+            "navigationBarTitleText": "居家上门服务",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/apply",
+          "style": {
+            "navigationBarTitleText": "提交服务申请",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/service-detail",
+          "style": {
+            "navigationBarTitleText": "预约服务",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/order-detail",
+          "style": {
+            "navigationBarTitleText": "服务单详情",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/feedback",
+          "style": {
+            "navigationBarTitleText": "验收反馈",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "bank-cards/verify",
+          "style": {
+            "navigationBarTitleText": "银行卡验证"
+          }
+        },
+        {
+          "path": "balance/index",
+          "style": {
+            "navigationBarTitleText": "余额"
+          }
+        },
+        {
+          "path": "my-reviews",
+          "style": {
+            "navigationBarTitleText": "我的评价"
+          }
+        },
+        {
+          "path": "message-detail",
+          "style": {
+            "navigationBarTitleText": "消息详情"
+          }
+        },
+        {
+          "path": "member/index",
+          "style": {
+            "navigationBarTitleText": "会员中心"
+          }
+        },
+        {
+          "path": "product-reviews",
+          "style": {
+            "navigationBarTitleText": "商品评价"
+          }
+        }
+      ]
+    }
+  ],
+  "tabBar": {
+    "color": "#999999",
+    "selectedColor": "#ff5000",
+    "backgroundColor": "#ffffff",
+    "borderStyle": "black",
+    "list": [
+      {
+        "pagePath": "pages/main/index",
+        "text": "首页",
+        "iconPath": "static/tabbar/home.png",
+        "selectedIconPath": "static/tabbar/home-active.png"
+      },
+      {
+        "pagePath": "pages/main/messages",
+        "text": "消息",
+        "iconPath": "static/tabbar/message.png",
+        "selectedIconPath": "static/tabbar/message.png"
+      },
+      {
+        "pagePath": "pages/main/cart",
+        "text": "购物车",
+        "iconPath": "static/tabbar/cart.png",
+        "selectedIconPath": "static/tabbar/cart.png"
+      },
+      {
+        "pagePath": "pages/main/profile",
+        "text": "我的",
+        "iconPath": "static/tabbar/user.png",
+        "selectedIconPath": "static/tabbar/user.png"
+      }
+    ]
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "mall",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#F8F8F8"
+  },
+  "condition": {
+    "current": 0,
+    "list": [
+      {
+        "name": "consumer端",
+        "path": "pages/main/index",
+        "query": "role=consumer"
+      }
+    ]
+  }
+}
diff --git a/.pages-backup/pages.consumer.2026-05-19T11-45-44-349Z.json b/.pages-backup/pages.consumer.2026-05-19T11-45-44-349Z.json
new file mode 100644
index 00000000..60afb4ad
--- /dev/null
+++ b/.pages-backup/pages.consumer.2026-05-19T11-45-44-349Z.json
@@ -0,0 +1,461 @@
+{
+  "pages": [
+    {
+      "path": "pages/main/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/user/boot",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/user/login",
+      "style": {
+        "navigationBarTitleText": "用户登录",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/user/register",
+      "style": {
+        "navigationBarTitleText": "注册"
+      }
+    },
+    {
+      "path": "pages/user/forgot-password",
+      "style": {
+        "navigationBarTitleText": "忘记密码"
+      }
+    },
+    {
+      "path": "pages/user/terms",
+      "style": {
+        "navigationBarTitleText": "用户协议与隐私政策"
+      }
+    },
+    {
+      "path": "pages/user/center",
+      "style": {
+        "navigationBarTitleText": "用户中心"
+      }
+    },
+    {
+      "path": "pages/user/profile",
+      "style": {
+        "navigationBarTitleText": "个人资料"
+      }
+    },
+    {
+      "path": "pages/user/change-password",
+      "style": {
+        "navigationBarTitleText": "修改密码"
+      }
+    },
+    {
+      "path": "pages/user/bind-phone",
+      "style": {
+        "navigationBarTitleText": "绑定手机"
+      }
+    },
+    {
+      "path": "pages/user/bind-email",
+      "style": {
+        "navigationBarTitleText": "绑定邮箱"
+      }
+    },
+    {
+      "path": "pages/main/messages",
+      "style": {
+        "navigationBarTitleText": "消息",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/main/cart",
+      "style": {
+        "navigationBarTitleText": "购物车",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/main/profile",
+      "style": {
+        "navigationBarTitleText": "我的",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/main/category",
+      "style": {
+        "navigationBarTitleText": "分类",
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "subPackages": [
+    {
+      "root": "pages/mall/consumer",
+      "pages": [
+        {
+          "path": "settings",
+          "style": {
+            "navigationBarTitleText": "设置"
+          }
+        },
+        {
+          "path": "edit-profile",
+          "style": {
+            "navigationBarTitleText": "编辑资料"
+          }
+        },
+        {
+          "path": "wallet",
+          "style": {
+            "navigationBarTitleText": "我的钱包"
+          }
+        },
+        {
+          "path": "withdraw",
+          "style": {
+            "navigationBarTitleText": "余额提现"
+          }
+        },
+        {
+          "path": "search",
+          "style": {
+            "navigationBarTitleText": "搜索",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "product-detail",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "channel-detail",
+          "style": {
+            "navigationBarTitleText": "频道详情",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "shop-detail",
+          "style": {
+            "navigationBarTitleText": "店铺详情"
+          }
+        },
+        {
+          "path": "coupons",
+          "style": {
+            "navigationBarTitleText": "我的优惠券"
+          }
+        },
+        {
+          "path": "favorites",
+          "style": {
+            "navigationBarTitleText": "我的收藏"
+          }
+        },
+        {
+          "path": "footprint",
+          "style": {
+            "navigationBarTitleText": "我的足迹"
+          }
+        },
+        {
+          "path": "address",
+          "style": {
+            "navigationBarTitleText": "地址"
+          }
+        },
+        {
+          "path": "address-list",
+          "style": {
+            "navigationBarTitleText": "收货地址"
+          }
+        },
+        {
+          "path": "address-edit",
+          "style": {
+            "navigationBarTitleText": "编辑地址"
+          }
+        },
+        {
+          "path": "checkout",
+          "style": {
+            "navigationBarTitleText": "确认订单"
+          }
+        },
+        {
+          "path": "payment",
+          "style": {
+            "navigationBarTitleText": "收银台"
+          }
+        },
+        {
+          "path": "payment-success",
+          "style": {
+            "navigationBarTitleText": "支付成功",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "orders",
+          "style": {
+            "navigationBarTitleText": "我的订单",
+            "enablePullDownRefresh": true
+          }
+        },
+        {
+          "path": "order-detail",
+          "style": {
+            "navigationBarTitleText": "订单详情"
+          }
+        },
+        {
+          "path": "logistics",
+          "style": {
+            "navigationBarTitleText": "物流详情"
+          }
+        },
+        {
+          "path": "review",
+          "style": {
+            "navigationBarTitleText": "评价晒单"
+          }
+        },
+        {
+          "path": "refund",
+          "style": {
+            "navigationBarTitleText": "退款/售后"
+          }
+        },
+        {
+          "path": "apply-refund",
+          "style": {
+            "navigationBarTitleText": "申请售后"
+          }
+        },
+        {
+          "path": "refund-review",
+          "style": {
+            "navigationBarTitleText": "服务评价"
+          }
+        },
+        {
+          "path": "chat",
+          "style": {
+            "navigationBarTitleText": "客服聊天",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chat_new",
+          "style": {
+            "navigationBarTitleText": "客服聊天（新版）"
+          }
+        },
+        {
+          "path": "subscription/plan-list",
+          "style": {
+            "navigationBarTitleText": "软件订阅"
+          }
+        },
+        {
+          "path": "subscription/plan-detail",
+          "style": {
+            "navigationBarTitleText": "订阅详情"
+          }
+        },
+        {
+          "path": "subscription/subscribe-checkout",
+          "style": {
+            "navigationBarTitleText": "确认订阅"
+          }
+        },
+        {
+          "path": "subscription/my-subscriptions",
+          "style": {
+            "navigationBarTitleText": "我的订阅"
+          }
+        },
+        {
+          "path": "subscription/followed-shops",
+          "style": {
+            "navigationBarTitleText": "关注店铺"
+          }
+        },
+        {
+          "path": "points/index",
+          "style": {
+            "navigationBarTitleText": "积分管理"
+          }
+        },
+        {
+          "path": "points/signin",
+          "style": {
+            "navigationBarTitleText": "签到"
+          }
+        },
+        {
+          "path": "points/exchange",
+          "style": {
+            "navigationBarTitleText": "积分兑换"
+          }
+        },
+        {
+          "path": "points/exchange-records",
+          "style": {
+            "navigationBarTitleText": "兑换记录"
+          }
+        },
+        {
+          "path": "red-packets/index",
+          "style": {
+            "navigationBarTitleText": "我的红包"
+          }
+        },
+        {
+          "path": "bank-cards/index",
+          "style": {
+            "navigationBarTitleText": "银行卡管理"
+          }
+        },
+        {
+          "path": "bank-cards/add",
+          "style": {
+            "navigationBarTitleText": "添加银行卡"
+          }
+        },
+        {
+          "path": "home-service/index",
+          "style": {
+            "navigationBarTitleText": "居家上门服务",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/apply",
+          "style": {
+            "navigationBarTitleText": "提交服务申请",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/service-detail",
+          "style": {
+            "navigationBarTitleText": "预约服务",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/order-detail",
+          "style": {
+            "navigationBarTitleText": "服务单详情",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home-service/feedback",
+          "style": {
+            "navigationBarTitleText": "验收反馈",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "bank-cards/verify",
+          "style": {
+            "navigationBarTitleText": "银行卡验证"
+          }
+        },
+        {
+          "path": "balance/index",
+          "style": {
+            "navigationBarTitleText": "余额"
+          }
+        },
+        {
+          "path": "my-reviews",
+          "style": {
+            "navigationBarTitleText": "我的评价"
+          }
+        },
+        {
+          "path": "message-detail",
+          "style": {
+            "navigationBarTitleText": "消息详情"
+          }
+        },
+        {
+          "path": "member/index",
+          "style": {
+            "navigationBarTitleText": "会员中心"
+          }
+        },
+        {
+          "path": "product-reviews",
+          "style": {
+            "navigationBarTitleText": "商品评价"
+          }
+        }
+      ]
+    }
+  ],
+  "tabBar": {
+    "color": "#999999",
+    "selectedColor": "#ff5000",
+    "backgroundColor": "#ffffff",
+    "borderStyle": "black",
+    "list": [
+      {
+        "pagePath": "pages/main/index",
+        "text": "首页",
+        "iconPath": "static/tabbar/home.png",
+        "selectedIconPath": "static/tabbar/home-active.png"
+      },
+      {
+        "pagePath": "pages/main/messages",
+        "text": "消息",
+        "iconPath": "static/tabbar/message.png",
+        "selectedIconPath": "static/tabbar/message.png"
+      },
+      {
+        "pagePath": "pages/main/cart",
+        "text": "购物车",
+        "iconPath": "static/tabbar/cart.png",
+        "selectedIconPath": "static/tabbar/cart.png"
+      },
+      {
+        "pagePath": "pages/main/profile",
+        "text": "我的",
+        "iconPath": "static/tabbar/user.png",
+        "selectedIconPath": "static/tabbar/user.png"
+      }
+    ]
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "mall",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#F8F8F8"
+  },
+  "condition": {
+    "current": 0,
+    "list": [
+      {
+        "name": "consumer端",
+        "path": "pages/main/index",
+        "query": "role=consumer"
+      }
+    ]
+  }
+}
diff --git a/components/home/HomeMallContent.uvue b/components/home/HomeMallContent.uvue
index 414f18a7..c0adeb0b 100644
--- a/components/home/HomeMallContent.uvue
+++ b/components/home/HomeMallContent.uvue
@@ -1,18 +1,33 @@
 <template>
 	<view class="hmall-content">
-		<view v-if="currentCategory != 'recommend' && secondaryCategoryDisplay.length > 0" class="hmall-secondary-panel">
-			<view
-				v-for="(item, index) in secondaryCategoryDisplay"
-				:key="item.id + '-' + index"
-				:class="['hmall-secondary-item', selectedSubCategoryId == item.id ? 'hmall-secondary-item-active' : '']"
-				@click="emit('secondary-category-click', item)"
+		<view v-if="currentCategory != 'recommend' && secondaryCategoryPages.length > 0" class="hmall-secondary-shell">
+			<scroll-view
+				class="hmall-secondary-scroll"
+				direction="horizontal"
+				:show-scrollbar="false"
+				:scroll-with-animation="true"
 			>
-				<view class="hmall-secondary-icon-wrap">
-					<image v-if="isImageIcon(item.icon)" class="hmall-secondary-image" :src="item.icon" mode="aspectFill" />
-					<text v-else class="hmall-secondary-icon-text">{{ getCategoryDisplayIcon(item) }}</text>
+				<view class="hmall-secondary-pages">
+					<view
+						v-for="(page, pageIndex) in secondaryCategoryPages"
+						:key="page.id + '-' + pageIndex"
+						class="hmall-secondary-page"
+					>
+						<view
+							v-for="(item, itemIndex) in page.items"
+							:key="item.id + '-' + itemIndex"
+							:class="['hmall-secondary-item', selectedSubCategoryId == item.id ? 'hmall-secondary-item-active' : '']"
+							@click="emit('secondary-category-click', item)"
+						>
+							<view class="hmall-secondary-icon-wrap">
+								<image v-if="item.icon != null && isImageIcon(item.icon)" class="hmall-secondary-image" :src="item.icon" mode="aspectFit" />
+								<text v-else class="hmall-secondary-icon-text">{{ getCategoryDisplayIcon(item) }}</text>
+							</view>
+							<text class="hmall-secondary-name">{{ item.name }}</text>
+						</view>
+					</view>
 				</view>
-				<text class="hmall-secondary-name">{{ item.name }}</text>
-			</view>
+			</scroll-view>
 		</view>
 
 		<view v-if="currentCategory == 'recommend' && marketingChannels.length > 0" class="hmall-recommend-section">
@@ -73,77 +88,86 @@
 			</view>
 		</view>
 
-		<view class="hmall-feed-divider"></view>
+		<view class="hmall-products-section">
+			<view class="hmall-feed-divider"></view>
 
-		<view v-if="hotProducts.length > 0" class="hmall-products-grid hmall-products-grid-dense">
-			<view
-				v-for="(product, index) in hotProducts"
-				:key="product.id + '-' + index"
-				class="hmall-product-card hmall-product-card-skeleton"
-				@click="emit('select-product', product)"
-			>
-				<view class="hmall-product-image-wrapper hmall-product-image-wrapper-fixed">
-					<image
-						class="hmall-product-image"
-						:src="getProductCover(product)"
-						@error="() => handleProductImageError(product.id)"
-						mode="aspectFill"
-					/>
-				</view>
-				<view class="hmall-product-body">
-					<view v-if="getProductCardTags(product).length > 0" class="hmall-product-card-tags">
-						<text
-							v-for="(tag, tagIndex) in getProductCardTags(product)"
-							:key="product.id + '-card-tag-' + tagIndex"
-							class="hmall-product-card-tag"
-						>
-							{{ tag }}
-						</text>
+			<view v-if="hotProducts.length > 0" class="hmall-products-grid hmall-products-grid-dense">
+				<view
+					v-for="(product, index) in hotProducts"
+					:key="product.id + '-' + index"
+					class="hmall-product-card hmall-product-card-skeleton"
+					@click="emit('select-product', product)"
+				>
+					<view class="hmall-product-image-wrapper hmall-product-image-wrapper-fixed">
+						<image
+							class="hmall-product-image"
+							:src="getProductCover(product)"
+							@error="() => handleProductImageError(product.id)"
+							mode="aspectFill"
+						/>
 					</view>
-					<text class="hmall-product-title">{{ getProductTitle(product) }}</text>
-					<text v-if="getProductHighlight(product) != ''" class="hmall-product-highlight">{{ getProductHighlight(product) }}</text>
-					<view v-if="getProductServiceTags(product).length > 0" class="hmall-product-service-tags">
-						<text
-							v-for="(tag, tagIndex) in getProductServiceTags(product)"
-							:key="product.id + '-service-tag-' + tagIndex"
-							class="hmall-product-service-tag"
-						>
-							{{ tag }}
-						</text>
+					<view class="hmall-product-body">
+						<view v-if="getProductCardTags(product).length > 0" class="hmall-product-card-tags">
+							<text
+								v-for="(tag, tagIndex) in getProductCardTags(product)"
+								:key="product.id + '-card-tag-' + tagIndex"
+								class="hmall-product-card-tag"
+							>
+								{{ tag }}
+							</text>
+						</view>
+						<text class="hmall-product-title">{{ getProductTitle(product) }}</text>
+						<text v-if="getProductHighlight(product) != ''" class="hmall-product-highlight">{{ getProductHighlight(product) }}</text>
+						<view v-if="getProductServiceTags(product).length > 0" class="hmall-product-service-tags">
+							<text
+								v-for="(tag, tagIndex) in getProductServiceTags(product)"
+								:key="product.id + '-service-tag-' + tagIndex"
+								class="hmall-product-service-tag"
+							>
+								{{ tag }}
+							</text>
+						</view>
+						<view class="hmall-product-price-row">
+							<text class="hmall-product-price-value">¥{{ formatProductPrice(product) }}</text>
+							<text v-if="showMarketPrice(product)" class="hmall-product-market-price">¥{{ formatMarketPrice(product) }}</text>
+						</view>
+						<text v-if="getProductSalesText(product) != ''" class="hmall-product-sales">{{ getProductSalesText(product) }}</text>
 					</view>
-					<view class="hmall-product-price-row">
-						<text class="hmall-product-price-value">¥{{ formatProductPrice(product) }}</text>
-						<text v-if="showMarketPrice(product)" class="hmall-product-market-price">¥{{ formatMarketPrice(product) }}</text>
-					</view>
-					<text v-if="getProductSalesText(product) != ''" class="hmall-product-sales">{{ getProductSalesText(product) }}</text>
 				</view>
 			</view>
-		</view>
 
-		<view v-else-if="loading" class="hmall-loading-state">
-			<text class="hmall-loading-text">正在加载商品...</text>
-		</view>
+			<view v-else-if="loading" class="hmall-loading-state">
+				<text class="hmall-loading-text">正在加载商品...</text>
+			</view>
 
-		<EmptyState v-else text="当前分类暂无商品"></EmptyState>
+			<view v-else class="hmall-empty-wrap">
+				<EmptyState text="当前分类暂无商品"></EmptyState>
+			</view>
 
-		<view v-if="loading || showLoadMore" class="hmall-load-more-status">
-			<text class="hmall-loading-text">正在加载更多商品...</text>
-		</view>
+			<view v-if="loading || showLoadMore" class="hmall-load-more-status">
+				<text class="hmall-loading-text">正在加载更多商品...</text>
+			</view>
 
-		<view v-if="!hasMore && hotProducts.length > 0" class="hmall-feed-end-state">
-			<text class="hmall-feed-end-text">已经到底了</text>
+			<view v-if="!hasMore && hotProducts.length > 0" class="hmall-feed-end-state">
+				<text class="hmall-feed-end-text">已经到底了</text>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import EmptyState from '@/components/consumer/EmptyState.uvue'
 import type { Category, Product } from '@/utils/supabaseService.uts'
 import type { MarketingChannel, ChannelProduct, SimpleCategoryChannel } from '@/utils/mockChannelData.uts'
 
 const failedProductImageIds = ref<string[]>([])
 
+type SecondaryCategoryPage = {
+	id: string
+	items: Array<Category>
+}
+
 const props = defineProps({
 	currentCategory: {
 		type: String,
@@ -190,6 +214,28 @@ const emit = defineEmits<{
 	(e: 'select-product', product: Product): void
 }>()
 
+const secondaryCategoryPages = computed((): Array<SecondaryCategoryPage> => {
+	const pages: Array<SecondaryCategoryPage> = []
+	const source = props.secondaryCategoryDisplay
+	const pageSize = 10
+	let pageIndex = 0
+
+	while (pageIndex * pageSize < source.length) {
+		const startIndex = pageIndex * pageSize
+		const pageItems: Array<Category> = []
+		for (let i = startIndex; i < source.length && i < startIndex + pageSize; i++) {
+			pageItems.push(source[i])
+		}
+		pages.push({
+			id: 'secondary-page-' + pageIndex.toString(),
+			items: pageItems
+		} as SecondaryCategoryPage)
+		pageIndex = pageIndex + 1
+	}
+
+	return pages
+})
+
 function isImageIcon(icon: string): boolean {
 	if (icon == '') {
 		return false
@@ -315,57 +361,83 @@ function showMarketPrice(product: Product): boolean {
 
 <style scoped>
 .hmall-content {
-	padding: 0 20rpx 0;
+	padding: 0 16rpx 0;
 	box-sizing: border-box;
+	background: #f5f5f5;
 }
 
-.hmall-secondary-panel {
+
+.hmall-secondary-shell {
 	margin-top: 16rpx;
+	margin-bottom: 14rpx;
 	background: #ffffff;
-	border-radius: 20rpx;
-	padding: 18rpx 12rpx;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 12rpx;
+	border-radius: 18rpx;
+	overflow: hidden;
 	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
 }
 
+.hmall-secondary-scroll {
+	width: 100%;
+	height: 176rpx;
+}
+
+.hmall-secondary-pages {
+	display: flex;
+	flex-direction: row;
+	height: 176rpx;
+}
+
+.hmall-secondary-page {
+	width: 718rpx;
+	height: 176rpx;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	padding-left: 12rpx;
+	padding-right: 12rpx;
+	padding-top: 12rpx;
+	padding-bottom: 8rpx;
+	box-sizing: border-box;
+	flex-shrink: 0;
+}
+
 .hmall-secondary-item {
-	width: 124rpx;
+	width: 20%;
+	height: 78rpx;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 16rpx 8rpx;
-	border-radius: 16rpx;
-	background: #f7f7f7;
-	gap: 10rpx;
+	justify-content: center;
+	padding: 0 4rpx;
+	box-sizing: border-box;
 }
 
 .hmall-secondary-item-active {
-	background: #fff2f2;
+
 }
 
 .hmall-secondary-icon-wrap {
-	width: 68rpx;
-	height: 68rpx;
-	border-radius: 34rpx;
-	background: #ffffff;
+	width: 48rpx;
+	height: 48rpx;
+	border-radius: 16rpx;
+	background: #f6f6f6;
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	justify-content: center;
+	margin-bottom: 6rpx;
+	overflow: hidden;
 }
 
 .hmall-secondary-image {
-	width: 68rpx;
-	height: 68rpx;
-	border-radius: 34rpx;
+	width: 48rpx;
+	height: 48rpx;
+	border-radius: 16rpx;
 }
 
 .hmall-secondary-icon-text {
-	font-size: 28rpx;
-	color: #e2231a;
-	font-weight: 700;
+	font-size: 26rpx;
+	line-height: 1;
 }
 
 .hmall-secondary-name {
@@ -379,6 +451,11 @@ function showMarketPrice(product: Product): boolean {
 	white-space: nowrap;
 }
 
+.hmall-secondary-item-active .hmall-secondary-name {
+	color: #e1251b;
+	font-weight: 700;
+}
+
 .hmall-recommend-section {
 	display: flex;
 	flex-direction: row;
@@ -606,11 +683,17 @@ function showMarketPrice(product: Product): boolean {
 	margin-bottom: 12rpx;
 }
 
+.hmall-products-section {
+	background: #f5f5f5;
+	padding-bottom: 8rpx;
+}
+
 .hmall-products-grid {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: space-between;
+	background: #f5f5f5;
 	margin-top: 0;
 	min-height: 0;
 	padding-bottom: 20rpx;
@@ -634,9 +717,9 @@ function showMarketPrice(product: Product): boolean {
 	width: 100%;
 	padding-bottom: 100%;
 	position: relative;
-	border-radius: 8px;
+	border-radius: 18rpx 18rpx 0 0;
 	overflow: hidden;
-	background: #f5f5f5;
+	background: #f2f2f2;
 }
 
 .hmall-product-image {
@@ -759,6 +842,12 @@ function showMarketPrice(product: Product): boolean {
 	justify-content: center;
 }
 
+.hmall-empty-wrap {
+	background: #ffffff;
+	border-radius: 18rpx;
+	overflow: hidden;
+}
+
 .hmall-loading-text,
 .hmall-feed-end-text {
 	font-size: 24rpx;
diff --git a/pages/main/index.uvue b/pages/main/index.uvue
index d18e9a8a..a7309323 100644
--- a/pages/main/index.uvue
+++ b/pages/main/index.uvue
@@ -72,9 +72,118 @@
 				@select-product="navigateToProduct"
 			></HomeMallContent>
 
-			<HomeServiceContent
-				v-else
-			></HomeServiceContent>
+			<view v-else class="service-home-section">
+				<view class="service-hero-banner">
+					<view class="service-hero-content">
+						<text class="service-hero-tag">康养到家</text>
+						<text class="service-hero-title">专业康养服务到家</text>
+						<text class="service-hero-subtitle">护理照护｜康复指导｜陪诊陪护</text>
+						<view class="service-hero-tags">
+							<text class="service-hero-chip">平台认证</text>
+							<text class="service-hero-chip">上门服务</text>
+							<text class="service-hero-chip">服务可追溯</text>
+						</view>
+					</view>
+					<view class="service-hero-visual-wrap">
+						<view class="service-hero-visual service-hero-visual-primary">
+							<text class="service-hero-visual-text">护</text>
+						</view>
+						<view class="service-hero-visual service-hero-visual-secondary">
+							<text class="service-hero-visual-subtext">康</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="service-category-card">
+					<view
+						v-for="(item, index) in serviceCategories"
+						:key="buildListItemKey('service-category', item.id, index)"
+						class="service-category-item"
+						@tap="handleServiceCategoryClick(item)"
+					>
+						<view
+							:class="['service-category-icon', selectedServiceCategory == item.id ? 'service-category-icon-active' : '']"
+							:style="{ backgroundColor: item.color }"
+						>
+							<text class="service-category-icon-text">{{ item.iconText }}</text>
+						</view>
+						<text :class="['service-category-name', selectedServiceCategory == item.id ? 'service-category-name-active' : '']">{{ item.name }}</text>
+					</view>
+				</view>
+
+				<view class="service-shortcut-row">
+					<view
+						v-for="(item, index) in serviceShortcuts"
+						:key="buildListItemKey('service-shortcut', item.id, index)"
+						class="service-shortcut-card"
+						@tap="handleServiceShortcut(item.id)"
+					>
+						<text class="service-shortcut-icon">{{ item.iconText }}</text>
+						<view class="service-shortcut-body">
+							<text class="service-shortcut-title">{{ item.title }}</text>
+							<text class="service-shortcut-desc">{{ item.desc }}</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="service-products-section">
+					<view class="service-section-title-row">
+						<view>
+							<text class="service-section-title">推荐服务</text>
+							<text class="service-section-subtitle">{{ serviceSelectedCategoryLabel }}</text>
+						</view>
+						<text class="service-section-more" @tap="goServiceHall">更多</text>
+					</view>
+
+					<view v-if="serviceLoading" class="service-state-card">
+						<text class="service-state-title">正在加载服务...</text>
+						<text class="service-state-desc">请稍候，正在整理适合居家康养的服务内容。</text>
+					</view>
+
+					<view v-else-if="serviceProducts.length > 0" class="service-products-grid">
+						<view
+							v-for="(item, index) in serviceProducts"
+							:key="buildListItemKey('service-product', item.id, index)"
+							class="service-product-card"
+							@tap="goServiceDetail(item)"
+						>
+							<view class="service-product-cover" :style="{ background: item.coverGradient }">
+								<text class="service-product-cover-badge">到家服务</text>
+								<text class="service-product-cover-text">{{ item.imageText }}</text>
+							</view>
+							<view class="service-product-body">
+								<text class="service-product-title">{{ item.title }}</text>
+								<text class="service-product-subtitle">{{ item.subtitle }}</text>
+								<view class="service-product-tags">
+									<text
+										v-for="(tag, tagIndex) in item.tags"
+										:key="buildListItemKey(item.id + '-tag', tag, tagIndex)"
+										class="service-product-tag"
+									>
+										{{ tag }}
+									</text>
+								</view>
+								<view class="service-product-price-row">
+									<text class="service-product-price-symbol">¥</text>
+									<text class="service-product-price">{{ item.price }}</text>
+									<text class="service-product-unit">起 / {{ item.unit }}</text>
+								</view>
+								<text class="service-product-sales">{{ item.salesText }}</text>
+								<view class="service-product-action-row">
+									<view class="service-product-secondary-btn" @tap.stop="showServicePreview(item)">查看详情</view>
+									<view class="service-product-primary-btn" @tap.stop="goServiceDetail(item)">立即预约</view>
+								</view>
+							</view>
+						</view>
+					</view>
+
+					<view v-else class="service-state-card">
+						<text class="service-state-title">该分类服务正在完善</text>
+						<text class="service-state-desc">可先查看全部服务，或进入服务大厅了解更多上门服务。</text>
+						<view class="service-state-action" @tap="goServiceHall">进入服务大厅</view>
+					</view>
+				</view>
+			</view>
 
 			<view class="safe-area" :style="{ height: bottomSafeArea + 88 + 'px' }"></view>
 		</scroll-view>
@@ -115,8 +224,9 @@
 import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
 import { onShow, onLoad, onHide } from '@dcloudio/uni-app'
 import HomeMallContent from '@/components/home/HomeMallContent.uvue'
-import HomeServiceContent from '@/components/home/HomeServiceContent.uvue'
 import JdLikeHomeHeader from '@/components/home/JdLikeHomeHeader.uvue'
+import { fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
+import type { HomeServiceCatalogType } from '@/types/home-service.uts'
 import supabaseService from '@/utils/supabaseService.uts'
 import type { Product, Category, Brand, PaginatedResponse } from '@/utils/supabaseService.uts'
 import { getRecommendMarketingChannels } from '@/utils/mockChannelData.uts'
@@ -178,6 +288,314 @@ const headerSearchPlaceholder = computed((): string => {
 	return currentPlaceholderKeyword.value != '' ? currentPlaceholderKeyword.value : '感冒药 / 康复护理 / 居家护理 / 血压计'
 })
 
+type HomeCareCategoryType = {
+	id: string
+	name: string
+	iconText: string
+	color: string
+}
+
+type HomeCareServiceProductType = {
+	id: string
+	title: string
+	subtitle: string
+	categoryId: string
+	price: number
+	unit: string
+	tags: Array<string>
+	salesText: string
+	imageText: string
+	coverGradient: string
+	detailPath: string
+	bookingPath: string
+}
+
+type ServiceShortcutType = {
+	id: string
+	title: string
+	desc: string
+	iconText: string
+}
+
+const serviceCategories: Array<HomeCareCategoryType> = [
+	{ id: 'basic_care', name: '基础照护', iconText: '护', color: '#EAFBF7' },
+	{ id: 'rehab', name: '康复指导', iconText: '康', color: '#EFF6FF' },
+	{ id: 'escort', name: '陪诊服务', iconText: '陪', color: '#FFF7ED' },
+	{ id: 'nursing', name: '上门护理', iconText: '医', color: '#F0FDFA' },
+	{ id: 'chronic', name: '慢病随访', iconText: '访', color: '#F5F3FF' },
+	{ id: 'assessment', name: '健康评估', iconText: '评', color: '#ECFEFF' },
+	{ id: 'elderly', name: '适老改造', iconText: '老', color: '#FEF3C7' },
+	{ id: 'cleaning', name: '居家保洁', iconText: '洁', color: '#F1F5F9' },
+	{ id: 'medicine', name: '用药提醒', iconText: '药', color: '#FCE7F3' },
+	{ id: 'all', name: '全部服务', iconText: '全', color: '#F3F4F6' }
+]
+
+const serviceShortcuts: Array<ServiceShortcutType> = [
+	{ id: 'guarantee', title: '服务保障', desc: '认证机构与过程留痕', iconText: '保' },
+	{ id: 'hall', title: '服务大厅', desc: '查看全部居家服务', iconText: '厅' },
+	{ id: 'tracking', title: '服务单跟踪', desc: '预约进度随时可查', iconText: '单' }
+]
+
+const serviceLoading = ref(false)
+const selectedServiceCategory = ref('all')
+const allServiceProducts = ref<Array<HomeCareServiceProductType>>([])
+
+const serviceProducts = computed((): Array<HomeCareServiceProductType> => {
+	if (selectedServiceCategory.value == 'all') {
+		return allServiceProducts.value
+	}
+	const result: Array<HomeCareServiceProductType> = []
+	for (let i = 0; i < allServiceProducts.value.length; i++) {
+		const item = allServiceProducts.value[i]
+		if (item.categoryId == selectedServiceCategory.value) {
+			result.push(item)
+		}
+	}
+	return result
+})
+
+const serviceSelectedCategoryLabel = computed((): string => {
+	for (let i = 0; i < serviceCategories.length; i++) {
+		if (serviceCategories[i].id == selectedServiceCategory.value) {
+			return serviceCategories[i].name
+		}
+	}
+	return '全部服务'
+})
+
+function getServiceGradient(categoryId: string): string {
+	if (categoryId == 'basic_care') {
+		return 'linear-gradient(135deg, #e0f7f5 0%, #f0fdfb 100%)'
+	}
+	if (categoryId == 'rehab') {
+		return 'linear-gradient(135deg, #e8f1ff 0%, #f5f9ff 100%)'
+	}
+	if (categoryId == 'escort') {
+		return 'linear-gradient(135deg, #fff1e4 0%, #fffaf5 100%)'
+	}
+	if (categoryId == 'nursing') {
+		return 'linear-gradient(135deg, #def7f3 0%, #eefcf9 100%)'
+	}
+	if (categoryId == 'chronic') {
+		return 'linear-gradient(135deg, #efe9ff 0%, #f8f5ff 100%)'
+	}
+	if (categoryId == 'assessment') {
+		return 'linear-gradient(135deg, #ebfbff 0%, #f6fdff 100%)'
+	}
+	return 'linear-gradient(135deg, #eef4f8 0%, #f7fafc 100%)'
+}
+
+function mapServiceCatalogCategory(category: string): string {
+	if (category == '日常照护') {
+		return 'basic_care'
+	}
+	if (category == '康复支持') {
+		return 'rehab'
+	}
+	if (category == '健康管理') {
+		return 'chronic'
+	}
+	return 'all'
+}
+
+function buildServiceSalesText(serviceId: string): string {
+	if (serviceId == 'svc-001') {
+		return '已服务230+'
+	}
+	if (serviceId == 'svc-002') {
+		return '已服务180+'
+	}
+	if (serviceId == 'svc-003') {
+		return '已服务150+'
+	}
+	return '已服务99+'
+}
+
+function buildServiceImageText(categoryId: string): string {
+	if (categoryId == 'basic_care') {
+		return '护'
+	}
+	if (categoryId == 'rehab') {
+		return '康'
+	}
+	if (categoryId == 'escort') {
+		return '陪'
+	}
+	if (categoryId == 'nursing') {
+		return '医'
+	}
+	if (categoryId == 'chronic') {
+		return '访'
+	}
+	if (categoryId == 'assessment') {
+		return '评'
+	}
+	return '服'
+}
+
+function buildMockServiceProducts(): Array<HomeCareServiceProductType> {
+	// TODO: 后续替换为服务首页专用接口，当前仅在真实服务目录为空时兜底。
+	return [
+		{
+			id: 'svc-001',
+			title: '基础上门照护',
+			subtitle: '协助起居、日常陪护、健康观察',
+			categoryId: 'basic_care',
+			price: 99,
+			unit: '次',
+			tags: ['平台认证', '可预约'],
+			salesText: '已服务230+',
+			imageText: '护',
+			coverGradient: getServiceGradient('basic_care'),
+			detailPath: '/pages/mall/consumer/home-service/service-detail?id=svc-001',
+			bookingPath: '/pages/mall/consumer/home-service/service-detail?id=svc-001&mode=booking'
+		},
+		{
+			id: 'svc-002',
+			title: '居家康复指导',
+			subtitle: '术后恢复、动作训练、康复评估',
+			categoryId: 'rehab',
+			price: 129,
+			unit: '次',
+			tags: ['康复指导', '上门服务'],
+			salesText: '已服务180+',
+			imageText: '康',
+			coverGradient: getServiceGradient('rehab'),
+			detailPath: '/pages/mall/consumer/home-service/service-detail?id=svc-002',
+			bookingPath: '/pages/mall/consumer/home-service/service-detail?id=svc-002&mode=booking'
+		},
+		{
+			id: 'svc-mock-escort',
+			title: '陪诊陪护服务',
+			subtitle: '挂号陪同、检查陪同、取药协助',
+			categoryId: 'escort',
+			price: 168,
+			unit: '次',
+			tags: ['陪诊服务', '安心陪护'],
+			salesText: '已服务320+',
+			imageText: '陪',
+			coverGradient: getServiceGradient('escort'),
+			detailPath: '',
+			bookingPath: ''
+		},
+		{
+			id: 'svc-003',
+			title: '慢病随访服务',
+			subtitle: '血压血糖记录、健康建议、定期回访',
+			categoryId: 'chronic',
+			price: 79,
+			unit: '次',
+			tags: ['慢病管理', '健康随访'],
+			salesText: '已服务150+',
+			imageText: '访',
+			coverGradient: getServiceGradient('chronic'),
+			detailPath: '/pages/mall/consumer/home-service/service-detail?id=svc-003',
+			bookingPath: '/pages/mall/consumer/home-service/service-detail?id=svc-003&mode=booking'
+		}
+	]
+}
+
+function buildServiceProductsFromCatalog(catalog: Array<HomeServiceCatalogType>): Array<HomeCareServiceProductType> {
+	const result: Array<HomeCareServiceProductType> = []
+	for (let i = 0; i < catalog.length; i++) {
+		const item = catalog[i]
+		const categoryId = mapServiceCatalogCategory(item.category)
+		result.push({
+			id: item.id,
+			title: item.name,
+			subtitle: item.summary,
+			categoryId,
+			price: item.price,
+			unit: '次',
+			tags: item.tags.length > 0 ? item.tags.slice(0, 2) : ['平台认证', '可预约'],
+			salesText: buildServiceSalesText(item.id),
+			imageText: buildServiceImageText(categoryId),
+			coverGradient: getServiceGradient(categoryId),
+			detailPath: '/pages/mall/consumer/home-service/service-detail?id=' + encodeURIComponent(item.id),
+			bookingPath: '/pages/mall/consumer/home-service/service-detail?id=' + encodeURIComponent(item.id) + '&mode=booking'
+		} as HomeCareServiceProductType)
+	}
+	return result
+}
+
+async function loadServiceHomeData(): Promise<void> {
+	serviceLoading.value = true
+	try {
+		const catalog = await fetchHomeServiceCatalog()
+		if (catalog.length > 0) {
+			allServiceProducts.value = buildServiceProductsFromCatalog(catalog)
+		} else {
+			allServiceProducts.value = buildMockServiceProducts()
+		}
+	} catch (error) {
+		console.error('加载服务首页数据失败', error)
+		allServiceProducts.value = buildMockServiceProducts()
+	} finally {
+		serviceLoading.value = false
+	}
+}
+
+function handleServiceCategoryClick(item: HomeCareCategoryType): void {
+	selectedServiceCategory.value = item.id
+	if (item.id == 'all') {
+		return
+	}
+	let hasMatched = false
+	for (let i = 0; i < allServiceProducts.value.length; i++) {
+		if (allServiceProducts.value[i].categoryId == item.id) {
+			hasMatched = true
+			break
+		}
+	}
+	if (!hasMatched) {
+		uni.showToast({
+			title: '该类服务正在完善',
+			icon: 'none'
+		})
+	}
+}
+
+function handleServiceShortcut(shortcutId: string): void {
+	if (shortcutId == 'hall') {
+		goServiceHall()
+		return
+	}
+	if (shortcutId == 'tracking') {
+		uni.navigateTo({ url: '/pages/mall/consumer/home-service/index' })
+		return
+	}
+	uni.showToast({
+		title: '服务保障体系建设中',
+		icon: 'none'
+	})
+}
+
+function showServicePreview(item: HomeCareServiceProductType): void {
+	if (item.detailPath != '') {
+		uni.navigateTo({ url: item.detailPath })
+		return
+	}
+	uni.showToast({
+		title: '服务详情建设中',
+		icon: 'none'
+	})
+}
+
+function goServiceDetail(item: HomeCareServiceProductType): void {
+	if (item.bookingPath != '') {
+		uni.navigateTo({ url: item.bookingPath })
+		return
+	}
+	uni.showToast({
+		title: '服务详情建设中',
+		icon: 'none'
+	})
+}
+
+function goServiceHall(): void {
+	uni.navigateTo({ url: '/pages/mall/consumer/home-service/index' })
+}
+
 // 分类标签栏相关
 type CategoryItem = {
 	id: string
@@ -343,6 +761,9 @@ function handleHeaderSearch(keyword: string) {
 function handleTopModuleChange(moduleKey: string) {
 	activeTopModule.value = moduleKey
 	showCategoryPanel.value = false
+	if (moduleKey == 'service' && allServiceProducts.value.length == 0 && !serviceLoading.value) {
+		void loadServiceHomeData()
+	}
 }
 
 function handleMainScrollToLower() {
@@ -483,9 +904,22 @@ function buildSimpleCategoryChannels(categoryId: string): SimpleCategoryChannel[
 	return []
 }
 
+function buildVisibleRecommendChannels(): MarketingChannel[] {
+	const source = getRecommendMarketingChannels()
+	const visible: MarketingChannel[] = []
+	for (let i = 0; i < source.length; i++) {
+		const channel = source[i]
+		if (channel.title == '排行榜' || channel.title == '品质优选') {
+			continue
+		}
+		visible.push(channel)
+	}
+	return visible
+}
+
 function applyChannelDisplay(categoryId: string): void {
 	if (categoryId === 'recommend') {
-		marketingChannels.value = getRecommendMarketingChannels()
+		marketingChannels.value = buildVisibleRecommendChannels()
 		categorySimpleChannels.value = []
 		return
 	}
@@ -1161,6 +1595,7 @@ const initData = async () => {
 	await loadCategories()
     await loadBrands()
 	await loadHotKeywords()
+	await loadServiceHomeData()
 	if (await consumeSelectedCategoryFromStorage()) {
 		await loadRecommendedProducts(defaultLoadLimit)
 		return
@@ -1687,6 +2122,462 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	width: 100%;
 }
 
+.service-home-section {
+	background-color: #f4f8fb;
+	padding: 16rpx 16rpx 32rpx;
+	box-sizing: border-box;
+	min-height: 100%;
+}
+
+.service-hero-banner {
+	min-height: 240rpx;
+	border-radius: 28rpx;
+	padding: 28rpx;
+	background: linear-gradient(135deg, #e0f7f5 0%, #eff6ff 55%, #fff7ed 100%);
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	overflow: hidden;
+	margin-bottom: 18rpx;
+	box-sizing: border-box;
+}
+
+.service-hero-content {
+	flex: 1;
+	flex-direction: column;
+	padding-right: 12rpx;
+	box-sizing: border-box;
+}
+
+.service-hero-tag {
+	width: 128rpx;
+	height: 38rpx;
+	line-height: 38rpx;
+	text-align: center;
+	border-radius: 999rpx;
+	background-color: #ffffff;
+	color: #0f766e;
+	font-size: 22rpx;
+	font-weight: 700;
+	margin-bottom: 12rpx;
+}
+
+.service-hero-title {
+	font-size: 40rpx;
+	font-weight: 700;
+	color: #16324f;
+	margin-bottom: 10rpx;
+	line-height: 1.3;
+}
+
+.service-hero-subtitle {
+	font-size: 24rpx;
+	color: #64748b;
+	margin-bottom: 16rpx;
+	line-height: 34rpx;
+}
+
+.service-hero-tags {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	margin-right: -8rpx;
+	margin-bottom: -8rpx;
+}
+
+.service-hero-chip {
+	font-size: 22rpx;
+	color: #0f766e;
+	background-color: rgba(255, 255, 255, 0.86);
+	border-radius: 999rpx;
+	padding: 6rpx 14rpx;
+	margin-right: 8rpx;
+	margin-bottom: 8rpx;
+	box-sizing: border-box;
+}
+
+.service-hero-visual-wrap {
+	width: 156rpx;
+	height: 156rpx;
+	position: relative;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.service-hero-visual {
+	position: absolute;
+	align-items: center;
+	justify-content: center;
+	border-radius: 999rpx;
+	background-color: rgba(255, 255, 255, 0.72);
+	box-shadow: 0 12rpx 24rpx rgba(14, 165, 164, 0.12);
+}
+
+.service-hero-visual-primary {
+	width: 128rpx;
+	height: 128rpx;
+	right: 0;
+	top: 0;
+}
+
+.service-hero-visual-secondary {
+	width: 74rpx;
+	height: 74rpx;
+	left: 0;
+	bottom: 6rpx;
+	background-color: rgba(15, 118, 110, 0.12);
+	box-shadow: none;
+}
+
+.service-hero-visual-text {
+	font-size: 56rpx;
+	font-weight: 700;
+	color: #0f766e;
+}
+
+.service-hero-visual-subtext {
+	font-size: 30rpx;
+	font-weight: 700;
+	color: #0f766e;
+}
+
+.service-category-card {
+	background-color: #ffffff;
+	border-radius: 28rpx;
+	padding: 22rpx 12rpx 10rpx;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-bottom: 18rpx;
+	box-shadow: 0 10rpx 24rpx rgba(15, 23, 42, 0.04);
+	box-sizing: border-box;
+}
+
+.service-category-item {
+	width: 20%;
+	align-items: center;
+	margin-bottom: 20rpx;
+	box-sizing: border-box;
+}
+
+.service-category-icon {
+	width: 76rpx;
+	height: 76rpx;
+	border-radius: 24rpx;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 10rpx;
+	border-width: 2rpx;
+	border-style: solid;
+	border-color: transparent;
+	box-sizing: border-box;
+}
+
+.service-category-icon-active {
+	border-color: #14b8a6;
+	box-shadow: 0 8rpx 18rpx rgba(20, 184, 166, 0.14);
+}
+
+.service-category-icon-text {
+	font-size: 30rpx;
+	font-weight: 700;
+	color: #0f766e;
+}
+
+.service-category-name {
+	font-size: 23rpx;
+	color: #334155;
+	text-align: center;
+	line-height: 30rpx;
+	padding: 0 4rpx;
+	box-sizing: border-box;
+}
+
+.service-category-name-active {
+	color: #0f766e;
+	font-weight: 700;
+}
+
+.service-shortcut-row {
+	flex-direction: row;
+	justify-content: space-between;
+	margin-bottom: 18rpx;
+}
+
+.service-shortcut-card {
+	width: 32%;
+	background-color: #ffffff;
+	border-radius: 22rpx;
+	padding: 18rpx 16rpx;
+	flex-direction: row;
+	align-items: center;
+	box-sizing: border-box;
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+	min-height: 116rpx;
+}
+
+.service-shortcut-icon {
+	width: 52rpx;
+	height: 52rpx;
+	line-height: 52rpx;
+	text-align: center;
+	border-radius: 18rpx;
+	background-color: #e8f7f6;
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #0f766e;
+	flex-shrink: 0;
+}
+
+.service-shortcut-body {
+	flex: 1;
+	margin-left: 12rpx;
+	min-width: 0;
+	flex-direction: column;
+}
+
+.service-shortcut-title {
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #16324f;
+	line-height: 1.3;
+}
+
+.service-shortcut-desc {
+	margin-top: 6rpx;
+	font-size: 20rpx;
+	color: #64748b;
+	line-height: 28rpx;
+}
+
+.service-products-section {
+	background-color: #f4f8fb;
+}
+
+.service-section-title-row {
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 14rpx;
+}
+
+.service-section-title {
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #16324f;
+	line-height: 1.3;
+}
+
+.service-section-subtitle {
+	margin-top: 6rpx;
+	font-size: 22rpx;
+	color: #94a3b8;
+	line-height: 30rpx;
+}
+
+.service-section-more {
+	font-size: 24rpx;
+	color: #94a3b8;
+	padding: 8rpx 0 8rpx 12rpx;
+}
+
+.service-products-grid {
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.service-product-card {
+	width: 49%;
+	background-color: #ffffff;
+	border-radius: 22rpx;
+	overflow: hidden;
+	margin-bottom: 14rpx;
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.05);
+	box-sizing: border-box;
+}
+
+.service-product-cover {
+	height: 220rpx;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	padding-top: 28rpx;
+	box-sizing: border-box;
+}
+
+.service-product-cover-badge {
+	position: absolute;
+	top: 14rpx;
+	left: 14rpx;
+	font-size: 20rpx;
+	color: #0f766e;
+	background-color: rgba(255, 255, 255, 0.82);
+	border-radius: 999rpx;
+	padding: 4rpx 10rpx;
+	box-sizing: border-box;
+}
+
+.service-product-cover-text {
+	font-size: 64rpx;
+	font-weight: 700;
+	color: #0f766e;
+}
+
+.service-product-body {
+	padding: 18rpx;
+	flex-direction: column;
+	box-sizing: border-box;
+}
+
+.service-product-title {
+	font-size: 28rpx;
+	font-weight: 700;
+	color: #1f2937;
+	line-height: 36rpx;
+	min-height: 72rpx;
+	max-height: 72rpx;
+	overflow: hidden;
+}
+
+.service-product-subtitle {
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	color: #64748b;
+	line-height: 32rpx;
+	min-height: 64rpx;
+	max-height: 64rpx;
+	overflow: hidden;
+}
+
+.service-product-tags {
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 10rpx;
+	margin-right: -6rpx;
+	margin-bottom: -6rpx;
+}
+
+.service-product-tag {
+	font-size: 20rpx;
+	color: #0f766e;
+	background-color: #e0f2f1;
+	border-radius: 8rpx;
+	padding: 4rpx 8rpx;
+	margin-right: 6rpx;
+	margin-bottom: 6rpx;
+	box-sizing: border-box;
+}
+
+.service-product-price-row {
+	margin-top: 12rpx;
+	flex-direction: row;
+	align-items: flex-end;
+}
+
+.service-product-price-symbol {
+	font-size: 22rpx;
+	color: #e1251b;
+	font-weight: 700;
+	line-height: 1;
+	margin-bottom: 6rpx;
+}
+
+.service-product-price {
+	font-size: 36rpx;
+	color: #e1251b;
+	font-weight: 700;
+	line-height: 1;
+}
+
+.service-product-unit {
+	font-size: 22rpx;
+	color: #64748b;
+	margin-left: 4rpx;
+	margin-bottom: 4rpx;
+	line-height: 1;
+}
+
+.service-product-sales {
+	margin-top: 6rpx;
+	font-size: 21rpx;
+	color: #94a3b8;
+	line-height: 30rpx;
+}
+
+.service-product-action-row {
+	margin-top: 14rpx;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.service-product-secondary-btn,
+.service-product-primary-btn {
+	height: 58rpx;
+	border-radius: 999rpx;
+	align-items: center;
+	justify-content: center;
+	font-size: 22rpx;
+	font-weight: 700;
+	padding: 0 16rpx;
+	box-sizing: border-box;
+}
+
+.service-product-secondary-btn {
+	width: 47%;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #cbd5e1;
+	color: #476072;
+	background-color: #ffffff;
+}
+
+.service-product-primary-btn {
+	width: 49%;
+	background-color: #16a085;
+	color: #ffffff;
+}
+
+.service-state-card {
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	padding: 28rpx 24rpx;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+	box-sizing: border-box;
+}
+
+.service-state-title {
+	font-size: 28rpx;
+	font-weight: 700;
+	color: #16324f;
+	line-height: 1.3;
+}
+
+.service-state-desc {
+	margin-top: 10rpx;
+	font-size: 22rpx;
+	color: #64748b;
+	line-height: 32rpx;
+	text-align: center;
+}
+
+.service-state-action {
+	margin-top: 18rpx;
+	height: 68rpx;
+	line-height: 68rpx;
+	padding: 0 28rpx;
+	border-radius: 999rpx;
+	background-color: #16a085;
+	color: #ffffff;
+	font-size: 24rpx;
+	font-weight: 700;
+	text-align: center;
+	box-sizing: border-box;
+}
+
 .pdd-home-header {
 	position: fixed;
 	top: 0;
diff --git a/pages/mall/consumer/home-service/service-detail.uvue b/pages/mall/consumer/home-service/service-detail.uvue
index 85fd88b2..4b56902b 100644
--- a/pages/mall/consumer/home-service/service-detail.uvue
+++ b/pages/mall/consumer/home-service/service-detail.uvue
@@ -1,72 +1,83 @@
 <template>
-	<view class="booking-detail-page">
-		<ServicePageScaffold title="预约服务" fallback-url="/pages/mall/consumer/home-service/index">
-			<view class="detail-service-summary">
-				<view class="detail-summary-cover">
-					<text class="detail-summary-cover-text">{{ serviceImageText }}</text>
+	<view class="booking-page-shell">
+		<view class="detail-fixed-header">
+			<ServicePageHeader title="康养预约" fallback-url="/pages/mall/consumer/home-service/index"></ServicePageHeader>
+		</view>
+		<view class="detail-header-placeholder" :style="{ height: headerHeight + 'px' }"></view>
+		<scroll-view class="detail-scroll" scroll-y="true">
+			<view class="summary-card">
+				<view class="summary-top-row">
+					<view class="summary-cover">
+						<text class="summary-cover-text">{{ serviceImageText }}</text>
+					</view>
+					<view class="summary-main">
+						<text class="summary-title">{{ serviceTitle }}</text>
+						<text class="summary-desc">{{ serviceSubtitle }}</text>
+						<text class="summary-meta">服务时长：{{ serviceDuration }}</text>
+						<text class="summary-meta">有效期：{{ serviceValidity }}</text>
+					</view>
 				</view>
-				<view class="detail-summary-main">
-					<text class="detail-summary-title">{{ serviceTitle }}</text>
-					<text class="detail-summary-desc">{{ serviceSubtitle }}</text>
-					<text class="detail-summary-duration">服务时长：{{ serviceDuration }}</text>
-					<view class="detail-summary-tags">
-						<text v-for="tag in guaranteeTags" :key="tag.id" class="detail-summary-tag">{{ tag.label }}</text>
-					</view>
-					<view class="detail-summary-price-row">
-						<text class="detail-summary-price-prefix">¥</text>
-						<text class="detail-summary-price">{{ servicePrice }}</text>
-						<text class="detail-summary-price-unit">起 / 次</text>
-					</view>
+				<view class="summary-tag-row">
+					<text v-for="tag in summaryGuaranteeTags" :key="tag.id" class="summary-tag">{{ tag.label }}</text>
+				</view>
+				<view class="summary-price-row">
+					<text class="summary-price-prefix">¥</text>
+					<text class="summary-price">{{ minPriceText }}</text>
+					<text class="summary-price-unit">起</text>
 				</view>
 			</view>
 
-			<ServicePanel title="服务说明卡" subtitle="围绕服务内容、适用人群和注意事项建立预约预期。">
-				<view class="detail-info-list">
-					<view class="detail-info-item">
-						<text class="detail-info-label">服务内容</text>
-						<text class="detail-info-value">{{ serviceSubtitle }}</text>
+			<ServicePanel title="Step1 服务地址" subtitle="确认上门地址、楼层与入户条件。">
+				<view class="form-item">
+					<text class="label">上门地址</text>
+					<view class="value-card" @click="selectAddress">
+						<text class="value-card-text">{{ addressLineText }}</text>
+						<text class="value-card-action">点击更换</text>
 					</view>
-					<view class="detail-info-item">
-						<text class="detail-info-label">适用人群</text>
-						<text class="detail-info-value">{{ serviceSuitableFor }}</text>
+				</view>
+				<view class="form-grid">
+					<view class="form-grid-item">
+						<text class="label">所在区域</text>
+						<input v-model="careArea" class="input" placeholder="请输入区域" />
 					</view>
-					<view class="detail-info-item">
-						<text class="detail-info-label">服务时长</text>
-						<text class="detail-info-value">{{ serviceDuration }}</text>
+					<view class="form-grid-item">
+						<text class="label">楼层</text>
+						<input v-model="careFloor" class="input" placeholder="如 6 楼" />
 					</view>
-					<view class="detail-info-item">
-						<text class="detail-info-label">注意事项</text>
-						<text class="detail-info-value">预约成功后请保持电话畅通，首次上门建议家属在场。</text>
-					</view>
-					<view class="detail-info-item">
-						<text class="detail-info-label">不包含项目</text>
-						<text class="detail-info-value">{{ serviceExcludeText }}</text>
+				</view>
+				<view class="form-item form-item-last">
+					<text class="label">是否有电梯</text>
+					<view class="pill-row">
+						<view :class="['pill', careHasElevator ? 'pill-active' : '']" @click="setElevator(true)">
+							<text :class="['pill-text', careHasElevator ? 'pill-text-active' : '']">有电梯</text>
+						</view>
+						<view :class="['pill', !careHasElevator ? 'pill-active' : '']" @click="setElevator(false)">
+							<text :class="['pill-text', !careHasElevator ? 'pill-text-active' : '']">无电梯</text>
+						</view>
 					</view>
 				</view>
 			</ServicePanel>
 
-			<ServicePanel title="Step1 服务地址" subtitle="没有选过地址时先提示用户补全上门地址。">
-				<view class="booking-step-card">
-					<text class="step-card-title">上门服务地址</text>
-					<text v-if="addressText == ''" class="step-card-placeholder">请选择上门服务地址</text>
-					<text v-else class="step-card-value">{{ addressText }}</text>
-					<view class="step-card-action" @click="selectAddress">选择地址</view>
-				</view>
-			</ServicePanel>
-
-			<ServicePanel title="Step2 服务机构 / 服务人员" subtitle="当前先展示静态推荐机构，后续可接入真实人员选择。">
-				<view class="booking-step-card agency-card">
-					<view class="agency-card-top">
-						<text class="step-card-title">{{ agency.name }}</text>
-						<text class="agency-card-distance">{{ agency.distance }}</text>
+			<ServicePanel title="Step2 服务机构 / 服务人员" subtitle="当前优先展示平台推荐机构，后续可接入真实选择接口。">
+				<view class="agency-card">
+					<view class="agency-top-row">
+						<view>
+							<text class="agency-name">{{ agency.name }}</text>
+							<text class="agency-meta">{{ agency.distance }} ｜ 评分 {{ agency.rating }}</text>
+						</view>
+						<text class="agency-badge">平台认证</text>
+					</view>
+					<text class="agency-desc">{{ agency.summary }}</text>
+					<text class="agency-desc">服务资质：护理员上门、服务留痕、预约前电话确认</text>
+					<view class="action-row">
+						<view class="ghost-btn" @click="handleAgencyReplace"><text class="ghost-btn-text">更换机构</text></view>
+						<view class="ghost-btn" @click="handleAgencyContact"><text class="ghost-btn-text">立即联系</text></view>
+						<view class="ghost-btn" @click="handleAgencyNavigate"><text class="ghost-btn-text">立即导航</text></view>
 					</view>
-					<text class="agency-card-meta">评分 {{ agency.rating }}</text>
-					<text class="step-card-value">{{ agency.summary }}</text>
-					<text class="agency-card-todo">TODO：后续接入真实服务机构 / 服务人员选择接口。</text>
 				</view>
 			</ServicePanel>
 
-			<ServicePanel title="Step3 上门时间" subtitle="先完成日期和时间段选择，再提交预约申请。">
+			<ServicePanel title="Step3 上门时间" subtitle="先选日期和时间段，再提交预约。">
 				<scroll-view class="booking-day-scroll" direction="horizontal" :show-scrollbar="false">
 					<view class="booking-day-row">
 						<view
@@ -93,49 +104,167 @@
 				</view>
 			</ServicePanel>
 
-			<ServicePanel title="Step4 联系人信息" subtitle="使用现有 input 组件完成预约联系人填写。">
-				<view class="contact-form-item">
-					<text class="contact-form-label">联系人姓名</text>
-					<input v-model="contactName" class="contact-form-input" placeholder="请输入联系人姓名" />
-				</view>
-				<view class="contact-form-item">
-					<text class="contact-form-label">联系电话</text>
-					<input v-model="contactPhone" class="contact-form-input" type="number" placeholder="请输入联系电话" />
-				</view>
-				<view class="contact-form-item">
-					<text class="contact-form-label">性别</text>
-					<view class="gender-row">
-						<view :class="['gender-pill', contactGender == '先生' ? 'gender-pill-active' : '']" @click="contactGender = '先生'">先生</view>
-						<view :class="['gender-pill', contactGender == '女士' ? 'gender-pill-active' : '']" @click="contactGender = '女士'">女士</view>
+			<ServicePanel title="Step4 服务对象信息" subtitle="补全被照护人情况，便于机构判断服务方案。">
+				<view class="form-grid">
+					<view class="form-grid-item">
+						<text class="label">服务对象姓名</text>
+						<input v-model="recipientName" class="input" placeholder="请输入姓名" />
+					</view>
+					<view class="form-grid-item">
+						<text class="label">年龄</text>
+						<input v-model="recipientAgeText" class="input" type="number" placeholder="请输入年龄" />
 					</view>
 				</view>
-				<view class="contact-form-item">
-					<text class="contact-form-label">备注</text>
-					<textarea v-model="remarkText" class="contact-form-textarea" placeholder="如行动不便、术后照护重点、上门注意事项"></textarea>
+				<view class="form-grid">
+					<view class="form-grid-item">
+						<text class="label">性别</text>
+						<view class="pill-row">
+							<view :class="['pill', recipientGender == '男' ? 'pill-active' : '']" @click="setRecipientGender('男')">
+								<text :class="['pill-text', recipientGender == '男' ? 'pill-text-active' : '']">男</text>
+							</view>
+							<view :class="['pill', recipientGender == '女' ? 'pill-active' : '']" @click="setRecipientGender('女')">
+								<text :class="['pill-text', recipientGender == '女' ? 'pill-text-active' : '']">女</text>
+							</view>
+						</view>
+					</view>
+					<view class="form-grid-item">
+						<text class="label">与下单人关系</text>
+						<input v-model="recipientRelation" class="input" placeholder="如 母亲 / 父亲 / 本人" />
+					</view>
+				</view>
+				<view class="form-item">
+					<text class="label">身体情况</text>
+					<textarea v-model="recipientHealthStatus" class="textarea" placeholder="请输入身体情况，如术后恢复、慢病随访、行动不便"></textarea>
+				</view>
+				<view class="form-item">
+					<text class="label">行动能力</text>
+					<input v-model="recipientMobilityLevel" class="input" placeholder="如 需要搀扶 / 轮椅出行 / 可自理" />
+				</view>
+				<view class="form-item">
+					<text class="label">风险标签</text>
+					<view class="tag-row">
+						<view
+							v-for="item in careRiskOptions"
+							:key="item.id"
+							:class="['tag-chip', item.selected ? 'tag-chip-active' : '']"
+							@click="toggleRiskOption(item.id)"
+						>
+							<text :class="['tag-chip-text', item.selected ? 'tag-chip-text-active' : '']">{{ item.label }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="form-item form-item-last">
+					<text class="label">家属陪同</text>
+					<view class="pill-row">
+						<view :class="['pill', recipientNeedFamilyPresent ? 'pill-active' : '']" @click="setFamilyPresent(true)">
+							<text :class="['pill-text', recipientNeedFamilyPresent ? 'pill-text-active' : '']">需要家属在场</text>
+						</view>
+						<view :class="['pill', !recipientNeedFamilyPresent ? 'pill-active' : '']" @click="setFamilyPresent(false)">
+							<text :class="['pill-text', !recipientNeedFamilyPresent ? 'pill-text-active' : '']">可独立服务</text>
+						</view>
+					</view>
 				</view>
 			</ServicePanel>
 
-			<ServicePanel title="用户保障卡" subtitle="让预约页更像服务平台而不是普通商品页。">
-				<view class="guarantee-grid">
-					<view v-for="item in guaranteeTags" :key="item.id" class="guarantee-grid-item">
-						<text class="guarantee-grid-text">{{ item.label }}</text>
+			<ServicePanel title="Step5 联系人信息" subtitle="保留现有提交流程所需联系人字段。">
+				<view class="form-grid">
+					<view class="form-grid-item">
+						<text class="label">联系人姓名</text>
+						<input v-model="contactName" class="input" placeholder="请输入联系人姓名" />
 					</view>
+					<view class="form-grid-item">
+						<text class="label">联系电话</text>
+						<input v-model="contactPhone" class="input" type="number" placeholder="请输入联系电话" />
+					</view>
+				</view>
+				<view class="form-item">
+					<text class="label">性别</text>
+					<view class="pill-row">
+						<view :class="['pill', contactGender == '先生' ? 'pill-active' : '']" @click="setContactGender('先生')">
+							<text :class="['pill-text', contactGender == '先生' ? 'pill-text-active' : '']">先生</text>
+						</view>
+						<view :class="['pill', contactGender == '女士' ? 'pill-active' : '']" @click="setContactGender('女士')">
+							<text :class="['pill-text', contactGender == '女士' ? 'pill-text-active' : '']">女士</text>
+						</view>
+					</view>
+				</view>
+				<view class="form-grid">
+					<view class="form-grid-item">
+						<text class="label">紧急联系人</text>
+						<input v-model="emergencyName" class="input" placeholder="请输入紧急联系人姓名" />
+					</view>
+					<view class="form-grid-item">
+						<text class="label">紧急联系人电话</text>
+						<input v-model="emergencyPhone" class="input" type="number" placeholder="请输入紧急联系人电话" />
+					</view>
+				</view>
+				<view class="form-item form-item-last">
+					<text class="label">补充备注</text>
+					<textarea v-model="remarkText" class="textarea" placeholder="如老人作息、注意事项、上门前沟通重点"></textarea>
+				</view>
+			</ServicePanel>
+
+			<ServicePanel title="Step6 服务需求" subtitle="选择服务方案和重点需求，仍然兼容现有申请接口。">
+				<view class="package-list">
+					<view
+						v-for="item in servicePackages"
+						:key="item.id"
+						:class="['package-card', item.selected ? 'package-card-active' : '']"
+						@click="selectServicePackage(item.id)"
+					>
+						<view class="package-top-row">
+							<text :class="['package-name', item.selected ? 'package-name-active' : '']">{{ item.name }}</text>
+							<text class="package-price">¥{{ formatPrice(item.price) }}</text>
+						</view>
+						<text class="package-desc">{{ item.desc }}</text>
+						<text class="package-duration">{{ item.duration }}</text>
+					</view>
+				</view>
+				<view class="form-item">
+					<text class="label">需求标签</text>
+					<view class="tag-row">
+						<view
+							v-for="item in careNeedOptions"
+							:key="item.id"
+							:class="['tag-chip', item.selected ? 'tag-chip-active' : '']"
+							@click="toggleCareNeedOption(item.id)"
+						>
+							<text :class="['tag-chip-text', item.selected ? 'tag-chip-text-active' : '']">{{ item.label }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="form-item form-item-last">
+					<text class="label">详细需求</text>
+					<textarea v-model="demandDetailText" class="textarea" placeholder="请输入更详细的服务需求，如血压监测频次、陪诊时间、康复重点"></textarea>
+				</view>
+			</ServicePanel>
+
+			<ServicePanel title="服务说明与保障" subtitle="展示适用人群、免责项与平台保障信息。">
+				<view class="info-item">
+					<text class="info-label">适用人群</text>
+					<text class="info-value">{{ serviceSuitableFor }}</text>
+				</view>
+				<view class="info-item">
+					<text class="info-label">不包含项目</text>
+					<text class="info-value">{{ serviceExcludeText }}</text>
+				</view>
+				<view class="tag-row tag-row-last">
+					<text v-for="item in guaranteeTags" :key="item.id" class="summary-tag">{{ item.label }}</text>
+					<text class="summary-tag">上门前确认</text>
 				</view>
 			</ServicePanel>
 
 			<view class="detail-page-bottom-space"></view>
-		</ServicePageScaffold>
+		</scroll-view>
 
 		<view class="booking-bottom-bar">
-			<view class="booking-bottom-main">
-				<view>
-					<text class="booking-bottom-price-prefix">¥</text>
-					<text class="booking-bottom-price">{{ servicePrice }}</text>
-					<text class="booking-bottom-unit">起</text>
-				</view>
+			<view>
+				<text class="booking-bottom-price">¥{{ minPriceText }} 起</text>
 				<text class="booking-bottom-time">{{ selectedTimeText }}</text>
 			</view>
-			<view class="booking-submit-btn" @click="submitBooking">立即预约</view>
+			<view class="booking-submit-btn" @click="submitBooking">
+				<text class="booking-submit-btn-text">立即预约</text>
+			</view>
 		</view>
 	</view>
 </template>
@@ -143,7 +272,7 @@
 <script setup lang="uts">
 import { computed, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
+import ServicePageHeader from '@/components/homeService/ServicePageHeader.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { createHomeServiceApplication, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
 import { HomeServiceApplicationDraftType, HomeServiceCatalogType } from '@/types/home-service.uts'
@@ -160,11 +289,60 @@ import {
 	getServiceGuarantees
 } from '@/utils/homeServiceUiMock.uts'
 
+type CareRecipientInfoType = {
+	name: string
+	age: number
+	gender: string
+	relation: string
+	healthStatus: string
+	mobilityLevel: string
+	needFamilyPresent: boolean
+}
+
+type CareContactInfoType = {
+	contactName: string
+	contactPhone: string
+	contactGender: string
+	emergencyName: string
+	emergencyPhone: string
+}
+
+type CareAddressInfoType = {
+	address: string
+	detailAddress: string
+	area: string
+	floor: string
+	hasElevator: boolean
+}
+
+type CareNeedOptionType = {
+	id: string
+	label: string
+	selected: boolean
+}
+
+type ServicePackageOptionType = {
+	id: string
+	name: string
+	desc: string
+	price: number
+	duration: string
+	selected: boolean
+}
+
+type CareRiskOptionType = {
+	id: string
+	label: string
+	selected: boolean
+}
+
 const serviceId = ref('svc-001')
+const headerHeight = ref(116)
 const serviceTitle = ref('基础上门护理')
 const serviceSubtitle = ref('覆盖生命体征监测、基础照护、风险提醒。')
 const servicePrice = ref(168)
 const serviceDuration = ref('约 2 小时')
+const serviceValidity = ref('预约后 30 天内可服务')
 const serviceSuitableFor = ref('行动不便、术后恢复、慢病随访老人')
 const serviceImageText = ref('照护')
 const serviceExcludeText = ref('高风险处置、住院陪护、急诊陪诊')
@@ -180,13 +358,150 @@ const agency = ref<HomeServiceAgencyType>({
 	summary: '提供基础照护、上门护理和长者陪伴服务。'
 })
 
-const addressText = ref('')
+const defaultCareRecipient: CareRecipientInfoType = {
+	name: '李奶奶',
+	age: 78,
+	gender: '女',
+	relation: '母亲',
+	healthStatus: '行动不便，需基础照护与血压监测',
+	mobilityLevel: '需要搀扶',
+	needFamilyPresent: true
+}
+
+const defaultCareContact: CareContactInfoType = {
+	contactName: '李晓兰',
+	contactPhone: '13800138000',
+	contactGender: '女士',
+	emergencyName: '李先生',
+	emergencyPhone: '13900139000'
+}
+
+const defaultCareAddress: CareAddressInfoType = {
+	address: '梅州市梅江区学海路 18 号',
+	detailAddress: '2 栋 602',
+	area: '梅江区',
+	floor: '6 楼',
+	hasElevator: true
+}
+
+const careNeedOptions = ref<Array<CareNeedOptionType>>([])
+const careRiskOptions = ref<Array<CareRiskOptionType>>([])
+const servicePackages = ref<Array<ServicePackageOptionType>>([])
+
 const selectedDayId = ref('day-1')
 const selectedSlotId = ref('slot-1')
-const contactName = ref('李晓兰')
-const contactPhone = ref('13800138000')
-const contactGender = ref('女士')
+
+const careAddress = ref(defaultCareAddress.address)
+const careDetailAddress = ref(defaultCareAddress.detailAddress)
+const careArea = ref(defaultCareAddress.area)
+const careFloor = ref(defaultCareAddress.floor)
+const careHasElevator = ref(defaultCareAddress.hasElevator)
+
+const recipientName = ref(defaultCareRecipient.name)
+const recipientAgeText = ref(defaultCareRecipient.age.toString())
+const recipientGender = ref(defaultCareRecipient.gender)
+const recipientRelation = ref(defaultCareRecipient.relation)
+const recipientHealthStatus = ref(defaultCareRecipient.healthStatus)
+const recipientMobilityLevel = ref(defaultCareRecipient.mobilityLevel)
+const recipientNeedFamilyPresent = ref(defaultCareRecipient.needFamilyPresent)
+
+const contactName = ref(defaultCareContact.contactName)
+const contactPhone = ref(defaultCareContact.contactPhone)
+const contactGender = ref(defaultCareContact.contactGender)
+const emergencyName = ref(defaultCareContact.emergencyName)
+const emergencyPhone = ref(defaultCareContact.emergencyPhone)
 const remarkText = ref('老人需要基础照护与血压监测。')
+const demandDetailText = ref('请优先安排上午上门，家属希望同步了解老人近期血压情况。')
+
+try {
+	const windowInfo = uni.getWindowInfo()
+	const statusBar = windowInfo.statusBarHeight
+	const unit = windowInfo.windowWidth / 750
+	headerHeight.value = statusBar + Math.round(124 * unit)
+} catch (error) {
+	headerHeight.value = 116
+}
+
+function buildDefaultNeedOptions(currentServiceId: string): Array<CareNeedOptionType> {
+	if (currentServiceId == 'svc-002') {
+		return [
+			{ id: 'rehab', label: '康复指导', selected: true },
+			{ id: 'basic_care', label: '基础照护', selected: false },
+			{ id: 'blood_pressure', label: '血压监测', selected: false },
+			{ id: 'medicine', label: '用药提醒', selected: false },
+			{ id: 'escort', label: '陪诊陪护', selected: false },
+			{ id: 'chronic', label: '慢病随访', selected: true }
+		]
+	}
+	if (currentServiceId == 'svc-003') {
+		return [
+			{ id: 'basic_care', label: '基础照护', selected: false },
+			{ id: 'blood_pressure', label: '血压监测', selected: true },
+			{ id: 'medicine', label: '用药提醒', selected: true },
+			{ id: 'rehab', label: '康复指导', selected: false },
+			{ id: 'escort', label: '陪诊陪护', selected: false },
+			{ id: 'chronic', label: '慢病随访', selected: true }
+		]
+	}
+	return [
+		{ id: 'basic_care', label: '基础照护', selected: true },
+		{ id: 'blood_pressure', label: '血压监测', selected: true },
+		{ id: 'medicine', label: '用药提醒', selected: false },
+		{ id: 'rehab', label: '康复指导', selected: false },
+		{ id: 'escort', label: '陪诊陪护', selected: false },
+		{ id: 'chronic', label: '慢病随访', selected: true }
+	]
+}
+
+function buildDefaultRiskOptions(currentServiceId: string): Array<CareRiskOptionType> {
+	if (currentServiceId == 'svc-002') {
+		return [
+			{ id: 'post_op', label: '术后恢复', selected: true },
+			{ id: 'fall', label: '跌倒风险', selected: true },
+			{ id: 'chronic', label: '慢病管理', selected: false }
+		]
+	}
+	if (currentServiceId == 'svc-003') {
+		return [
+			{ id: 'post_op', label: '术后恢复', selected: false },
+			{ id: 'fall', label: '跌倒风险', selected: false },
+			{ id: 'chronic', label: '慢病管理', selected: true }
+		]
+	}
+	return [
+		{ id: 'post_op', label: '术后恢复', selected: false },
+		{ id: 'fall', label: '跌倒风险', selected: true },
+		{ id: 'chronic', label: '慢病管理', selected: true }
+	]
+}
+
+function buildDefaultPackages(currentServiceId: string, basePrice: number, durationText: string): Array<ServicePackageOptionType> {
+	// TODO: 后续接入真实服务套餐与机构报价接口，当前先使用页面内 mock 方案。
+	if (currentServiceId == 'svc-002') {
+		return [
+			{ id: 'pkg_rehab_assess', name: '康复基础评估', desc: '动作评估、居家训练建议、康复重点说明', price: Math.max(basePrice - 30, 128), duration: '约 1.5 小时', selected: true },
+			{ id: 'pkg_rehab_plus', name: '上门康复训练', desc: '动作陪练、训练纠正、阶段性康复记录', price: basePrice, duration: durationText, selected: false },
+			{ id: 'pkg_rehab_follow', name: '连续康复计划', desc: '适合术后恢复阶段，支持持续跟踪与复盘', price: basePrice + 58, duration: '约 2.5 小时', selected: false }
+		]
+	}
+	if (currentServiceId == 'svc-003') {
+		return [
+			{ id: 'pkg_chronic_basic', name: '慢病基础随访', desc: '血压血糖记录、用药核对、风险提醒', price: Math.max(basePrice - 20, 98), duration: '约 1 小时', selected: true },
+			{ id: 'pkg_chronic_plus', name: '慢病加强随访', desc: '增加生活方式建议和家属宣教内容', price: basePrice, duration: durationText, selected: false },
+			{ id: 'pkg_chronic_family', name: '家庭联合随访', desc: '适合需要家属共同参与的连续照护场景', price: basePrice + 36, duration: '约 1.5 小时', selected: false }
+		]
+	}
+	return [
+		{ id: 'pkg_basic_home', name: '基础照护', desc: '生命体征观察、协助起居、用药提醒', price: Math.max(basePrice - 20, 148), duration: '约 1.5 小时', selected: true },
+		{ id: 'pkg_basic_nursing', name: '标准照护', desc: '适合日常陪护与护理观察，支持家属沟通', price: basePrice, duration: durationText, selected: false },
+		{ id: 'pkg_basic_plus', name: '加强照护', desc: '增加翻身协助、环境提醒和风险沟通', price: basePrice + 48, duration: '约 2.5 小时', selected: false }
+	]
+}
+
+const addressLineText = computed((): string => {
+	const fullAddress = careAddress.value + ' ' + careDetailAddress.value
+	return fullAddress.trim() != '' ? fullAddress : '请选择上门服务地址'
+})
 
 const selectedTimeText = computed((): string => {
 	let selectedDayLabel = ''
@@ -209,12 +524,105 @@ const selectedTimeText = computed((): string => {
 	return selectedDayLabel + ' ' + selectedSlotLabel
 })
 
+const minPriceValue = computed((): number => {
+	let minPrice = servicePrice.value
+	for (let i = 0; i < servicePackages.value.length; i++) {
+		if (i == 0 || servicePackages.value[i].price < minPrice) {
+			minPrice = servicePackages.value[i].price
+		}
+	}
+	return minPrice
+})
+
+const minPriceText = computed((): string => {
+	return formatPrice(minPriceValue.value)
+})
+
+const summaryGuaranteeTags = computed((): Array<HomeServiceGuaranteeItemType> => {
+	const result: Array<HomeServiceGuaranteeItemType> = []
+	for (let i = 0; i < guaranteeTags.value.length && result.length < 3; i++) {
+		result.push(guaranteeTags.value[i])
+	}
+	return result
+})
+
+function formatPrice(price: number): string {
+	const rounded = Math.round(price)
+	if (Math.abs(price - rounded) < 0.001) {
+		return rounded.toString()
+	}
+	return price.toFixed(2)
+}
+
+function getSelectedPackageName(): string {
+	for (let i = 0; i < servicePackages.value.length; i++) {
+		if (servicePackages.value[i].selected) {
+			return servicePackages.value[i].name
+		}
+	}
+	return ''
+}
+
+function getSelectedRiskText(): string {
+	let text = ''
+	for (let i = 0; i < careRiskOptions.value.length; i++) {
+		if (careRiskOptions.value[i].selected) {
+			if (text != '') {
+				text = text + '、'
+			}
+			text = text + careRiskOptions.value[i].label
+		}
+	}
+	return text
+}
+
+function getSelectedNeedText(): string {
+	let text = ''
+	for (let i = 0; i < careNeedOptions.value.length; i++) {
+		if (careNeedOptions.value[i].selected) {
+			if (text != '') {
+				text = text + '、'
+			}
+			text = text + careNeedOptions.value[i].label
+		}
+	}
+	return text
+}
+
+function buildDemandSummary(): string {
+	const selectedNeeds = getSelectedNeedText()
+	const selectedRisks = getSelectedRiskText()
+	const packageName = getSelectedPackageName()
+	const familyPresentText = recipientNeedFamilyPresent.value ? '需要家属在场' : '可独立服务'
+	const elevatorText = careHasElevator.value ? '有电梯' : '无电梯'
+	return '服务对象：' + recipientName.value
+		+ '，年龄：' + recipientAgeText.value
+		+ '，性别：' + recipientGender.value
+		+ '，关系：' + recipientRelation.value
+		+ '，身体情况：' + recipientHealthStatus.value
+		+ '，行动能力：' + recipientMobilityLevel.value
+		+ '，风险标签：' + selectedRisks
+		+ '，是否需家属在场：' + familyPresentText
+		+ '，服务地址：' + addressLineText.value
+		+ '，区域：' + careArea.value
+		+ '，楼层：' + careFloor.value
+		+ '，电梯：' + elevatorText
+		+ '，套餐：' + packageName
+		+ '，服务需求：' + selectedNeeds
+		+ '，详细需求：' + demandDetailText.value
+		+ '，紧急联系人：' + emergencyName.value + ' ' + emergencyPhone.value
+		+ '，备注：' + remarkText.value
+}
+
 async function loadData() {
 	bookingDays.value = getBookingDayOptions()
 	bookingSlots.value = getBookingTimeSlots()
 	guaranteeTags.value = getServiceGuarantees()
 	agency.value = getRecommendedAgency(serviceId.value)
 	serviceExcludeText.value = getServiceExcludes(serviceId.value).join('；')
+	careNeedOptions.value = buildDefaultNeedOptions(serviceId.value)
+	careRiskOptions.value = buildDefaultRiskOptions(serviceId.value)
+	servicePackages.value = buildDefaultPackages(serviceId.value, servicePrice.value, serviceDuration.value)
 
 	const catalog = await fetchHomeServiceCatalog()
 	let matchedService: HomeServiceCatalogType | null = null
@@ -233,6 +641,7 @@ async function loadData() {
 			serviceSuitableFor.value = fallbackItems[0].suitableFor
 			serviceImageText.value = fallbackItems[0].imageText
 		}
+		servicePackages.value = buildDefaultPackages(serviceId.value, servicePrice.value, serviceDuration.value)
 		return
 	}
 	serviceTitle.value = matchedService.name
@@ -244,17 +653,34 @@ async function loadData() {
 	if (mappedItems.length > 0) {
 		serviceImageText.value = mappedItems[0].imageText
 	}
+	servicePackages.value = buildDefaultPackages(serviceId.value, servicePrice.value, serviceDuration.value)
 }
 
 function selectAddress() {
-	if (addressText.value == '') {
-		addressText.value = '梅州市梅江区学海路 18 号 2 栋 602'
+	if (careAddress.value == '' || careDetailAddress.value == '') {
+		careAddress.value = defaultCareAddress.address
+		careDetailAddress.value = defaultCareAddress.detailAddress
+		careArea.value = defaultCareAddress.area
+		careFloor.value = defaultCareAddress.floor
+		careHasElevator.value = defaultCareAddress.hasElevator
 		uni.showToast({ title: '已填入示例地址', icon: 'none' })
 		return
 	}
 	uni.navigateTo({ url: '/pages/mall/consumer/address-list' })
 }
 
+function handleAgencyReplace() {
+	uni.showToast({ title: '服务机构选择建设中', icon: 'none' })
+}
+
+function handleAgencyContact() {
+	uni.showToast({ title: '已为你联系服务机构', icon: 'none' })
+}
+
+function handleAgencyNavigate() {
+	uni.showToast({ title: '导航功能建设中', icon: 'none' })
+}
+
 function selectDay(dayId: string) {
 	selectedDayId.value = dayId
 }
@@ -267,26 +693,95 @@ function selectSlot(slotId: string, available: boolean) {
 	selectedSlotId.value = slotId
 }
 
+function setRecipientGender(gender: string) {
+	recipientGender.value = gender
+}
+
+function setContactGender(gender: string) {
+	contactGender.value = gender
+}
+
+function setFamilyPresent(needFamilyPresent: boolean) {
+	recipientNeedFamilyPresent.value = needFamilyPresent
+}
+
+function setElevator(hasElevator: boolean) {
+	careHasElevator.value = hasElevator
+}
+
+function toggleRiskOption(optionId: string) {
+	for (let i = 0; i < careRiskOptions.value.length; i++) {
+		if (careRiskOptions.value[i].id == optionId) {
+			careRiskOptions.value[i].selected = !careRiskOptions.value[i].selected
+			break
+		}
+	}
+}
+
+function toggleCareNeedOption(optionId: string) {
+	let selectedCount = 0
+	let targetIndex = -1
+	for (let i = 0; i < careNeedOptions.value.length; i++) {
+		if (careNeedOptions.value[i].selected) {
+			selectedCount++
+		}
+		if (careNeedOptions.value[i].id == optionId) {
+			targetIndex = i
+		}
+	}
+	if (targetIndex == -1) {
+		return
+	}
+	if (careNeedOptions.value[targetIndex].selected && selectedCount <= 1) {
+		uni.showToast({ title: '请至少保留一个服务需求', icon: 'none' })
+		return
+	}
+	careNeedOptions.value[targetIndex].selected = !careNeedOptions.value[targetIndex].selected
+}
+
+function selectServicePackage(packageId: string) {
+	for (let i = 0; i < servicePackages.value.length; i++) {
+		servicePackages.value[i].selected = servicePackages.value[i].id == packageId
+	}
+}
+
 async function submitBooking() {
-	if (addressText.value == '') {
+	if (careAddress.value == '' || careDetailAddress.value == '') {
 		uni.showToast({ title: '请选择上门服务地址', icon: 'none' })
 		return
 	}
-	if (contactName.value == '' || contactPhone.value == '') {
+	if (recipientName.value == '') {
+		uni.showToast({ title: '请填写服务对象姓名', icon: 'none' })
+		return
+	}
+	if (contactPhone.value == '' || contactName.value == '') {
 		uni.showToast({ title: '请补全联系人信息', icon: 'none' })
 		return
 	}
+	if (emergencyName.value == '' || emergencyPhone.value == '') {
+		uni.showToast({ title: '请补全紧急联系人信息', icon: 'none' })
+		return
+	}
+	if (selectedTimeText.value == '请选择上门时间') {
+		uni.showToast({ title: '请选择上门时间', icon: 'none' })
+		return
+	}
+
+	let parsedAge = parseInt(recipientAgeText.value)
+	if (isNaN(parsedAge)) {
+		parsedAge = 0
+	}
 
 	const draft: HomeServiceApplicationDraftType = {
 		serviceId: serviceId.value,
 		serviceName: serviceTitle.value,
 		applicantName: contactName.value,
-		elderName: contactName.value,
-		age: 78,
+		elderName: recipientName.value,
+		age: parsedAge,
 		phone: contactPhone.value,
-		address: addressText.value,
+		address: addressLineText.value,
 		preferredTime: selectedTimeText.value,
-		demandSummary: remarkText.value == '' ? serviceSubtitle.value : remarkText.value
+		demandSummary: buildDemandSummary()
 	}
 
 	const created = await createHomeServiceApplication(draft)
@@ -301,159 +796,322 @@ onLoad((options) => {
 	}
 	const mode = options['mode']
 	if (mode != null && mode == 'booking') {
-		addressText.value = '梅州市梅江区学海路 18 号 2 栋 602'
+		careAddress.value = defaultCareAddress.address
+		careDetailAddress.value = defaultCareAddress.detailAddress
+		careArea.value = defaultCareAddress.area
 	}
 	loadData()
 })
 </script>
 
 <style scoped>
-.booking-detail-page {
-	background: #f4f8fb;
+.booking-page-shell {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: column;
+	background: #f7f8fb;
+	overflow: hidden;
 }
 
-.detail-service-summary {
-	background: #ffffff;
-	border-radius: 32rpx;
+.detail-fixed-header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 100;
+	background: #f3f7f9;
+}
+
+.detail-header-placeholder {
+	width: 100%;
+	flex-shrink: 0;
+}
+
+.detail-scroll {
+	flex: 1;
+	min-height: 0;
+	width: 100%;
+}
+
+.summary-card {
+	background: linear-gradient(180deg, #fff0f4 0%, #fff7f9 100%);
+	border-radius: 28rpx;
 	padding: 28rpx;
-	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
-	flex-direction: row;
-	align-items: flex-start;
 	margin-bottom: 24rpx;
+	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
 }
 
-.detail-summary-cover {
-	width: 172rpx;
-	height: 172rpx;
-	border-radius: 32rpx;
-	background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
+.summary-top-row,
+.summary-tag-row,
+.summary-price-row,
+.booking-bottom-bar,
+.booking-day-row,
+.form-grid,
+.pill-row,
+.tag-row,
+.booking-slot-grid,
+.agency-top-row,
+.action-row,
+.package-top-row {
+	flex-direction: row;
+	align-items: center;
+}
+
+.summary-top-row,
+.agency-top-row,
+.booking-bottom-bar,
+.package-top-row {
+	justify-content: space-between;
+}
+
+.summary-cover {
+	width: 144rpx;
+	height: 144rpx;
+	border-radius: 24rpx;
+	background: linear-gradient(180deg, #dff6f1 0%, #ecf3ff 100%);
 	align-items: center;
 	justify-content: center;
+	flex-shrink: 0;
 }
 
-.detail-summary-cover-text {
-	font-size: 34rpx;
+.summary-cover-text {
+	font-size: 36rpx;
 	font-weight: 700;
 	color: #0f766e;
 }
 
-.detail-summary-main {
+.summary-main {
 	flex: 1;
 	min-width: 0;
-	margin-left: 24rpx;
+	margin-left: 22rpx;
 }
 
-.detail-summary-title {
+.summary-title {
 	font-size: 34rpx;
 	font-weight: 700;
 	color: #16324f;
+	line-height: 44rpx;
 }
 
-.detail-summary-desc,
-.detail-summary-duration,
-.detail-info-value,
-.step-card-value,
-.step-card-placeholder,
-.agency-card-meta,
-.agency-card-todo,
-.booking-bottom-time {
+.summary-desc,
+.summary-meta,
+.agency-meta,
+.agency-desc,
+.booking-bottom-time,
+.package-desc,
+.package-duration,
+.info-value,
+.value-card-text {
 	margin-top: 10rpx;
 	font-size: 24rpx;
 	line-height: 34rpx;
 	color: #64748b;
 }
 
-.detail-summary-tags,
-.gender-row,
-.guarantee-grid,
-.agency-card-top,
-.booking-bottom-bar,
-.booking-bottom-main {
-	flex-direction: row;
-	align-items: center;
-}
-
-.detail-summary-tags {
+.summary-tag-row,
+.pill-row,
+.tag-row {
 	flex-wrap: wrap;
-	margin-top: 16rpx;
+	margin-top: 18rpx;
 }
 
-.detail-summary-tag {
+.summary-tag,
+.agency-badge,
+.tag-chip {
 	padding: 10rpx 16rpx;
 	border-radius: 999rpx;
-	background: #eff6ff;
 	font-size: 22rpx;
-	color: #476072;
-	margin-right: 10rpx;
-	margin-bottom: 10rpx;
+	margin-right: 12rpx;
+	margin-bottom: 12rpx;
+	box-sizing: border-box;
 }
 
-.detail-summary-price-row {
-	margin-top: 14rpx;
-	flex-direction: row;
+.summary-tag {
+	background: #ffffff;
+	color: #ff5a7a;
+}
+
+.agency-badge {
+	background: #eafbf7;
+	color: #0f766e;
+}
+
+.summary-price-row {
+	margin-top: 12rpx;
 	align-items: flex-end;
 }
 
-.detail-summary-price-prefix,
-.detail-summary-price,
-.booking-bottom-price-prefix,
-.booking-bottom-price {
-	font-size: 38rpx;
+.summary-price-prefix,
+.summary-price,
+.booking-bottom-price,
+.package-price {
+	font-size: 40rpx;
 	font-weight: 700;
-	color: #0f766e;
+	color: #ff5a7a;
 }
 
-.detail-summary-price-unit,
-.booking-bottom-unit {
+.summary-price-unit {
 	font-size: 22rpx;
 	color: #64748b;
 	margin-left: 8rpx;
-	margin-bottom: 4rpx;
+	margin-bottom: 6rpx;
 }
 
-.detail-info-item,
-.contact-form-item {
+.form-item {
 	margin-bottom: 24rpx;
 }
 
-.detail-info-label,
-.contact-form-label,
-.step-card-title {
+.form-item-last,
+.tag-row-last {
+	margin-bottom: 0;
+}
+
+.label,
+.agency-name,
+.info-label,
+.package-name {
 	font-size: 28rpx;
 	font-weight: 700;
 	color: #16324f;
+	margin-bottom: 12rpx;
 }
 
-.booking-step-card {
-	padding: 24rpx;
-	border-radius: 24rpx;
-	background: #f8fbfd;
+.value-card,
+.agency-card,
+.package-card {
+	background: #f8fbfc;
+	border-radius: 22rpx;
+	padding: 22rpx;
+	box-sizing: border-box;
 }
 
-.step-card-placeholder {
-	color: #94a3b8;
+.value-card {
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #eef2f6;
 }
 
-.step-card-action {
-	margin-top: 20rpx;
-	height: 68rpx;
+.value-card-action {
+	margin-top: 14rpx;
+	font-size: 22rpx;
+	color: #ff5a7a;
+}
+
+.form-grid {
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-wrap: wrap;
+}
+
+.form-grid-item {
+	width: 48.5%;
+	margin-bottom: 24rpx;
+	box-sizing: border-box;
+}
+
+.input,
+.textarea {
+	width: 100%;
+	background: #f8fbfc;
+	border-radius: 18rpx;
+	font-size: 28rpx;
+	color: #23384d;
+	box-sizing: border-box;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #eef2f6;
+}
+
+.input {
+	height: 84rpx;
+	padding: 0 24rpx;
+}
+
+.textarea {
+	padding: 22rpx 24rpx;
+	height: 160rpx;
+}
+
+.pill {
+	height: 64rpx;
+	padding: 0 24rpx;
 	border-radius: 999rpx;
-	background: #16a085;
-	color: #ffffff;
-	font-size: 24rpx;
-	font-weight: 700;
+	background: #f3f6f8;
 	align-items: center;
 	justify-content: center;
+	margin-right: 12rpx;
+	margin-bottom: 12rpx;
+	box-sizing: border-box;
 }
 
-.agency-card-distance {
-	font-size: 22rpx;
-	color: #0f766e;
+.pill-active {
+	background: #fff0f4;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #ffc7d3;
 }
 
-.agency-card-todo {
-	font-size: 22rpx;
-	color: #94a3b8;
+.pill-text,
+.tag-chip-text,
+.booking-slot-label,
+.booking-day-label,
+.booking-day-date,
+.booking-day-weekday,
+.ghost-btn-text {
+	font-size: 24rpx;
+	color: #476072;
+}
+
+.pill-text-active,
+.tag-chip-text-active,
+.booking-slot-label-active,
+.booking-day-label-active,
+.booking-day-date-active,
+.booking-day-weekday-active {
+	color: #ff5a7a;
+	font-weight: 700;
+}
+
+.tag-chip {
+	background: #f3f6f8;
+	padding-left: 20rpx;
+	padding-right: 20rpx;
+}
+
+.tag-chip-active {
+	background: #fff0f4;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #ffc7d3;
+}
+
+.action-row {
+	margin-top: 20rpx;
+	flex-wrap: wrap;
+}
+
+.ghost-btn {
+	padding: 0 22rpx;
+	height: 68rpx;
+	border-radius: 999rpx;
+	background: #ffffff;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #ffd5de;
+	align-items: center;
+	justify-content: center;
+	margin-right: 12rpx;
+	margin-bottom: 12rpx;
+	box-sizing: border-box;
+}
+
+.ghost-btn-text {
+	color: #ff5a7a;
+	font-weight: 700;
 }
 
 .booking-day-scroll {
@@ -461,7 +1119,6 @@ onLoad((options) => {
 }
 
 .booking-day-row {
-	flex-direction: row;
 	padding-right: 20rpx;
 }
 
@@ -469,36 +1126,26 @@ onLoad((options) => {
 	width: 160rpx;
 	padding: 20rpx;
 	border-radius: 24rpx;
-	background: #f8fbfd;
+	background: #f8fbfc;
 	margin-right: 16rpx;
 	box-sizing: border-box;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #eef2f6;
 }
 
 .booking-day-card-active {
-	background: #0f766e;
-}
-
-.booking-day-label,
-.booking-day-date,
-.booking-day-weekday {
-	font-size: 24rpx;
-	line-height: 34rpx;
-	color: #476072;
+	background: #fff0f4;
+	border-color: #ffc7d3;
 }
 
 .booking-day-date,
 .booking-day-weekday {
+	display: block;
 	margin-top: 6rpx;
 }
 
-.booking-day-label-active,
-.booking-day-date-active,
-.booking-day-weekday-active {
-	color: #ffffff;
-}
-
 .booking-slot-grid {
-	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	margin-top: 20rpx;
@@ -508,98 +1155,52 @@ onLoad((options) => {
 	width: 48.5%;
 	height: 82rpx;
 	border-radius: 22rpx;
-	background: #f8fbfd;
+	background: #f8fbfc;
 	align-items: center;
 	justify-content: center;
 	margin-bottom: 16rpx;
-	border-width: 2rpx;
+	border-width: 1rpx;
 	border-style: solid;
-	border-color: transparent;
+	border-color: #eef2f6;
 	box-sizing: border-box;
 }
 
 .booking-slot-card-active {
-	background: #eafbf7;
-	border-color: #16a085;
+	background: #fff0f4;
+	border-color: #ffc7d3;
 }
 
 .booking-slot-card-disabled {
-	background: #f1f5f9;
 	opacity: 0.55;
-}
-
-.booking-slot-label {
-	font-size: 24rpx;
-	color: #476072;
-}
-
-.booking-slot-label-active {
-	color: #0f766e;
-	font-weight: 700;
-}
-
-.contact-form-input,
-.contact-form-textarea {
-	width: 100%;
-	background: #f8fbfd;
-	border-radius: 22rpx;
-	font-size: 26rpx;
-	color: #16324f;
-	box-sizing: border-box;
-	margin-top: 14rpx;
-}
-
-.contact-form-input {
-	height: 84rpx;
-	padding: 0 24rpx;
-}
-
-.contact-form-textarea {
-	height: 160rpx;
-	padding: 20rpx 24rpx;
-}
-
-.gender-pill {
-	height: 64rpx;
-	padding: 0 28rpx;
-	border-radius: 999rpx;
 	background: #f1f5f9;
-	font-size: 24rpx;
-	color: #476072;
-	align-items: center;
-	justify-content: center;
-	margin-right: 16rpx;
-	margin-top: 14rpx;
 }
 
-.gender-pill-active {
-	background: #eafbf7;
-	color: #0f766e;
-	font-weight: 700;
+.package-list {
+	margin-bottom: 22rpx;
 }
 
-.guarantee-grid {
-	flex-wrap: wrap;
-	justify-content: space-between;
-}
-
-.guarantee-grid-item {
-	width: 48%;
-	height: 72rpx;
-	border-radius: 20rpx;
-	background: #f8fbfd;
-	align-items: center;
-	justify-content: center;
+.package-card {
 	margin-bottom: 16rpx;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #eef2f6;
 }
 
-.guarantee-grid-text {
-	font-size: 24rpx;
-	color: #476072;
+.package-card-active {
+	background: #fff8fa;
+	border-color: #ffc7d3;
+}
+
+.package-name-active {
+	color: #ff5a7a;
+}
+
+.info-item {
+	margin-bottom: 22rpx;
 }
 
 .detail-page-bottom-space {
-	height: 160rpx;
+	height: 180rpx;
 }
 
 .booking-bottom-bar {
@@ -611,7 +1212,11 @@ onLoad((options) => {
 	border-radius: 30rpx;
 	padding: 20rpx 22rpx;
 	box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.12);
-	justify-content: space-between;
+	box-sizing: border-box;
+}
+
+.booking-bottom-time {
+	display: block;
 }
 
 .booking-submit-btn {
@@ -619,10 +1224,15 @@ onLoad((options) => {
 	padding: 0 34rpx;
 	border-radius: 999rpx;
 	background: #16a085;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	flex-shrink: 0;
+}
+
+.booking-submit-btn-text {
 	font-size: 28rpx;
 	font-weight: 700;
 	color: #ffffff;
-	align-items: center;
-	justify-content: center;
 }
 </style>
\ No newline at end of file