# green-app

**Repository Path**: green_1/green-app

## Basic Information

- **Project Name**: green-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-20
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 净美家园环保APP

双角色（公众 / 一线作业人员）环保类 UniApp 前端项目。

---

## 技术栈

| 技术 | 说明 |
|------|------|
| Vue 3 | 组合式 API |
| UniApp | 跨端框架，优先适配 H5 / 微信小程序 |
| Pinia | 状态管理（用户信息、角色、积分） |
| Axios | 统一请求封装 + 拦截器 |
| SCSS | 样式预处理 |

---

## 项目结构

```
净美家园app端/
├── api/                    # 接口模块
│   ├── auth.js             # 登录/注册
│   ├── report.js           # 问题上报
│   ├── mall.js             # 积分商城
│   ├── workorder.js        # 工单
│   └── inspection.js       # 设备巡检
├── pages/
│   ├── login/              # 登录页
│   ├── register/           # 注册页
│   ├── public/             # 公众角色页面
│   │   ├── index.vue       # 公众首页
│   │   ├── report.vue      # 随手拍上报
│   │   ├── classify.vue    # 智能垃圾分类
│   │   ├── mall.vue        # 积分商城
│   │   ├── knowledge.vue   # 环保知识科普
│   │   ├── knowledge-detail.vue
│   │   ├── profile.vue     # 个人中心
│   │   ├── ai-assistant.vue # AI环保小助手
│   │   ├── report-list.vue # 上报记录
│   │   ├── profile-edit.vue
│   │   ├── settings.vue
│   │   └── messages.vue
│   └── worker/             # 一线作业人员页面
│       ├── index.vue       # 工作台首页
│       ├── work-order.vue  # 工单列表
│       ├── work-order-detail.vue # 工单详情
│       ├── inspection.vue  # 设备巡检
│       ├── training.vue    # 学习培训
│       ├── training-detail.vue
│       ├── profile.vue     # 个人中心
│       ├── settings.vue
│       ├── messages.vue
│       ├── risk-report.vue # 风险上报
│       └── supply-request.vue # 物资申请
├── store/
│   └── user.js             # 用户状态管理
├── utils/
│   ├── request.js          # Axios 封装
│   └── mock.js             # 模拟数据
├── static/                 # 静态资源
├── App.vue
├── main.js
├── pages.json              # 路由配置
├── manifest.json           # App 配置
└── package.json
```

---

## 快速开始

### 方式一：HBuilder X 打开（推荐）

1. 打开 **HBuilder X**（版本 ≥ 3.8）
2. 菜单 → **文件** → **导入** → **从本地目录导入**
3. 选择本项目根目录 `净美家园app端`
4. 工具栏点击 **运行** → **运行到浏览器** → **Chrome**（H5预览）
5. 或点击 **运行** → **运行到小程序模拟器** → **微信开发者工具**

### 方式二：命令行运行（H5）

```bash
# 进入项目目录
cd 净美家园app端

# 安装依赖
npm install

# 运行 H5
npm run dev:h5

# 构建 H5
npm run build:h5
```

浏览器访问：`http://localhost:8080`

---

## 环境配置

### 修改 API 地址

编辑 `utils/request.js`：

```js
const BASE_URL = 'https://your-api-server.com'  // 替换为真实后端地址
```

> **注意**：当前使用 `utils/mock.js` 中的模拟数据，无需后端即可正常运行所有页面。

### 微信小程序配置

编辑 `manifest.json`，填入小程序 AppID：

```json
"mp-weixin": {
  "appid": "你的微信小程序AppID"
}
```

---

## 功能说明

### 公众角色

| 页面 | 功能 |
|------|------|
| 登录/注册 | 账号密码、手机验证码、第三方登录、游客登录 |
| 公众首页 | 积分展示、功能入口、通知、上报记录、环保知识 |
| 随手拍上报 | 问题类型多选、图片上传、自动定位、匿名上报 |
| 智能垃圾分类 | 拍照AI识别、投放指南、附近投放点导航 |
| 积分商城 | 每日签到、商品兑换、公益捐赠 |
| 环保知识科普 | 分类筛选、搜索、文章阅读 |
| 个人中心 | 积分数据、功能入口、AI助手、退出登录 |
| AI环保小助手 | 智能问答聊天界面 |

### 一线作业人员角色

| 页面 | 功能 |
|------|------|
| 工作台首页 | 打卡、数据看板、紧急预警、待处理工单 |
| 工单列表 | 按状态筛选、点击查看详情 |
| 工单详情 | 导航、电话、处理记录、照片上传、物料登记、完成工单 |
| 设备巡检 | 扫码巡检、任务列表、异常设备提醒 |
| 学习培训 | 课程列表、播放、评论、作业、考试 |
| 个人中心 | 绩效数据、工单/培训入口、退出登录 |
| 风险上报 | 类型选择、等级评估、照片上传、提交 |
| 物资申请 | 物资清单、申请原因、关联工单 |

---

## 角色切换测试

1. 打开登录页，选择 **公众** 角色 → 登录进入公众首页（绿色主题）
2. 退出登录，选择 **一线作业人员** 角色 → 登录进入工作台（蓝色主题）
3. 注册页面：选择「一线作业人员」会自动显示「单位编号」输入框

---

## 模拟数据说明

所有接口均已提供模拟数据（`utils/mock.js`），无需后端即可完整体验：

- 登录成功后自动填充用户信息、积分、角色等
- 工单列表、上报记录、设备巡检数据均有模拟
- AI问答有预设关键词回复（旧电池、碳积分等）

---

## 注意事项

- 扫码功能需在微信小程序环境中使用
- 地图导航在 H5 端通过高德地图 URL Scheme 调起，小程序端使用 `uni.openLocation`
- 图片上传、拍照功能在 H5 端通过 `chooseImage` 调起系统相册/摄像头
- 定位功能在 H5 端需浏览器授权地理位置权限