# 通用功能

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

## 功能概览

| 项目 | 说明 |
|------|------|
| 菜单名称 | 通用功能 |
| 子菜单 | 快捷登录、个人信息、消息通知、数据补录申请、版本更新提示、通讯录 |
| 功能编号 | MP-C-01 ~ MP-C-06 |
| 权限编码 | —（通用功能，登录即可用） |

## 页面清单

### 页面1：登录页

- **页面路径**：`/pages/login/index`
- **页面元素**：
  - 微信授权登录按钮（获取openid）
  - 手机号绑定按钮（微信获取手机号组件）
  - 用户协议与隐私政策链接
  - 版本号展示
- **界面布局**：
  - 顶部：应用Logo + 系统名称
  - 中部：微信一键登录按钮（大按钮，居中）
  - 底部：版本号 + 协议链接
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 微信一键登录 | — | 触发wx.login()获取code，后端换openid |
  | 获取手机号 | — | 微信获取手机号组件，绑定手机号 |

#### 交互流程要求

1. **页面加载流程**：页面加载时检查本地token是否有效→有效则直接跳转工作台→无效则显示登录页；展示应用Logo和系统名称，显示骨架屏占位
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：点击「微信一键登录」→ 触发wx.login()获取code → 后端换取openid → 若未绑定手机号则显示获取手机号按钮 → 点击获取手机号调用微信获取手机号组件 → 绑定成功后跳转工作台
4. **弹窗/弹层交互流程**：首次使用弹出用户协议与隐私政策确认弹窗→用户点击同意后继续登录流程；匹配失败时弹出提示"未找到关联信息，请联系管理员"
5. **行内操作流程**：点击协议链接→跳转协议详情页
6. **异常与错误处理**：微信授权失败显示"授权失败，请重试"；网络异常显示重试按钮；openid匹配失败提示联系管理员；离线状态下提示"网络不可用，请检查网络连接"
7. **联动/级联交互**：登录成功后自动加载权限集，根据权限渲染工作台功能入口
8. **权限控制交互表现**：登录前无法访问其他页面，所有页面跳转均需验证token有效性

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 应用Logo | `image` | mode="aspectFit"，宽度120px |
| 微信一键登录按钮 | `button` | open-type="getPhoneNumber"，type="primary"，size="default" |
| 获取手机号按钮 | `button` | open-type="getPhoneNumber"，type="default" |
| 协议链接 | `navigator` | url="/pages/agreement/index" |
| 版本号 | `text` | font-size="12px"，color="#999" |
| 确认弹窗 | `uni-popup` | type="dialog"，:mask-click="false" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 微信授权 | wx.login()必须返回有效code | "微信授权失败，请重试" |
| 手机号绑定 | 必须获取微信手机号组件返回的有效手机号 | "获取手机号失败，请重试" |
| 用户协议 | 首次登录必须同意协议 | "请先同意用户协议与隐私政策" |
| 人员匹配 | openid必须关联系统人员信息 | "未找到关联信息，请联系管理员" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），按钮宽度max-width=320px居中
- **横竖屏适配策略**：竖屏为默认布局；横屏时Logo缩小，按钮宽度自适应
- **手势交互规范**：登录按钮可点击区域≥44px；协议链接可点击区域≥44px
- **安全区域**：底部按钮适配底部安全区，padding-bottom=env(safe-area-inset-bottom)

### 页面2：工作台首页

- **页面路径**：`/pages/workbench/index`
- **页面元素**：
  - 用户头像 + 姓名 + 角色
  - 功能入口网格（根据角色动态渲染）
  - 消息通知红点提示
  - 今日关键指标简卡
