# 报修相关功能

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

## 功能概览

| 项目 | 说明 |
|------|------|
| 菜单名称 | 报修相关功能 |
| 子菜单 | 扫码注册、一键报修、我的工单、催单、维修接单、维修完工、延期申请、延期审批、协助维修申请、工单分配、工单验收、评价 |
| 功能编号 | MP-R-01 ~ MP-R-12 |
| 权限编码 | repair:list:* / repair:detail:approve 等 |

## 页面清单

### 页面1：扫码注册页

- **页面路径**：`/pages/repair/scan-register`
- **页面元素**：
  - 扫码区域（调用wx.scanCode）
  - 项目信息展示（扫码后显示）
  - 确认绑定按钮
- **界面布局**：
  - 顶部：扫码提示文字
  - 中部：扫码框（居中，带边框提示）
  - 底部：扫码结果展示 + 确认绑定按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 扫描二维码 | — | 调用wx.scanCode扫描项目二维码 |
  | 确认绑定 | — | 绑定身份到对应项目 |

#### 交互流程要求

1. **页面加载流程**：页面加载时自动调起wx.scanCode扫码→扫码成功后显示项目信息→等待用户确认绑定
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：点击扫描二维码→调用wx.scanCode→获取项目编码→查询项目信息→展示项目名称、地址→点击确认绑定→绑定成功跳转工作台
4. **弹窗/弹层交互流程**：扫码失败弹出提示"二维码无效，请重新扫描"；绑定成功弹出成功提示
5. **行内操作流程**：点击扫码区域→调起扫码；点击确认绑定→提交绑定请求
6. **异常与错误处理**：扫码超时提示"扫码超时，请重试"；二维码无效提示重扫；网络异常显示重试；相机权限被拒提示"请开启相机权限"
7. **联动/级联交互**：扫码结果与项目信息联动展示
8. **权限控制交互表现**：所有用户均可扫码注册；已绑定用户不显示此页面

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 扫码区域 | `button` | @click="scanCode"，type="primary"，text="扫描二维码" |
| 项目信息展示 | `uni-card` | mode="basic"，展示项目名称、地址 |
| 确认绑定 | `button` | type="primary"，:loading="binding" |
| 提示弹窗 | `uni-popup` | type="dialog"，确认/取消 |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 二维码 | 必须为系统有效项目二维码 | "二维码无效，请重新扫描" |
| 项目信息 | 扫码后必须返回有效项目数据 | "未找到项目信息" |
| 绑定状态 | 未绑定才可操作 | "您已绑定项目" |

#### 响应式布局

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

### 页面2：一键报修页

- **页面路径**：`/pages/repair/create`
- **页面元素**：
  - 报修类型选择（下拉，数据来源：物业公司Web端配置的报修类型字典）
  - 报修描述（多行文本，最多500字）
  - 照片上传区域（最多9张，含水印时间定位）
  - 报修位置（可选，手动选择或自动定位）
  - 联系方式（默认当前用户手机号）
- **界面布局**：
  - 顶部：报修类型选择器
  - 中部：报修描述输入框
  - 下部：照片上传网格（3列，+号占位）
  - 底部：提交按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 拍照上传 | — | 调用相机，自动添加水印（时间+位置） |
  | 从相册选择 | — | 选择相册照片，自动添加水印 |
  | 提交报修 | — | 生成工单，等待分配 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取报修类型字典→渲染类型选择器；获取当前位置信息预填位置
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：选择报修类型→输入报修描述→拍照/选择照片（自动添加时间+位置水印）→选择/确认报修位置→确认联系方式→点击提交报修→确认弹窗→提交成功跳转工单列表
4. **弹窗/弹层交互流程**：点击拍照/相册弹出选择弹窗（拍照/从相册选择）；提交前弹出确认弹窗
5. **行内操作流程**：点击照片上传区域→调起相机/相册→选择照片→自动添加水印→显示缩略图；点击位置→打开地图选择位置
6. **异常与错误处理**：定位失败提示手动选择位置；图片上传失败提示重传；提交失败显示重试；离线时数据暂存本地草稿
7. **联动/级联交互**：报修类型与描述提示联动；位置自动获取与手动选择联动
8. **权限控制交互表现**：所有登录用户均可报修；相机/定位权限被拒时引导开启

