diff --git a/PRODUCT_DETAIL.md b/PRODUCT_DETAIL.md
deleted file mode 100644
index 5b7a9f9..0000000
--- a/PRODUCT_DETAIL.md
+++ /dev/null
@@ -1,130 +0,0 @@
-# 商品详情页说明
-
-## 页面功能
-
-### 1. 商品展示区域
-- **左侧大图**：支持点击放大预览
-- **缩略图列表**：点击切换主图
-- **图片预览**：Element Plus图片预览功能
-
-### 2. 商品信息区域
-- **商品标题**：大字体，醒目展示
-- **商品副标题**：补充说明信息
-- **价格展示**：
- - 现价（大字体，红色高亮）
- - 原价（删除线，灰色）
- - 节省金额提示
-
-### 3. 规格选择
-- **多规格支持**：颜色、尺寸等
-- **可视化选择**：标签式选择，选中高亮
-- **必选验证**：支付前验证所有规格已选择
-
-### 4. 数量选择
-- **数量输入框**：支持增减
-- **库存显示**：实时显示库存信息
-- **库存限制**：超过库存时禁用
-
-### 5. 服务保障
-- **7天无理由退货**
-- **正品保证**
-- **极速发货**
-
-### 6. 操作按钮
-- **立即购买**：橙色渐变按钮
-- **立即支付**：红色渐变按钮（主要支付按钮）
-- **悬停效果**：按钮有阴影和上浮动画
-
-### 7. 商品详情标签页
-- **商品详情**：HTML格式的商品描述
-- **规格参数**：表格形式展示参数
-- **用户评价**：评价列表展示
-
-## 样式特点
-
-### 参考主流电商设计
-1. **价格突出**：大字体、红色、渐变背景
-2. **图片展示**：大图+缩略图，支持预览
-3. **按钮设计**：渐变背景、阴影效果、悬停动画
-4. **卡片布局**：圆角、阴影、层次分明
-5. **响应式设计**：移动端自适应
-
-### 颜色方案
-- **主色调**：红色系（#f56c6c, #ff4757）
-- **辅助色**：橙色系（#ff9500, #ff6b00）
-- **背景色**：浅灰色（#f5f7fa）
-- **文字色**：深灰色（#333, #666）
-
-## 支付流程
-
-1. 用户选择商品规格和数量
-2. 点击"立即支付"按钮
-3. 系统自动生成订单号
-4. 调用后端API创建支付订单
-5. 跳转到收银台页面完成支付
-
-## 数据格式
-
-### 商品数据结构
-```javascript
-{
- id: '1',
- name: '商品名称',
- subtitle: '商品副标题',
- price: 20.00,
- originalPrice: 25.00,
- currency: 'USD',
- stock: 100,
- images: ['图片URL数组'],
- specs: [
- {
- name: '规格名称',
- options: [
- { label: '选项标签', value: '选项值' }
- ]
- }
- ],
- description: 'HTML格式的商品描述',
- params: [
- { name: '参数名', value: '参数值' }
- ],
- reviews: [
- {
- user: '用户名',
- rating: 5,
- date: '日期',
- content: '评价内容'
- }
- ]
-}
-```
-
-## 路由配置
-
-- **路径**：`/` 或 `/product/:id`
-- **组件**：`ProductDetail.vue`
-- **参数**：`id` - 商品ID（可选）
-
-## 使用示例
-
-### 访问商品详情页
-```
-http://localhost:3000/
-http://localhost:3000/product/1
-```
-
-### 从其他页面跳转
-```javascript
-router.push('/product/1')
-router.push({ path: '/product', params: { id: '1' } })
-```
-
-## 扩展建议
-
-1. **商品列表页**：创建商品列表，点击跳转到详情页
-2. **购物车功能**：添加购物车按钮和功能
-3. **商品推荐**：在详情页下方展示相关商品
-4. **图片轮播**：主图支持自动轮播
-5. **视频展示**：支持商品视频播放
-6. **分享功能**：添加商品分享功能
-
diff --git a/README.md b/README.md
index c9010a8..42ee5d1 100644
--- a/README.md
+++ b/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
diff --git a/src/views/CreateOrder.vue b/src/views/CreateOrder.vue
index 2558328..5be9c05 100644
--- a/src/views/CreateOrder.vue
+++ b/src/views/CreateOrder.vue
@@ -74,11 +74,12 @@
收货地址
+
@@ -86,42 +87,172 @@
-
-
+
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+ {{ currentCountryConfig.name }}邮编为{{ currentCountryConfig.postcodeLength }}位数字
+
+
+
+
+
+
+
+
+
+
-
-
-
-