优惠券选择页面操作说明
页面信息
- 页面名称:优惠券选择
- 路由:
/pages/coupon-select/coupon-select
- 源码:
pages/coupon-select/coupon-select.uvue
- 入口:订单支付页“商品优惠”金额行。
- 当前状态:优惠券列表、选择回填和空状态视觉首版已完成,真实优惠券及订单试算接口待接入。
功能点
| 功能 |
当前实现 |
后续接口目标 |
| 可用优惠券列表 |
展示金额、优惠券名称、使用门槛和到期时间,整张优惠券均可点击。 |
根据商品、用户和订单金额返回当前订单可用优惠券。 |
| 选择优惠券 |
点击后记录选择并返回订单支付页,回填“减50元”。 |
返回优惠券 ID 后重新调用订单确认接口,刷新所有金额。 |
| 空状态 |
优惠券数组为空时显示图标和“暂无优惠券”。 |
后台无可用优惠券时直接返回空数组。 |
| 返回 |
点击左上角优先返回原订单支付页;单页启动等栈底场景使用携带 merchantId、productId、orderId 的支付页兜底地址。 |
保持已选优惠券和订单确认数据。 |
操作说明
- 在订单支付页点击“商品优惠”。
- 查看当前订单可用优惠券及使用门槛。
- 点击任意优惠券完成选择并自动返回。
- 订单支付页显示已选优惠券,正式接入后同步刷新订单金额。
异常处理
| 场景 |
页面处理要求 |
| 无可用优惠券 |
显示“暂无优惠券”空状态,保留返回入口。 |
| 优惠券加载失败 |
显示加载失败及重试入口,不误显示为空状态。 |
| 优惠券已失效 |
禁止选择,并从可用列表移除或展示明确的不可用原因。 |
| 选择后价格变化 |
返回支付页后由后端重新试算,提示用户确认最新金额。 |
| 重复点击 |
选择过程中防止重复返回和重复触发订单试算。 |
数据约定
优惠券至少包含:优惠券 ID、名称、优惠金额或折扣、使用门槛、到期时间、可用状态及不可用原因。查询与选择试算必须绑定当前 merchantId、productId、orderId;前端不得只依据本地时间和金额判断是否可用。