# 保洁相关功能

> 模块编码：cleaning
> 端侧：微信小程序
> 关联文档：01-模块划分.md（v4.0）、02-功能清单-小程序端.md（§4）、03-业务流转逻辑-小程序端.md（§4）、05-接口规范.md（§9）、06-项目技术要求.md
> 强制规范遵循 `07-前端界面开发规范.md`

## 功能概览

| 项目 | 说明 |
|------|------|
| 菜单名称 | 保洁管理 |
| 子菜单 | 今日保洁任务 / 保洁执行 / 保洁历史 |
| 功能编号 | MP-CL-01 ~ MP-CL-07 |
| 权限编码 | cleaning:task:*、cleaning:spot-check:*、cleaning:supplement:* |

## 页面清单

### 页面1：今日保洁任务

- **页面路径**：`/pages/cleaning/today`
- **适用角色**：保洁人员
- **页面元素**：
  - 日期显示（当天日期）
  - 任务统计卡片（待执行/进行中/已完成）
  - 任务列表
- **查询条件**：无（自动按当天+本人过滤）
- **列表字段**：

| 字段 | 类型 | 说明 |
|------|------|------|
| 任务名称 | 文本 | 保洁区域+任务类型 |
| 保洁区域 | 标签 | 关联区域名称 |
| 计划时间 | 时间 | 预计开始时间 |
| 状态 | 标签 | 待执行/进行中/已完成/超时 |
| 蓝牙状态 | 图标 | 是否需蓝牙打卡 |

- **界面布局**：
  - 顶部：日期 + 统计数字横向排列
  - 中部：任务卡片列表，每张卡片显示区域、时间、状态
  - 底部：无操作栏
- **操作按钮**：
  - 「开始执行」→ 进入保洁执行页（权限：cleaning:task:update）
  - 「查看详情」→ 查看任务详情

#### 交互流程要求

1. **页面加载流程**：页面加载时获取当日保洁任务列表→显示骨架屏→渲染统计卡片和任务列表
2. **查询/筛选交互流程**：无手动筛选，自动按当天+本人过滤；支持下拉刷新
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：无弹窗
5. **行内操作流程**：点击「开始执行」→校验蓝牙打卡状态→跳转保洁执行页；点击「查看详情」→查看任务详情
6. **异常与错误处理**：任务加载失败显示重试；无任务显示空状态插图和文案
7. **联动/级联交互**：统计卡片数字与列表数据联动更新
8. **权限控制交互表现**：无cleaning:task:update权限时隐藏「开始执行」按钮
9. **H1 防重复提交**：「开始执行」「查看详情」按钮点击时须设置 `:loading` + `:disabled` 双重锁定；下拉刷新期间禁止重复触发；使用 pending Promise 去重
10. **H2 超时控制**：获取保洁任务列表 GET 请求超时 15s；页面加载 >3s 时须调用 `wx.showLoading({title:'加载中...', mask:true})`；请求超时时提示"网络请求超时，请下拉刷新重试"
11. **H3 操作确认**：点击「开始执行」前若存在进行中任务，须通过 `wx.showModal` 二次确认，内容含后果说明
12. **H8 反馈规范**：任务加载成功使用静默渲染；加载失败使用 `wx.showToast({icon:'none', title:'加载失败，请重试'})`；网络异常通过 `wx.getNetworkType` 判断后提供重试入口

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 统计卡片 | `uni-card` | mode="center"，三列等宽布局 |
| 任务列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=true |
| 状态标签 | `uni-tag` | type: success(已完成)/warning(进行中)/error(超时)/default(待执行) |
| 蓝牙状态图标 | `uni-icons` | type="bluetooth"，size="22" |
| 下拉刷新 | `uni-refresher` | @onRefresh回调，threshold=45px |
| 空状态 | `uni-section` | 插槽自定义空状态插图与文案 |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 任务列表 | 加载失败时允许重试 | "加载失败，请下拉刷新重试" |
| 统计数据 | 数据为空时显示0 | — |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），卡片宽度自适应，padding 16px
- **横竖屏适配策略**：竖屏单列卡片；横屏统计卡片横向平铺，任务列表双列卡片
- **手势交互规范**：任务项可点击区域≥44px；下拉刷新触发区域≥50px
- **安全区域**：底部适配底部安全区

