修改小程序

This commit is contained in:
2025-10-17 17:29:11 +08:00
parent 434fa135d1
commit 212dffd0da
227 changed files with 12887 additions and 45341 deletions

View File

@@ -1,197 +1,157 @@
# 政府端小程序
# 政府端微信小程序
基于Vue.js和uni-app开发的政府管理系统微信小程序提供完整的政府监管、审批、人员管理等功能。
## 项目简介
这是一个基于微信小程序开发的政府端管理系统,主要用于政府部门的养殖户管理和相关业务处理。
## 功能特性
### 核心功能
- **数据看板**: 实时展示各类统计数据和分析图表
- **监管管理**: 监管记录管理、检查任务分配、结果跟踪
- **审批管理**: 各类申请审批流程管理
- **人员管理**: 政府工作人员信息管理
- **疫情监控**: 疫情数据监控和预警
- **服务管理**: 政府服务项目管理
- **仓库管理**: 物资仓库管理
### 🏠 首页
- **智能硬件设备管理**
- 项圈仓库
- 耳标仓库
- 脚环仓库
- 主机仓库
### 技术特性
- 基于Vue 2.6 + uni-app框架
- 支持微信小程序、H5、App多端发布
- 响应式设计,适配各种屏幕尺寸
- 模块化组件设计,易于维护和扩展
- 完整的API接口集成
- 用户认证和权限管理
- **其它功能模块**
- 牲畜身份认证
- 无纸化检疫
- 检疫证查询
- 金融保险监管
- 屠宰场监管
- 检疫站监管
- 无纸化防疫
- 防疫站监管
### 👥 养殖户管理
- 养殖户信息列表
- 搜索功能(按姓名、手机号)
- 添加/编辑/删除养殖户
- 分页加载
- 下拉刷新
### 👤 我的
- 个人信息展示
- 系统设置
- 帮助中心
- 关于我们
- 退出登录
## 技术栈
- **框架**:微信小程序原生开发
- **语言**JavaScript、WXML、WXSS
- **工具**:微信开发者工具
## 项目结构
```
government-mini-program/
├── src/
│ ├── components/ # 组件目录
├── Home.vue # 首页组件
├── Login.vue # 登录组件
│ ├── Dashboard.vue # 数据看板
│ │ ├── Supervision.vue # 监管管理
│ │ ├── Approval.vue # 审批管理
│ │ ├── Personnel.vue # 人员管理
│ │ ── Epidemic.vue # 疫情监控
│ ├── Service.vue # 服务管理
│ │ ├── Warehouse.vue # 仓库管理
│ │ ── Profile.vue # 个人中心
│ ├── pages/ # 页面目录
├── services/ # API服务
── utils/ # 工具类
├── styles/ # 样式文件
│ ├── router/ # 路由配置
├── App.vue # 根组件
└── main.js # 入口文件
├── public/ # 静态资源
├── package.json # 项目配置
├── pages.json # 页面配置
── manifest.json # 应用配置
└── vue.config.js # Vue配置
├── app.js # 小程序入口文件
├── app.json # 全局配置
├── app.wxss # 全局样式
├── pages/ # 页面目录
│ ├── index/ # 首页
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ ── index.wxss
│ ├── farmer/ # 养殖户管理
│ │ ├── farmer.js
│ │ ── farmer.json
│ ├── farmer.wxml
│ └── farmer.wxss
── profile/ # 我的
├── profile.js
├── profile.json
├── profile.wxml
└── profile.wxss
├── images/ # 图片资源
├── sitemap.json # 站点地图
├── project.config.json # 项目配置
── package.json # 包管理文件
```
## 开发环境
## 快速开始
### 环境要求
- Node.js 16.20.2+
- npm 8.0.0+
- 微信开发者工具
### 1. 环境准备
- 安装微信开发者工具
- 注册微信小程序账号
### 安装依赖
```bash
npm install
```
### 2. 导入项目
1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目根目录
4. 填写AppID测试可使用测试号
5. 点击"确定"
### 开发模式
```bash
# H5开发
npm run dev:h5
### 3. 运行项目
- 在微信开发者工具中点击"编译"
- 在模拟器中查看效果
- 使用真机调试测试实际效果
# 微信小程序开发
npm run dev:mp-weixin
```
## 设计说明
### 构建生产版本
```bash
# H5构建
npm run build:h5
### 视觉设计
- **主色调**:绿色 (#4CAF50)
- **背景色**:浅灰色 (#f5f5f5)
- **卡片样式**:圆角、阴影效果
- **图标设计**:圆形背景、彩色配色
# 微信小程序构建
npm run build:mp-weixin
```
### 布局特点
- **顶部导航**:绿色背景,白色文字
- **功能区域**:卡片式布局,网格排列
- **底部导航**3个标签页图标+文字
- **响应式**:适配不同屏幕尺寸
## API接口
## 开发说明
### 认证接口
- `POST /api/auth/login` - 用户登录
- `GET /api/auth/userinfo` - 获取用户信息
### 页面配置
每个页面包含4个文件
- `.js` - 页面逻辑
- `.json` - 页面配置
- `.wxml` - 页面结构
- `.wxss` - 页面样式
### 数据看板接口
- `GET /api/visualization/data` - 获取可视化数据
- `GET /api/supervision/stats` - 获取监管统计
- `GET /api/approval/stats` - 获取审批统计
### 数据管理
- 使用Page的data属性管理页面数据
- 通过setData方法更新数据
- 支持下拉刷新和上拉加载
### 监管管理接口
- `GET /api/supervision/list` - 获取监管列表
- `POST /api/supervision` - 创建监管记录
- `PUT /api/supervision/:id` - 更新监管记录
- `DELETE /api/supervision/:id` - 删除监管记录
### 审批管理接口
- `GET /api/approval/list` - 获取审批列表
- `POST /api/approval` - 创建审批
- `POST /api/approval/:id/approve` - 审批通过
- `POST /api/approval/:id/reject` - 审批拒绝
### 人员管理接口
- `GET /api/personnel/list` - 获取人员列表
- `POST /api/personnel` - 创建人员
- `PUT /api/personnel/:id` - 更新人员
- `DELETE /api/personnel/:id` - 删除人员
### 疫情监控接口
- `GET /api/epidemic/list` - 获取疫情列表
- `POST /api/epidemic` - 创建疫情记录
- `GET /api/epidemic/stats` - 获取疫情统计
### 服务管理接口
- `GET /api/service/list` - 获取服务列表
- `POST /api/service` - 创建服务
- `PUT /api/service/:id` - 更新服务
- `DELETE /api/service/:id` - 删除服务
### 仓库管理接口
- `GET /api/warehouse/list` - 获取仓库列表
- `POST /api/warehouse` - 创建仓库
- `PUT /api/warehouse/:id` - 更新仓库
- `DELETE /api/warehouse/:id` - 删除仓库
## 配置说明
### 环境配置
在项目根目录创建 `.env` 文件(或复制 `config.env``.env`
```
# API基础地址
VUE_APP_API_BASE_URL=http://localhost:5352/api
# 应用配置
VUE_APP_TITLE=政府管理系统
VUE_APP_VERSION=1.0.0
```
### 微信小程序配置
`manifest.json` 中配置小程序信息:
```json
{
"mp-weixin": {
"appid": "your-wechat-appid",
"setting": {
"urlCheck": false,
"es6": true,
"postcss": true,
"minified": true
}
}
}
```
## 部署说明
### 微信小程序部署
1. 使用微信开发者工具打开项目
2. 配置小程序AppID
3. 点击上传,提交审核
4. 审核通过后发布
### H5部署
1. 执行 `npm run build:h5`
2.`dist` 目录上传到服务器
3. 配置nginx或其他web服务器
## 开发指南
### 添加新页面
1.`src/pages` 目录下创建页面文件夹
2.`pages.json` 中注册页面
3.`src/router/index.js` 中添加路由
### 添加新组件
1.`src/components` 目录下创建组件文件
2. 在需要使用的页面中导入并使用
### 添加新API
1.`src/services` 目录下创建服务文件
2.`src/utils/request.js` 中添加请求方法
3. 在组件中调用API
### 事件处理
- 使用bindtap绑定点击事件
- 使用catchtap阻止事件冒泡
- 支持表单输入和数据提交
## 注意事项
1. 确保后端API服务正常运行
2. 检查网络请求配置和跨域设置
3. 微信小程序需要配置合法域名
4. 生产环境需要配置HTTPS
1. **图标资源**:当前使用占位符图标,建议替换为实际设计图标
2. **API接口**:功能模块目前显示"开发中"提示需要对接实际后端API
3. **权限控制**:根据实际需求添加用户权限验证
4. **错误处理**:完善网络请求和异常情况的处理
5. **性能优化**:图片压缩、代码分包等优化措施
## 许可证
## 后续开发
MIT License
### 功能完善
- [ ] 对接后端API接口
- [ ] 添加用户登录认证
- [ ] 完善权限管理系统
- [ ] 添加数据统计功能
- [ ] 实现消息推送
### 体验优化
- [ ] 添加加载动画
- [ ] 优化页面切换效果
- [ ] 完善错误提示
- [ ] 添加操作反馈
- [ ] 支持暗色模式
## 联系方式
如有问题或建议,请联系开发团队。
---
**版本**v1.0.0
**更新时间**2024年1月