外卖演示程序介绍

外卖点餐H5

本项目的目的是为了让之前学的nodejs，express和ts，还有vue3.混合写一个项目，帮我更好地理解这三块的内容。然后写的过程中，也顺便慢慢了解了nodejs的一些生态的框架。nodejs的后端框架相比java来说确实很轻。当然写完以后我也更觉得，在构建大型或者超大型的后端项目时候，使用java依然是一个很好的选择。不过如果构建一些很简单的后端或者前后端一起的项目，使用nodejs确实很方便。

整体系统架构

┌─────────────────────────────────────────────────────────────────────────────────┐
│                                 用户终端层                                        │
├───────────────────────────────┬─────────────────────────────────────────────────┤
│      Web浏览器                 │            移动端App                          │
│    • Vue3/React前端            │         • iOS/Android                         │
│    • 响应式设计                │         • 原生应用                             │
└───────────────────────────────┴─────────────────────────────────────────────────┘
                                          │
                                  HTTPS请求
                                          │
┌─────────────────────────────────────────────────────────────────────────────────┐
│                            Nginx 反向代理/负载均衡                                 │
├─────────────────────────────────────────────────────────────────────────────────┤
│                              静态资源服务器                                        │
│                           • 前端静态文件托管                                       │
│                           • CDN内容分发(待实现)                                           │
└─────────────────────────────────────────────────────────────────────────────────┘
                                          │
                                  API路由转发
                                          │
┌─────────────────────────────────────────────────────────────────────────────────┐
│                         Express.js 后端API服务                                    │
│                         TypeScript + Prisma ORM                                   │
├─────────────────────────────────────────────────────────────────────────────────┤
│  • 用户管理模块 (User Module)            • 餐厅管理模块 (Restaurant Module)     │
│  • 菜品管理模块 (Product Module)         • 购物车模块 (Cart Module)            │
│  • 订单管理模块 (Order Module)           • 支付模块 (Payment Module)            │
├─────────────────────────────────────────────────────────────────────────────────┤
│                              中间件层                                            │
│  • JWT认证中间件                         • express-validator 请求验证           │
│  • express-rate-limit 限流中间件         • Winston 日志中间件                     │
│  • helmet 安全中间件                     • cors 跨域中间件                        │
│  • 错误处理中间件                        • bcryptjs 密码加密                      │
└─────────────────────────────────────────────────────────────────────────────────┘
                                          │
                              Prisma ORM 数据访问
                                          │
┌─────────────────────────────────────────────────────────────────────────────────┐
│                              数据存储层                                          │
├─────────────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────────────┐│
│  │                         MySQL 数据库                                          ││
│  │                        • 用户数据 (users)                                    ││
│  │                        • 餐厅数据 (restaurants)                              ││
│  │                        • 菜品数据 (products)                                 ││
│  │                        • 购物车数据 (carts)                                  ││
│  │                        • 订单数据 (orders)                                   ││
│  │                        • 地址数据 (addresses)                                ││
│  └─────────────────────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────────────────────┘
                                          │
                          计划中的第三方服务调用 (待实现)
                                          │
┌─────────────────────────────────────────────────────────────────────────────────┐
│                              外部服务层 (待实现)                                  │
├─────────────────────────────────────────────────────────────────────────────────┤
│  • 支付服务 (微信支付/支付宝)          • 短信服务 (阿里云短信)                    │
│  • 邮件服务 (nodemailer)               • 文件存储服务 (待实现)                    │
└─────────────────────────────────────────────────────────────────────────────────┘

当前技术栈总结

后端技术栈 (已实现)

• 运行环境: Node.js + TypeScript
• Web框架: Express.js 5.1.0
• 开发语言: TypeScript 5.9.3
• 数据库ORM: Prisma 6.17.1
• 数据库: MySQL (通过mysql2驱动)
• 认证: JWT (jsonwebtoken)
• 密码加密: bcryptjs
• 日志: Winston
• 包管理器: pnpm 10.15.1
• 环境配置: dotenv + dotenv-cli
• 开发工具: tsx (TypeScript执行器)

中间件和工具 (已实现)

• 安全防护: helmet
• 跨域处理: cors
• 限流控制: express-rate-limit
• 请求验证: express-validator
• 文件处理: multer (已安装但未启用)
• 邮件服务: nodemailer (已安装但未启用)

前端技术栈 (已实现)

