qiube
3bdb2ff5f3
- 创建新的订单管理页面 OrderManage.vue，支持分页和多条件查询 - 添加订单查询API接口，支持复杂的订单筛选条件 - 在路由中添加订单管理页面路由配置 - 更新导航菜单，将订单查询改为订单管理并指向新页面 - 实现订单列表的表格展示，包含订单号、商品信息、金额、客户信息等 - 添加订单状态、支付状态、PayPal状态的标签显示和筛选功能 - 实现查询表单，支持订单号、PayPal订单ID、客户信息等多维度搜索 - 添加分页组件，支持每页显示数量调整和页码切换 - 实现订单详情查看功能和重置查询条件功能
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: 'http://localhost:8082/api',
timeout: 10000
})
许可证
MIT