**需求追溯**：

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-CL-01 | 今日保洁任务 | 02-小程序端 §4 | 蓝牙打卡确认 | 保洁执行 |

---

### 页面2：蓝牙强制打卡确认

- **页面路径**：`/pages/cleaning/check-in`（从今日任务页面跳转）
- **适用角色**：保洁人员
- **页面元素**：
  - 蓝牙扫描状态指示器（扫描中/已连接/未检测到）
  - 当前打卡点名称
  - 蓝牙信号强度显示
  - 重试按钮
  - 补录入口（蓝牙未连接时显示）
- **查询条件**：无
- **列表字段**：无
- **界面布局**：
  - 顶部：打卡点名称 + 蓝牙状态大图标
  - 中部：蓝牙连接动画（扫描→连接→成功）
  - 底部：操作按钮区
- **操作按钮**：
  - 「重新扫描」→ 重新搜索蓝牙Beacon
  - 「进入补录模式」→ 跳转补录申请页（蓝牙策略=REQUIRED且扫描失败时显示）
  - 「确认打卡」→ 记录蓝牙打卡成功（check_type=BLUETOOTH）

**蓝牙策略判断逻辑**：
- 调用 `GET /system/bluetooth-policy → cleaning_check_in`
- 策略=REQUIRED：必须蓝牙连接后才能打卡
- 策略=OPTIONAL：可选蓝牙或手动打卡

**需求追溯**：

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-CL-02 | 蓝牙强制打卡确认 | 02-小程序端 §4 | 保洁执行 | 保洁补录、系统蓝牙配置 |

#### 交互流程要求

1. **页面加载流程**：页面加载时查询蓝牙策略→策略=REQUIRED自动启动蓝牙扫描→显示扫描动画；策略=OPTIONAL显示打卡方式选择
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：自动扫描蓝牙Beacon→检测到→连接→打卡成功（check_type=BLUETOOTH）；扫描失败→重试/进入补录模式
4. **弹窗/弹层交互流程**：打卡成功弹出成功提示；扫描超时弹出重试提示
5. **行内操作流程**：点击重新扫描→重新搜索蓝牙；点击进入补录模式→跳转补录申请页；点击确认打卡→记录蓝牙打卡
6. **异常与错误处理**：蓝牙未开启提示"请开启手机蓝牙"；扫描超时3次显示补录入口；连接失败提示重试
7. **联动/级联交互**：蓝牙策略与扫描行为联动
8. **权限控制交互表现**：所有保洁人员可访问
9. **H1 防重复提交**：「重新扫描」「确认打卡」「进入补录模式」按钮点击时均须设置 `:loading` + `:disabled` 双重锁定；扫描期间使用 pending 标志位防止重复发起蓝牙扫描
10. **H2 超时控制**：蓝牙策略查询 GET 请求超时 15s；蓝牙扫描超时 3s；>3s 时须显示 `wx.showLoading({title:'正在扫描...', mask:true})`；超时或连接失败均提示并提供重试/补录选项
11. **H3 操作确认**：点击「进入补录模式」前须通过 `wx.showModal` 确认，内容说明"进入补录后将记录为手动打卡，是否继续？"；点击「确认打卡」前提示"确认在此位置打卡？"
12. **H4 脏数据检测**：本页面以自动操作为主，若用户手动修改过任何信息则标记 isDirty；`onUnload` 中检测到 isDirty 且未完成打卡时弹出 `wx.showModal({content:"未完成的打卡将丢失，确定离开？"})`
13. **H7 上传约束**：本页面无上传功能，此项不适用
14. **H8 反馈规范**：打卡成功使用 `wx.showToast({icon:'success', title:'打卡成功'})`；扫描失败使用 `wx.showToast({icon:'none', title:'未检测到蓝牙信号'})`；网络异常提供重试入口

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 扫描动画 | `view` + CSS动画 | 旋转动画，size=80px |
| 蓝牙状态图标 | `uni-icons` | type="bluetooth"，size=40 |
| 打卡点名称 | `text` | font-size="18px"，font-weight="bold" |
| 信号强度 | `text` | font-size="14px"，动态显示RSSI |
| 重新扫描 | `button` | type="default"，:loading="scanning" |
| 进入补录模式 | `button` | type="warn" |
| 确认打卡 | `button` | type="primary" |
| 打卡结果 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 蓝牙状态 | 必须开启蓝牙 | "请开启手机蓝牙" |
| Beacon信号 | RSSI > -70dBm | "蓝牙信号弱，请靠近打卡点" |
| 扫描超时 | 3秒超时，最多重试3次 | "蓝牙扫描超时" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），扫描动画居中
- **横竖屏适配策略**：竖屏垂直布局；横屏动画与信息并排展示
- **手势交互规范**：按钮可点击区域≥44px
- **安全区域**：底部按钮适配底部安全区

