优惠券选择页面操作说明

页面信息

  • 页面名称:优惠券选择
  • 路由:/pages/coupon-select/coupon-select
  • 源码:pages/coupon-select/coupon-select.uvue
  • 入口:订单支付页“商品优惠”金额行。
  • 当前状态:优惠券列表、选择回填和空状态视觉首版已完成,真实优惠券及订单试算接口待接入。

功能点

功能 当前实现 后续接口目标
可用优惠券列表 展示金额、优惠券名称、使用门槛和到期时间,整张优惠券均可点击。 根据商品、用户和订单金额返回当前订单可用优惠券。
选择优惠券 点击后记录选择并返回订单支付页,回填“减50元”。 返回优惠券 ID 后重新调用订单确认接口,刷新所有金额。
空状态 优惠券数组为空时显示图标和“暂无优惠券”。 后台无可用优惠券时直接返回空数组。
返回 点击左上角优先返回原订单支付页;单页启动等栈底场景使用携带 merchantId、productId、orderId 的支付页兜底地址。 保持已选优惠券和订单确认数据。

操作说明

  1. 在订单支付页点击“商品优惠”。
  2. 查看当前订单可用优惠券及使用门槛。
  3. 点击任意优惠券完成选择并自动返回。
  4. 订单支付页显示已选优惠券,正式接入后同步刷新订单金额。

异常处理

场景 页面处理要求
无可用优惠券 显示“暂无优惠券”空状态,保留返回入口。
优惠券加载失败 显示加载失败及重试入口,不误显示为空状态。
优惠券已失效 禁止选择,并从可用列表移除或展示明确的不可用原因。
选择后价格变化 返回支付页后由后端重新试算,提示用户确认最新金额。
重复点击 选择过程中防止重复返回和重复触发订单试算。

数据约定

优惠券至少包含:优惠券 ID、名称、优惠金额或折扣、使用门槛、到期时间、可用状态及不可用原因。查询与选择试算必须绑定当前 merchantId、productId、orderId;前端不得只依据本地时间和金额判断是否可用。