qiube
bd6b7b3b79
- 实现动态地址表单，根据选择国家显示对应字段 - 添加新加坡组屋号、单元号，马来西亚州属，菲律宾Barangay等特殊字段 - 集成泰国双语地址、越南省市坊三级地址格式支持 - 优化订单确认页地址展示，按从小到大格式排列 - 添加邮编格式验证和自动匹配城市功能 - 实现SKU货币自动识别国家并预设字段 - 重构README文档结构和项目说明信息
84 lines
1.9 KiB
Markdown
84 lines
1.9 KiB
Markdown
# 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: 'http://localhost:8082/api',
|
||
timeout: 10000
|
||
})
|
||
```
|
||
|
||
## 许可证
|
||
|
||
MIT
|