9. **H1 防重复请求(强制)**：提交报修按钮点击后:loading="submitting"且disabled；表单提交请求pending期间禁用提交和返回操作；使用requestTask管理提交请求生命周期
10. **H2 超时配置(强制)**：报修类型字典GET请求超时15s；提交报修POST请求超时30s；图片上传超时60s；定位接口超时10s；>3s wx.showLoading("正在提交..."); 超时后提示"请求超时，请重试"+重试按钮
11. **H3 操作确认(强制)**：提交前必须弹出uni-popup确认弹窗"确认提交报修单？提交后将生成工单等待分配"，含后果说明
12. **H4 脏数据检测(强制)**：进入页面对空表单做深拷贝快照；填写过程中任何字段变更标记isDirty=true；页面卸载/onBackPress时检测isDirty，若有已填写内容（描述/照片等）弹出uni-popup确认"有未提交的报修内容，确定离开吗？"
13. **H7 文件上传(建议)**：照片上传使用wx.chooseMedia({count:9, mediaType:['image']})选择，单张≤10MB，格式白名单jpg/jpeg/png；自动添加水印(时间+位置)后再上传；上传过程显示进度回调(uni-file-picker)；上传失败提示具体原因支持重传
14. **H8 反馈(建议)**：报修提交成功wx.showToast({icon:'success', title:'报修成功'}); 提交失败wx.showToast({icon:'none', title:'提交失败原因'})可显示多文字；定位失败wx.showToast({icon:'none', title:'定位失败，请手动选择位置'}); 离线模式提示数据已存草稿

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 报修类型选择 | `uni-data-select` | v-model="type"，:localdata="typeList" |
| 报修描述 | `uni-easyinput` | type="textarea"，maxlength="500"，:showWordLimit="true" |
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image"，:auto-upload="true" |
| 报修位置 | `uni-list-item` | :showArrow="true"，@click="chooseLocation" |
| 联系方式 | `uni-easyinput` | type="number"，maxlength="11" |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |
| 位置选择 | `map` + `button` | 调用wx.chooseLocation |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 报修类型 | 必选 | "请选择报修类型" |
| 报修描述 | 必填，最多500字 | "请填写报修描述" / "描述不能超过500字" |
| 照片 | 最多9张，必须含水印 | "照片最多上传9张" |
| 联系方式 | 必填，11位手机号 | "请输入联系方式" / "手机号格式不正确" |

#### 响应式布局

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

### 页面3：我的工单列表

- **页面路径**：`/pages/repair/my-orders`
- **页面元素**：
  - 状态Tab筛选（全部/待分配/处理中/待验收/已完成/已关闭）
  - 工单列表
  - 下拉刷新 + 上拉加载
- **查询条件**：
  | 条件 | 类型 | 说明 |
  |------|------|------|
  | 状态筛选 | Tab | 全部/待分配/处理中/待验收/已完成/已关闭 |
  | 关键词 | 搜索框 | 按工单号/描述搜索 |
- **列表字段**：
  | 字段 | 说明 |
  |------|------|
  | 工单编号 | 如 WO20260416001 |
  | 报修类型 | 图标+文字 |
  | 报修描述 | 截断显示 |
  | 报修时间 | 相对时间 |
  | 工单状态 | 状态标签（不同颜色） |
  | 维修人员 | 已分配时显示 |
  | 催单标记 | 已催单显示红色标记 |
- **界面布局**：
  - 顶部：状态Tab + 搜索框
  - 中部：工单卡片列表
    - 卡片顶部：工单编号 + 状态标签
    - 卡片中部：报修类型 + 描述
    - 卡片底部：时间 + 维修人员 + 催单标记
  - 底部：无更多数据提示
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 查看详情 | — | 跳转工单详情页 |
  | 催单 | repair:list:view | 处理中工单可催单 |

#### 交互流程要求

1. **页面加载流程**：页面加载时请求工单列表→显示骨架屏→渲染Tab和工单卡片；默认显示"全部"状态
2. **查询/筛选交互流程**：点击状态Tab切换筛选条件→重新加载列表；输入关键词搜索工单号/描述；下拉刷新重新加载；上拉加载更多
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：催单时弹出确认弹窗"确认催单？催单后维修人员和主管将收到通知"
5. **行内操作流程**：点击工单卡片→跳转工单详情；点击催单→确认催单→发送催单通知
6. **异常与错误处理**：列表加载失败显示重试；催单超过每日3次限制提示"今日已催单3次，请明日再试"；网络异常显示错误提示
7. **联动/级联交互**：Tab切换与列表数据联动；催单后催单标记实时更新
8. **权限控制交互表现**：催单按钮仅处理中工单显示；无repair:list:view权限时隐藏催单按钮

