|
|
# 通用功能
|
|
|
|
|
|
> 模块编码：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 ──[绑定手机号]──▶ 匹配人员信息
|
|
|
│
|
|
|
┌───匹配成功───┐ ┌───匹配失败───┐
|
|
|
│ │ │ │
|
|
|
创建账号 提示联系管理员
|
|
|
进入工作台 无法使用
|
|
|
```
|
|
|
|
|
|
### 补录申请状态流转
|
|
|
|
|
|
```
|
|
|
草稿 ──[提交]──▶ 待审核 ──[主管通过]──▶ 已通过（数据补录生效）
|
|
|
└──[主管驳回]──▶ 已驳回（通知申请人）
|
|
|
```
|