feat(order): 支持东南亚多国地址格式的订单创建功能
- 实现动态地址表单，根据选择国家显示对应字段 - 添加新加坡组屋号、单元号，马来西亚州属，菲律宾Barangay等特殊字段 - 集成泰国双语地址、越南省市坊三级地址格式支持 - 优化订单确认页地址展示，按从小到大格式排列 - 添加邮编格式验证和自动匹配城市功能 - 实现SKU货币自动识别国家并预设字段 - 重构README文档结构和项目说明信息
This commit is contained in:
130
README.md
130
README.md
@@ -1,6 +1,6 @@
|
||||
# MT Pay Frontend
|
||||
|
||||
PingPong支付系统前端页面（Vue3）
|
||||
电商支付系统前端（Vue 3 + Element Plus）
|
||||
|
||||
## 技术栈
|
||||
|
||||
@@ -10,6 +10,23 @@ PingPong支付系统前端页面（Vue3）
|
||||
- Axios
|
||||
- Vite
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 构建生产版本
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
@@ -17,99 +34,50 @@ MTKJPAY-FRONT/
|
||||
├── src/
|
||||
│ ├── api/ # API接口
|
||||
│ │ ├── request.js # Axios封装
|
||||
│ │ └── payment.js # 支付相关API
|
||||
│ │ ├── product.js # 商品API
|
||||
│ │ └── order.js # 订单API
|
||||
│ ├── router/ # 路由配置
|
||||
│ │ └── index.js
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── CreateOrder.vue # 创建订单页面
|
||||
│ │ ├── Checkout.vue # 收银台页面
|
||||
│ │ ├── PaymentResult.vue # 支付结果页面
|
||||
│ │ └── OrderQuery.vue # 订单查询页面
|
||||
│ │ ├── ProductDetail.vue # 商品详情页
|
||||
│ │ ├── CreateOrder.vue # 创建订单页（支持东南亚地址）
|
||||
│ │ ├── OrderConfirm.vue # 订单确认页
|
||||
│ │ └── OrderQuery.vue # 订单查询页
|
||||
│ ├── utils/ # 工具函数
|
||||
│ │ ├── helpers.js # 辅助函数
|
||||
│ │ └── countryConfig.js # 国家配置
|
||||
│ ├── App.vue # 根组件
|
||||
│ └── main.js # 入口文件
|
||||
├── index.html # HTML模板
|
||||
├── vite.config.js # Vite配置
|
||||
└── package.json # 项目配置
|
||||
└── index.html # HTML模板
|
||||
```
|
||||
|
||||
## 安装依赖
|
||||
## 核心功能
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
- 商品详情展示（支持多图、SKU选择、货币切换）
|
||||
- 订单创建（动态地址表单，根据国家显示不同字段）
|
||||
- 订单确认（显示货币转换信息）
|
||||
- PayPal支付集成
|
||||
|
||||
## 开发运行
|
||||
## 地址表单
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
支持东南亚国家地址格式：
|
||||
- 新加坡：组屋号、单元号
|
||||
- 马来西亚：州属
|
||||
- 菲律宾：Barangay
|
||||
- 泰国：泰文地址（双语）
|
||||
- 越南：省/市/郡/区/坊
|
||||
|
||||
访问：http://localhost:3000
|
||||
根据SKU货币自动识别国家，动态显示对应字段。
|
||||
|
||||
## 构建生产版本
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 功能说明
|
||||
|
||||
### 1. 创建订单页面 (/)
|
||||
- 填写订单信息（金额、币种、交易类型等）
|
||||
- 填写风控信息（客户信息、商品信息、地址信息等）
|
||||
- 提交后跳转到收银台
|
||||
|
||||
### 2. 收银台页面 (/checkout)
|
||||
- 集成PingPong支付SDK
|
||||
- 用户完成支付操作
|
||||
- 支付完成后跳转到结果页面
|
||||
|
||||
### 3. 支付结果页面 (/result)
|
||||
- 显示支付结果
|
||||
- 显示订单详情
|
||||
- 提供继续支付和查询订单操作
|
||||
|
||||
### 4. 订单查询页面 (/query)
|
||||
- 根据商户订单号查询订单状态
|
||||
- 显示订单详情
|
||||
- 支持继续支付（如果订单未完成）
|
||||
|
||||
## 配置说明
|
||||
|
||||
### API代理配置
|
||||
|
||||
在 `vite.config.js` 中配置了API代理：
|
||||
## API配置
|
||||
|
||||
在 `src/api/request.js` 中配置后端API地址：
|
||||
```javascript
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080', // 后端服务地址
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
const service = axios.create({
|
||||
baseURL: 'http://localhost:8082/api',
|
||||
timeout: 10000
|
||||
})
|
||||
```
|
||||
|
||||
### 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. 添加加载状态和错误处理
|
||||
## 许可证
|
||||
|
||||
MIT
|
||||
|
||||
Reference in New Issue
Block a user