更新记录

1.0.0 下载此版本

初始版本发布，包含完整的家政陪护预约系统功能

平台兼容性

uni-app(4.06)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
-	-	-	-	-	-	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
-	-	-	-	-	-	-	-	-	-	-

uni-app x(4.06)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
×	×	√

家政陪护预约系统 - 插件使用说明

📋 目录

系统简介
环境要求
安装步骤
功能介绍
使用指南
常见问题
技术支持

🏠 系统简介

家政陪护预约系统是一个专业的家政服务预约平台，采用React + TypeScript技术栈开发，支持移动端优先的响应式设计。系统提供双角色模式，既支持普通用户预约家政服务，也支持家政从业者接单管理。

核心特性

✅ 双角色系统（普通用户/家政从业者）
✅ 移动端优先的响应式设计
✅ 完整的预约流程和订单管理
✅ 家政从业者认证和评价系统
✅ 实时订单状态跟踪
✅ 收入统计和数据分析

💻 环境要求

基础环境

Node.js: 18.0+ 或 20.0+
npm: 8.0+ 或 pnpm: 7.0+
浏览器: Chrome 90+, Safari 14+, Firefox 88+

技术栈

前端框架: React 18
开发语言: TypeScript
构建工具: Vite
样式框架: Tailwind CSS
状态管理: Zustand
路由: React Router
图标库: Lucide React

🚀 安装步骤

1. 下载项目

# 克隆项目（如果从Git仓库）
git clone [项目地址]
cd 家政陪护solo

# 或直接下载解压到目标目录

2. 安装依赖

# 使用npm
npm install

# 或使用pnpm（推荐）
pnpm install

3. 启动开发服务器

# 启动开发环境
npm run dev
# 或
pnpm dev

4. 访问应用

打开浏览器访问：http://localhost:5174

5. 构建生产版本

# 构建生产版本
npm run build
# 或
pnpm build

# 预览生产版本
npm run preview
# 或
pnpm preview

🎯 功能介绍

普通用户功能

1. 首页浏览

查看推荐家政服务人员
浏览服务分类
查看平台统计信息

2. 家政人员列表

按服务类型筛选
查看人员评分和评价
查看服务价格和认证状态

3. 家政人员详情

查看详细个人信息
查看服务项目和价格
查看用户评价和评分
查看认证信息

4. 预约下单

选择服务时间
填写服务地址
添加特殊需求
确认订单信息

5. 订单管理

查看订单状态
订单详情查看
订单评价功能

6. 个人中心

个人信息管理
收货地址管理
我的收藏
支付方式管理
优惠券中心
系统设置

家政从业者功能

1. 接单管理

查看待接订单列表
接受或拒绝订单
订单状态更新
完成订单确认

2. 收入统计

今日收入统计
月度收入趋势
订单数量统计
收入明细查看

3. 服务管理

服务项目设置
服务价格调整
服务时间安排
服务区域设置

4. 资料认证

个人信息完善
身份认证上传
技能证书管理
认证状态查看

📖 使用指南

角色切换

进入个人中心页面
点击页面顶部的角色切换按钮
选择"普通用户"或"家政从业者"
界面会自动切换到对应角色的功能模块

预约流程

用户预约

浏览服务人员：在首页或列表页选择合适的家政人员
查看详情：点击进入详情页，了解服务内容和价格
立即预约：点击"立即预约"按钮
填写信息：选择服务时间、地址，填写特殊需求
确认订单：核对信息无误后提交订单
等待接单：等待家政人员确认接单

家政人员接单

切换角色：切换到"家政从业者"模式
查看订单：在接单管理页面查看新订单
订单详情：点击查看订单详细信息
接受订单：确认可以提供服务后点击"接受订单"
服务执行：按约定时间提供服务
完成订单：服务完成后更新订单状态

数据管理

模拟数据说明

系统使用模拟数据进行演示
所有用户信息、订单数据均为示例数据
实际部署时需要连接真实的后端API

数据持久化

当前版本使用本地存储保存用户设置
角色切换状态会被记住
刷新页面后设置保持不变

❓ 常见问题

Q1: 页面显示404错误

A: 确保所有路由配置正确，检查URL路径是否匹配。如果是开发环境，尝试重启开发服务器。

Q2: 角色切换后功能异常

A: 清除浏览器缓存和本地存储，重新加载页面。确保已正确切换到对应角色。

Q3: 图片无法显示

A: 检查网络连接，系统使用在线图片服务。如果网络正常但图片仍无法显示，可能是图片服务暂时不可用。

Q4: 移动端显示异常

A: 确保使用现代浏览器，清除缓存后重试。系统采用响应式设计，支持各种屏幕尺寸。

Q5: 开发服务器启动失败

检查Node.js版本是否符合要求
删除node_modules文件夹，重新安装依赖
检查端口5174是否被占用

Q6: 构建失败

检查TypeScript类型错误
确保所有依赖都已正确安装
查看构建日志中的具体错误信息

🛠 技术支持

开发调试

开发工具

推荐使用VS Code编辑器
安装React、TypeScript相关插件
使用浏览器开发者工具调试

日志查看

# 查看开发服务器日志
npm run dev

# 查看构建日志
npm run build

# 类型检查
npm run type-check

代码规范

# 代码格式化
npm run format

# 代码检查
npm run lint

部署指南

静态部署

执行构建命令：npm run build
将dist目录上传到静态服务器
配置服务器支持SPA路由

Vercel部署

连接Git仓库到Vercel
自动检测为Vite项目
一键部署完成

自定义配置

主题定制

修改tailwind.config.js调整颜色主题
在src/index.css中添加全局样式
使用CSS变量实现动态主题切换

功能扩展

在src/types/index.ts中添加新的数据类型
在src/pages目录下创建新页面
在src/components目录下创建新组件
更新src/App.tsx中的路由配置

联系方式

如果您在使用过程中遇到问题，可以通过以下方式获取帮助：

📧 邮箱支持：[技术支持邮箱]
💬 在线客服：[客服链接]
📚 文档中心：[文档地址]
🐛 问题反馈：[GitHub Issues]

版本信息: v1.0.0
最后更新: 2024年12月
兼容性: React 18+, Node.js 18+

💡 提示: 建议在使用前仔细阅读本说明文档，如有疑问请及时联系技术支持。

家政陪护预约系统 家政服务 预约系统 React 移动端 双角色