- **查询条件**：无
- **列表字段**：无
- **界面布局**：
  - 顶部：用户信息栏（头像 + 姓名 + 角色 + 消息入口）
  - 中部：功能入口网格（2列×N行，按角色动态显示）
    - 维修人员：我的工单、消息通知
    - 巡检人员：今日巡检、异常上报
    - 保洁人员：今日保洁、异常反馈
    - 主管：工单分配、审批中心、统计概览
    - 管理员：报修管理、巡检管理、保洁管理、考勤管理、评价管理、组织架构
  - 底部：底部Tab栏（工作台、消息、我的）
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 各功能入口 | 按角色 | 根据权限集动态显示/隐藏 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取用户信息及权限集→根据权限动态渲染功能入口网格→显示骨架屏占位→数据返回后渲染用户信息栏和功能入口
2. **查询/筛选交互流程**：无手动筛选，功能入口根据角色权限自动过滤显示
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：点击消息入口→跳转消息通知列表页；功能入口红点提示为系统推送自动标记
5. **行内操作流程**：点击功能入口→跳转对应功能页面；点击消息入口→跳转消息列表；底部Tab切换工作台/消息/我的
6. **异常与错误处理**：权限加载失败显示重试按钮；网络异常显示错误提示；离线时显示缓存的功能入口但提示"数据可能不是最新"
7. **联动/级联交互**：功能入口数量与权限集联动，角色变更后重新渲染入口网格
8. **权限控制交互表现**：无权限的功能入口不显示；不同角色看到不同的功能入口集合

9. **H1 防重复请求(强制)**：功能入口点击后做轻量防抖（300ms），避免重复跳转；权限集加载请求pending期间不重复发；下拉刷新时abort前一次请求后重发
10. **H2 超时配置(强制)**：获取用户信息及权限集GET请求超时15s；>3s显示wx.showLoading("加载中...")；超时后提示"加载超时，请下拉刷新"+重试按钮
11. **H8 反馈(建议)**：数据加载成功无额外toast（静默渲染）；加载失败wx.showToast({icon:'none', title:'数据加载失败'}); 禺线模式wx.showToast({icon:'none', title:'数据可能不是最新'})

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 用户信息栏 | `view` + `image` + `text` | flex布局，头像40px圆形 |
| 功能入口网格 | `uni-grid` | :column="2"，:showBorder="false" |
| 功能入口项 | `uni-grid-item` | 点击跳转对应页面 |
| 红点提示 | `uni-badge` | :content="count"，type="error" |
| 消息入口 | `uni-icons` | type="notification"，size="24" |
| 底部Tab栏 | `uni-tabbar` | 3个Tab：工作台/消息/我的 |
| 今日指标卡片 | `uni-card` | mode="center"，简洁数字展示 |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 用户信息 | 必须返回有效的用户信息 | "获取用户信息失败，请下拉刷新" |
| 权限集 | 必须返回有效的权限数据 | "权限加载失败，请重新登录" |
| 功能入口 | 至少有一个可访问的功能入口 | "暂无可用功能，请联系管理员" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），功能入口网格宽度自适应
- **横竖屏适配策略**：竖屏2列网格；横屏改为3~4列网格，用户信息栏水平展开
- **手势交互规范**：功能入口可点击区域≥44px；底部Tab可点击区域≥48px；支持下拉刷新
- **安全区域**：底部Tab栏适配底部安全区，padding-bottom=env(safe-area-inset-bottom)

### 页面3：个人信息页

- **页面路径**：`/pages/profile/index`
- **页面元素**：
  - 头像（可点击查看大图）
  - 姓名（只读）
  - 手机号（脱敏显示，可修改）
  - 所属物业公司（只读）
  - 所属班组（只读）
  - 角色信息（只读）
  - 退出登录按钮
- **查询条件**：无
- **列表字段**：无
- **界面布局**：
  - 顶部：头像（居中，大尺寸）
  - 中部：信息列表（Label + Value形式）
  - 底部：退出登录按钮（红色文字）
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 修改手机号 | — | 弹出微信获取手机号组件 |
  | 退出登录 | — | 清除本地token，跳转登录页 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取当前用户个人信息→渲染头像、姓名、手机号、所属公司/班组/角色
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：点击修改手机号→弹出微信获取手机号组件→获取新手机号→调用接口更新→更新成功提示"手机号修改成功"
4. **弹窗/弹层交互流程**：点击头像→弹出大图预览；退出登录→弹出确认弹窗"确定要退出登录吗？"
5. **行内操作流程**：点击修改手机号→调用微信手机号组件；点击退出登录→确认后清除token跳转登录页
6. **异常与错误处理**：信息加载失败显示重试；手机号修改失败提示错误信息；退出登录清除本地缓存失败则强制跳转
7. **联动/级联交互**：手机号修改成功后同步更新页面显示和本地缓存
8. **权限控制交互表现**：所有登录用户均可访问；部分信息只读不可编辑