---

### 页面3：保洁执行

- **页面路径**：`/pages/cleaning/execute`
- **适用角色**：保洁人员
- **页面元素**：
  - 任务信息卡片（区域、类型、时间）
  - 保洁清单（逐项检查列表）
  - 每项操作按钮（完成/标记异常）
  - 完成后照片上传区（≤9张，含水印时间定位）
  - 蓝牙拍照提示（策略=REQUIRED时显示）
- **查询条件**：无
- **列表字段**：

| 字段 | 类型 | 说明 |
|------|------|------|
| 检查项名称 | 文本 | 保洁清单项目 |
| 状态 | 标签 | 待完成/已完成/异常 |
| 备注 | 文本 | 异常时填写说明 |

- **界面布局**：
  - 顶部：任务信息摘要卡片
  - 中部：保洁清单列表（逐项勾选）
  - 底部：照片上传区 + 提交按钮
- **操作按钮**：
  - 「完成该项」→ 标记该项完成
  - 「标记异常」→ 跳转异常反馈页
  - 「拍照」→ 调用相机拍照（蓝牙策略=REQUIRED时须在蓝牙连接状态下进行）
  - 「提交完成」→ 提交整个保洁任务

**需求追溯**：

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-CL-03 | 保洁执行 | 02-小程序端 §4 | 主管抽查 | 保洁异常反馈 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取保洁任务详情和清单→渲染任务信息和检查项列表；查询蓝牙拍照策略
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：逐项点击「完成该项」→标记异常项点击「标记异常」→跳转异常反馈页→完成后拍照上传→点击「提交完成」→确认弹窗→提交成功
4. **弹窗/弹层交互流程**：点击拍照弹出选择（拍照/相册）；提交前弹出确认弹窗
5. **行内操作流程**：点击完成该项→该项标记完成；点击标记异常→跳转异常反馈页；点击拍照→调起相机（蓝牙策略=REQUIRED须蓝牙连接下拍照）
6. **异常与错误处理**：蓝牙断连时拍照提示"请连接蓝牙后拍照"；提交失败显示重试
7. **联动/级联交互**：检查项完成进度与任务状态联动
8. **权限控制交互表现**：无cleaning:task:update权限时按钮置灰
9. **H1 防重复提交**：「完成该项」「标记异常」「提交完成」按钮点击时均须设置 `:loading` + `:disabled` 双重锁定；提交期间禁止重复操作；拍照调用同样需要防抖处理
10. **H2 超时控制**：获取任务详情和清单 GET 请求超时 15s；提交完成 POST 请求超时 30s；照片上传超时 60s；>3s 时须 `wx.showLoading({mask:true})`；超时后提示具体原因及重试选项
11. **H3 操作确认**：点击「提交完成」前须通过 `wx.showModal` 二次确认，内容包括已完成项数、异常项数及"确认提交后将进入待抽查状态"的后果说明
12. **H4 脏数据检测**：页面加载时对初始清单数据进行快照（深拷贝）；每次点击完成/标记异常或上传照片时对比快照检测 isDirty；`onUnload` 中检测到 isDirty 且未提交时弹出 `wx.showModal({content:"保洁数据尚未保存，确定离开？"})`
13. **H7 上传约束**：完成照片上传单个文件 ≤10MB，最多 ≤9 张；使用 `uni-file-picker` 的 `@progress` 回调实时展示上传进度百分比；蓝牙策略=REQUIRED 时拍照前校验蓝牙连接状态
14. **H8 反馈规范**：提交成功使用 `wx.showToast({icon:'success', title:'保洁任务已提交'})`；校验失败使用 `wx.showToast({icon:'none', title:'请完成所有保洁项目'})` 多文字提示；网络异常判断并提供重试

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 任务信息卡片 | `uni-card` | mode="basic"，只读展示 |
| 保洁清单列表 | `uni-list` + `uni-list-item` | :showArrow="false"，可勾选 |
| 完成该项 | `button` | type="default"，size="mini"，@click="completeItem" |
| 标记异常 | `button` | type="warn"，size="mini"，@click="reportAbnormal" |
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image" |
| 提交完成 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 保洁清单 | 必须逐项完成或标记异常 | "请完成所有保洁项目" |
| 完成照片 | 至少1张 | "请上传完成照片" |
| 蓝牙状态 | 策略=REQUIRED拍照时须蓝牙连接 | "请连接蓝牙后拍照" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），列表宽度自适应
- **横竖屏适配策略**：竖屏垂直列表；横屏清单与照片区并排
- **手势交互规范**：列表项可点击区域≥44px；按钮≥44px
- **安全区域**：底部提交按钮适配底部安全区