9. **H1 防重复请求(强制)**：催单按钮点击后loading态+disabled；Tab切换请求pending时不重复发列表请求；搜索输入防抖300ms；上拉加载更多时分页用requestTask管理，新请求abort前一次；下拉刷新abort进行中请求
10. **H2 超时配置(强制)**：工单列表GET请求超时15s；催单POST请求超时30s；>3s保持骨架屏；超时后提示"请求超时，请下拉刷新"+重试按钮
11. **H3 操作确认(强制)**：催单操作必须弹出uni-popup确认弹窗"确认催单？催单后维修人员和主管将收到通知（今日剩余X次）"，含后果说明和次数限制提示
12. **H6 批量限制(建议)**：催单每天最多3次（服务端校验），前端达到限制时直接禁用催单按钮并提示"今日已催单3次，请明日再试"
13. **H8 反馈(建议)**：催单成功wx.showToast({icon:'success', title:'催单成功'}); 列表加载失败wx.showToast({icon:'none', title:'加载失败，请下拉刷新'}); 催单次数不足wx.showToast({icon:'none', title:'今日已催单3次，请明日再试'})

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 状态Tab | `uni-segmented-control` | :values="['全部','待分配','处理中','待验收','已完成','已关闭']" |
| 搜索框 | `uni-search-bar` | placeholder="搜索工单号/描述" |
| 工单列表 | `uni-list` + `uni-list-item` | clickable=true |
| 状态标签 | `uni-tag` | type: success(已完成)/warning(处理中)/error(异常)/default(待分配) |
| 催单标记 | `uni-badge` | content="催"，type="error" |
| 下拉刷新 | `uni-refresher` | @onRefresh回调 |
| 上拉加载 | `uni-load-more` | :status="loadingStatus" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 工单列表 | 加载失败允许重试 | "加载失败，请下拉刷新" |
| 搜索关键词 | 最少2个字符 | "请输入至少2个字符" |
| 催单 | 每天最多3次 | "今日已催单3次，请明日再试" |

#### 响应式布局

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

### 页面4：待处理工单列表（维修人员）

- **页面路径**：`/pages/repair/pending-orders`
- **页面元素**：
  - 待接单工单列表
  - 下拉刷新 + 上拉加载
- **查询条件**：无（自动加载分配给当前人员的待处理工单）
- **列表字段**：
  | 字段 | 说明 |
  |------|------|
  | 工单编号 | 如 WO20260416001 |
  | 报修类型 | 图标+文字 |
  | 报修描述 | 截断显示 |
  | 报修时间 | 相对时间 |
  | 优先级 | 高/中/低，不同颜色标记 |
  | 报修照片缩略图 | 第一张照片 |
- **界面布局**：
  - 顶部：待处理工单数量统计
  - 中部：工单卡片列表
    - 卡片顶部：工单编号 + 优先级标签
    - 卡片中部：报修类型 + 描述
    - 卡片底部：报修时间 + 接单按钮
  - 底部：无更多数据提示
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 接单 | repair:list:update | 接单后工单状态变为"处理中" |

#### 交互流程要求

1. **页面加载流程**：页面加载时请求分配给当前维修人员的待处理工单→显示骨架屏→渲染待处理数量统计和工单列表
2. **查询/筛选交互流程**：无手动筛选，自动加载当前人员的待处理工单；下拉刷新重新加载
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：点击接单→弹出确认弹窗"确认接单？"
5. **行内操作流程**：点击工单卡片→查看工单详情；点击接单→确认后工单状态变为处理中→通知报修人
6. **异常与错误处理**：列表加载失败显示重试；接单失败提示错误信息；工单已被他人接单提示"工单已被接单"
7. **联动/级联交互**：接单成功后列表数据更新，待处理数量减少
8. **权限控制交互表现**：仅维修人员角色可见此页面；无repair:list:update权限时接单按钮置灰

