102 lines
2.7 KiB
Markdown
102 lines
2.7 KiB
Markdown
# H5在线缴费系统
|
||
|
||
基于Vue.js和Vant UI的移动端在线缴费系统，提供账单管理、缴费支付、对账等功能。
|
||
|
||
## 主要功能
|
||
|
||
- 缴费账单列表查询：查询当前业户待缴费的账单
|
||
- 预缴账单列表查询：查询当前业户未到期的预缴账单
|
||
- 缴费支付：支持个对公和公对公两种支付方式
|
||
- 缴费记录查询：查询历史缴费记录
|
||
- 支付结果查询：查询支付状态
|
||
- 其他辅助功能
|
||
|
||
## 技术栈
|
||
|
||
- Vue 2.6.x
|
||
- Vuex
|
||
- Vue Router
|
||
- Vant UI
|
||
- Axios
|
||
- Sass
|
||
- ES6+
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
├── public/ # 静态资源目录
|
||
├── src/ # 源代码目录
|
||
│ ├── api/ # API接口定义
|
||
│ ├── assets/ # 静态资源文件
|
||
│ ├── components/ # 公共组件
|
||
│ ├── router/ # 路由配置
|
||
│ ├── store/ # Vuex状态管理
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── views/ # 页面组件
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.js # 入口文件
|
||
├── .env.development # 开发环境配置
|
||
├── .env.production # 生产环境配置
|
||
├── babel.config.js # Babel配置
|
||
├── postcss.config.js # PostCSS配置
|
||
└── vue.config.js # Vue CLI配置
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
```
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
```
|
||
npm run dev
|
||
```
|
||
|
||
### 生产构建
|
||
```
|
||
npm run build
|
||
```
|
||
|
||
### 代码格式化
|
||
```
|
||
npm run lint
|
||
```
|
||
|
||
## 组件说明
|
||
|
||
### 主要页面组件
|
||
|
||
- `Index.vue`: 在线缴费首页，显示待缴费账单列表
|
||
- `PrepayBills.vue`: 预缴账单页面，显示未到期的预缴账单
|
||
- `Records.vue`: 缴费记录页面，显示历史缴费记录
|
||
- `BillDetail.vue`: 账单详情页，显示账单详细信息
|
||
- `RecordDetail.vue`: 缴费记录详情页，显示缴费记录详细信息
|
||
- `EnterprisePay.vue`: 公对公支付页面，提供公对公支付链接
|
||
- `PayResult.vue`: 支付结果页面，显示支付结果信息
|
||
|
||
### 公共组件
|
||
|
||
- `PayerSelector.vue`: 业户选择器组件，用于选择当前操作的业户
|
||
|
||
## 业务规则
|
||
|
||
### 缴费流程
|
||
|
||
1. 用户在账单列表页选择需要缴费的账单
|
||
2. 选择支付方式（个对公/公对公）
|
||
3. 系统生成支付订单
|
||
4. 用户完成支付
|
||
5. 系统更新账单状态和缴费记录
|
||
|
||
### 公对公支付
|
||
|
||
1. 用户选择公对公支付方式后，系统生成支付链接
|
||
2. 支付链接有效期为5分钟
|
||
3. 用户复制链接后在浏览器中打开完成支付
|
||
4. 系统自动更新支付状态
|
||
|
||
## API文档
|
||
|
||
详细的API接口文档请参考后端开发文档。 |