---

### 页面4：异常反馈

- **页面路径**：`/pages/cleaning/abnormal`
- **适用角色**：保洁人员
- **页面元素**：
  - 异常描述输入框（多行文本）
  - 拍照上传区（≤9张，含水印时间定位）
  - 严重程度选择（一般/严重/紧急）
  - 提交按钮
- **查询条件**：无
- **列表字段**：无
- **界面布局**：
  - 顶部：异常类型提示
  - 中部：照片上传 + 描述填写
  - 底部：提交按钮
- **操作按钮**：
  - 「拍照」→ 调用相机
  - 「提交反馈」→ 提交异常反馈

**需求追溯**：

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-CL-04 | 异常反馈 | 02-小程序端 §4 | 通知主管 | 保洁管理（Web端） |

#### 交互流程要求

1. **页面加载流程**：页面加载时初始化表单
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：输入异常描述→选择严重程度→拍照上传→点击提交反馈→确认弹窗→提交成功通知主管
4. **弹窗/弹层交互流程**：点击拍照弹出选择（拍照/相册）；提交前弹出确认弹窗
5. **行内操作流程**：输入描述→选择严重程度→上传照片→提交
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试
7. **联动/级联交互**：无强联动
8. **权限控制交互表现**：所有保洁人员可操作

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 异常描述 | `uni-easyinput` | type="textarea"，maxlength="500"，:showWordLimit="true" |
| 严重程度 | `uni-data-select` | :localdata="[{value:'minor',text:'一般'},{value:'major',text:'严重'},{value:'critical',text:'紧急'}]" |
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image"，:auto-upload="true" |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 异常描述 | 必填，最多500字 | "请填写异常描述" / "描述不能超过500字" |
| 严重程度 | 必选 | "请选择严重程度" |
| 照片 | 最多9张，含水印 | "照片最多上传9张" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
- **横竖屏适配策略**：竖屏垂直布局；横屏照片区3~4列网格
- **手势交互规范**：选择器≥44px；提交按钮≥44px；上传区域≥44px
- **安全区域**：底部提交按钮适配底部安全区

---

### 页面5：保洁抽查

- **页面路径**：`/pages/cleaning/spot-check`
- **适用角色**：主管
- **页面元素**：
  - 待抽查任务列表
  - 任务详情查看
  - 抽查结果标记（合格/不合格）
  - 不合格原因输入框
  - 不合格照片上传