9. **H1 防重复请求(强制)**：接单按钮点击后loading态+disabled；列表加载pending不重复发；上拉分页用requestTask管理，新请求abort旧请求；下拉刷新abort进行中请求
10. **H2 超时配置(强制)**：待处理工单列表GET请求超时15s；接单POST请求超时30s；>3s保持骨架屏；超时后提示"请求超时，请下拉刷新"+重试按钮
11. **H3 操作确认(强制)**：接单操作必须弹出uni-popup确认弹窗"确认接单？接单后请在规定时间内完成维修"，含后果说明
12. **H6 批量限制(建议)**：本页面主要为单个接单操作，无批量操作场景
13. **H8 反馈(建议)**：接单成功wx.showToast({icon:'success', title:'接单成功'}); 工单已被他人接单wx.showToast({icon:'none', title:'工单已被接单，请刷新列表'}); 列表加载失败wx.showToast({icon:'none', title:'加载失败，请重试'})

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 待处理数量 | `uni-badge` | :content="count"，type="warning"，size="large" |
| 工单列表 | `uni-list` + `uni-list-item` | clickable=true |
| 优先级标签 | `uni-tag` | type: error(高)/warning(中)/default(低) |
| 照片缩略图 | `image` | mode="aspectFill"，60px×60px圆角 |
| 接单按钮 | `button` | type="primary"，size="mini" |
| 下拉刷新 | `uni-refresher` | @onRefresh回调 |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 工单列表 | 加载失败允许重试 | "加载失败，请下拉刷新" |
| 接单操作 | 工单必须为待分配/已分配状态 | "工单状态已变更，请刷新" |

#### 响应式布局

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

### 页面5：维修完工页

- **页面路径**：`/pages/repair/complete`
- **页面元素**：
  - 工单基本信息（只读）
  - 维修说明（多行文本，必填）
  - 维修后照片上传（最多9张，含水印时间定位）
  - 材料使用记录（可选）
- **界面布局**：
  - 顶部：工单信息摘要
  - 中部：维修说明输入框
  - 下部：照片上传网格
  - 底部：提交完工按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 拍照上传 | — | 拍摄维修后照片 |
  | 提交完工 | repair:list:update | 工单状态变为"待验收" |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单基本信息→渲染工单信息摘要
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：输入维修说明→拍照上传维修后照片（自动添加水印）→可选填材料使用记录→点击提交完工→确认弹窗→提交成功跳转工单列表
4. **弹窗/弹层交互流程**：点击拍照弹出选择弹窗（拍照/从相册选择）；提交前弹出确认弹窗
5. **行内操作流程**：点击照片上传区域→调起相机/相册；点击提交完工→确认提交
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试；离线时数据暂存本地草稿
7. **联动/级联交互**：照片上传数量与限制联动（最多9张）
8. **权限控制交互表现**：仅维修人员可操作；无repair:list:update权限时提交按钮置灰

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单信息摘要 | `uni-card` | mode="basic"，只读展示 |
| 维修说明 | `uni-easyinput` | type="textarea"，maxlength="500"，:showWordLimit="true" |
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image"，:auto-upload="true" |
| 材料使用记录 | `uni-list` + `uni-list-item` | 可动态添加行 |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 维修说明 | 必填，最多500字 | "请填写维修说明" / "维修说明不能超过500字" |
| 维修后照片 | 至少1张 | "请上传维修后照片" |
| 照片水印 | 自动添加时间+位置水印 | — |

#### 响应式布局

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

### 页面6：延期申请页

- **页面路径**：`/pages/repair/extension-apply`
- **页面元素**：
  - 工单基本信息（只读）
  - 延期原因（多行文本，必填）
  - 预计完成时间（日期时间选择器，必填）
- **界面布局**：
  - 顶部：工单信息摘要
  - 中部：延期原因输入 + 预计完成时间
  - 底部：提交申请按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 提交延期申请 | repair:list:update | 工单状态变为"延期中"，等待主管审批 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单基本信息→渲染工单信息摘要
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：输入延期原因→选择预计完成时间→点击提交延期申请→确认弹窗→提交成功跳转工单详情
4. **弹窗/弹层交互流程**：提交前弹出确认弹窗"确认申请延期？"
5. **行内操作流程**：点击预计完成时间→弹出日期时间选择器→选择时间；点击提交延期申请→确认提交
6. **异常与错误处理**：提交失败显示重试；预计完成时间不能早于当前时间
7. **联动/级联交互**：延期申请提交后工单状态变为"延期中"
8. **权限控制交互表现**：仅维修人员可操作；无repair:list:update权限时提交按钮置灰

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单信息摘要 | `uni-card` | mode="basic"，只读展示 |
| 延期原因 | `uni-easyinput` | type="textarea"，maxlength="500"，:showWordLimit="true" |
| 预计完成时间 | `uni-datetime-picker` | type="datetime"，:start="minDate" |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 延期原因 | 必填，最多500字 | "请填写延期原因" / "延期原因不能超过500字" |
| 预计完成时间 | 必选，必须晚于当前时间 | "请选择预计完成时间" / "预计完成时间不能早于当前时间" |

