MTKJPAY-FRONT/README.md

# MT Pay Frontend

电商支付系统前端（Vue 3 + Element Plus）

## 技术栈

- Vue 3
- Vue Router 4
- Element Plus
- Axios
- Vite

## 快速开始

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

## 项目结构

```
MTKJPAY-FRONT/
├── src/
│   ├── api/              # API接口
│   │   ├── request.js    # Axios封装
│   │   ├── product.js    # 商品API
│   │   └── order.js      # 订单API
│   ├── router/           # 路由配置
│   ├── views/            # 页面组件
│   │   ├── ProductDetail.vue    # 商品详情页
│   │   ├── CreateOrder.vue      # 创建订单页（支持东南亚地址）
│   │   ├── OrderConfirm.vue     # 订单确认页
│   │   └── OrderQuery.vue       # 订单查询页
│   ├── utils/            # 工具函数
│   │   ├── helpers.js    # 辅助函数
│   │   └── countryConfig.js  # 国家配置
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
└── index.html            # HTML模板
```

## 核心功能

- 商品详情展示（支持多图、SKU选择、货币切换）
- 订单创建（动态地址表单，根据国家显示不同字段）
- 订单确认（显示货币转换信息）
- PayPal支付集成

## 地址表单

支持东南亚国家地址格式：
- 新加坡：组屋号、单元号
- 马来西亚：州属
- 菲律宾：Barangay
- 泰国：泰文地址（双语）
- 越南：省/市/郡/区/坊

根据SKU货币自动识别国家，动态显示对应字段。

## API配置

在 `src/api/request.js` 中配置后端API地址：
```javascript
const service = axios.create({
  baseURL: '/api',  // 使用相对路径，通过Nginx代理
  timeout: 10000
})
```

## 许可证

MIT