- **查询条件**：
  - 日期筛选
  - 区域筛选
  - 状态筛选（待抽查/合格/不合格）
- **列表字段**：

| 字段 | 类型 | 说明 |
|------|------|------|
| 区域 | 文本 | 保洁区域名称 |
| 执行人 | 文本 | 保洁人员姓名 |
| 完成时间 | 时间 | 实际完成时间 |
| 抽查状态 | 标签 | 待抽查/合格/不合格 |

- **界面布局**：
  - 顶部：筛选条件横向滑动
  - 中部：任务卡片列表
  - 弹窗：抽查结果标记弹窗
- **操作按钮**：
  - 「合格」→ 确认完成（权限：cleaning:spot-check:approve）
  - 「不合格」→ 填写原因后重新生成任务

**需求追溯**：

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-CL-05 | 保洁抽查 | 02-小程序端 §4 | 不合格时重新生成任务 | 保洁管理（Web端） |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取待抽查任务列表→显示骨架屏→渲染筛选条件和任务列表
2. **查询/筛选交互流程**：日期/区域/状态筛选条件→切换筛选重新加载列表；下拉刷新
3. **表单填写与提交流程**：点击任务→弹出抽查结果标记弹窗→选择合格/不合格→不合格时填写原因+上传照片→确认提交
4. **弹窗/弹层交互流程**：点击抽查→弹出抽查标记弹窗（合格/不合格选择+原因输入）
5. **行内操作流程**：点击合格→确认完成；点击不合格→填写原因→确认→系统自动重新生成任务
6. **异常与错误处理**：列表加载失败显示重试；抽查操作失败显示重试
7. **联动/级联交互**：不合格标记与任务重新生成联动
8. **权限控制交互表现**：仅主管可操作；无cleaning:spot-check:approve权限时按钮置灰

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 筛选条件 | `uni-data-select` | 日期/区域/状态三个选择器 |
| 任务列表 | `uni-list` + `uni-list-item` | clickable=true |
| 抽查标记弹窗 | `uni-popup` | type="bottom"，弹出抽查操作面板 |
| 合格按钮 | `button` | type="primary"，@click="markQualified" |
| 不合格按钮 | `button` | type="warn"，@click="markUnqualified" |
| 不合格原因 | `uni-easyinput` | type="textarea"，maxlength="200" |
| 不合格照片 | `uni-file-picker` | limit="9"，file-mediatype="image" |
| 下拉刷新 | `uni-refresher` | @onRefresh回调 |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 抽查结果 | 必选（合格/不合格） | "请选择抽查结果" |
| 不合格原因 | 不合格时必填 | "请填写不合格原因" |
| 不合格照片 | 不合格时至少1张 | "请上传不合格照片" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），列表宽度自适应
- **横竖屏适配策略**：竖屏单列卡片；横屏双列卡片+底部弹窗更宽
- **手势交互规范**：任务项可点击区域≥44px；按钮≥44px
- **安全区域**：底部弹窗适配底部安全区

---

### 页面6：保洁历史

- **页面路径**：`/pages/cleaning/history`
- **适用角色**：保洁人员
- **页面元素**：
  - 月份选择器
  - 历史任务列表
  - 任务详情查看
- **查询条件**：
  - 月份筛选
  - 状态筛选（全部/正常/异常/补录）
- **列表字段**：

| 字段 | 类型 | 说明 |
|------|------|------|
| 日期 | 日期 | 执行日期 |
| 区域 | 文本 | 保洁区域 |
| 状态 | 标签 | 正常/异常/补录 |
| 打卡方式 | 标签 | 蓝牙/手动/补录 |

- **界面布局**：
  - 顶部：月份选择器 + 统计数字
  - 中部：按日期分组的任务列表
  - 底部：无操作栏
- **操作按钮**：
  - 「查看详情」→ 查看历史任务详情

