Produces structured UI descrip…

# 外卖App下单页面UI结构说明

一、页面整体布局

下单页通常采用「顶部导航 + 可滚动内容区 + 底部固定操作栏」的经典结构，内容从上到下依次为：收货地址卡 → 购物车列表 → 优惠券入口 → 费用明细（含配送费说明）→ 底部提交栏。

二、四大核心元素的状态设计

1. 购物车列表

• 正常态：每项含商品图、名称、规格、单价、数量步进器（+/-）；滑动或点击可删除、备注
• 编辑态：出现批量选择、清空、删除按钮
• 缺货态：商品置灰，标注“已售罄/缺货”，默认不可结算，可移除或替换
• 空态：显示插画 + “去逛逛”引导按钮
• 数量边界：数量为1时减号变“删除”图标；达库存上限时加号禁用

2. 优惠券入口

• 有可用券：显示最优券面额（如“立减X元”标签），点击展开券列表抽屉
• 券列表内：分“可用/不可用”两栏，不可用券置灰并标注原因（门槛不足、过期、限品类）
• 无可用券：显示灰色“暂无可用优惠券”文案
• 已选券：入口处更新抵扣金额，费用明细同步刷新

3. 配送费说明

• 正常态：在费用明细中显示“配送费 ¥X”，右侧带 ⓘ 图标，点击弹出说明浮层（计费规则、距离/时段加价、免配送费条件）
• 减免态：显示划线原价 + 减免后价格，标注“已减免X元”
• 特殊情况：超出配送范围时提示“该地址暂不支持配送”，且禁用提交按钮

4. “提交订单”按钮

• 默认态：高亮主色按钮，文案“提交订单”，左侧常展示合计金额（大字号+小数点小字号对比排版）
• 禁用态：购物车为空、全部缺货、地址无效、商家休息时置灰不可点
• 加载态：点击后按钮变为Loading，防重复提交
• 价格变动态：提交时校验价格，若变动弹窗提示“价格已更新”并刷新页面

三、设计要点小结

四大元素状态联动是关键：任何一处变化（删商品、换券、改地址）都应实时刷新合计金额与按钮可用性，保证结算链路的一致性与防错性。