支付设计概要

Evernote Export

海外支付前端概要设计

创建时间：	2018/1/4 10:44
作者：	1615229800@qq.com

 

一、需求拆解

 

 

 

二、技术选型

 

使用vue2.0+webpack进行开发项目

 

三、代码规范

 

使用eslint规范进行开发代码

 

四、模块设计和分治

 

 

按照设计图分两个模块：分别是储值中心和储值记录两大块

 

 

 

储值记录分治为五个组件，分别是：全部，支付成功，支付失败，购买成功，购买失败五个组件

 

需要的数据是：订单号、时间、商品、支付方式、订单金额、支付金额、钱包、订单状态、说明

 

 

 

充值中心：页面内容为如下图

需要的数据：

角色信息栏：角色名字，区服、游戏名字

商品栏：交易的商品名字、币种、金额

支付方式：需要改账户的钱包信息，绑定的银行卡信息等

结算：订单金额、支付渠道的余额

 

五、交互流程

 

页面交互流程：

 

 

• 支付渠道栏
• 点击支付弹出支付渠道选择弹窗，默认选中改用户上次支付使用的支付渠道
• 校验不通过时分别提示“请选择角色信息”、“请选择支付方式、“请输入卡号和密码”、“抱歉，您的钱包余额不足”
• 校验通过后，使用钱包支付 或 已填写卡密的，跳转到充值结果页。否则跳转到对应的支付渠道页面
• 点击当前的支付渠道弹出其他支付渠道列表，点击某种支付渠道后会有一个选中状态，只能选中一个。
• 点击支付后弹出一个提示框提醒用户支付完成，倒计时三秒后或者手动关掉当前页面跳转到储值中心
• 若选中的支付方式需要我方提供卡号和密码，则在选中后，在充值档下方显示卡号和密码输入栏
• 点击输入栏之后，可输入相应的卡号和密码
• 当用户输入密码之后却不点击支付提交按钮，中途放弃支付，弹出一个警告框告知“支付未完成，确定要退出吗？ ”给定两个选项：离开或继续支付
• 支付成功之后，弹出支付成功的提示框“支付已完成”

 

• 结算栏
• 如果用户使用预付卡支付，且能拿到演算结果
• 支付金额>订单金额：“您的支付金额超出部分将转换为xx T币存入您的钱包”
• 支付金额=订单金额：不显示提示
• 支付金额<订单金额：“您的支付金额不足，本次支付金额将您转换为xx T币存入您的钱包”
• 其他支付渠道：不显示提示和支付金额，只显示订单金额
• 支付金额、订单金额 用醒目的颜色标出
• 支付完成之后提示进入储值记录页面