# 用户身份确认页面

## 页面概述

用户身份确认页面 (`page-user-confirm`) 是一个受企微路由守卫保护的单页面应用，用于展示当前企业微信用户的详细身份信息，并允许用户确认其身份。

``` ts
import { WxworkSDK } from 'fmode-ng/core';
import { FmodeParse } from 'fmode-ng/parse';
import { WxworkAuthGuard } from 'fmode-ng';
```

## 访问路径

- **路径1**: `/:cid/auth/user-confirm`
- **路径2**: `/:cid/auth/:appId/user-confirm`

**示例**:
- 脑控科技身份确认 https://app.fmode.cn/dev/crm/auth/E4KpGvTEto/user-confirm
- 映三色身份确认 https://app.fmode.cn/dev/crm/auth/cDL6R1hgSi/user-confirm

## 路由守卫

使用 `WxworkAuthGuard` 企微路由守卫，确保：

1. **获取路由参数**:
   - `cid`: 公司帐套ID (Company.objectId)
   - `appId`: 应用ID (可选)

2. **识别用户身份**:
   - 企业员工: 通过 `UserId` 识别，关联到 `Profile` 表
   - 外部用户: 通过 `external_userid` 或 `OpenId` 识别，关联到 `UserSocial` 表

3. **数据持久化**:
   - localStorage 存储位置: `{{cid}}/USERINFO`
   - 获取函数: `wxsdk.getUserinfo()`

## 功能模块

### 1. 用户信息加载

#### Profile (企业员工)

从 Parse Server 的 `Profile` 表查询用户信息，查询条件：
- `userId`: 企业员工的微信UserId
- `company`: Pointer 指向当前 Company (cid)

**展示字段**:
- `name`: 姓名
- `avatar`: 头像
- `mobile`: 手机号
- `email`: 邮箱
- `department`: 部门
- `position`: 职位
- `corpName`: 企业名称
- `isVerified`: 身份确认状态
- `userId`: 员工ID

#### UserSocial (外部用户)

从 Parse Server 的 `UserSocial` 表查询用户信息，查询条件：
- `externalUserId`: 外部用户的微信external_userid
- `company`: Pointer 指向当前 Company (cid)

**展示字段**:
- `name`: 姓名
- `avatar`: 头像
- `mobile`: 手机号
- `externalName`: 外部名称
- `externalType`: 外部用户类型
- `corpName`: 企业名称
- `isVerified`: 身份确认状态
- `externalUserId`: 外部用户ID

### 2. 用户信息展示

页面采用卡片式布局，包含以下区域：

#### 头像区域
- 居中展示用户头像（圆形，100px）
- 无头像时显示默认占位图标
- 显示用户姓名
- 显示用户类型标签（企业员工/外部用户）

#### 身份状态徽章
- **已确认**: 绿色徽章，显示"已确认身份"和对勾图标
- **待确认**: 黄色徽章，显示"待确认"

#### 详细信息列表
根据用户类型展示不同的字段信息，每项包含：
- 图标标识
- 字段标题
- 字段值

### 3. 身份确认功能

#### 确认按钮状态
- **可点击**: 用户未确认 && 用户记录存在 && 未加载中
- **禁用**: 用户已确认 || 用户记录不存在 || 加载中

#### 确认流程
1. 点击"确认身份"按钮
2. 更新对应表记录的 `isVerified` 字段为 `true`
3. 显示成功提示
4. 更新页面状态为"已确认身份"

#### 异常处理
- **用户记录不存在**: 提示"系统中未找到您的用户记录，请联系管理员"
- **确认失败**: 显示错误提示信息

## 数据模型

### Profile 表

| 字段 | 类型 | 说明 |
|------|------|------|
| userId | String | 企业员工微信UserId |
| company | Pointer<Company> | 所属企业 |
| name | String | 姓名 |
| avatar | String | 头像URL |
| mobile | String | 手机号 |
| email | String | 邮箱 |
| department | String | 部门 |
| position | String | 职位 |
| corpName | String | 企业名称 |
| isVerified | Boolean | 身份确认状态 |

