pay2/README.md

流量充值系统 - 用户端 Web 应用

基于 Vue 3 + Vite + Element Plus 构建的用户端 Web 应用，通过 JSON-RPC 接口与后端通信。

功能特性

• 用户登录（账号密码登录 / 试用登录）
• 流量套餐选择与购买
• 多种支付方式（支付宝、微信、USDT等）
• 订单管理与支付状态追踪
• 充值历史记录查询
• 卡密激活功能
• 邀请好友功能
• 响应式设计，支持移动端

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• Vite - 下一代前端构建工具
• Vue Router - 官方路由管理器
• Pinia - Vue 状态管理库
• Element Plus - Vue 3 UI 组件库
• Axios - HTTP 请求库

项目结构

web-app/
├── index.html              # 入口 HTML
├── package.json            # 项目依赖配置
├── vite.config.js          # Vite 配置
└── src/
    ├── main.js             # 应用入口
    ├── App.vue             # 根组件
    ├── api/                # API 接口层
    │   ├── request.js      # JSON-RPC 封装
    │   ├── index.js        # 用户认证 API
    │   ├── order.js        # 订单 API
    │   ├── payment.js      # 支付 API
    │   ├── card.js         # 卡密 API
    │   └── user.js         # 用户扩展 API
    ├── components/         # 公共组件
    │   └── NavBar.vue      # 导航栏组件
    ├── views/              # 页面视图
    │   ├── Login.vue       # 登录页
    │   ├── Dashboard.vue   # 控制台首页
    │   ├── Recharge.vue    # 充值页
    │   ├── Payment.vue     # 支付中心
    │   ├── PaymentSubmit.vue   # 支付提交页
    │   ├── PaymentSuccess.vue  # 支付成功页
    │   ├── Orders.vue      # 订单列表页
    │   ├── Records.vue     # 充值记录页
    │   ├── Cards.vue       # 卡密激活页
    │   └── Invite.vue      # 邀请好友页
    ├── router/             # 路由配置
    │   └── index.js
    ├── stores/             # 状态管理
    │   └── user.js         # 用户状态
    └── assets/             # 静态资源
        └── css/
            └── main.css    # 全局样式

快速开始

环境要求

• Node.js >= 18.0.0
• npm >= 9.0.0

安装依赖

cd web-app
npm install

开发模式

npm run dev

访问 http://localhost:3000

生产构建

npm run build

构建产物在 dist/ 目录

JSON-RPC 接口说明

本项目使用 JSON-RPC 2.0 协议与后端通信，所有请求发送到 /json-rpc 端点。

用户认证接口

方法名	说明	参数
V5Login	用户登录	username, password, platform, appVersion, channel
V5TrialLogin	试用登录	platform, appVersion, channel
V5CaptchaSend	发送验证码	email, type
V5ResetPassword	重置密码	email, captcha, password
GetStarHomeUserInfo	获取用户信息	- (需登录)
V5UserSure	用户确认协议	-

订单接口

方法名	说明	参数
GetStarHomeOrderList	获取订单列表	page, limit
CheckStarHomeOrderPayStatus	检查订单支付状态	outTradeNo

支付接口

方法名	说明	参数
GetStarHomePayChannel	获取支付渠道	platform
GetStarHomePackageList	获取套餐列表	-

卡密接口

方法名	说明	参数
GetStarHomeActiveCards	获取已激活卡密	page, limit
V5CardActive	激活卡密	cardNumber
V5CardRecord	卡密激活记录	page, limit

邀请接口

方法名	说明	参数
GetStarHomeInviteList	获取邀请列表	page, limit

请求示例

// JSON-RPC 请求格式
POST /json-rpc
Content-Type: application/json
Authorization: Bearer <token>

{
  "jsonrpc": "2.0",
  "method": "V5Login",
  "params": {
    "username": "user@example.com",
    "password": "password123",
    "platform": "WEB",
    "appVersion": "1.0.0",
    "channel": "WEB"
  },
  "id": 1712345678901
}

// 成功响应
{
  "jsonrpc": "2.0",
  "result": {
    "token": "eyJ...",
    "expiredIn": 1712432078,
    "user": {
      "id": 1,
      "username": "user@example.com",
      "vip": 1,
      ...
    }
  },
  "id": 1712345678901
}

// 错误响应
{
  "jsonrpc": "2.0",
  "error": {
    "code": -32000,
    "message": "用户名或密码错误"
  },
  "id": 1712345678901
}

代理配置

开发环境通过 Vite 代理转发 API 请求到后端服务：

// vite.config.js
server: {
  proxy: {
    '/json-rpc': {
      target: 'https://api.lanniaoo.com',
      changeOrigin: true
    },
    '/api': {
      target: 'https://api.lanniaoo.com',
      changeOrigin: true
    }
  }
}

页面说明

登录页 (/login)

• 账号密码登录
• 试用登录
• 登录状态持久化

控制台 (/dashboard)

• 用户信息展示
• 流量使用统计
• 快捷操作入口
• 最近订单列表

充值页 (/recharge)

• 套餐选择
• 支付方式选择
• 订单确认提交

支付页 (/payment/submit/:orderNo)

• 订单支付
• 二维码展示
• 支付状态轮询
• 支付倒计时

订单列表 (/orders)

• 订单筛选搜索
• 分页展示
• 订单详情查看

充值记录 (/records)

• 充值记录查询
• 时间范围筛选
• 统计信息展示

卡密激活 (/cards)

• 输入卡号激活
• 激活记录查看

邀请好友 (/invite)

• 邀请码/链接复制
• 邀请记录查看

注意事项

1. 确保后端 API 服务已启动并配置正确的 CORS
2. 生产环境部署时需要配置 Nginx 等 Web 服务器
3. 支付功能需要对接真实的支付网关
4. JSON-RPC 请求需要携带 Authorization 头部的 Bearer Token

License

MIT