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