# 汪托帮（山水宠物俱乐部）— 微信小程序 UI 设计 PRD > 版本 V1.0 | 2026年6月 > 基于主 PRD V4.0 | 技术栈：微信原生 / Taro + Vant Weapp > 本 PRD 仅描述小程序 UI/UX，后台管理、数据统计等不在本范围内 --- ## 第一章 产品定位与设计原则 ### 1.1 产品定位 "汪托帮"是一个宠物主题的线下门店点餐系统，品牌全称 **"汪托帮 · 山水宠物俱乐部"**。用户到店后扫描座位二维码进入小程序，完成浏览菜单、点餐、支付、充值、积分兑换、活动报名等操作。 **一句话描述**：到店扫码 → 点餐支付 → 攒积分兑好礼 → 带宠物参加活动。 ### 1.2 用户画像 | 角色 | 场景 | 核心诉求 | |------|------|----------| | 宠物主人 | 带狗到店消费 | 快速点餐、会员价、给宠物攒积分 | | 新顾客 | 首次到店 | 了解菜单、注册即会员 | | 老顾客 | 高频消费 | 充值优惠、积分兑换、活动报名 | ### 1.3 不在小程序中展示的功能 以下功能属于**后台管理系统**，不在小程序中出现： - ❌ 营收统计、消费趋势图、仪表盘 - ❌ 菜品销量排行、会员分布分析 - ❌ 订单后台管理（改状态、退单） - ❌ 座位可视化布局编辑 - ❌ 营销规则配置 ### 1.4 设计原则 - **宠物友好**：暖色调为主，大量留白，可爱图标 - **操作极简**：核心路径（扫码→点餐→支付）不超过 4 步 - **一屏一任务**：每屏聚焦一个操作，不堆砌信息 - **即时反馈**：支付成功/积分到账/报名确认，操作后立即弹窗确认 --- ## 第二章 全局 UI 规范 ### 2.1 品牌色板 | 用途 | 色值 | 说明 | |------|------|------| | 主色（Primary） | `#E88D2E` 暖橙 | 按钮、选中态、标签 | | 辅色（Secondary） | `#5B8C5A` 森绿 | 成功状态、积分、会员标识 | | 背景色 | `#F9F6F0` 奶油白 | 全局背景 | | 卡片色 | `#FFFFFF` 纯白 | 卡片、列表项 | | 文字主色 | `#3D3D3D` 深灰 | 标题、正文 | | 文字辅色 | `#999999` 浅灰 | 辅助说明、时间 | | 警示色 | `#E74C3C` 红 | 库存不足、余额不足 | | 宠物粉 | `#F2D7D5` 淡粉 | 宠物相关模块点缀 | ### 2.2 字体 | 层级 | 大小 | 粗细 | 用途 | |------|------|------|------| | H1 | 36rpx | Bold | 页面大标题 | | H2 | 32rpx | Bold | 卡片标题 | | H3 | 28rpx | Medium | 列表标题 | | Body | 26rpx | Regular | 正文 | | Caption | 22rpx | Regular | 辅助文字、时间 | ### 2.3 圆角与间距 ``` 卡片圆角: 16rpx 按钮圆角: 44rpx（胶囊形） 头像圆角: 50%（圆形） 页面内边距: 24rpx 卡片内边距: 20rpx 元素间距: 16rpx / 24rpx ``` ### 2.4 图标风格 - 导航栏图标：线性图标，选中态填充主色 - 功能图标：圆角矩形底 + 白色图标（类似 iOS 风格） - 宠物相关：使用骨头、爪印、狗屋等元素 --- ## 第三章 底部导航栏 **四个 Tab**： ``` ┌──────────────────────────────────────────────┐ │ 🏠 首页 │ 🍽️ 点餐 │ 🎁 充值优惠 │ 👤 我的 │ └──────────────────────────────────────────────┘ ``` | Tab | 中文 | 图标（未选中/选中） | 核心功能 | |-----|------|---------------------|----------| | 1 | 首页 | 房子轮廓 / 填充房子 | 公告轮播、活动推荐、扫码入口 | | 2 | 点餐 | 餐具轮廓 / 填充餐具 | 扫码、菜单、购物车、下单 | | 3 | 充值优惠 | 礼物盒轮廓 / 填充礼物 | 充值套餐、当前活动、积分兑换入口 | | 4 | 我的 | 人像轮廓 / 填充人像 | 会员信息、订单、积分、宠物、报名 | > 底部导航栏始终显示（除非在支付流程中或全屏浏览图片时隐藏）。 --- ## 第四章 页面详细设计 ### 4.1 首页 (Tab 1) #### 4.1.1 页面布局 ``` ┌─────────────────────────────────────┐ │ [汪托帮 Logo] 山水宠物俱乐部 │ ← 顶部品牌区 ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ 【公告轮播 Slider】 │ │ ← 3-5 条公告自动轮播 │ │ 图片 + 标题 │ │ 每条公告可点击跳转 │ │ ● ○ ○ ○ 指示器 │ │ ← 间隔 4 秒 │ └─────────────────────────────┘ │ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ 📷 扫码点餐 │ │ 🎁 充值折扣 │ │ ← 快捷入口（两个大按钮） │ │ 立即扫码 │ │ 充100送20 │ │ │ └────────────┘ └────────────┘ │ │ │ │ ┌── 近期活动 ─────────────────┐ │ │ │ ┌────────────────────┐ │ │ │ │ │ 🐶 狗狗聚会日 │ │ │ ← 活动卡片列表 │ │ │ 6月15日 户外草坪 │ │ │ 最多显示 3 个 │ │ │ 18/30 人已报名 │ │ │ 点击跳转活动详情 │ │ └────────────────────┘ │ │ │ │ ┌────────────────────┐ │ │ │ │ │ 🎂 六月生日派对 │ │ │ │ │ │ 6月20日 室内A区 │ │ │ │ │ │ 5/20 人已报名 │ │ │ │ │ └────────────────────┘ │ │ │ │ 查看全部活动 → │ │ │ └─────────────────────────────┘ │ │ │ │ ┌── 推荐菜品 ─────────────────┐ │ │ │ [🐔红烧肉饭] [🧋奶茶] [🍰蛋糕] │ ← 横向滚动 │ │ ¥38.00 ¥18.00 ¥28.00 │ 点击跳转菜品详情 │ └─────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` #### 4.1.2 公告轮播 (Slider) **数据来源**：`GET /api/activity/announcements` - 取 `status=1` 且当前时间在 `start_time` 和 `end_time` 之间的公告 - 按 `sort_order` 排序 - 每条公告展示图片 + 标题 - 点击跳转：根据 `link_type` 决定 - `recharge` → 跳转充值优惠 Tab - `activity` → 跳转到指定活动详情 - `external` → 打开 `link_target` 网页 - `text` → 弹窗展示 `content` 全文 - 自动轮播间隔：4 秒 - 手动可左右滑动 - 指示器：圆点样式，当前高亮 #### 4.1.3 快捷入口 两个等宽的卡片式按钮： - **扫码点餐**：橙色底 + 白色图标 → 调起微信扫码（`wx.scanCode`）→ 跳转菜单页 - **充值折扣**：绿色底 + 白色图标 → 跳转充值优惠 Tab #### 4.1.4 近期活动 **数据来源**：`GET /api/activity/list?pageSize=3` - 最多展示 3 条 `published` 状态的活动 - 每条显示：活动图片、标题、时间、地点、报名进度条 - 报名进度：`current_participants / max_participants`，满额显示"已满" - 底部"查看全部活动 →"跳转活动列表页 #### 4.1.5 推荐菜品 **数据来源**：`GET /api/menu/dishes?pageSize=6`（取 `tags` 含"推荐"的） - 横向滚动列表 - 每个菜品卡片：图片、名称、会员价（如有） - 点击跳转菜品详情 --- ### 4.2 点餐 (Tab 2) 点餐流程是一个**线性流程**，从扫码开始： ``` 扫码座位 → 菜品菜单 → 购物车 → 订单确认 → 支付 → 完成 ``` #### 4.2.1 扫码页 ``` ┌─────────────────────────────────────┐ │ │ │ [ 座位二维码 ] │ │ │ │ ┌───────────────────┐ │ │ │ │ │ │ │ 请扫描桌上的 │ │ │ │ 座位二维码 │ │ │ │ │ │ │ │ [扫码图标] │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ 📍 扫码后自动识别桌号， │ │ 同座位的朋友可以一起点餐 │ │ │ └─────────────────────────────────────┘ ``` **交互**： - 点击扫码区域 → 调起 `wx.scanCode` → 解析二维码内容 - 调用 `GET /api/seat/scan?code=xxx` 获取座位信息 - 成功：跳转菜单页，URL 参数带 `seat_id` - 失败：弹窗提示"无效的座位二维码"或"该座位已被占用" #### 4.2.2 菜品菜单页 ``` ┌─────────────────────────────────────┐ │ ← 返回 [座位: A1] 🔍 搜索 │ ← 顶部栏 ├─────────────────────────────────────┤ │ [🔥全部] [🍚主食] [🍜面类] [🧋饮品] │ ← 分类 Tab（横向滚动） ├─────────────────────────────────────┤ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ 🍖 │ │ 🍗 │ │ ← 菜品网格（2列） │ │ 红烧肉饭 │ │ 鸡腿饭 │ │ │ │ ¥38 ¥32(会员)│ │ ¥35 ¥29 │ │ │ │ 🔥 热门 │ │ │ │ │ │ [ + ] │ │ [ + ] │ │ ← 加购按钮 │ └────────────┘ └────────────┘ │ │ ┌────────────┐ ┌────────────┐ │ │ │ 🥤 │ │ 🍰 │ │ │ │ 珍珠奶茶 │ │ 芝士蛋糕 │ │ │ │ ¥18 │ │ ¥28 │ │ │ │ │ │ │ │ │ │ [ + ] │ │ 已售罄 │ │ │ └────────────┘ └────────────┘ │ │ │ ├─────────────────────────────────────┤ │ 🛒 购物车 3件 ¥86.00 [去结算 →] │ ← 底部固定栏 └─────────────────────────────────────┘ ``` **交互细节**： - 分类 Tab 横向滚动，选中态下划线高亮（橙色） - 菜品卡片：图片、名称、会员价（绿色突出）、原价（灰色划线） - 点击 `+` 按钮 → 弹窗选择数量 + 备注 → 加入购物车（调用 `POST /api/order/cart/add`） - 已加入购物车的菜品，`+` 按钮变为数量加减器 `[-] 2 [+]` - 售罄菜品置灰，点击提示"今日已售罄" - 底部购物车栏实时更新：件数 + 总金额（按会员价计算） - 点击底部栏 → 弹出购物车半屏面板 #### 4.2.3 购物车半屏面板 ``` ┌─────────────────────────────────────┐ │ 购物车 [×] │ │ 座位: A1 │ ├─────────────────────────────────────┤ │ ┌─── 小明的菜品 ───────────────┐ │ │ │ 🍖 红烧肉饭 ×2 │ │ ← 按用户分组显示 │ │ ¥32.00/份 小计 ¥64.00 │ │ （同一座位多人的菜分开） │ │ 备注: 少辣 │ │ │ │ [-] 2 [+] [🗑] │ │ │ └──────────────────────────────┘ │ │ ┌─── 小红的菜品 ───────────────┐ │ │ │ 🥤 珍珠奶茶 ×1 │ │ │ │ ¥18.00/份 小计 ¥18.00 │ │ │ │ [-] 1 [+] [🗑] │ │ │ └──────────────────────────────┘ │ ├─────────────────────────────────────┤ │ 合计: ¥82.00 │ │ │ │ [ 提交订单 ] │ ← 橙色全宽按钮 └─────────────────────────────────────┘ ``` **交互**： - 按用户分组展示（同一座位多个用户各自点的菜） - 数量加减即时生效，调用 `PUT /api/order/cart/update` - 删除按钮调 `DELETE /api/order/cart/remove` - "提交订单" → 调用 `POST /api/order/create` → 跳转订单确认页 #### 4.2.4 订单确认页 ``` ┌─────────────────────────────────────┐ │ ← 返回 确认订单 │ ├─────────────────────────────────────┤ │ 座位: A1 | 室内A区 │ │ │ │ ┌── 订单明细 ──────────────────┐ │ │ │ 🍖 红烧肉饭 ×2 ¥64.00 │ │ │ │ 🥤 珍珠奶茶 ×1 ¥18.00 │ │ │ │ ───────────────────── │ │ │ │ 原价合计 ¥82.00 │ │ │ │ 会员优惠 -¥10.00 │ │ ← 绿色 │ │ 满50减10 -¥10.00 │ │ ← 绿色 │ │ ───────────────────── │ │ │ │ 实付金额 ¥62.00 │ │ ← 红色加粗 │ └──────────────────────────────┘ │ │ │ │ ┌── 支付方式 ──────────────────┐ │ │ │ ○ 微信支付 │ │ │ │ ○ 余额支付 (余额: ¥500.00) │ │ │ └──────────────────────────────┘ │ │ │ │ 📝 备注: [______________] │ │ │ │ [ 确认支付 ¥62.00 ] │ └─────────────────────────────────────┘ ``` **交互**： - 订单明细调用 `POST /api/pricing/calculate` 获取 - 支付方式默认选中微信支付（余额用户可选余额支付） - 备注可选填 - "确认支付" → 调用 `POST /api/order/:id/pay` → 调起微信支付或余额支付 #### 4.2.5 支付结果页 ``` ┌─────────────────────────────────────┐ │ │ │ ✅ 支付成功 │ │ │ │ ¥62.00 │ │ │ │ ┌──────────────────┐ │ │ │ +120 积分到账 │ │ ← 积分倍率自动计算 │ │ ×1.5(会员倍率) │ │ │ └──────────────────┘ │ │ │ │ [查看订单] [返回首页] │ │ │ └─────────────────────────────────────┘ ``` --- ### 4.3 充值优惠 (Tab 3) #### 4.3.1 页面布局 ``` ┌─────────────────────────────────────┐ │ 充值优惠 │ ├─────────────────────────────────────┤ │ ┌── 当前折扣 ──────────────────┐ │ │ │ 全场充值 9 折 │ │ ← 动态展示充值折扣活动 │ │ 6月1日 - 6月30日 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌── 充值套餐 ──────────────────┐ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ 充 ¥100 │ │ 充 ¥200 │ │ │ │ │ │ 到账 120 │ │ 到账 250 │ │ │ ← 卡片形式 │ │ │ 送 ¥20 │ │ 送 ¥50 │ │ │ 2 列网格 │ │ │ [充值] │ │ [充值] │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ 充 ¥500 │ │ 充 ¥1000 │ │ │ │ │ │ 到账 650 │ │ 到账 1400│ │ │ │ │ │ 送 ¥150 │ │ 送 ¥400 │ │ │ │ │ │ [充值] │ │ [充值] │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ └──────────────────────────────┘ │ │ │ │ ┌── 我的余额 ──────────────────┐ │ │ │ ¥500.00 │ │ │ │ 充值记录 → │ │ │ └──────────────────────────────┘ │ │ │ │ ┌── 积分兑换 ──────────────────┐ │ │ │ [🐶狗粮] [🧸玩具] [🎾球] │ │ ← 横向滚动 │ │ 200积分 500积分 150积分 │ │ │ │ 查看积分商城 → │ │ │ └──────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **数据来源**： - 充值折扣：`GET /api/activity/recharge-discount` - 充值套餐：`GET /api/pay/recharge` 相关配置（或写死在前端配置中，由后台动态下发） - 卡券包：微信原生卡包（不在此 Tab 实现） - 积分兑换商品：`GET /api/points/goods` **交互**： - 点击充值套餐 → 调起微信支付 → 充值成功后弹窗提示到账金额 + 赠送金额 - 充值记录：跳转充值记录列表页 - 积分兑换商品：横向滚动，每个展示图片 + 名称 + 积分价格 - "查看积分商城 →" 跳转积分商城完整列表页 --- ### 4.4 我的 (Tab 4) #### 4.4.1 页面布局 ``` ┌─────────────────────────────────────┐ │ │ │ [ 用户头像 ] │ │ 小明 │ │ 🏅 会员客户 │ ← 等级徽章 │ ═══════════════════ │ ← 升级进度条 │ 再消费 ¥200 升级为充值客户 │ │ │ │ ┌── 账户资产 ──────────────────┐ │ │ │ 💰 ¥500.00 ⭐ 1500分 │ │ │ │ 余额 积分 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌── 我的服务 ──────────────────┐ │ │ │ 📋 我的订单 → │ │ │ │ 📦 积分兑换记录 → │ │ │ │ 🐕 我的宠物 → │ │ │ │ 📅 活动报名 → │ │ │ │ 💳 充值记录 → │ │ │ └──────────────────────────────┘ │ │ │ │ ┌── 客服 ──────────────────────┐ │ │ │ 📞 联系客服 → │ │ │ └──────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` #### 4.4.2 头像区 **数据来源**：`GET /api/user/profile` - 头像：微信头像（圆形，80rpx） - 昵称：微信昵称 - 等级徽章： - 普通客户 → 灰色 🐾 图标 - 会员客户 → 绿色 ⭐ 图标 - 充值客户 → 金色 👑 图标 - 升级进度条： - 普通 → 会员：显示 `total_consumption / 门槛金额` 进度 - 会员 → 充值：显示"充值任意金额即可升级"，点击跳转充值优惠 Tab - 充值客户：显示"已是最高等级"，不显示进度条 #### 4.4.3 资产卡片 - 余额：点击跳转充值优惠 Tab - 积分：点击跳转积分详情页（积分流水 `GET /api/points/logs`） #### 4.4.4 服务列表 | 条目 | 跳转页面 | API | |------|---------|-----| | 我的订单 | 订单列表页 | `GET /api/order/list` | | 积分兑换记录 | 兑换记录页 | `GET /api/points/logs?type=exchange` | | 我的宠物 | 宠物列表页 | `GET /api/user/pets` | | 活动报名 | 我的报名页 | `GET /api/activity/my-registrations` | | 充值记录 | 充值记录页 | `GET /api/user/consumption?type=recharge` | > 注意：**不展示**"消费趋势""消费曲线"等数据分析内容。这些属于后台管理系统。 --- ### 4.5 子页面设计 #### 4.5.1 订单列表页 ``` ┌─────────────────────────────────────┐ │ ← 返回 我的订单 │ ├─────────────────────────────────────┤ │ [全部] [进行中] [已完成] [已取消] │ ← 状态筛选 Tab ├─────────────────────────────────────┤ │ ┌────────────────────────────┐ │ │ │ 订单号: WTB20260601123456 │ │ │ │ 座位: A1 │ │ │ │ 🍖 红烧肉饭 ×2 🥤珍珠奶茶 │ │ │ │ 共3件 ¥62.00 │ │ │ │ [已完成 →] │ │ │ └────────────────────────────┘ │ │ ┌────────────────────────────┐ │ │ │ 订单号: WTB20260601120001 │ │ │ │ 座位: A3 │ │ │ │ 🍗 鸡腿饭 ×1 │ │ │ │ 共1件 ¥29.00 │ │ │ │ [制作中 →] │ │ │ └────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **状态标签颜色**： - 进行中（confirmed/cooking/served）→ 橙色 - 已完成（paid/completed）→ 绿色 - 已取消（cancelled/refunded）→ 灰色 #### 4.5.2 订单详情页 ``` ┌─────────────────────────────────────┐ │ ← 返回 订单详情 │ ├─────────────────────────────────────┤ │ 订单号: WTB20260601123456 │ │ 下单时间: 2026-06-01 12:34 │ │ 座位: A1 (室内A区) │ │ │ │ ┌── 状态时间轴 ─────────────────┐ │ │ │ ● 已下单 12:34 │ │ │ │ │ │ │ │ │ ● 已确认 12:35 │ │ │ │ │ │ │ │ │ ● 制作中 12:38 │ │ │ │ │ │ │ │ │ ○ 已上菜 │ │ ← 当前状态高亮 │ │ │ │ │ │ │ ○ 已完成 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌── 菜品明细 ──────────────────┐ │ │ │ 🍖 红烧肉饭 ×2 ¥64.00 │ │ │ │ (含会员价 ¥32.00) │ │ │ │ 🥤 珍珠奶茶 ×1 ¥18.00 │ │ │ │ ───────────────────── │ │ │ │ 实付: ¥62.00 │ │ │ └──────────────────────────────┘ │ │ │ │ 📞 呼叫服务员 │ ← 按钮 └─────────────────────────────────────┘ ``` **时间轴数据来源**：`GET /api/order/:id/status` 返回 `status_logs` #### 4.5.3 活动列表页 ``` ┌─────────────────────────────────────┐ │ ← 返回 近期活动 │ ├─────────────────────────────────────┤ │ ┌────────────────────────────┐ │ │ │ [🐶 活动封面图] │ │ │ │ │ │ │ │ 狗狗聚会日 │ │ │ │ 📅 6月15日 14:00 │ │ │ │ 📍 户外草坪 │ │ │ │ ████████░░ 18/30 人已报名 │ │ │ │ [立即报名 →] │ │ │ └────────────────────────────┘ │ │ │ │ ┌────────────────────────────┐ │ │ │ [🎂 活动封面图] │ │ │ │ 六月生日派对 │ │ │ │ 📅 6月20日 16:00 │ │ │ │ 📍 室内A区 │ │ │ │ ████░░░░░░ 5/20 人已报名 │ │ │ │ [立即报名 →] │ │ │ └────────────────────────────┘ │ └─────────────────────────────────────┘ ``` #### 4.5.4 活动报名弹窗 ``` ┌─────────────────────────────────────┐ │ 报名 · 狗狗聚会日 [×] │ ├─────────────────────────────────────┤ │ │ │ 姓名: [______________] │ │ 手机: [______________] │ │ 备注: [______________] │ │ (如: 带一只金毛) │ │ │ │ [提交报名] │ └─────────────────────────────────────┘ ``` **提交**：`POST /api/activity/:id/register`，成功后弹窗提示 + 发送订阅消息。 #### 4.5.5 积分商城页 ``` ┌─────────────────────────────────────┐ │ ← 返回 积分商城 │ │ ⭐ 剩余: 1500分 │ ├─────────────────────────────────────┤ │ ┌──────────┐ ┌──────────┐ │ │ │ 🐶 │ │ 🧸 │ │ │ │ 狗粮500g │ │ 宠物玩具 │ │ │ │ 200积分 │ │ 500积分 │ │ │ │ 库存: 50 │ │ 库存: 10 │ │ │ │ [兑换] │ │ [兑换] │ │ │ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ │ │ │ 🎾 │ │ 🏠 │ │ │ │ 弹力球 │ │ 宠物窝 │ │ │ │ 150积分 │ │ 2000积分 │ │ │ │ 库存: 30 │ │ 已售罄 │ │ │ │ [兑换] │ │ [兑换] │ │ │ └──────────┘ └──────────┘ │ └─────────────────────────────────────┘ ``` **兑换确认**：点击兑换 → 二次确认弹窗 → `POST /api/points/exchange` → 成功提示。 #### 4.5.6 我的宠物页 ``` ┌─────────────────────────────────────┐ │ ← 返回 我的宠物 [+ 添加]│ ├─────────────────────────────────────┤ │ ┌────────────────────────────┐ │ │ │ 🐕 旺财 │ │ │ │ 金毛 · 28.5kg │ │ │ │ 🎂 2024-03-15 │ │ │ └────────────────────────────┘ │ │ │ │ ┌────────────────────────────┐ │ │ │ 🐱 咪咪 │ │ │ │ 英短 · 4.2kg │ │ │ │ 🎂 2025-01-10 │ │ │ └────────────────────────────┘ │ └─────────────────────────────────────┘ ``` --- ## 第五章 页面流转图 ``` ┌─────────────────┐ │ 微信扫码 │ │ (扫描桌上二维码) │ └────────┬────────┘ │ ┌───────────────┼───────────────┐ │ │ │ ▼ ▼ ▼ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ 首页 Tab │ │ 点餐 Tab │ │ 充值优惠 │ └────┬─────┘ └────┬─────┘ │ Tab │ │ │ └────┬─────┘ │ │ │ ┌────▼─────┐ ┌────▼─────┐ ┌─────▼─────┐ │ 活动详情 │ │ 菜品菜单 │ │ 充值套餐 │ │ → 报名 │ │ → 购物车 │ │ → 微信支付 │ └──────────┘ │ → 确认 │ │ → 余额变动 │ │ → 支付 │ └───────────┘ └──────────┘ │ ┌───────────┼───────────┐ │ │ │ ▼ ▼ ▼ ┌────────┐ ┌────────┐ ┌──────────┐ │ 订单列表│ │积分商城 │ │ 我的宠物 │ └────────┘ └────────┘ └──────────┘ 我的 Tab ──→ 我的订单 → 订单详情 ──→ 积分兑换记录 ──→ 我的宠物 ──→ 活动报名记录 ``` --- ## 第六章 API 调用汇总 ### 6.1 按页面汇总 | 页面 | 调用的 API | |------|-----------| | 首页 | `GET /api/activity/announcements`, `GET /api/activity/list?pageSize=3`, `GET /api/menu/dishes?tags=推荐` | | 扫码 | `GET /api/seat/scan?code=xxx` | | 菜品菜单 | `GET /api/menu/categories`, `GET /api/menu/dishes?category_id=&page=&pageSize=` | | 搜索结果 | `GET /api/menu/search?q=` | | 购物车 | `POST /api/order/cart/add`, `GET /api/order/cart/list`, `PUT /api/order/cart/update`, `DELETE /api/order/cart/remove` | | 订单确认 | `POST /api/pricing/calculate` | | 提交订单 | `POST /api/order/create` | | 支付 | `POST /api/order/:id/pay`, `POST /api/pay/wx/prepay` 或 `POST /api/pay/balance` | | 订单列表 | `GET /api/order/list` | | 订单详情 | `GET /api/order/:id/status` | | 充值优惠 | `GET /api/activity/recharge-discount`, `POST /api/pay/recharge` | | 积分商城 | `GET /api/points/account`, `GET /api/points/goods`, `POST /api/points/exchange`, `GET /api/points/logs` | | 活动中心 | `GET /api/activity/list`, `POST /api/activity/:id/register`, `GET /api/activity/my-registrations`, `PUT /api/activity/:id/cancel` | | 我的 | `GET /api/user/profile`, `GET /api/user/consumption`, `GET /api/user/pets` | --- ## 第七章 非功能需求 ### 7.1 性能 - 首屏加载时间 < 2 秒（4G 网络） - 图片懒加载 + CDN - 菜品列表分页加载，每页 20 条 - 购物车操作（加/减/删）即时反馈，无需等待服务端响应（乐观更新） ### 7.2 授权 - 首次打开 → 微信授权登录（`wx.login` 获取 code → `POST /api/user/wx-login`） - 手机号授权（`getPhoneNumber`）→ 更新用户手机号 - 订阅消息授权（下单时、活动报名时请求授权） ### 7.3 异常处理 | 场景 | 处理方式 | |------|---------| | 网络断开 | Toast 提示"网络连接失败，请检查网络" | | Token 过期 | 自动静默重新登录（`wx.login` 换新 token） | | 库存不足 | 购物车中对应菜品标记"库存不足"，不可下单 | | 余额不足 | 支付时弹窗提示 + "去充值"按钮 | | 座位被释放 | 提示"座位已过期，请重新扫码" | ### 7.4 多人同步 同一座位多人同时点餐时的购物车同步策略： - 购物车存储在 Redis（`cart:{seat_id}`） - 每次操作后，前端定时轮询刷新（或使用 WebSocket） - 简化方案：打开购物车时重新拉取 `GET /api/order/cart/list` --- ## 附录A：页面清单 | 编号 | 页面 | 路径 | 类型 | |------|------|------|------| | P01 | 首页 | `/pages/index/index` | Tab 页 | | P02 | 点餐-扫码 | `/pages/order/scan` | Tab 页 | | P03 | 点餐-菜单 | `/pages/order/menu?seat_id=` | 子页 | | P04 | 点餐-搜索 | `/pages/order/search` | 子页 | | P05 | 点餐-订单确认 | `/pages/order/confirm?order_id=` | 子页 | | P06 | 点餐-支付结果 | `/pages/order/result?order_id=` | 子页 | | P07 | 充值优惠 | `/pages/recharge/index` | Tab 页 | | P08 | 充值记录 | `/pages/recharge/history` | 子页 | | P09 | 我的 | `/pages/mine/index` | Tab 页 | | P10 | 订单列表 | `/pages/mine/orders` | 子页 | | P11 | 订单详情 | `/pages/mine/order-detail?id=` | 子页 | | P12 | 积分商城 | `/pages/points/index` | 子页 | | P13 | 积分流水 | `/pages/points/logs` | 子页 | | P14 | 活动列表 | `/pages/activity/list` | 子页 | | P15 | 活动详情 | `/pages/activity/detail?id=` | 子页 | | P16 | 我的宠物 | `/pages/mine/pets` | 子页 | | P17 | 添加宠物 | `/pages/mine/pet-form` | 子页 | | P18 | 我的报名 | `/pages/mine/registrations` | 子页 | --- ## 附录B：状态与文案 ### B.1 订单状态映射 | 后端状态 | 显示文案 | 图标色 | |----------|---------|--------| | pending | 待确认 | 灰色 | | confirmed | 已确认 | 橙色 | | cooking | 制作中 | 橙色 | | served | 已上菜 | 绿色 | | paid | 已支付 | 绿色 | | completed | 已完成 | 绿色 | | cancelled | 已取消 | 灰色 | | refunded | 已退款 | 灰色 | ### B.2 空状态文案 | 页面 | 空状态文案 | |------|-----------| | 购物车为空 | 🛒 购物车还是空的，去菜单看看吧 | | 订单列表为空 | 📋 还没有订单，快去扫码点餐吧 | | 积分流水为空 | ⭐ 还没有积分记录 | | 宠物列表为空 | 🐕 还没有添加宠物，点击右上角添加 | | 活动列表为空 | 📅 近期没有活动，敬请期待 | | 兑换商品为空 | 🎁 暂无可兑换商品 | --- --- ## 第八章 前端工程实现（给 Kimi Code） ### 8.1 HTML 原型文件 开发者提供 HTML 设计原型文件，放在以下目录： ``` miniprogram/prototypes/ ├── home.html ← 首页设计原型 ├── mine.html ← 「我的」页面设计原型 └── ... ← 后续补充的页面原型 ``` ### 8.2 转化流程 Kimi Code 需要完成以下工作： 1. **读取 `prototypes/` 下所有 HTML 文件**，理解页面结构和样式 2. **提取 CSS**：扫描所有 `