#### 响应式布局

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

### 页面7：延期审批页（主管）

- **页面路径**：`/pages/repair/extension-approve`
- **页面元素**：
  - 工单基本信息（只读）
  - 延期申请详情（申请人、原因、预计完成时间）
  - 审批意见输入（多行文本）
  - 通过/驳回按钮
- **界面布局**：
  - 顶部：工单信息摘要
  - 中部：延期申请详情 + 审批意见
  - 底部：通过 + 驳回按钮（并排）
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 通过 | repair:detail:approve | 延期生效，工单继续处理 |
  | 驳回 | repair:detail:approve | 通知维修人员，工单恢复原状态 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单基本信息和延期申请详情→渲染工单信息摘要和申请详情
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：查看延期申请详情→输入审批意见→点击通过/驳回→确认弹窗→操作成功跳转列表
4. **弹窗/弹层交互流程**：通过时弹出确认弹窗"确认通过延期申请？"；驳回时弹出确认弹窗+必填驳回原因
5. **行内操作流程**：点击通过→确认→延期生效；点击驳回→填写驳回原因→确认→通知维修人员
6. **异常与错误处理**：审批操作失败显示重试；工单状态已变更提示"工单状态已更新，请刷新"
7. **联动/级联交互**：审批结果与工单状态联动更新
8. **权限控制交互表现**：仅主管可操作；无repair:detail:approve权限时按钮置灰

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单信息摘要 | `uni-card` | mode="basic"，只读展示 |
| 延期申请详情 | `uni-list` + `uni-list-item` | :showArrow="false"，展示申请人、原因、预计时间 |
| 审批意见 | `uni-easyinput` | type="textarea"，maxlength="200" |
| 通过按钮 | `button` | type="primary"，@click="approve" |
| 驳回按钮 | `button` | type="warn"，@click="reject" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 审批意见 | 驳回时必填 | "请填写驳回原因" |
| 审批意见 | 最多200字 | "审批意见不能超过200字" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
- **横竖屏适配策略**：竖屏垂直布局；横屏按钮并排展示更宽
- **手势交互规范**：通过/驳回按钮≥44px，间距≥16px
- **安全区域**：底部按钮适配底部安全区

### 页面8：协助维修申请页

- **页面路径**：`/pages/repair/assist-apply`
- **页面元素**：
  - 工单基本信息（只读）
  - 协助班组选择（下拉选择其他班组）
  - 协助原因（多行文本，必填）
- **界面布局**：
  - 顶部：工单信息摘要
  - 中部：协助班组选择 + 协助原因
  - 底部：提交申请按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 提交协助申请 | repair:list:update | 生成协助子工单，等待协助完成 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单基本信息和班组列表→渲染工单信息摘要
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：选择协助班组→输入协助原因→点击提交协助申请→确认弹窗→提交成功跳转工单详情
4. **弹窗/弹层交互流程**：提交前弹出确认弹窗"确认申请协助维修？"
5. **行内操作流程**：选择协助班组→输入协助原因→确认提交
6. **异常与错误处理**：提交失败显示重试；无可用协助班组提示"暂无可协助的班组"
7. **联动/级联交互**：协助申请提交后生成协助子工单
8. **权限控制交互表现**：仅维修人员可操作；无repair:list:update权限时提交按钮置灰

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单信息摘要 | `uni-card` | mode="basic"，只读展示 |
| 协助班组选择 | `uni-data-select` | v-model="team"，:localdata="teamList" |
| 协助原因 | `uni-easyinput` | type="textarea"，maxlength="500"，:showWordLimit="true" |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 协助班组 | 必选 | "请选择协助班组" |
| 协助原因 | 必填，最多500字 | "请填写协助原因" / "协助原因不能超过500字" |

#### 响应式布局

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

### 页面9：工单分配页（主管）

- **页面路径**：`/pages/repair/assign`
- **页面元素**：
  - 工单基本信息（只读）
  - 分配班组选择（下拉选择）
  - 分配人员选择（联动，根据班组筛选）
  - 分配备注（可选）
