参考图描述: 浅紫/米色渐变背景,顶部头像左对齐 + "Hi~名前" 大字 + 邮箱账号小字;「我的宠物」横向滑动卡片区(圆角白卡,宠物图+名称+品种年龄体重颜色);深灰圆角 Banner「个人资料完成20%」+ 橙色「去完善」胶囊按钮;白色圆角卡片菜单列表(个人信息/预约信息/账号管理/联系我们,前两项带红点);底部四格 Tab 栏(主页/日历/拍照/我的,「我的」橙色激活)。
读取现有文件:
现在按参考图完全重写 profile-page.tsx,保留刚才加的会员等级胶囊 + 会员中心菜单项,移除会员卡片和快捷统计;同时更新 booking-shell.tsx 的 TabBar 样式和背景色以匹配参考图。
现在更新 booking-shell.tsx,将 TabBar 样式改成参考图的圆角胶囊样式(白色背景、底部居中浮动),并补齐四个 Tab 项(主页/日历/拍照/我的):
profile-page.tsx 完全按参考图重写:渐变背景(浅紫→米色)、头像+「Hi~名前」+账号行、横向滑动宠物卡片区、深灰 Banner、白色圆角菜单列表,并在姓名下保留会员等级胶囊、菜单末尾保留「会员中心」入口,移除了原有的会员卡片和统计格子。booking-shell.tsx 将 TabBar 更新为参考图的圆角胶囊悬浮样式——激活项背景白色+文字展开,非激活项仅显示图标,整体毛玻璃效果;同时 Tab 项从 3 个扩展为主页/日历/拍照/我的 4 个。
图片描述: 结账页为左右两栏布局——左栏包含支付金额大字展示、顾客信息(姓名+电话+订单号)、服务项目表格(项目/操作员/指名/单价/数量/小计)、消费金额汇总区(含折扣输入行)、割引后合计、支付备考;右栏为付款方式选择(Cash/Square/IC/信用卡/QR code/交通卡/Paypay)以及取消/确认支付按钮。
结构清晰。需要:1)新建结账页组件;2)在 ShopTopNav 加入「結账页」菜单项;3)在 ShopShell 接入路由。
先新建结账页:
现在更新 ShopTopNav 加入「結账页」菜单项,再更新 ShopShell 接入路由:
完成。ShopTopNav 新增「結账页」菜单项,点击后 ShopShell 渲染 CheckoutPage 组件。结账页严格还原参考图的左右两栏布局,并在此基础上叠加三项增强:顾客姓名旁显示「金卡会員」胶囊标签;消費金額区新增会員割引行(显示折扣金额 + 取消/使用切换按钮,默认自动应用,仅对服务类项目生效);积分抵现区展示余额、可输入使用积分数量(含上限校验)+ 「全部使用」按钮,所有金额联动实时计算。
You can send messages while the preview loads