qiube 01bda65010 feat(product): 添加商品下架和多条件查询功能
- 实现了商品下架功能,下架后SKU库存变为0且链接失效
- 添加了支持多条件查询的商品列表功能
- 增加了包含商品名称、链接码、状态、发售地区等查询条件
- 在商品管理页面添加了查询表单界面
- 实现了下架按钮的禁用逻辑和状态显示
- 添加了移动端响应式查询表单适配
- 集成了API接口和错误处理机制
2025-12-25 16:26:11 +08:00

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

Description
支付前端
Readme 322 KiB