服务预约 · 卡项
用户移动端高保真原型
390px 手机单档 · 暖奢 SPA 视觉方向 · 14 页
设计系统:shared/tokens.css + components.css + icons.js(Lucide 本地化)
门店
01
门店主页
home.html
预约线(项目 → 技师 → 时间 → 确认 → 到店核销)
02
预约项目列表
booking-list.html
03
项目详情
service-detail.html
04
选择技师
booking-staff.html
05
选择时间(日期条+时段网格)
booking-time.html
06
确认预约(划卡/在线付)
booking-confirm.html
07
预约成功
booking-success.html
08
我的预约
my-bookings.html
09
预约详情(核销码/取消/改期)
booking-detail.html
卡项线(购卡 → 卡包 → 划次)
10
购卡中心
cards-mall.html
11
卡项详情(购买)
card-detail.html
12
我的卡包
my-cards.html
13
卡详情(余次+划扣记录)
my-card-detail.html
14
划次码出示
card-code.html
原型说明
· 页面间跳转全部为真实链接,可按业务路径连续走查:首页 → 项目 → 时间 → 确认 → 成功 → 我的预约 → 详情;首页 → 购卡中心 → 卡详情 → 卡包 → 卡详情 → 划次码。
· 时段/日期/技师/支付方式等单选交互已可用(prototype.js 演示级),二维码为伪码图案。
· 配图由 AI 生成并本地化(assets/),仅用于原型演示。