**需求追溯**：

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-CL-06 | 保洁历史 | 02-小程序端 §4 | 无 | 保洁执行 |

#### 交互流程要求

1. **页面加载流程**：页面加载时默认加载当月保洁记录→显示骨架屏→渲染月份选择器和记录列表
2. **查询/筛选交互流程**：切换月份→重新加载；状态筛选（全部/正常/异常/补录）→过滤记录；下拉刷新
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：无弹窗
5. **行内操作流程**：点击查看详情→查看历史任务详情
6. **异常与错误处理**：记录加载失败显示重试；无记录显示空状态
7. **联动/级联交互**：月份和状态筛选与列表数据联动
8. **权限控制交互表现**：仅保洁人员可访问本人数据
9. **H1 防重复提交**：「查看详情」按钮设置防重复标记；下拉刷新期间禁止重复触发；切换月份/状态筛选时 abort 未完成的上一次请求
10. **H2 超时控制**：获取历史记录 GET 请求超时 15s；切换月份加载 >3s 时须 `wx.showLoading({mask:true})`；超时提示"加载超时，请重试"
11. **H3 操作确认**：本页面主要为列表查看，无需操作确认
12. **H8 反馈规范**：记录加载成功静默渲染；加载失败使用 `wx.showToast({icon:'none', title:'记录加载失败，请重试'})`；空数据显示空状态插图；网络异常提供重试

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 月份选择器 | `uni-datetime-picker` | type="date"，fields="month" |
| 状态筛选 | `uni-segmented-control` | :values="['全部','正常','异常','补录']" |
| 记录列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=true |
| 状态标签 | `uni-tag` | type: success(正常)/error(异常)/primary(补录) |
| 下拉刷新 | `uni-refresher` | @onRefresh回调 |
| 空状态 | `uni-section` | 插槽自定义空状态插图与文案 |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 记录列表 | 加载失败允许重试 | "加载失败，请下拉刷新重试" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），卡片宽度自适应
- **横竖屏适配策略**：竖屏单列卡片；横屏双列卡片展示
- **手势交互规范**：记录项可点击区域≥44px；支持下拉刷新
- **安全区域**：底部适配底部安全区

---

### 页面7：异常数据补录

- **页面路径**：`/pages/cleaning/supplement`
- **适用角色**：保洁人员（蓝牙失灵/定位失败时）
- **页面元素**：
  - 补录原因选择（蓝牙故障/手机异常/系统异常/其他）
  - 补录说明输入框
  - 手动填写保洁记录
  - 照片上传区（补录证据）
  - 提交按钮
- **查询条件**：无
- **列表字段**：无
- **界面布局**：
  - 顶部：补录模式提示（红色警示条）
  - 中部：原因选择 + 说明填写 + 保洁记录
  - 底部：提交按钮
- **操作按钮**：
  - 「提交补录」→ 提交补录申请（需主管审核）

**补录数据标记**：
- 所有补录数据标记 `is_supplement=true`
- `supplement_reason`：补录原因
- `check_type=MANUAL`

**需求追溯**：

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-CL-07 | 异常数据补录 | 02-小程序端 §4 | 主管审核补录 | 操作日志、考勤补录审核 |

#### 交互流程要求

