From ae0b5f27be5fb6691ce5411ee227b3bc023f44c8 Mon Sep 17 00:00:00 2001
From: qiube <18969599531@163.com>
Date: Fri, 19 Dec 2025 10:05:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=9F=BA=E7=A1=80=E7=BB=93=E6=9E=84=E5=92=8C?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore   |  25 +++++++++++
 README.md    | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  22 ++++++++++
 3 files changed, 162 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d600b6c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c9010a8
--- /dev/null
+++ b/README.md
@@ -0,0 +1,115 @@
+# MT Pay Frontend
+
+PingPong支付系统前端页面（Vue3）
+
+## 技术栈
+
+- Vue 3
+- Vue Router 4
+- Element Plus
+- Axios
+- Vite
+
+## 项目结构
+
+```
+MTKJPAY-FRONT/
+├── src/
+│   ├── api/              # API接口
+│   │   ├── request.js    # Axios封装
+│   │   └── payment.js    # 支付相关API
+│   ├── router/           # 路由配置
+│   │   └── index.js
+│   ├── views/            # 页面组件
+│   │   ├── CreateOrder.vue    # 创建订单页面
+│   │   ├── Checkout.vue        # 收银台页面
+│   │   ├── PaymentResult.vue  # 支付结果页面
+│   │   └── OrderQuery.vue     # 订单查询页面
+│   ├── App.vue           # 根组件
+│   └── main.js           # 入口文件
+├── index.html            # HTML模板
+├── vite.config.js        # Vite配置
+└── package.json          # 项目配置
+```
+
+## 安装依赖
+
+```bash
+npm install
+```
+
+## 开发运行
+
+```bash
+npm run dev
+```
+
+访问：http://localhost:3000
+
+## 构建生产版本
+
+```bash
+npm run build
+```
+
+## 功能说明
+
+### 1. 创建订单页面 (/)
+- 填写订单信息（金额、币种、交易类型等）
+- 填写风控信息（客户信息、商品信息、地址信息等）
+- 提交后跳转到收银台
+
+### 2. 收银台页面 (/checkout)
+- 集成PingPong支付SDK
+- 用户完成支付操作
+- 支付完成后跳转到结果页面
+
+### 3. 支付结果页面 (/result)
+- 显示支付结果
+- 显示订单详情
+- 提供继续支付和查询订单操作
+
+### 4. 订单查询页面 (/query)
+- 根据商户订单号查询订单状态
+- 显示订单详情
+- 支持继续支付（如果订单未完成）
+
+## 配置说明
+
+### API代理配置
+
+在 `vite.config.js` 中配置了API代理：
+
+```javascript
+server: {
+  proxy: {
+    '/api': {
+      target: 'http://localhost:8080',  // 后端服务地址
+      changeOrigin: true
+    }
+  }
+}
+```
+
+### 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. 添加加载状态和错误处理
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5212095
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "mtkjpay-front",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5",
+    "axios": "^1.6.0",
+    "element-plus": "^2.4.4",
+    "@element-plus/icons-vue": "^2.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
+