### UserSocial 表

| 字段 | 类型 | 说明 |
|------|------|------|
| externalUserId | String | 外部用户微信external_userid |
| company | Pointer<Company> | 所属企业 |
| name | String | 姓名 |
| avatar | String | 头像URL |
| mobile | String | 手机号 |
| externalName | String | 外部名称 |
| type | String | 外部用户类型 |
| corpName | String | 企业名称 |
| isVerified | Boolean | 身份确认状态 |

## UI/UX 设计

### 布局特点
- 响应式设计，适配移动端和桌面端
- 居中布局，最大宽度600px
- 卡片式信息展示，清晰分层
- 图标辅助，增强信息可读性

### 交互状态
1. **加载状态**: 显示加载动画和提示文字
2. **信息展示**: 完整展示用户信息
3. **确认成功**: 按钮变为禁用状态，徽章变为绿色
4. **错误状态**: 显示友好的错误提示

### 视觉元素
- **主色调**: Ionic 默认主题色 (#3880ff)
- **成功色**: 绿色 (success)
- **警告色**: 黄色 (warning)
- **字体大小**:
  - 标题: 20px
  - 用户名: 24px
  - 正文: 16px
  - 辅助文本: 14px

## 技术实现

### 核心依赖
- **Angular**: 独立组件架构
- **Ionic**: UI 组件库
- **fmode-ng**:
  - `WxworkSDK`: 企微SDK
  - `FmodeParse`: Parse Server 数据服务

### 主要方法

#### `ngOnInit()`
- 获取路由参数 (cid, appId)
- 调用 `loadUserInfo()` 加载用户信息

#### `loadUserInfo()`
- 初始化 WxworkSDK
- 从 localStorage 获取缓存的用户信息
- 根据用户类型调用相应的加载方法

#### `loadProfileInfo(userId: string)`
- 查询 Profile 表
- 构建 UserInfo 对象

#### `loadUserSocialInfo(cachedInfo: any)`
- 查询 UserSocial 表
- 构建 UserInfo 对象

#### `confirmIdentity()`
- 更新 isVerified 字段为 true
- 刷新页面状态
- 显示成功提示

## 使用场景

### 场景1: 首次登录确认
企业员工首次通过企业微信进入系统时，需要确认其身份信息，系统记录确认状态。

### 场景2: 外部用户验证
外部客户通过企业微信接入时，展示其在系统中的信息，确认身份后才能使用完整功能。

### 场景3: 信息核对
管理员可以引导用户访问此页面，核对和更新用户信息。

## 扩展性

### 未来可能的增强功能
1. 允许用户编辑部分信息（如手机号、邮箱）
2. 添加人脸识别或其他二次验证
3. 记录确认时间和IP地址
4. 支持批量身份确认
5. 增加身份过期和重新确认机制

## 注意事项

1. **路由守卫**: 必须配置 `WxworkAuthGuard`，否则无法获取用户信息
2. **数据隐私**: 敏感信息需要适当脱敏显示
3. **错误处理**: 网络异常、Parse查询失败等都需要友好提示
4. **状态同步**: isVerified 状态更新后需要同步到其他使用该字段的模块
5. **权限控制**: 未确认身份的用户可能需要限制部分功能访问

## 文件结构

```
src/modules/auth/page-user-confirm/
├── page-user-confirm.component.ts       # 组件逻辑
├── page-user-confirm.component.html     # 模板
├── page-user-confirm.component.scss     # 样式
└── page-user-confirm.component.spec.ts  # 单元测试
```

## 路由配置

```typescript
// app.routes.ts
{
    path:"auth/:cid/user-confirm",
    canActivate:[WxworkAuthGuard],
    loadComponent:()=>import("../modules/auth/page-user-confirm/page-user-confirm.component")
        .then((m)=>m.PageUserConfirmComponent)
}
```