• 框架: Vue.js 3
• 构建工具: Vite / Webpack
• 状态管理: Pinia
• UI组件: Vant
• HTTP客户端: Axios
• 路由: Vue Router

基础设施 (已实现)

• 反向代理: Nginx
• 负载均衡: Nginx
• 容器化: Docker后端
• API文档: Swagger/OpenAPI (待实现)

第三方服务 (待实现)

• 支付服务: 微信支付、支付宝
• 短信服务: 阿里云短信、腾讯云短信
• 邮件服务: nodemailer (已安装)
• 文件存储: 阿里云OSS、七牛云存储
• 缓存服务: Redis (计划中)
• 地图服务: 高德地图API、百度地图API

GoodPay 用户操作手册

🍽️ 让订餐更简单

GoodPay 外卖点餐平台使用指南

📖 目录

可以看右边👉

---

🚀 快速开始

首次使用 GoodPay

1. 打开应用 - 在浏览器中访问(https://www.likeben.games/goodPay/)
2. 注册账户 - 创建您的专属账户
3. 添加地址 - 配置送餐地址
4. 浏览餐厅 - 发现心仪的美食
5. 下单付款 - 轻松几步完成订餐

操作界面概览

┌─────────────────────────────┐
│  🔍 搜索餐厅或菜品...    🔍   │  ← 搜索栏
├─────────────────────────────┤
│                              │
│  🔥 中餐  🌸 西餐  🎁 日料   │
│  ❤️ 韩料  🕐 快餐  🔧 饮品   │  ← 餐厅标签
│  🎂 甜点  🔥 火锅            │
│                              │
├─────────────────────────────┤
│        推荐餐厅             │
│  ┌─────────────────────────┐ │
│  │ 📷 川味小厨             │ │
│  │ ⭐ 4.8分  🛵 30分钟      │ │  ← 餐厅卡片
│  │ 💰 配送费¥5             │ │  (竖向排列)
│  │ 🏷️ 中餐 麻辣 牛肉       │ │
│  └─────────────────────────┘ │
│                              │
│  ┌─────────────────────────┐ │
│  │ 📷 日式料理店           │ │
│  │ ⭐ 4.6分  🛵 25分钟      │ │
│  │ 💰 配送费¥3             │ │
│  │ 🏷️ 日料 寿司 刺身       │ │
│  └─────────────────────────┘ │
│                              │
│  ┌─────────────────────────┐ │
│  │ 📷 韩式炸鸡店           │ │
│  │ ⭐ 4.7分  🛵 20分钟      │ │
│  │ 💰 配送费¥4             │ │
│  │ 🏷️ 韩料 炸鸡 啤酒       │ │
│  └─────────────────────────┘ │
├─────────────────────────────┤
│    🏠 首页   📋 订单   👤 我的 │  ← 底部导航
└─────────────────────────────┘

---

👤 用户注册与登录

🆕 新用户注册

步骤 1：进入注册页面

1. 打开 GoodPay 首页
2. 点击右下角 “👤 我的” 进入个人中心
3. 点击 “立即注册” 按钮进入注册页面

或者直接访问注册页面，如果已有账号可以点击”立即登录”切换到登录界面。

步骤 2：填写注册信息

┌─────────────────────────────┐
│        GoodPay              │
│     美味生活，一键下单       │
├─────────────────────────────┤
│                             │
│ 📱 手机号码                 │
│    [请输入手机号]           │
│                             │
│ 🔐 密码                     │
│    [请设置密码（6-20位）]   │
│                             │
│ 🔄 确认密码                 │
│    [请再次输入密码]         │
│                             │
│ 🔐 验证码                   │
│    [请输入验证码]   [获取验证码] │
│                             │
│   ☑️ 我已阅读并同意          │
│      《用户协议》和《隐私政策》│
│                             │
│        [  注册  ]          │
│                             │
│     已有账号？立即登录       │
└─────────────────────────────┘

填写说明：

• 手机号码：输入真实的11位手机号，用于登录和订单通知
  • 格式要求：1开头的11位数字（如：13800138000）
• 密码：设置6-20位字母或数字的登录密码
  • 建议使用字母+数字的组合，提高安全性
• 确认密码：再次输入密码确保两次输入一致
• 验证码：用于验证手机号的真实性

步骤 3：获取和输入验证码

1. 输入手机号后，点击”获取验证码”按钮
2. 系统会向您的手机发送6位数字验证码
3. 在60秒内将验证码填入验证码输入框
4. 如未收到，可以等待倒计时结束后重新获取

步骤 4：完成注册

1. 确认所有信息填写正确
2. 勾选同意用户协议和隐私政策
3. 点击”注册”按钮
4. 注册成功后会显示成功提示，即可登录使用

🔐 用户登录

进入登录页面

1. 打开 GoodPay 首页
2. 点击右下角 “👤 我的” 进入个人中心
3. 如果未登录，点击登录按钮进入登录页面

登录页面提供两种登录方式，您可以根据需要选择：

---

方式一：手机验证码登录

┌─────────────────────────────┐
│        GoodPay              │
│     美味生活，一键下单       │
├─────────────────────────────┤
│ ┌───────────┐ ┌─────────────┐ │
│ │ 手机登录  │ │ 密码登录   │ │ ← Tab切换
│ └───────────┘ └─────────────┘ │
├─────────────────────────────┤
│ 📱 手机号码                 │
│    [请输入手机号]           │
│                             │
│ 🔐 验证码                   │
│    [请输入验证码]   [获取验证码] │
│                             │
│        [    登录    ]       │
├─────────────────────────────┤
│ ——— 快速登录 ———             │
│        💚   💙              │ ← 微信、支付宝图标
│                             │
│    还没有账号？立即注册       │
└─────────────────────────────┘

验证码登录步骤：

1. 选择登录方式：点击”手机登录”标签
2. 输入手机号：输入注册时使用的11位手机号
3. 获取验证码：
   • 点击”获取验证码”按钮
   • 系统会向您的手机发送6位数字验证码
   • 60秒内可重新获取
4. 输入验证码：将收到的验证码填入输入框
5. 登录：点击”登录”按钮完成登录

---

方式二：密码登录

┌─────────────────────────────┐
│        GoodPay              │
│     美味生活，一键下单       │
├─────────────────────────────┤
│ ┌───────────┐ ┌─────────────┐ │
│ │ 手机登录  │ │ 密码登录   │ │ ← Tab切换
│ └───────────┘ └─────────────┘ │
├─────────────────────────────┤
│ 📱 手机号码                 │
│    [请输入手机号]           │
│                             │
│ 🔐 密码                     │
│    [请输入密码]             │
│                             │
│        [    登录    ]       │
├─────────────────────────────┤
│ ——— 快速登录 ———             │
│        💚   💙              │ ← 微信、支付宝图标
│                             │
│    还没有账号？立即注册       │
└─────────────────────────────┘

密码登录步骤：

1. 选择登录方式：点击”密码登录”标签
2. 输入手机号：输入注册时使用的11位手机号
3. 输入密码：输入您设置的登录密码
4. 登录：点击”登录”按钮完成登录

---

方式三：第三方登录

快速登录选项

• 💚 微信登录：使用微信账号快速登录
• 💙 支付宝登录：使用支付宝账号快速登录

注意：第三方登录功能正在开发中，敬请期待

---

填写说明

手机号格式要求：

• 必须是11位数字
• 必须以1开头
• 如：13800138000

验证码说明：

• 6位数字验证码
• 有效期：60秒
• 未收到可以重新获取

密码要求：

• 长度：6-20位字符
• 可以包含字母和数字
• 区分大小写

---

登录成功后

登录成功后，系统会：

1. 自动跳转到首页
2. 显示”登录成功”提示
3. 保存您的登录状态
4. 在”我的”页面显示您的个人信息

如果遇到登录问题：

• 忘记密码：可以通过手机验证码重置密码
• 手机号更换：请联系客服处理
• 验证码收不到：检查手机号是否正确，稍后重试

---

🏪 浏览餐厅

首页浏览

推荐餐厅

• 首页会根据评分推荐热门餐厅
• 每个餐厅卡片显示：
  • 餐厅图片和名称
  • 综合评分（⭐1.0-5.0）
  • 配送时间
  • 配送费用
  • 餐厅标签（菜系、特色等）

餐厅信息解读

┌─────────────────────────┐
│ 📷 川味小厨             │
│ ⭐ 4.8分  🛵 30分钟      │
│ 💰 配送费¥5             │
│ 🏷️ 中餐 麻辣 牛肉       │
└─────────────────────────┘

各标签含义：

• ⭐ 评分 - 用户对餐厅的综合评价
• 🛵 配送时间 - 预计送达时间
• 💰 配送费 - 配送服务费用
• 🏷️ 标签 - 餐厅菜系和特色

餐厅搜索

使用搜索框

1. 在首页顶部点击🔍搜索框
2. 输入餐厅名称或菜品关键词
3. 点击搜索或按回车键

搜索技巧：

• 输入餐厅名：如”川味小厨”、”兰州拉面”
• 输入菜品名：如”宫保鸡丁”、”牛肉面”
• 输入关键词：如”火锅”、”烧烤”

餐厅分类导航

首页显示餐厅分类标签：

🔥 中餐  🌸 西餐  🎁 日料
❤️ 韩料  🕐 快餐  🔧 饮品
🎂 甜点  🔥 火锅

各分类说明：

• 🔥 中餐 - 各式中式菜肴
• 🌸 西餐 - 欧美风味美食
• 🎁 日料 - 日式料理和寿司
• ❤️ 韩料 - 韩式料理和炸鸡
• 🕐 快餐 - 便捷快速的餐食
• 🔧 饮品 - 奶茶、咖啡等
• 🎂 甜点 - 蛋糕、甜品等
• 🔥 火锅 - 各类火锅料理

点击任意分类标签可以快速筛选对应类型的餐厅。

筛选功能

点击”查看更多”可以按以下条件筛选：

• 评分排序：按评分从高到低（筛选4分以上餐厅）
• 分类筛选：通过标签筛选特定菜系餐厅

---

🍽️ 选择菜品

进入餐厅页面

点击首页的任意餐厅卡片，即可进入餐厅详情页面：

┌─────────────────────────────┐
│  ← 川味小厨                 │
├─────────────────────────────┤
│ 📷                        │
│ ┌─────────────────────────┐ │
│ │     餐厅图片            │ │
│ └─────────────────────────┘ │
│                             │
│ ⭐ 4.8分                    │
│ 🏷️ 中餐 麻辣 牛肉          │
│ 💰 配送费¥5  🛵 30分钟      │
├─────────────────────────────┤
│ 热销  │                     │
│ 主食  │ ┌─────────────────┐ │
│ 小菜  │ │宫保鸡丁 ¥28    │ │ ← 左侧分类
│ 饮品  │ │麻婆豆腐 ¥22    │ │   右侧菜品列表
│       │ │水煮鱼 ¥58     │ │
│       │ │[ - ] 1 [ + ]  │ │
│       │ └─────────────────┘ │
│       │ ┌─────────────────┐ │
│       │ │米饭 ¥3         │ │
│       │ │[ - ] 2 [ + ]  │ │
│       │ └─────────────────┘ │
├─────────────────────────────┤
│ 🛒[3] ¥86      [去结算]     │  ← 购物车固定栏
└─────────────────────────────┘

菜品选择

页面布局说明

• 左侧分类：显示菜品分类（热销、主食、小菜、饮品等）
• 右侧菜品：显示对应分类下的菜品列表
• 底部购物车：固定在底部，显示当前餐厅的购物车信息

查看菜品详情

1. 点击菜品图片或名称查看详细信息
2. 可以看到菜品图片、价格、描述等信息
3. 部分菜品支持选择规格（如：大份/小份、辣度等）

添加到购物车

• 点击菜品右侧的 [+] 按钮
• 系统自动将菜品加入购物车
• 可以继续点击增加数量

修改数量

• 点击 [+] 增加数量
• 点击 [-] 减少数量
• 数量减到0时自动从购物车移除

切换分类

• 点击左侧分类名称
• 右侧会自动滚动到对应分类的菜品
• 也可以直接滚动右侧查看所有菜品

查看购物车

在餐厅页面底部会显示购物车固定栏：

┌─────────────────────────────┐
│ 🛒[3] ¥86      [去结算]     │
│     配送费 ¥5              │
└─────────────────────────────┘

购物车信息说明：

• 🛒[3] - 购物车图标和菜品总数量
• ¥86 - 菜品总价（不含配送费）
• 配送费 ¥5 - 当前餐厅的配送费用
• [去结算] - 进入订单确认页面

查看详细购物车内容

• 点击购物车固定栏任意位置
• 弹出购物车详情弹窗
• 显示所有已选菜品的详细列表

┌─────────────────────────────┐
│        我的购物车            │
├─────────────────────────────┤
│ ☑️ 宫保鸡丁     ¥28 x 1    │
│ ☑️ 麻婆豆腐     ¥22 x 1    │
│ ☑️ 米饭         ¥3  x 2    │
├─────────────────────────────┤
│ 商品合计：¥56               │
│ 配送费：¥3                  │
│ 总计：¥59                   │
├─────────────────────────────┤
│    [      去结算      ]     │
└─────────────────────────────┘

---

🛒 购物车管理

查看购物车详情

在餐厅页面操作：

1. 点击右下角的购物车图标
2. 查看已选择的菜品和数量
3. 可以继续添加或修改数量

在购物车页面操作：

1. 在餐厅页面点击”去结算”
2. 或从首页底部导航进入购物车
3. 可以管理所有餐厅的购物车内容

修改购物车

增加数量

• 点击菜品数量旁的 [+] 按钮

减少数量

• 点击菜品数量旁的 [-] 按钮
• 数量减到0时会从购物车移除

删除菜品

• 点击菜品右侧的删除按钮
• 确认后从购物车移除

清空购物车

• 在购物车页面点击”清空”
• 确认后将移除所有菜品

价格说明

商品小计：所有菜品的单价 × 数量
配送费：餐厅收取的配送费用
优惠金额：使用的优惠券或折扣
实付金额：最终需要支付的金额

---

📝 下单流程

GoodPay 的完整下单流程包含三个阶段：订单结算 → 订单处理中 → 订单成功

---

第一阶段：订单结算

在购物车页面点击”去结算”后，进入订单结算页面：

┌─────────────────────────────┐
│  ← 订单结算                 │
├─────────────────────────────┤
│ 📷 [餐厅图片] 川味小厨      │
│    预计30分钟送达 配送费¥5   │
├─────────────────────────────┤
│ 📍 张三 13800138000 [默认]   │
│    广东省深圳市南山区科技园... │
│    [点击更改收货地址]        │
├─────────────────────────────┤
│ ⏰ 配送时间                 │
│    立即送达 [选择时间]       │
├─────────────────────────────┤
│ 📋 订单商品                 │
│    📷 宫保鸡丁    ¥28 x 1   │
│    📷 麻婆豆腐    ¥22 x 1   │
│    📷 米饭        ¥3  x 2   │
├─────────────────────────────┤
│ 💳 支付方式                 │
│    ☑️ 微信支付              │
│    ☐ 支付宝                 │
│    ☐ 余额支付(挡板)         │
├─────────────────────────────┤
│ 📝 订单备注                 │
│    [请输入订单备注(选填)...] │
├─────────────────────────────┤
│ 💰 费用明细                 │
│    商品总价：¥56           │
│    配送费：¥5             │
│    实付金额：¥61           │
├─────────────────────────────┤
│ 实付金额：¥61      [提交订单] │
└─────────────────────────────┘

1. 确认餐厅信息

• 显示餐厅图片、名称
• 预计送达时间和配送费用

2. 选择收货地址

• 默认地址：系统自动加载默认收货地址
• 更改地址：点击可选择其他已保存地址
• 地址格式：显示收货人姓名、电话、完整地址

3. 选择配送时间

• 立即送达：餐厅接到订单后立即准备，约30分钟送达
• 预约送达：
  • 点击”选择时间”弹出时间选择器
  • 可选择今天或未来的30分钟时间段
  • 营业时间：当前时间30分钟后至22:00

4. 确认订单商品

• 显示所有已选择的菜品
• 包含菜品图片、名称、价格、数量
• 确认商品信息和数量是否正确

5. 选择支付方式

• 微信支付：使用微信账号支付
• 支付宝：使用支付宝账号支付
• 余额支付(挡板)：当前仅支持的测试支付方式

6. 填写订单备注

• 选填项，最多100个字符
• 可填写特殊要求：口味偏好、配送说明等

7. 查看费用明细

• 商品总价：所有菜品的总价
• 配送费：餐厅收取的配送费用
• 实付金额：最终需要支付的总金额

---

第二阶段：订单处理中

点击”提交订单”后，系统自动进入订单处理中页面：

┌─────────────────────────────┐
│  ← 订单处理中               │
├─────────────────────────────┤
│        ⏳ [加载动画]         │
│                             │
│        订单正在处理         │
├─────────────────────────────┤
│ 📋 订单信息                 │
│    订单号：GP202411140001    │
│    支付方式：余额支付        │
├─────────────────────────────┤
│ ⚠️ 正在为您处理订单，请稍候... │
├─────────────────────────────┤
│ 📝 处理步骤                 │
│    ✓ 订单创建成功           │
│    ⚪ 支付处理中           │
│    ⚪ 等待商家接单(模拟)    │
│    ⚪ 等待骑手配送(模拟)    │
└─────────────────────────────┘

处理步骤说明

1. 订单创建成功（已完成）

   • 系统接收订单请求
   • 生成唯一订单号

2. 支付处理中（1秒后）

   • 调用支付接口处理订单
   • 验证支付方式有效性

3. 等待商家接单（模拟）（2秒后）

   • 餐厅接收订单通知
   • 商家确认接单并开始准备

4. 等待骑手配送（模拟）（3秒后）

   • 订单状态更新为配送中
   • 系统自动跳转到订单成功页面

注意：当前为演示环境，实际处理时间会根据餐厅繁忙程度有所变化

---

第三阶段：订单成功

处理完成后，自动跳转到订单成功页面：

┌─────────────────────────────┐
│                             │
│         ✅ 成功图标          │
│                             │
│       订单提交成功！         │
│  您的订单已成功提交，       │
│  商家正在准备您的美食       │
├─────────────────────────────┤
│ 📋 订单号    GP202411140001 │
│ ⏰ 预计送达  今天 13:30     │
│ 💰 实付金额  ¥61           │
├─────────────────────────────┤
│      [查看订单详情]         │
│      [返回首页]             │
└─────────────────────────────┘

订单成功信息

• 订单号：系统生成的唯一标识
• 预计送达时间：根据餐厅准备时间和配送距离计算
• 实付金额：本次订单的最终支付金额

后续操作

• 查看订单详情：跳转到订单详情页面，可实时跟踪订单状态
• 返回首页：继续浏览其他餐厅或进行新的订餐

---

💳 支付方式

当前支持的支付方式

余额支付（挡板）

• 状态：当前测试阶段唯一支持的支付方式
• 说明：用于系统测试和演示
• 操作：系统自动处理，无需用户额外操作

即将支持的支付方式

💚 微信支付

• 使用微信账号快捷支付
• 支持扫码支付和微信内支付

💙 支付宝

• 使用支付宝账号支付
• 支持余额、银行卡等多种支付方式

支付状态说明

1. 订单提交 - 点击”提交订单”按钮
2. 支付处理 - 系统验证支付信息
3. 支付成功 - 资金划转成功，订单确认
4. 商家接单 - 餐厅开始准备您的餐品
5. 配送中 - 骑手取餐并开始配送
6. 已送达 - 订单完成

支付常见问题

Q: 为什么目前只能使用余额支付？
A: 当前系统处于测试阶段，为确保支付流程稳定，暂时使用挡板支付。正式上线后将会支持微信支付和支付宝。

Q: 支付失败怎么办？
A:

1. 检查网络连接是否正常
2. 确认账户状态是否正常
3. 重新尝试提交订单
4. 如问题持续，请联系客服

Q: 如何查看支付记录？
A:

1. 进入”我的”页面
2. 点击”我的订单”
3. 查看对应订单的支付状态和详情

Q: 订单可以取消吗？
A:

• 商家接单前：可以取消，全额退款
• 商家接单后：根据餐厅政策可能收取部分费用
• 已开始配送：通常不支持取消

---

📋 订单管理

查看订单列表

进入订单页面

1. 点击首页底部导航”📋 订单”
2. 查看所有历史订单记录

订单状态标签
页面顶部提供状态筛选标签，可以快速查看不同状态的订单：

• 全部 - 显示所有订单
• 待支付 - 等待支付的订单
• 配送中 - 正在配送的订单
• 已完成 - 已完成的订单

订单列表展示

┌─────────────────────────────┐
│ 日式料理店      11月11日 16:16 │
│                         等待支付 │
│           [去支付] [取消订单] │
├─────────────────────────────┤
│ 📷 天妇罗    ¥35 x 1        │
│ 📷 金枪鱼寿司 ¥38 x 1        │
├─────────────────────────────┤
│ 共2件，合计    ¥73          │
└─────────────────────────────┘

┌─────────────────────────────┐
│ 粤式茶餐厅      11月11日 15:39 │
│                         配送中 │
│             [确认收货]        │
├─────────────────────────────┤
│ 📷 皮蛋瘦肉粥 ¥16 x 2       │
├─────────────────────────────┤
│ 共2件，合计    ¥38          │
└─────────────────────────────┘

订单状态说明

📋 订单状态 (orderStatus)

• created - 等待支付（订单刚创建）
• confirmed - 订单已确认（支付成功）
• preparing - 制作中（商家准备餐品）
• delivering - 配送中（骑手正在配送）
• completed - 已完成（订单已送达）
• cancelled - 已取消

💳 支付状态 (paymentStatus)

• pending - 待支付
• processing - 支付中
• success - 支付成功
• failed - 支付失败
• refunded - 已退款

订单信息显示

• 餐厅名称 - 下单的餐厅
• 下单时间 - 格式：月日 时:分
• 订单号 - 系统生成的唯一标识
• 订单状态 - 当前订单处理状态
• 支付状态 - 支付处理状态
• 商品列表 - 包含菜品图片、名称、数量、价格
• 总价信息 - 显示总件数和总金额

订单操作

根据订单状态显示不同的操作按钮：

等待支付状态 (created + pending)

• 去支付 - 跳转到订单处理页面完成支付
• 取消订单 - 需要输入取消理由，订单取消后不可恢复

商家制作中 (confirmed/preparing)

• 联系商家 - 功能开发中，用于联系餐厅

配送中 (delivering)

• 确认收货 - 确认收到餐品，订单状态更新为已完成

已完成 (completed)

• 申请退款 - 如有问题可以申请退款，需要输入退款理由

已取消 (cancelled)

• 无操作按钮，仅显示订单信息

订单详情

点击任一订单卡片可以查看详细信息：

┌─────────────────────────────┐
│     ✅ 订单已完成            │
│      预计 13:00 送达        │
├─────────────────────────────┤
│ 📍 配送地址                 │
│ 张三 13800138000            │
│ 某某区某某街道123号         │
├─────────────────────────────┤
│ 🏪 川味小厨                 │
│ 订单号：GP2024011500123     │
├─────────────────────────────┤
│ 🍽️ 订单商品                 │
│ 📷 麻婆豆腐     ¥18 x 1     │
│ 📷 白米饭       ¥2  x 2     │
├─────────────────────────────┤
│ 📋 订单信息                 │
│ 下单时间：2024年1月15日 12:30│
│ 支付方式：微信支付           │
│ 配送费：¥5                  │
│ 优惠金额：-¥2               │
├─────────────────────────────┤
│ 💰 订单金额                 │
│ 商品金额：¥22               │
│ 配送费：¥5                  │
│ 优惠：-¥2                   │
│ 实付金额：¥25               │
├─────────────────────────────┐
│      [申请退款]              │
└─────────────────────────────┘

订单操作

订单详情页面底部的操作按钮会根据订单状态动态显示：

去支付（已创建状态）

• 点击”去支付”按钮跳转到支付页面
• 完成支付后订单状态变为”已确认”

联系商家（已确认/制作中/已取消状态）

• 点击”联系商家”按钮与餐厅沟通
• 功能开发中，敬请期待

确认收货（配送中状态）

• 点击”确认收货”按钮完成订单
• 确认后订单状态变为”已完成”

申请退款（已完成状态）

• 点击”申请退款”按钮提交退款申请
• 需要输入退款理由
• 系统会处理退款请求

---

🏠 地址管理

进入地址管理

1. 点击首页底部”👤 我的”
2. 点击”📍 地址管理”
3. 查看和管理所有收货地址

添加新地址

填写地址信息：

┌──────────────────────────────────┐
│        添加新地址                │ 保存
├──────────────────────────────────┤
│ 👤 收货人                         │
│    [张三]                       │
│                                   │
│ 📱 手机号                         │
│    [138****5679]                │
│                                   │
│ 📍 所在地区 >                     │
│    [北京市 朝阳区 三里屯街道]     │
│                                   │
│ 🏠 详细地址                       │
│    [工体北路8号院1号楼1单元101室] │
│                                   │
│ ☑️ 设为默认地址                   │
├──────────────────────────────────┤
└──────────────────────────────────┘

填写说明：

• 收货人：必填，填写真实姓名，方便配送员联系
• 手机号：必填，输入正确的11位手机号码格式
• 所在地区：必填，点击选择省市区，使用弹窗式选择器
• 详细地址：必填，填写街道、门牌号等详细信息（支持多行输入）
• 设为默认地址：开启后下单时会自动选择此地址
• 保存：点击右上角”保存”按钮完成添加

编辑地址

1. 在地址列表中点击地址右侧的编辑图标
2. 修改需要更改的信息
3. 点击右上角”保存”按钮完成修改

地址列表展示

地址列表页面显示所有已保存的地址：

┌──────────────────────────────────┐
│ 收货地址                   添加 │
├──────────────────────────────────┤
│                                   │
│ 张三  138****5679  [默认]         │
│ 编辑 删除                          │
│ 北京市朝阳区三里屯街道工体北路8号院│
│ 1号楼1单元101室                   │
│                                   │
│                                   │
│ 李四  139****1234                 │
│ 编辑 删除                          │
│ 广东省深圳市南山区科技园南路1号    │
│ A座501室                          │
├──────────────────────────────────┤
│        [ 添加新地址 ]             │
└──────────────────────────────────┘

删除地址

1. 在地址列表中点击地址右侧的删除图标
2. 在弹出的确认对话框中点击确认
3. 删除成功后显示提示信息

设置默认地址

1. 编辑要设为默认的地址
2. 开启”设为默认地址”开关
3. 保存修改
4. 默认地址会在列表中显示红色”默认”标签

---

👤 个人中心

个人信息

用户信息区域

┌──────────────────────────────────┐
│  📷 头像 [编辑图标]               │
│                                   │
│  昵称：张三                       │
│  手机：138****5679                │
├──────────────────────────────────┤
│         订单统计                  │
│                                   │
│     0        0        0        0  │
│   全部订单   待支付   配送中   已完成│
├──────────────────────────────────┤
│                                   │
│ 📍 收货地址                    →  │
│ ❤️ 我的收藏                    →  │
│ 🎫 优惠券         3张可用       →  │
│ 💰 我的钱包       ¥128.50       →  │
│ 🛡️ 账号安全                    →  │
│                                   │
│ ❓ 帮助中心                    →  │
│ 💬 意见反馈                    →  │
│ ℹ️ 关于我们                    →  │
├──────────────────────────────────┤
│        [ 退出登录 ]              │
└──────────────────────────────────┘

功能说明

📍 收货地址 ✅ 已实现

• 管理收货地址（添加、编辑、删除）
• 设置默认收货地址
• 点击可直接跳转到地址管理页面

❤️ 我的收藏 🚧 开发中

• 查看收藏的餐厅
• 管理收藏列表

🎫 优惠券 🚧 开发中

• 查看可用优惠券数量
• 优惠券使用记录

💰 我的钱包 🚧 开发中

• 查看钱包余额
• 充值和提现功能

🛡️ 账号安全 🚧 开发中

• 修改密码
• 绑定/更换手机号
• 账号安全设置

❓ 帮助中心 🚧 开发中

• 常见问题解答
• 使用指南

💬 意见反馈 🚧 开发中

• 提交用户反馈
• 查看反馈回复

ℹ️ 关于我们 🚧 开发中

• 应用介绍
• 版本信息

📷 头像编辑 🚧 开发中

• 点击头像右下角的相机图标
• 更换个人头像

操作说明

订单统计

• 点击任一统计项可跳转到订单页面
• 数量会根据实际订单情况实时更新

退出登录

• 点击页面底部的”退出登录”按钮
• 在弹出的确认对话框中确认退出
• 退出后将返回登录页面

---

底部导航栏

应用底部固定的导航栏，包含三个主要功能：

┌─────────────────────────────┐
│    🏠 首页   📋 订单   👤 我的 │
└─────────────────────────────┘

各功能说明：

🏠 首页

• 浏览推荐餐厅
• 搜索餐厅和菜品
• 查看餐厅分类
• 快速进入订餐流程

📋 订单

• 查看历史订单记录
• 跟踪当前订单状态
• 管理已完成订单
• 申请售后服务

👤 我的

• 个人信息管理
• 收货地址设置
• 会员等级和权益
• 系统设置和帮助

导航提示：

• 登录和注册页面不会显示底部导航栏
• 点击任意标签可以快速切换页面
• 当前页面的标签会高亮显示

---

🎉 感谢您选择 GoodPay！

让每一餐都成为美好的体验

如有任何建议或意见，欢迎随时联系我们

🍽️ GoodPay 团队 敬上