- **界面布局**：
  - 顶部：工单信息摘要
  - 中部：班组 + 人员级联选择
  - 底部：确认分配按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 确认分配 | repair:list:assign | 分配成功后通知维修人员 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单基本信息和班组列表→渲染工单信息摘要
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：选择分配班组→联动加载班组下人员列表→选择分配人员→可选填分配备注→点击确认分配→确认弹窗→分配成功通知维修人员
4. **弹窗/弹层交互流程**：提交前弹出确认弹窗"确认分配给XXX？"
5. **行内操作流程**：选择班组→人员列表联动刷新→选择人员→确认分配
6. **异常与错误处理**：班组下无人员提示"该班组暂无可用人员"；分配失败显示重试
7. **联动/级联交互**：班组选择与人员列表联动，选择班组后动态加载该班组人员
8. **权限控制交互表现**：仅主管可操作；无repair:list:assign权限时提交按钮置灰

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单信息摘要 | `uni-card` | mode="basic"，只读展示 |
| 班组选择 | `uni-data-select` | v-model="teamId"，@change="loadMembers" |
| 人员选择 | `uni-data-select` | v-model="memberId"，:localdata="memberList" |
| 分配备注 | `uni-easyinput` | type="textarea"，maxlength="200" |
| 确认分配 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 分配班组 | 必选 | "请选择分配班组" |
| 分配人员 | 必选 | "请选择分配人员" |
| 分配备注 | 最多200字 | "备注不能超过200字" |

#### 响应式布局

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

### 页面10：工单验收页

- **页面路径**：`/pages/repair/accept`
- **页面元素**：
  - 工单基本信息（只读）
  - 维修说明展示
  - 维修前后照片对比
  - 验收结果选择（通过/不通过）
  - 验收意见（多行文本，不通过时必填）
- **界面布局**：
  - 顶部：工单信息摘要
  - 中部：维修说明 + 照片对比
  - 下部：验收结果选择 + 验收意见
  - 底部：提交验收按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 提交验收 | repair:detail:approve | 通过→工单完成；不通过→退回维修 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单信息→渲染工单摘要、维修说明、前后照片对比
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：查看维修前后照片对比→选择验收结果（通过/不通过）→不通过时填写验收意见→点击提交验收→确认弹窗→验收通过工单完成/不通过退回维修
4. **弹窗/弹层交互流程**：提交前弹出确认弹窗"确认验收结果？"；点击照片弹出大图预览
5. **行内操作流程**：选择通过/不通过→不通过时展开验收意见输入→提交验收
6. **异常与错误处理**：验收操作失败显示重试；工单状态已变更提示刷新
7. **联动/级联交互**：验收结果选择与验收意见联动，不通过时验收意见必填
8. **权限控制交互表现**：仅主管/报修人可操作；无repair:detail:approve权限时按钮置灰

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单信息摘要 | `uni-card` | mode="basic"，只读展示 |
| 照片对比 | `swiper` | 左右滑动对比，:indicator-dots="true" |
| 照片大图 | `uni-popup` | type="center"，图片全屏预览 |
| 验收结果 | `uni-data-checkbox` | :localdata="[{value:'pass',text:'通过'},{value:'fail',text:'不通过'}]" |
| 验收意见 | `uni-easyinput` | type="textarea"，maxlength="500" |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 验收结果 | 必选 | "请选择验收结果" |
| 验收意见 | 不通过时必填，最多500字 | "不通过时请填写验收意见" / "验收意见不能超过500字" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），照片区域宽度自适应
- **横竖屏适配策略**：竖屏照片上下对比；横屏照片左右对比
- **手势交互规范**：照片可点击放大≥44px；提交按钮≥44px；左右滑动切换照片
- **安全区域**：底部按钮适配底部安全区

### 页面11：工单评价页

- **页面路径**：`/pages/repair/evaluate`
- **页面元素**：
  - 工单基本信息（只读）
  - 评分组件（五分制星级评分）
  - 评价内容（多行文本，最多200字）
  - 图片上传（最多3张）
- **界面布局**：
  - 顶部：工单信息摘要
  - 中部：评分星级 + 评价输入 + 图片上传
  - 底部：提交评价按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 提交评价 | — | 评价提交后不可修改 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单基本信息→渲染工单信息摘要
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：点击星级选择评分→输入评价内容→可选上传图片→点击提交评价→确认弹窗→评价提交成功跳转工单详情
4. **弹窗/弹层交互流程**：提交前弹出确认弹窗"确认提交评价？提交后不可修改"；上传图片弹出选择（拍照/相册）
5. **行内操作流程**：点击星星评分→输入评价→上传图片→提交评价
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试；评价已提交提示"已评价"
7. **联动/级联交互**：评分与评价提交联动，必须选择评分才能提交
8. **权限控制交互表现**：仅报修人可评价；已评价工单不显示评价入口

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单信息摘要 | `uni-card` | mode="basic"，只读展示 |
| 星级评分 | `uni-rate` | :max="5"，:value="score"，:size="28" |
| 评价内容 | `uni-easyinput` | type="textarea"，maxlength="200"，:showWordLimit="true" |
| 图片上传 | `uni-file-picker` | limit="3"，file-mediatype="image" |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 评分 | 必选，1~5分 | "请选择评分" |
| 评价内容 | 最多200字 | "评价内容不能超过200字" |
| 图片 | 最多3张 | "评价图片最多上传3张" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
- **横竖屏适配策略**：竖屏垂直布局；横屏评分与输入并排展示
- **手势交互规范**：星级评分每颗星≥44px；提交按钮≥44px
- **安全区域**：底部提交按钮适配底部安全区