9. **H1 防重复请求(强制)**：修改手机号按钮点击后loading态+disabled；退出登录按钮点击后立即disabled防止重复触发；手机号更新请求pending期间禁止重复调用微信组件
10. **H2 超时配置(强制)**：手机号更新接口POST请求超时30s；>3s显示wx.showLoading("正在更新...")；超时后提示"请求超时，请重试"+重试按钮
11. **H3 操作确认(强制)**：退出登录必须使用uni-popup(type="dialog")弹出确认弹窗"确定要退出登录吗？退出后需重新登录"，含后果说明；用户确认后才执行清除token和跳转
12. **H4 脏数据检测(强制)**：修改手机号操作前对当前用户信息做深拷贝快照(JSON.parse(JSON.stringify(userInfo)))；页面卸载onUnload时检测isDirty，若有未保存的修改弹出提示
13. **H7 文件上传(建议)**：本页面不涉及文件上传
14. **H8 反馈(建议)**：手机号修改成功wx.showToast({icon:'success', title:'手机号修改成功'})；修改失败wx.showToast({icon:'none', title:'修改失败原因'}); 退出登录成功无需toast静默跳转

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 头像 | `image` | mode="aspectFill"，80px圆形，@click预览大图 |
| 信息列表 | `uni-list` + `uni-list-item` | :showArrow="false"，右侧为值 |
| 修改手机号 | `button` | open-type="getPhoneNumber"，type="default" |
| 退出登录 | `button` | type="warn"，size="default" |
| 确认弹窗 | `uni-popup` | type="dialog"，确认退出/取消 |
| 大图预览 | `uni-popup` | type="center"，图片全屏预览 |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 手机号 | 必须为11位有效手机号 | "手机号格式不正确" |
| 头像 | 点击预览需有效URL | — |
| 退出确认 | 必须用户二次确认 | — |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），信息列表宽度自适应
- **横竖屏适配策略**：竖屏垂直布局；横屏信息列表水平分组展示
- **手势交互规范**：头像可点击区域≥44px；修改手机号按钮≥44px；退出登录按钮≥44px
- **安全区域**：底部退出按钮适配底部安全区

### 页面4：消息通知列表

- **页面路径**：`/pages/message/list`
- **页面元素**：
  - 消息分类Tab（全部 / 工单 / 审批 / 系统）
  - 消息列表
  - 未读标记红点
  - 全部标记已读按钮
- **查询条件**：
  | 条件 | 类型 | 说明 |
  |------|------|------|
  | 分类 | Tab切换 | 全部/工单/审批/系统 |
- **列表字段**：
  | 字段 | 说明 |
  |------|------|
  | 消息标题 | 通知标题 |
  | 消息摘要 | 内容前30字 |
  | 消息时间 | 相对时间（如"5分钟前"） |
  | 已读标记 | 红点显示未读 |
  | 消息类型图标 | 不同类型不同图标 |
- **界面布局**：
  - 顶部：分类Tab
  - 中部：消息列表（左图标 + 中标题摘要 + 右时间 + 未读红点）
  - 底部：全部标记已读按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 全部标记已读 | — | 将所有未读消息标为已读 |
  | 点击消息 | — | 跳转到对应业务详情页 |

#### 交互流程要求