1. **页面加载流程**：页面加载时显示补录模式提示（红色警示条）→获取保洁区域和检查项数据
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：选择补录原因→填写补录说明→上传证明材料→手动填写保洁记录（时间/区域/检查项）→点击提交补录→确认弹窗→提交成功等待审核
4. **弹窗/弹层交互流程**：点击上传弹出选择（拍照/相册）；提交前弹出确认弹窗
5. **行内操作流程**：选择原因→填写说明→上传照片→填写保洁记录→提交
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试；离线暂存本地
7. **联动/级联交互**：补录原因与表单无强联动
8. **权限控制交互表现**：仅保洁人员可操作；补录数据标记is_supplement=true
9. **H1 防重复提交**：「提交补录」按钮点击时须设置 `:loading="submitting"` + `:disabled` 双重锁定；提交期间禁止重复点击
10. **H2 超时控制**：获取区域和检查项 GET 请求超时 15s；提交补录 POST 请求超时 30s；证明材料上传超时 60s；>3s 时须 `wx.showLoading({mask:true})`；超时后提示并提供重试
11. **H3 操作确认**：点击「提交补录」前须通过 `wx.showModal` 二次确认，内容包括补录原因摘要及"提交后需等待主管审核"的后果说明
12. **H4 脏数据检测**：页面初始化时保存空白表单快照；选择原因、填写说明、上传材料、填写记录等任一操作触发 isDirty=true；`onUnload` 中检测 isDirty 时弹出 `wx.showModal({content:"补录信息尚未提交，确定离开？"})`
13. **H7 上传约束**：证明材料上传单个文件 ≤10MB，最多 ≤3 张（业务限制）；使用 `uni-file-picker` 的 `@progress` 回调显示上传进度；超出限制时前端拦截并提示
14. **H8 反馈规范**：提交成功使用 `wx.showToast({icon:'success', title:'补录申请已提交，待审核'})`；校验失败使用 `wx.showToast({icon:'none', title:'具体错误信息'})`；离线暂存本地时提示"已暂存至本地"

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 补录原因 | `uni-data-select` | :localdata="[{value:'bluetooth',text:'蓝牙故障'},{value:'phone',text:'手机异常'},{value:'system',text:'系统异常'},{value:'other',text:'其他'}]" |
| 补录说明 | `uni-easyinput` | type="textarea"，maxlength="200"，:showWordLimit="true" |
| 证明材料上传 | `uni-file-picker` | limit="3"，file-mediatype="image" |
| 保洁时间 | `uni-datetime-picker` | type="datetime" |
| 保洁区域 | `uni-data-select` | v-model="areaId"，:localdata="areaList" |
| 检查项结果 | `uni-data-checkbox` | 逐项渲染 |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 补录原因 | 必选 | "请选择补录原因" |
| 补录说明 | 必填，最多200字 | "请填写补录说明" |
| 证明材料 | 最多3张 | "证明材料最多上传3张" |
| 保洁时间 | 必选 | "请选择保洁时间" |
| 保洁区域 | 必选 | "请选择保洁区域" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
- **横竖屏适配策略**：竖屏垂直布局；横屏表单水平分组
- **手势交互规范**：选择器≥44px；提交按钮≥44px
- **安全区域**：底部提交按钮适配底部安全区

---

## 业务规则

1. **蓝牙策略**：保洁打卡和拍照均受蓝牙策略控制（`GET /system/bluetooth-policy → cleaning_check_in` / `cleaning_photo`）
2. **蓝牙强制打卡**：策略=REQUIRED时，必须连接蓝牙Beacon后才可确认完成，拍照也须在蓝牙连接状态下进行
3. **非强制蓝牙**：策略=OPTIONAL时，可选蓝牙打卡（check_type=BLUETOOTH）或手动打卡（check_type=MANUAL）
4. **补录审核**：所有蓝牙失灵的补录数据需主管在Web端或小程序端审核
5. **补录标记**：补录数据必须标记 `is_supplement=true`，并在操作日志中记录
6. **照片水印**：所有照片自动添加时间+位置水印，蓝牙场景标记 `bluetooth_connected`
7. **抽查不合格**：主管标记不合格后，系统自动重新生成保洁任务
8. **照片数量**：单次上传最多9张照片

## 状态流转

### 保洁任务状态

```
待执行 → 进行中 → 待抽查 → 已完成
                  ↓
               异常反馈 → 待处理
                  ↓
         主管抽查 → 合格 → 已完成
                  → 不合格 → 重新生成任务
```

### 补录流程

```
蓝牙失灵/定位失败
      │
  进入补录模式
      │
  选择补录原因 + 手动填写记录
      │
  提交补录申请（is_supplement=true）
      │
  主管审核（Web/小程序均可）
      │
  ┌─审核通过─┐  ┌─审核驳回─┐
  补录生效       通知员工
  记录审核日志   记录审核日志
```