eden-web/h5/README.md

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