1. **页面加载流程**：页面加载时请求消息列表→显示骨架屏→数据返回后渲染分类Tab和消息列表；默认显示"全部"分类
2. **查询/筛选交互流程**：点击分类Tab切换消息类别→重新加载对应分类的消息列表；支持滚动加载更多
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：无弹窗
5. **行内操作流程**：点击消息→标记该消息已读→跳转对应业务详情页；点击「全部标记已读」→批量标记所有未读消息
6. **异常与错误处理**：消息加载失败显示重试；网络异常显示错误提示；离线时显示缓存消息并提示"离线模式"
7. **联动/级联交互**：Tab切换与列表数据联动；标记已读后红点数量实时更新
8. **权限控制交互表现**：所有登录用户均可访问；消息内容根据权限控制跳转详情页的可见性

9. **H1 防重复请求(强制)**：「全部标记已读」按钮点击后loading态+disabled；Tab切换请求pending时不重复发；上拉加载更多时分页请求使用requestTask，新请求时abort前一次；下拉刷新时abort进行中的列表请求
10. **H2 超时配置(强制)**：消息列表GET请求超时15s；标记已读POST请求超时30s；列表加载>3s保持骨架屏；超时后提示"请求超时，请下拉刷新"+重试按钮
11. **H3 操作确认(强制)**：本页面无删除等危险操作，「全部标记已读」为低风险操作可不加确认
12. **H6 批量限制(建议)**：「全部标记已读」为批量操作，操作前检查未读数量，>50条时提示"未读消息较多，确认全部标记？"再执行
13. **H8 反馈(建议)**：标记已读成功wx.showToast({icon:'success', title:'已全部标记已读'})；消息加载失败wx.showToast({icon:'none', title:'消息加载失败'}); 无未读消息时提示"暂无未读消息"

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 分类Tab | `uni-segmented-control` | :current="currentTab"，:values="['全部','工单','审批','系统']" |
| 消息列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=true |
| 未读红点 | `uni-badge` | :content="1"，type="error"，size="small" |
| 消息类型图标 | `uni-icons` | type="notification/chat/settings"，size="22" |
| 全部标记已读 | `button` | type="default"，size="mini" |
| 下拉刷新 | `uni-refresher` | @onRefresh回调，threshold=45px |
| 上拉加载 | `uni-load-more` | :status="loadingStatus" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 消息列表 | 加载失败时允许重试 | "消息加载失败，请下拉刷新重试" |
| 分类Tab | 切换时重新请求数据 | — |
| 全部标记已读 | 须有未读消息才可操作 | "暂无未读消息" |

#### 响应式布局

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

### 页面5：数据补录申请页

- **页面路径**：`/pages/supplement/apply`
- **页面元素**：
  - 补录模块选择（报修/巡检/保洁/考勤）
  - 补录原因（下拉选择：蓝牙失灵/定位失败/系统异常/其他）
  - 补录说明（多行文本，最多200字）
  - 证明材料上传（照片，最多3张）
  - 补录数据表单（根据选择的模块动态渲染）
- **查询条件**：无
- **列表字段**：无
- **界面布局**：
  - 顶部：补录模块选择（下拉选择器）
  - 中部：补录原因 + 说明 + 上传证明
  - 下部：补录数据表单（动态）
  - 底部：提交按钮
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 提交申请 | — | 提交补录申请，等待主管审核 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取补录模块字典→渲染模块选择器
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：选择补录模块→渲染对应的动态表单→选择补录原因→填写补录说明→上传证明材料→点击提交申请→确认弹窗→提交成功提示"补录申请已提交，等待主管审核"
4. **弹窗/弹层交互流程**：提交前弹出确认弹窗"确认提交补录申请？"；上传照片时可选择拍照或从相册选择
5. **行内操作流程**：选择补录模块→动态渲染对应表单字段；点击上传区域→调起相机/相册
6. **异常与错误处理**：网络异常提交失败提示"提交失败，请重试"；图片上传失败提示重传；离线时数据暂存本地，联网后自动提交
7. **联动/级联交互**：补录模块选择与动态表单联动，不同模块显示不同字段
8. **权限控制交互表现**：所有登录用户均可提交补录申请；提交后状态为待审核，不可重复提交同一条

