116 lines
2.5 KiB
Markdown
116 lines
2.5 KiB
Markdown
|
# MT Pay Frontend
|
|||
|
|
|
|||
|
|
PingPong支付系统前端页面（Vue3）
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- Vue 3
|
|||
|
|
- Vue Router 4
|
|||
|
|
- Element Plus
|
|||
|
|
- Axios
|
|||
|
|
- Vite
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
MTKJPAY-FRONT/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── api/ # API接口
|
|||
|
|
│ │ ├── request.js # Axios封装
|
|||
|
|
│ │ └── payment.js # 支付相关API
|
|||
|
|
│ ├── router/ # 路由配置
|
|||
|
|
│ │ └── index.js
|
|||
|
|
│ ├── views/ # 页面组件
|
|||
|
|
│ │ ├── CreateOrder.vue # 创建订单页面
|
|||
|
|
│ │ ├── Checkout.vue # 收银台页面
|
|||
|
|
│ │ ├── PaymentResult.vue # 支付结果页面
|
|||
|
|
│ │ └── OrderQuery.vue # 订单查询页面
|
|||
|
|
│ ├── App.vue # 根组件
|
|||
|
|
│ └── main.js # 入口文件
|
|||
|
|
├── index.html # HTML模板
|
|||
|
|
├── vite.config.js # Vite配置
|
|||
|
|
└── package.json # 项目配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发运行
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
访问：http://localhost:3000
|
|||
|
|
|
|||
|
|
## 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能说明
|
|||
|
|
|
|||
|
|
### 1. 创建订单页面 (/)
|
|||
|
|
- 填写订单信息（金额、币种、交易类型等）
|
|||
|
|
- 填写风控信息（客户信息、商品信息、地址信息等）
|
|||
|
|
- 提交后跳转到收银台
|
|||
|
|
|
|||
|
|
### 2. 收银台页面 (/checkout)
|
|||
|
|
- 集成PingPong支付SDK
|
|||
|
|
- 用户完成支付操作
|
|||
|
|
- 支付完成后跳转到结果页面
|
|||
|
|
|
|||
|
|
### 3. 支付结果页面 (/result)
|
|||
|
|
- 显示支付结果
|
|||
|
|
- 显示订单详情
|
|||
|
|
- 提供继续支付和查询订单操作
|
|||
|
|
|
|||
|
|
### 4. 订单查询页面 (/query)
|
|||
|
|
- 根据商户订单号查询订单状态
|
|||
|
|
- 显示订单详情
|
|||
|
|
- 支持继续支付（如果订单未完成）
|
|||
|
|
|
|||
|
|
## 配置说明
|
|||
|
|
|
|||
|
|
### API代理配置
|
|||
|
|
|
|||
|
|
在 `vite.config.js` 中配置了API代理：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
server: {
|
|||
|
|
proxy: {
|
|||
|
|
'/api': {
|
|||
|
|
target: 'http://localhost:8080', // 后端服务地址
|
|||
|
|
changeOrigin: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### PingPong SDK模式
|
|||
|
|
|
|||
|
|
在 `Checkout.vue` 中配置SDK模式：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
mode: 'sandbox' // 根据环境修改：sandbox/test/build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **后端服务**：确保后端服务已启动（默认端口8080）
|
|||
|
|
2. **CORS配置**：如果跨域，需要后端配置CORS
|
|||
|
|
3. **SDK模式**：生产环境需要将 `mode` 改为 `build`
|
|||
|
|
4. **重定向URL**：创建订单时的重定向URL会自动设置为当前域名
|
|||
|
|
|
|||
|
|
## 开发建议
|
|||
|
|
|
|||
|
|
1. 根据实际需求调整表单字段
|
|||
|
|
2. 根据业务需求添加更多验证规则
|
|||
|
|
3. 优化用户体验和错误提示
|
|||
|
|
4. 添加加载状态和错误处理
|
|||
|
|
|