流量充值系统 - 用户端 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)
注意事项
- 确保后端 API 服务已启动并配置正确的 CORS
- 生产环境部署时需要配置 Nginx 等 Web 服务器
- 支付功能需要对接真实的支付网关
- JSON-RPC 请求需要携带 Authorization 头部的 Bearer Token
License
MIT
9a51f71b24