peixue-dev/Archive/[一次性]多身份功能-动态角色显示完成-2026-02-28.md

# 多身份功能 - 动态角色显示完成

> 完成时间：2026-02-28  
> 功能：从数据库动态加载用户角色并支持切换

---

## ✅ 已完成功能

### 1. 个人中心"当前角色"区域改造

**位置：** `peidu/uniapp/src/pages/user/index.vue`

**功能特性：**
- ✅ 点击"当前角色"展开/收起角色列表
- ✅ 从数据库 `user_roles` 表动态加载用户的所有角色
- ✅ 显示主身份标记（带"主身份"徽章和左侧绿色条）
- ✅ 当前角色高亮显示（绿色背景 + 勾选图标）
- ✅ 点击角色切换，调用后端API
- ✅ 底部显示"申请其他身份"入口

---

## 📋 修改内容

### 1. 模板部分（Template）

```vue
<!-- 角色切换（仅登录后显示） -->
<view v-if="isLoggedIn" class="role-switch-section">
  <view class="section-header" @click="toggleRoleList">
    <view class="section-left">
      <uni-icons class="section-icon" type="person" size="18" color="#2d9687"></uni-icons>
      <text class="section-title">当前角色</text>
    </view>
    <view class="section-right">
      <text class="current-role">{{ roleName }}</text>
      <text class="arrow" :class="{ expanded: showRoleList }" decode="true">▼</text>
    </view>
  </view>
  
  <!-- 角色列表（折叠展开） -->
  <view v-if="showRoleList && userRoles.length > 0" class="role-list-container">
    <view 
      v-for="role in userRoles" 
      :key="role.roleType"
      class="role-item"
      :class="{ active: currentRole === getRoleValue(role.roleType), primary: role.isPrimary }"
      @click="switchToRole(role.roleType)"
    >
      <text class="role-icon">{{ getRoleIcon(role.roleType) }}</text>
      <view class="role-info">
        <text class="role-name">{{ getRoleLabel(role.roleType) }}</text>
        <text v-if="role.isPrimary" class="primary-badge">主身份</text>
      </view>
      <text v-if="currentRole === getRoleValue(role.roleType)" class="check-icon">✓</text>
    </view>
    
    <!-- 申请新身份入口 -->
    <view class="apply-role-btn" @click="goToApplyRole">
      <text class="plus-icon">+</text>
      <text>申请其他身份</text>
    </view>
  </view>
</view>
```

### 2. 数据部分（Data）

新增字段：
```javascript
showRoleList: false,      // 角色列表展开状态
userRoles: [],            // 用户的所有角色（从数据库加载）
```

### 3. 方法部分（Methods）

新增方法：
```javascript
// 加载用户的所有角色（从数据库）
async loadUserRoles()

// 切换角色列表展开/收起
toggleRoleList()

// 切换到指定角色
async switchToRole(roleType)

// 跳转到申请身份页面
goToApplyRole()

// 角色类型转换（数据库字段 -> 前端值）
getRoleValue(roleType)

// 获取角色图标
getRoleIcon(roleType)

// 获取角色名称
getRoleLabel(roleType)
```

### 4. 生命周期

修改 `onShow`：
```javascript
onShow() {
  this.checkLoginStatus()
  if (this.isLoggedIn) {
    this.loadUserData()
    this.loadUserRoles() // 新增：加载用户的所有角色
  }
}
```

---

## 🎨 界面效果

### 折叠状态
```
┌─────────────────────────────────┐
│ 👤 当前角色        家长 ▼       │
└─────────────────────────────────┘
```

### 展开状态（单身份用户）
```
┌─────────────────────────────────┐
│ 👤 当前角色        家长 ▲       │
├─────────────────────────────────┤
│ 👨‍👩‍👧 家长 [主身份]        ✓    │
│                                 │
│ + 申请其他身份                  │
└─────────────────────────────────┘
```

