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. 添加加载状态和错误处理
|
||
|