REITs TechDeveloper进入 UI Studio
UI 蓝图/预约平台/三步预约与提交
TARGETF4Web · 选择服务和时段并提交联系与问卷信息的消费者

三步预约与提交

让服务选择、服务端时段、动态问卷和提交回执成为一条可恢复、可防重复的预约事务

/t/:publishHashpublic-booking-platform对照 CURRENT · booking-wizard →
UI STUDIOtarget-booking-wizard
Web1440 × 900100%
100%
/t/:publishHash
TARGET UI1440 × 900FIT 100%
RREITS 服务可信本地服务我的
← 返回 CareDoor
BOOKING TRANSACTION · draft_bkg_8f31CareDoor 居家照护
草稿已保存 · 10:43:18
STEP 2 OF 3

选择上门时间

每次选择都会获取新的 Availability quote。

一二三四五六日
123456789101112131415161718192021222324252627282930313233
7 月 18 日 · 可用时段剩余 6 个
由 Booking Availability 实时返回quote_av_17c9 · 04:36 后失效
REFERENCE VIEWPORT1440 × 900Desktop first · responsive
PRIMARY TASK选择服务主操作、权限与完成反馈必须同屏可验证
DATA CONTRACTBookingDraftready / loading / empty / error 使用同一 fixture
ACCESSIBILITYKeyboard + WCAG AA焦点顺序、可读名称、对比度进入 UI CI
VISUAL BASELINETARGET · 2026-07-17桌面/移动、浅色/错误态按稳定 Screen ID 留档

IMPLEMENTATION MAP

可以直接拆成开发任务的目标定义

目标稿与当前实现严格分轨；只有产品仓实现、测试与生产证据齐全后，才会转为 current evidence。

01

页面区域

  • 店铺与返回上下文
  • 步骤进度
  • 服务/时间/信息工作区
  • 容量状态
  • 动态问卷
  • 价格时长摘要
  • 政策确认
  • 主操作与结果
02

用户动作

  • 选择服务
  • 选择日期和时段
  • 填写 Intake
  • 返回修改
  • 确认政策
  • 幂等提交预约
03

必须状态

  • 预约草稿就绪
  • 服务/时段加载
  • 没有可用时段
  • 部分 Intake 失败
  • 提交或容量冲突
  • 离线草稿
  • 项目/链接受限
  • 提交预约确认
  • 预约已受理
04

数据契约

  • BookingDraft
  • AvailabilityQuote
  • ServiceSelection
  • IntakeSchema
  • BookingSubmission
  • IdempotencyKey
  • BookingReceipt
  • CapacityConflict

TARGET MODULES

目标页面必须交付的模块

  1. 01三步进度与草稿
  2. 02服务选择
  3. 03服务端日历与时段
  4. 04Availability quote 倒计时
  5. 05动态 Intake 字段
  6. 06联系人与通知同意
  7. 07订单摘要
  8. 08幂等提交与回执

PRODUCT ROUTE INDEX

预约平台 的 21 个稳定 Screen ID

同一产品内的页面共享 token、导航和状态语言，但每个 Screen ID 保留自己的字段、数据契约和 QA 基线。

01
发现好店/
Web02
店铺详情/shop/:publishHash
Web03
三步预约/t/:publishHash
Web04
订单与预约状态/booking-status
Web05
商家工作台/console?t=:hash
Admin06
移动发现入口/mini
Miniapp07
官方介绍页/official
Web08
安全与隐私/security
Web09
商家登录/console?t=:hash
Admin10
本地服务发现/
Web11
店铺与服务详情/shop/:publishHash
Web12
三步预约与提交/t/:publishHash
Web13
我的预约与自助管理/booking-status
Web14
Mini App 宿主预约/mini
Miniapp15
商家身份与店铺选择/merchant/sign-in
Admin16
商家今日工作台/merchant/:projectId/today
Admin17
预约审核与决策/merchant/:projectId/bookings
Admin18
排班与容量规划/merchant/:projectId/schedule
Admin19
服务与价目目录/merchant/:projectId/services
Admin20
店铺内容与发布/merchant/:projectId/storefront
Admin21
店铺设置与渠道治理/merchant/:projectId/settings
Admin
← 店铺与服务详情我的预约与自助管理 →