### 页面12：工单详情页

- **页面路径**：`/pages/repair/detail`
- **页面元素**：
  - 工单基本信息
  - 报修照片
  - 维修人员信息（已分配时）
  - 维修记录时间轴
  - 维修后照片
  - 操作按钮区（根据状态和角色动态显示）
- **界面布局**：
  - 顶部：工单编号 + 状态标签
  - 信息区：报修类型、描述、位置、联系方式、报修时间
  - 照片区：报修照片轮播
  - 维修区：维修人员 + 维修说明 + 维修照片
  - 时间轴：工单流转记录（提交→分配→接单→完工→验收）
  - 底部：操作按钮区（动态）
- **操作按钮**（根据角色和状态动态显示）：
  | 按钮 | 适用角色 | 工单状态 | 说明 |
  |------|----------|----------|------|
  | 催单 | 报修人 | 处理中 | 发起催单 |
  | 接单 | 维修人员 | 待分配/已分配 | 接单 |
  | 完工 | 维修人员 | 处理中 | 提交维修完工 |
  | 延期申请 | 维修人员 | 处理中 | 申请延期 |
  | 协助申请 | 维修人员 | 处理中 | 请求协助 |
  | 分配 | 主管 | 待分配 | 分配工单 |
  | 延期审批 | 主管 | 延期中 | 审批延期 |
  | 验收 | 主管/报修人 | 待验收 | 验收工单 |
  | 评价 | 报修人 | 已完成 | 评价工单 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取工单详细信息→渲染工单编号、状态、基本信息、照片、维修记录、时间轴
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：本页面无表单提交操作，操作按钮跳转对应子页面
4. **弹窗/弹层交互流程**：点击照片→弹出大图预览；点击催单→弹出确认弹窗
5. **行内操作流程**：点击操作按钮→根据角色和状态跳转对应操作页面（接单→完工页、延期→延期申请页等）；查看照片轮播；滚动查看时间轴
6. **异常与错误处理**：工单加载失败显示重试；照片加载失败显示占位图；网络异常显示错误提示
7. **联动/级联交互**：操作按钮根据工单状态和用户角色动态显示/隐藏
8. **权限控制交互表现**：不同角色看到不同操作按钮；无权限操作按钮不显示；催单按钮仅报修人可见

9. **H1 防重复请求(强制)**：各操作按钮（催单/接单/完工等）点击后分别做loading+disabled防连击；操作跳转子页面由子页面负责防重；照片预览大图操作不做loading拦截；工单详情GET请求pending期间不重复发
10. **H2 超时配置(强制)**：工单详情GET请求超时15s；>3s显示骨架屏；详情加载超时后提示"加载超时，请重试"+重试按钮
11. **H3 操作确认(强制)**：催单操作在详情页弹出确认弹窗"确认催单？（今日剩余X次）"；其他危险操作由各子页面确认
12. **H7 文件上传(建议)**：本页面照片均为只读展示，不涉及上传操作
13. **H8 反馈(建议)**：详情加载成功静默渲染无需toast；加载失败wx.showToast({icon:'none', title:'工单信息加载失败，请重试'}); 照片加载失败显示占位图；网络异常wx.getNetworkType检测+重试按钮

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 状态标签 | `uni-tag` | type: success(已完成)/warning(处理中)/error(异常)/default(待分配) |
| 照片轮播 | `swiper` | :indicator-dots="true"，:autoplay="false" |
| 照片大图 | `uni-popup` | type="center"，图片全屏预览 |
| 维修记录 | `uni-steps` | :options="timeLineData"，direction="column" |
| 信息列表 | `uni-list` + `uni-list-item` | :showArrow="false"，展示各项信息 |
| 操作按钮区 | `view` + `button` | 固定底部，按钮根据角色动态渲染 |
| 催单确认弹窗 | `uni-popup` | type="dialog" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 工单信息 | 必须返回有效工单数据 | "工单信息加载失败，请重试" |
| 照片 | 加载失败显示占位图 | — |
| 操作权限 | 根据角色和状态校验 | "您暂无此操作权限" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），信息区域宽度自适应
- **横竖屏适配策略**：竖屏垂直布局；横屏信息区和照片区可并排展示
- **手势交互规范**：操作按钮≥44px；照片可点击放大≥44px；左右滑动切换照片
- **安全区域**：底部操作按钮区适配底部安全区，padding-bottom=env(safe-area-inset-bottom)

