# 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接口文档请参考后端开发文档。