### 展开状态（多身份用户）
```
┌─────────────────────────────────┐
│ 👤 当前角色        家长 ▲       │
├─────────────────────────────────┤
│ 👨‍👩‍👧 家长 [主身份]        ✓    │
│ 👨‍🏫 陪伴员                      │
│ 💼 分销员                        │
│                                 │
│ + 申请其他身份                  │
└─────────────────────────────────┘
```

---

## 🔄 数据流程

### 1. 加载角色流程
```
用户打开个人中心
↓
onShow() 触发
↓
loadUserRoles() 调用
↓
userStore.loadAllRoles() 调用后端API
↓
GET /api/user/roles/list
↓
返回用户所有角色
↓
显示在界面上
```

### 2. 切换角色流程
```
用户点击某个角色
↓
switchToRole(roleType) 调用
↓
userStore.switchRole(roleType) 调用后端API
↓
POST /api/user/roles/switch
↓
后端更新主身份
↓
前端刷新页面
↓
跳转到首页
```

---

## 📊 角色映射关系

| 数据库字段 | 前端值 | 显示名称 | 图标 |
|-----------|--------|---------|------|
| parent    | user   | 家长    | 👨‍👩‍👧 |
| teacher   | teacher| 陪伴员  | 👨‍🏫 |
| manager   | manager| 管理师  | 👔 |
| distributor| distributor| 分销员 | 💼 |
| provider  | provider| 服务商 | 🎓 |

---

## 🎯 核心特性

1. **动态加载** - 从数据库 `user_roles` 表读取，有几个角色就显示几个
2. **主身份标记** - 主身份显示"主身份"徽章和左侧绿色条
3. **当前角色高亮** - 当前使用的角色有绿色背景和勾选图标
4. **折叠展开** - 点击标题栏展开/收起，箭头旋转动画
5. **切换功能** - 点击角色调用后端API切换主身份
6. **申请入口** - 底部提供"申请其他身份"入口

---

## 🧪 测试步骤

### 1. 单身份用户测试
```
1. 使用家长账号登录（13800138000）
2. 进入个人中心
3. 点击"当前角色"
4. 应该只显示"家长"一个角色
5. 点击"申请其他身份"跳转到申请页面
```

### 2. 多身份用户测试
```
1. 在数据库中为用户添加多个角色
2. 登录该账号
3. 进入个人中心
4. 点击"当前角色"
5. 应该显示所有角色
6. 主身份有"主身份"标记
7. 当前角色有绿色背景和勾选图标
8. 点击其他角色切换
9. 切换成功后跳转到首页
```

### 3. 切换角色测试
```
1. 展开角色列表
2. 点击非当前角色
3. 显示"切换中..."加载提示
4. 切换成功显示"切换成功"提示
5. 自动跳转到首页
6. 首页显示对应角色的功能
```

---

## ⚠️ 注意事项

1. **后端必须先启动** - 否则无法加载角色数据
2. **数据库表必须存在** - `user_roles` 表必须已创建
3. **API接口必须正常** - `/api/user/roles/list` 和 `/api/user/roles/switch` 必须可用
4. **前端必须重新编译** - 修改后需要在HBuilderX中重新编译

---

## 📁 相关文件

- `peidu/uniapp/src/pages/user/index.vue` - 个人中心页面（已修改）
- `peidu/uniapp/store/user.js` - 用户状态管理（已有loadAllRoles和switchRole方法）
- `peidu/uniapp/src/pages/user/apply-role.vue` - 申请身份页面（已创建）

---

## 🎉 完成标志

- ✅ 个人中心显示"当前角色"区域
- ✅ 点击展开显示所有角色
- ✅ 主身份有特殊标记
- ✅ 当前角色高亮显示
- ✅ 点击角色可以切换
- ✅ 底部有"申请其他身份"入口
- ✅ 折叠展开动画流畅

---

## 🚀 下一步

1. 启动后端服务
2. 使用HBuilderX重新编译前端
3. 测试角色加载和切换功能
4. 如有问题，查看控制台日志

---

**预计测试时间：** 15分钟  
**难度等级：** ⭐⭐ 中等  
**风险等级：** ⭐ 极低