## 需求追溯

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-R-01 | 扫码注册 | 02-小程序端 §2 | 注册成功→绑定项目身份 | 通用功能（登录） |
| MP-R-02 | 一键报修 | 02-小程序端 §2 | 提交→生成工单→触发分配通知 | 物业Web端工单列表 |
| MP-R-03 | 我的工单 | 02-小程序端 §2 | 查看工单状态→催单/验收/评价 | 工单详情 |
| MP-R-04 | 催单 | 02-小程序端 §2 | 催单→触发通知服务→通知维修人员/主管 | 消息通知 |
| MP-R-05 | 维修接单 | 02-小程序端 §2 | 接单→工单状态变更→通知报修人 | 工单详情 |
| MP-R-06 | 维修完工 | 02-小程序端 §2 | 完工→工单状态变为"待验收"→触发验收通知 | 工单验收 |
| MP-R-07 | 延期申请 | 02-小程序端 §2 | 申请→工单状态变为"延期中"→通知主管审批 | 延期审批 |
| MP-R-08 | 延期审批 | 02-小程序端 §2 | 通过→延期生效；驳回→通知申请人 | 延期申请 |
| MP-R-09 | 协助维修申请 | 02-小程序端 §2 | 申请→生成协助子工单→通知协助班组 | 工单分配 |
| MP-R-10 | 工单分配 | 02-小程序端 §2 | 分配→通知维修人员 | 维修接单 |
| MP-R-11 | 工单验收 | 02-小程序端 §2 | 验收通过→工单完成→触发评价 | 服务评价 |
| MP-R-12 | 评价 | 02-小程序端 §2 | 评价→数据写入评价模块→物业可查看回复 | 服务评价 |

## 业务规则

1. **照片上传规则**（06-项目技术要求.md §4.4）：
   - 报修照片最多9张，必须含水印（时间+位置信息）
   - 水印位置：图片右下角
   - 上传时自动附带 `bluetooth_connected` 标记（如蓝牙连接时）

2. **工单状态流转**（03-业务流转逻辑-小程序端 §2）：
   - 报修人提交 → 待分配 → 处理中（接单） → 待验收（完工） → 已完成（验收通过）
   - 处理中可延期 → 延期中 → 主管审批 → 继续处理/驳回
   - 处理中可申请协助 → 生成子工单

3. **催单规则**：
   - 只有处理中的工单可以催单
   - 催单后触发通知服务，通知维修人员和主管
   - 同一工单每天最多催单3次

4. **双端审批对照**（02-功能清单-小程序端.md 附录）：
   - 工单延期审批：Web+小程序均可（物业主管）
   - 工单分配：Web+小程序均可（物业主管）
   - 工单验收：Web+小程序均可（物业主管/报修人）

5. **数据权限**（01-模块划分.md §1.3）：
   - 主管：本班组工单数据
   - 员工：仅本人相关工单数据

## 状态流转

### 工单完整状态流转

```
待分配 ──[主管分配/自动分配]──▶ 已分配 ──[维修人员接单]──▶ 处理中
  │                                                          │
  │                                              ┌───正常完工───┐───延期申请───┐───协助申请───┐
  │                                              │              │              │
  │                                              ▼              ▼              ▼
  │                                          待验收         延期中        协助处理中
  │                                              │              │              │
  │                                              │         主管审批       协助完成
  │                                              │         ┌通过┐┌驳回┐      │
  │                                              │         ▼    ▼            │
  │                                              │     继续处理 通知员工      │
  │                                              │                          │
  │                                          ┌───验收通过───┐───验收不通过───┐
  │                                          │              │              │
  │                                          ▼              ▼              │
  │                                      已完成         退回处理中            │
  │                                          │                              │
  │                                      可评价                          │
  │                                                                         │
  └─────────────────────────────────────────────────────────────────────────┘
```