9. **H1 防重复请求(强制)**：提交申请按钮点击后:loading="true"且disabled；表单提交请求pending期间禁用提交按钮和返回操作；使用requestTask管理提交请求
10. **H2 超时配置(强制)**：补录模块字典GET请求超时15s；提交补录POST请求超时30s；图片上传超时60s；>3s wx.showLoading("正在提交..."); 超时后提示"请求超时，请重试"+重试按钮
11. **H3 操作确认(强制)**：提交前必须弹出uni-popup确认弹窗"确认提交补录申请？提交后将等待主管审核"，含后果说明
12. **H4 脏数据检测(强制)**：页面进入时对表单初始值做深拷贝快照；离开页面onUnload/onHide时检测表单是否有填写内容(isDirty)，若有已填写内容但未提交则弹出提示"有未提交的内容，确定离开吗？"
13. **H6 批量限制(建议)**：证明材料最多3张（已在校验规则限制），超出时提示"证明材料最多上传3张"
14. **H7 文件上传(建议)**：证明材料使用wx.chooseMedia选择图片，限制最多3张；单张≤10MB，格式白名单jpg/jpeg/png；上传时显示进度回调(uni-file-picker内置)；上传失败提示具体错误原因
15. **H8 反馈(建议)**：提交成功wx.showToast({icon:'success', title:'补录申请已提交，等待主管审核'}); 提交失败wx.showToast({icon:'none', title:'提交失败原因'}可显示多文字); 网络异常wx.getNetworkType检测后提示+重试按钮

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 补录模块选择 | `uni-data-select` | v-model="module"，:localdata="moduleList" |
| 补录原因选择 | `uni-data-select` | v-model="reason"，:localdata="reasonList" |
| 补录说明 | `uni-easyinput` | type="textarea"，maxlength="200"，:showWordLimit="true" |
| 证明材料上传 | `uni-file-picker` | limit="3"，file-mediatype="image"，:auto-upload="true" |
| 动态表单 | `uni-forms` | :modelValue="formData"，:rules="rules" |
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
| 确认弹窗 | `uni-popup` | type="dialog"，确认提交/取消 |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 补录模块 | 必选 | "请选择补录模块" |
| 补录原因 | 必选 | "请选择补录原因" |
| 补录说明 | 必填，最多200字 | "请填写补录说明" / "补录说明不能超过200字" |
| 证明材料 | 最多3张 | "证明材料最多上传3张" |
| 动态表单 | 根据模块动态校验 | 根据具体字段提示 |

#### 响应式布局

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

### 页面6：通讯录页

- **页面路径**：`/pages/contacts/index`
- **页面元素**：
  - 搜索框
  - 按班组分组显示联系人
  - 联系人信息卡片
- **查询条件**：
  | 条件 | 类型 | 说明 |
  |------|------|------|
  | 搜索关键词 | 输入框 | 按姓名/手机号搜索 |
- **列表字段**：
  | 字段 | 说明 |
  |------|------|
  | 头像 | 联系人头像 |
  | 姓名 | 联系人姓名 |
  | 角色 | 联系人角色 |
  | 手机号 | 脱敏显示，点击可拨打 |
  | 班组 | 所属班组 |
- **界面布局**：
  - 顶部：搜索框
  - 中部：按班组分组的联系人列表
    - 班组标题（灰色背景）
    - 联系人卡片（左头像 + 中姓名角色 + 右手机号图标）
- **操作按钮**：
  | 按钮 | 权限 | 说明 |
  |------|------|------|
  | 拨打电话 | — | 点击手机号直接拨打 |

#### 交互流程要求

1. **页面加载流程**：页面加载时获取联系人数据→按班组分组→渲染分组列表
2. **查询/筛选交互流程**：输入搜索关键词→实时过滤联系人（按姓名/手机号匹配）→无匹配结果显示"未找到联系人"
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：无弹窗
5. **行内操作流程**：点击手机号图标→调用wx.makePhoneCall拨打电话；滚动列表浏览不同班组的联系人
6. **异常与错误处理**：联系人加载失败显示重试；拨号失败提示"拨号失败"；离线时显示缓存数据
7. **联动/级联交互**：搜索关键词与列表过滤联动，输入即过滤
8. **权限控制交互表现**：所有登录用户均可访问；只能查看本公司/班组人员

