MT Pay Frontend

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

技术栈

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

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

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地址：

const service = axios.create({
  baseURL: '/api',  // 使用相对路径，通过Nginx代理
  timeout: 10000
})

许可证

MIT