290 lines
7.7 KiB
Markdown
290 lines
7.7 KiB
Markdown
# 多身份功能 - 动态角色显示完成
|
||
|
||
> 完成时间：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分钟
|
||
**难度等级：** ⭐⭐ 中等
|
||
**风险等级：** ⭐ 极低
|