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          # 项目配置

安装依赖

npm install

开发运行

npm run dev

访问：http://localhost:3000

构建生产版本

npm run build

功能说明

1. 创建订单页面 (/)

• 填写订单信息（金额、币种、交易类型等）
• 填写风控信息（客户信息、商品信息、地址信息等）
• 提交后跳转到收银台

2. 收银台页面 (/checkout)

• 集成PingPong支付SDK
• 用户完成支付操作
• 支付完成后跳转到结果页面

3. 支付结果页面 (/result)

• 显示支付结果
• 显示订单详情
• 提供继续支付和查询订单操作

4. 订单查询页面 (/query)

• 根据商户订单号查询订单状态
• 显示订单详情
• 支持继续支付（如果订单未完成）

配置说明

API代理配置

在 vite.config.js 中配置了API代理：

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',  // 后端服务地址
      changeOrigin: true
    }
  }
}

PingPong SDK模式

在 Checkout.vue 中配置SDK模式：

mode: 'sandbox'  // 根据环境修改：sandbox/test/build

注意事项

1. 后端服务：确保后端服务已启动（默认端口8080）
2. CORS配置：如果跨域，需要后端配置CORS
3. SDK模式：生产环境需要将 mode 改为 build
4. 重定向URL：创建订单时的重定向URL会自动设置为当前域名

开发建议

1. 根据实际需求调整表单字段
2. 根据业务需求添加更多验证规则
3. 优化用户体验和错误提示
4. 添加加载状态和错误处理