hotel-biz-h5/H5页面规划.md

酒店员工端 H5 页面规划

产品定位

面向酒店/商户员工的移动端工作台，核心解决三件事：

• 员工通过手机号验证码登录。
• 员工查看订单，并对可使用订单进行核销。
• 员工发布和查看运营事件。

第一版优先保证业务闭环，不做复杂后台管理能力。

页面地图

/login
  手机验证码登录

/
  /home
    工作台

  /orders
    订单列表

  /orders/:id
    订单详情
    └─ 进入核销确认

  /verify
    核销入口

  /verify/confirm
    核销确认

  /verify/result
    核销结果

  /events
    事件列表

  /events/create
    发布事件

  /mine
    我的

底部导航

Tab	路由	说明
工作台	/home	展示关键数据和快捷入口
订单	/orders	查询订单、进入详情
核销	/verify	扫码或输入订单号核销
事件	/events	查看事件列表
我的	/mine	当前账号、接口模式、退出登录

核心流程

登录流程

输入手机号
-> 获取验证码
-> 输入验证码
-> 调用 OAuth2 手机号登录
-> 保存 access_token
-> 进入工作台

接口：

动作	接口
发送验证码	GET /admin/platformUser/sendMobileCode/{phone}
手机号登录	POST /auth/oauth2/token
登录后绑定并获取组织关系	POST /hotelStaff/organizationMember/bindUserInfoAndGetUserMemberInfoByPhone

登录参数要点：

• grant_type=mobile
• mobile=手机号
• code=验证码
• scope=server
• clientConfigId 需要和发送验证码时保持一致

订单核销流程

订单列表
-> 订单详情
-> 点击立即核销
-> 核销确认
-> 调用核销接口
-> 核销结果

也支持：

核销入口
-> 输入订单号
-> 查询订单详情
-> 核销确认
-> 核销结果

接口：

页面/动作	接口
订单列表	POST /hotelStaff/order/commodityOrderList
订单详情	POST /hotelStaff/order/userOrderDetail
确认核销	POST /hotelStaff/order/writeOff

当前后端核销能力以 orderId 为核心，暂未看到独立“核销码查询”接口。第一版扫码可先约定二维码内容为订单号；如果业务需要独立券码，后端建议补充“按核销码查询订单/商品”的接口。

事件流程

事件列表
-> 发布事件
-> 填写事件信息
-> 上传图片
-> 发布
-> 回到事件列表

接口：

页面/动作	接口
事件列表	POST /hotelStaff/event/eventList
创建事件	POST /hotelStaff/event/createEvent
图片上传	POST /hotelBiz/hotBizCommon/upload

页面明细

/login 手机验证码登录

目标：让员工用手机号进入系统。

展示内容：

• 手机号输入框
• 验证码输入框
• 获取验证码按钮
• 登录按钮

状态：

• 手机号格式错误
• 验证码倒计时
• 登录中
• 登录失败

/home 工作台

目标：提供员工进入高频操作的首页。

展示内容：

• 当前日期
• 当前账号
• 待使用订单数
• 今日核销数
• 生效事件数
• 今日订单数
• 快捷入口：扫码核销、订单列表、发布事件、事件列表
• 近期订单
• 近期事件

主要操作：

• 去核销
• 查看订单
• 发布事件
• 查看事件

/orders 订单列表

目标：让员工快速查找订单。

展示内容：

• 搜索框：订单号/手机号
• 状态筛选：全部、待使用、待确认、退款中、已完成
• 商品类型筛选：全部、酒店、门票、餐饮
• 订单卡片：订单号、状态、商品名、联系人、手机号、金额、数量、时间

主要操作：

• 搜索订单
• 筛选状态
• 进入订单详情

/orders/:id 订单详情

目标：核对订单完整信息，并从详情发起核销。

展示内容：

• 订单号
• 订单状态
• 商品图
• 商品名称
• 商品类型
• 购买数量
• 联系人信息
• 支付信息
• 使用/预约信息
• 套餐内容
• 核销记录

主要操作：

• 待使用订单显示“立即核销”
• 点击后进入 /verify/confirm

核销按钮显示条件：

• orderStatus === '2'，即待使用

/verify 核销入口

目标：提供独立核销入口。

展示内容：

• 扫码核销入口
• 手动输入订单号

主要操作：

• 输入订单号查询订单
• 进入核销确认

备注：

• 当前扫码入口已预留。
• 第一版先按订单号核销。

/verify/confirm 核销确认

目标：防止员工误核销。

展示内容：

• 订单号
• 订单状态
• 商品名称
• 联系人
• 核销套餐
• 购买数量
• 预约时间
• 实付金额

主要操作：

• 确认核销
• 取消返回

状态：

• 可核销
• 当前订单不可核销
• 核销提交中
• 核销失败

/verify/result 核销结果

目标：给员工明确反馈。

展示内容：

• 成功/失败状态
• 订单号
• 核销内容
• 操作时间
• 失败原因

主要操作：

• 继续核销
• 查看订单

/events 事件列表

目标：查看已发布事件。

展示内容：

• 搜索框：实体名称
• 状态筛选：全部、开启、关闭
• 事件卡片：实体名称、事件描述、事件状态、显示状态、生效时间、发布人、是否弹窗提醒

主要操作：

• 搜索事件
• 筛选状态
• 进入发布事件页

/events/create 发布事件

目标：创建新的运营事件。

展示内容：

• 实体名称
• 事件描述
• 图片上传
• 发布时间
• 生效开始时间
• 生效结束时间
• 弹窗提醒开关

主要操作：

• 上传图片
• 发布事件

校验：

• 实体名称必填
• 事件描述必填
• 生效时间必填

/mine 我的

目标：查看当前登录和接口配置状态。

展示内容：

• 当前账号
• 登录状态
• 手机号绑定状态
• 租户
• 接口模式：Mock/真实接口
• clientId
• clientConfigId
• 员工端接口前缀

主要操作：

• 退出登录

订单状态

值	文案
0	待支付
1	待确认
2	待使用
3	已取消
4	退款中
5	已关闭
6	已完成

商品类型

值	文案
0	酒店
1	门票
2	餐饮

事件状态

值	文案
0	开启
1	关闭

事件列表还会展示后端计算的 showStatusDesc：

• 待生效
• 生效中
• 已过期

第一阶段 MVP

必须包含：

• 手机验证码登录
• 工作台
• 订单列表
• 订单详情
• 订单详情发起核销
• 独立核销入口
• 核销确认
• 核销结果
• 事件列表
• 发布事件
• 我的/退出登录

暂缓内容：

• 独立核销码查询
• 扫码真实调用微信/浏览器能力
• 订单复杂高级筛选
• 事件编辑/关闭/删除
• 员工权限细分
• 数据统计图表