9. **H1 防重复请求(强制)**：搜索输入做防抖处理(300ms)避免频繁过滤；联系人列表加载请求pending期间不重复发；拨打电话按钮点击后短暂disabled防止连击
10. **H2 超时配置(强制)**：联系人列表GET请求超时15s；>3s显示加载骨架屏；超时后提示"加载超时，请重试"+重试按钮
11. **H6 批量限制(建议)**：本页面无批量操作
12. **H8 反馈(建议)**：联系人加载成功静默渲染；加载失败wx.showToast({icon:'none', title:'联系人加载失败'}); 拨号失败wx.showToast({icon:'none', title:'拨号失败，请重试'})

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 搜索框 | `uni-search-bar` | placeholder="搜索姓名/手机号"，@confirm="search" |
| 班组分组 | `uni-section` | :title="groupName"，type="line" |
| 联系人列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=false |
| 头像 | `image` | mode="aspectFill"，40px圆形 |
| 手机号图标 | `uni-icons` | type="phone"，size="22"，color="#007AFF" |
| 拨打电话 | `button` | @click="makePhoneCall"，open-type="contact" |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 搜索关键词 | 最少2个字符才触发搜索 | "请输入至少2个字符" |
| 手机号 | 脱敏显示中间4位 | — |
| 联系人列表 | 加载失败允许重试 | "加载失败，请重试" |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），联系人列表宽度自适应
- **横竖屏适配策略**：竖屏垂直列表；横屏可双列展示联系人卡片
- **手势交互规范**：联系人项可点击区域≥44px；拨打电话图标≥44px；搜索框≥44px
- **安全区域**：底部适配底部安全区

### 页面7：版本更新提示弹窗

- **页面路径**：弹窗组件（非独立页面）
- **页面元素**：
  - 新版本号
  - 更新内容说明
  - 更新/取消按钮（小版本）
  - 强制更新按钮（大版本）
- **界面布局**：
  - 居中弹窗
  - 顶部：版本号
  - 中部：更新说明
  - 底部：操作按钮

#### 交互流程要求

1. **页面加载流程**：应用启动时调用后台接口获取最新版本号+最低兼容版本→对比当前版本→小版本更新弹窗提示→大版本更新强制弹窗
2. **查询/筛选交互流程**：无筛选操作
3. **表单填写与提交流程**：无表单提交操作
4. **弹窗/弹层交互流程**：小版本更新→弹窗显示更新内容+更新/取消按钮，用户可关闭；大版本更新→弹窗仅显示更新按钮，不可关闭
5. **行内操作流程**：点击更新→跳转微信小程序更新页面；点击取消→关闭弹窗继续使用（小版本）
6. **异常与错误处理**：版本检查接口失败静默处理，不影响正常使用；SDK依赖校验失败提示"应用需要更新"
7. **联动/级联交互**：版本号与更新内容联动展示
8. **权限控制交互表现**：所有用户均可见更新提示

9. **H1 防重复请求(强制)**：更新按钮点击后loading态+disabled防止重复下载；版本检查请求pending期间不重复发送；使用requestTask管理版本检查接口
10. **H2 超时配置(强制)**：版本检查GET接口超时15s；>3s显示wx.showLoading("检查更新中..."); 接口超时或失败静默处理不影响正常使用
11. **H3 操作确认(强制)**：小版本更新弹窗需明确展示更新内容+更新/取消选项；大版本更新弹窗仅显示更新按钮不可关闭，强制用户更新
12. **H8 反馈(建议)**：版本检查成功且有新版本正常展示弹窗；已是最新版本无需提示；SDK校验失败wx.showToast({icon:'none', title:'应用需要更新'})

#### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 弹窗容器 | `uni-popup` | type="center"，:mask-click="false"（大版本）/ :mask-click="true"（小版本） |
| 版本号 | `text` | font-size="18px"，font-weight="bold" |
| 更新说明 | `scroll-view` | scroll-y=true，max-height="300rpx" |
| 更新按钮 | `button` | type="primary"，@click="updateApp" |
| 取消按钮 | `button` | type="default"，@click="closePopup"（仅小版本显示） |

#### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 版本号 | 必须为有效版本格式（x.y.z） | — |
| 更新内容 | 不能为空 | — |
| 最低兼容版本 | 必须为有效版本格式 | — |

#### 响应式布局

- **适配机型**：iPhone SE（375px）~ iPad mini（768px），弹窗宽度max-width=300px居中
- **横竖屏适配策略**：竖屏居中弹窗；横屏弹窗宽度适当增大
- **手势交互规范**：更新按钮≥44px；取消按钮≥44px；更新说明区域可滚动
- **安全区域**：弹窗内容不受安全区影响

## 需求追溯

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| MP-C-01 | 快捷登录 | 02-小程序端 §1 | 登录成功→加载权限集→渲染工作台 | 权限管理（角色分配） |
| MP-C-02 | 个人信息 | 02-小程序端 §1 | 修改手机号→更新sys_user | 通讯录 |
| MP-C-03 | 消息通知 | 02-小程序端 §1 | 点击消息→跳转业务详情 | 各业务模块（推送触发） |
| MP-C-04 | 数据补录申请 | 02-小程序端 §1 | 提交→触发补录审核→主管审批 | 各模块补录审核 |
| MP-C-05 | 版本更新提示 | 02-小程序端 §1 | 小版本→提示更新；大版本→强制更新 | 超管系统配置（版本管理） |
| MP-C-06 | 通讯录 | 02-小程序端 §1 | 点击拨打→调起手机拨号 | 组织架构（班组/人员） |

## 业务规则

1. **登录规则**（03-业务流转逻辑-小程序端 §1）：
   - 首次登录：微信授权获取openid → 绑定手机号 → 系统匹配物业公司+人员信息
   - 匹配成功：创建账号，进入工作台
   - 匹配失败：提示"未找到关联信息，请联系管理员"，无法使用
   - 再次登录：读取本地token → 有效则直接进入 → 无效则openid静默登录

2. **权限加载规则**（01-模块划分.md §5.3）：
   - 登录后获取角色及权限集（四级粒度）
   - 根据权限动态渲染：可见菜单项、页面内可见功能点、功能点可用动作、数据范围（行级隔离）

3. **Token管理**（06-项目技术要求.md §4.1）：
   - 小程序端存本地Storage，2小时过期
   - Token失效自动使用openid静默登录，刷新token

4. **版本更新规则**（03-业务流转逻辑-小程序端 §10）：
   - 启动时调用后台接口获取最新版本号 + 最低兼容版本
   - 版本一致：正常使用
   - 小版本更新（兼容）：提示"发现新版本，是否更新？"，用户可取消
   - 大版本更新（不兼容）：强制更新，引导前往微信更新小程序
   - SDK依赖校验：启动时校验蓝牙SDK、微信SDK等关键依赖版本

5. **消息通知规则**（01-模块划分.md §7）：
   - 通知场景：新工单、催单、审批、完工、异常上报等
   - 通知方式：小程序推送
   - 点击消息跳转对应业务详情

6. **数据补录规则**（06-项目技术要求.md §4.5）：
   - 补录数据必须标记 `is_supplement=true`
   - 补录申请需主管审核（Web+小程序均可）
   - 补录日志单独记录

## 状态流转

### 登录状态流转

```
未登录 ──[微信授权]──▶ 获取openid ──[绑定手机号]──▶ 匹配人员信息
                                                          │
                                              ┌───匹配成功───┐  ┌───匹配失败───┐
                                              │               │  │               │
                                              创建账号         提示联系管理员
                                              进入工作台       无法使用
```

### 补录申请状态流转

```
草稿 ──[提交]──▶ 待审核 ──[主管通过]──▶ 已通过（数据补录生效）
                         └──[主管驳回]──▶ 已驳回（通知申请人）
```