网站支付场景

网站支付

用户正常选择完商品后网站支付的流程，包括所有能拉起支付的入口以及结果落地页。

各页面逻辑

一、确认订单页的支付弹窗（优先支付场景，或者直接所有支付都跳转收银台页面统一收敛逻辑处理）

弹窗参考：

交互：

1. 待支付金额
2. 支付方式：餐币支付
3. 底部支付按钮

• 余额不足时，点击按钮支付confirm提示失败，并且展示账户现有余额，底部只有确认按钮。点击确认跳转订单详情页展示未支付状态。
• 余额充足，点击按钮支付成功，弹出支付成功弹窗，点击确认跳转订单详情页展示支付成功状态。

4. 左上角“x”按钮 点击x出现confirm弹窗，“放弃支付”/“继续支付”。选择放弃支付时跳转订单详情页，展示未支付的倒计时订单状态。

数据来源：

• 应支付金额：创建订单接口返回应支付金额
• 账户余额：点击支付时server查账户表，然后判断余额是否充足，返回现有余额值

二、收银台页面（次级承载支付场景，从未支付订单页跳转，可继续支付）

**参考设计 **

交互：

1. 订单倒计时时间
2. 应付金额
3. 店铺名
4. 支付方式：餐币支付
5. 确认支付按钮：

• 点击支付成功，弹出支付成功弹窗
• 点击支付失败，跳转订单详情页展示未支付状态

数据来源：

• 倒计时：通过订单id查订单信息->生成订单时间 + 订单有效期获取
• 应付金额，店铺名：通过订单号查订单信息
• 支付：同上正常支付流程

三、支付成功弹窗（在各个支付处用toast承载）

**参考设计 **

交互：

1. 展示支付成功状态
2. 计算送达时间：（在订单详情展示）
3. 弹窗按钮展示： 包含“再逛逛“和“查看订单“按钮。点击“再逛逛”跳转到首页，点击“查看订单“跳转到本次订单的订单详情页。

四、订单详情页（未支付状态展示，包含跳转继续支付的入口）

**参考设计 **

支付流程相关交互： 点击“去支付“，跳转“收银台页面”继续支付

支付流程图：

支付所有场景需要接口：

1. 查询用户账户余额 参数：无，不需要单独接口查询，直接支付时实时查询账户信息
2. 查询订单信息 参数：order_num订单号
3. 支付接口 参数：order_num订单号

• 支付成功：更新pay_time, order_status(0待支付-2支付成功，配送中)
• 支付失败：无数据更新