|
@@ -2,7 +2,7 @@
|
|
|
<!-- 用户信息下拉菜单 -->
|
|
<!-- 用户信息下拉菜单 -->
|
|
|
<el-dropdown @visible-change="handleVisibleChange">
|
|
<el-dropdown @visible-change="handleVisibleChange">
|
|
|
<div class="user-name-box">
|
|
<div class="user-name-box">
|
|
|
- {{ userName }}
|
|
|
|
|
|
|
+ {{ userInfo.nickname }}
|
|
|
<!-- 根据下拉框状态显示不同的箭头图标 -->
|
|
<!-- 根据下拉框状态显示不同的箭头图标 -->
|
|
|
<el-icon v-if="!dropdownVisible" class="arrow-icon"><ArrowDownBold /></el-icon>
|
|
<el-icon v-if="!dropdownVisible" class="arrow-icon"><ArrowDownBold /></el-icon>
|
|
|
<el-icon v-else class="arrow-icon"><ArrowUpBold /></el-icon>
|
|
<el-icon v-else class="arrow-icon"><ArrowUpBold /></el-icon>
|
|
@@ -19,10 +19,23 @@
|
|
|
<p>已激活课程</p>
|
|
<p>已激活课程</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="bottom-inner-box">
|
|
<div class="bottom-inner-box">
|
|
|
- <div v-for="(course, index) in courses" :key="index" class="course-item">
|
|
|
|
|
|
|
+ <div class="course-item">
|
|
|
<div class="check-circle">✓</div>
|
|
<div class="check-circle">✓</div>
|
|
|
- <span>{{ course.name }}</span>
|
|
|
|
|
- <span>{{ course.expireDate }}{{ course.expireDate !== '无权限' ? '到期' : '' }}</span>
|
|
|
|
|
|
|
+ <span>通识课:</span>
|
|
|
|
|
+ <span v-if="userInfo.isRegister">{{ userInfo.courseExpireTime ? userInfo.courseExpireTime+' 到期' : '无权限' }}</span>
|
|
|
|
|
+ <span v-else>{{userInfo.roleRouteSet.includes(ROLE_KEY.COURSE) ? '已开通' : '无权限'}}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="course-item">
|
|
|
|
|
+ <div class="check-circle">✓</div>
|
|
|
|
|
+ <span>编程课:</span>
|
|
|
|
|
+ <span v-if="userInfo.isRegister">{{ userInfo.blocklyExpireTime ? userInfo.blocklyExpireTime+' 到期' : '无权限' }}</span>
|
|
|
|
|
+ <span v-else>{{userInfo.roleRouteSet.includes(ROLE_KEY.BLOCKLY) ? '已开通' : '未开通'}}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="course-item">
|
|
|
|
|
+ <div class="check-circle">✓</div>
|
|
|
|
|
+ <span>AI实验课:</span>
|
|
|
|
|
+ <span v-if="userInfo.isRegister">{{ userInfo.aiCourseExpireTime ? userInfo.aiCourseExpireTime+' 到期' : '无权限' }}</span>
|
|
|
|
|
+ <span v-else>{{userInfo.roleRouteSet.includes(ROLE_KEY.AI_COURSE) ? '已开通' : '未开通'}}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -58,32 +71,25 @@ import { homeRoutes } from "@/router/index.js"
|
|
|
import {activateInviteCode, getUserInfo} from '@/api/user/user.js'
|
|
import {activateInviteCode, getUserInfo} from '@/api/user/user.js'
|
|
|
// 图标
|
|
// 图标
|
|
|
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
|
|
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
|
|
|
-
|
|
|
|
|
-// 激活码响应式变量
|
|
|
|
|
-const activationCode = ref('')
|
|
|
|
|
-
|
|
|
|
|
-// 课程列表响应式变量
|
|
|
|
|
-const courses = ref([])
|
|
|
|
|
-
|
|
|
|
|
-// 用户名响应式变量
|
|
|
|
|
-const userName = ref()
|
|
|
|
|
|
|
+import {formatLocalDateTime} from "@/api/date/dateUtil.js";
|
|
|
|
|
+import {CONFIG, ROLE_KEY, setCacheWithExpiry} from "@/utils/roleUtils.js";
|
|
|
|
|
+// 激活码
|
|
|
|
|
+const activationCode = ref("")
|
|
|
|
|
+// 用户名信息变量
|
|
|
const userInfo = ref({
|
|
const userInfo = ref({
|
|
|
userId: null,
|
|
userId: null,
|
|
|
userName: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME,
|
|
userName: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME,
|
|
|
- nickname: '',
|
|
|
|
|
- courseExpireTime: '',
|
|
|
|
|
- blocklyExpireTime: '',
|
|
|
|
|
- aiCourseExpireTime: ''
|
|
|
|
|
|
|
+ nickname: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME,
|
|
|
|
|
+ isRegister: true,
|
|
|
|
|
+ roleRouteSet: [],
|
|
|
|
|
+ courseExpireTime: null,
|
|
|
|
|
+ blocklyExpireTime: null,
|
|
|
|
|
+ aiCourseExpireTime: null,
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 下拉框可见性状态
|
|
// 下拉框可见性状态
|
|
|
const dropdownVisible = ref(false)
|
|
const dropdownVisible = ref(false)
|
|
|
|
|
|
|
|
-// 更新用户名
|
|
|
|
|
-const updateUserName = () => {
|
|
|
|
|
- userInfo.value.userName = localStorage.getItem('userName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
// 处理下拉框显示/隐藏事件
|
|
// 处理下拉框显示/隐藏事件
|
|
|
const handleVisibleChange = (visible) => {
|
|
const handleVisibleChange = (visible) => {
|
|
|
dropdownVisible.value = visible
|
|
dropdownVisible.value = visible
|
|
@@ -91,6 +97,8 @@ const handleVisibleChange = (visible) => {
|
|
|
|
|
|
|
|
// 获取用户信息
|
|
// 获取用户信息
|
|
|
const fetchUserInfo = async () => {
|
|
const fetchUserInfo = async () => {
|
|
|
|
|
+ userInfo.value.userName = localStorage.getItem('userName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME
|
|
|
|
|
+
|
|
|
try {
|
|
try {
|
|
|
const userId = localStorage.getItem('userId');
|
|
const userId = localStorage.getItem('userId');
|
|
|
// 检查userId是否存在
|
|
// 检查userId是否存在
|
|
@@ -99,24 +107,22 @@ const fetchUserInfo = async () => {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
const res = await getUserInfo(userId);
|
|
const res = await getUserInfo(userId);
|
|
|
|
|
+
|
|
|
console.log('用户信息:', res);
|
|
console.log('用户信息:', res);
|
|
|
if (res.code === 0 && res.data) {
|
|
if (res.code === 0 && res.data) {
|
|
|
- // 更新用户名
|
|
|
|
|
- userName.value = res.data.username;
|
|
|
|
|
- localStorage.setItem('userName', res.data.username);
|
|
|
|
|
- // 更新课程信息
|
|
|
|
|
- courses.value = [
|
|
|
|
|
- { name: '课程权限', expireDate: res.data.courseExpireTime || '无权限' },
|
|
|
|
|
- { name: 'AI编程课', expireDate: res.data.blocklyExpireTime || '无权限' },
|
|
|
|
|
- { name: 'AI实验课', expireDate: res.data.aiCourseExpireTime || '无权限' }
|
|
|
|
|
- ];
|
|
|
|
|
- // 将课程权限信息存储在localStorage中,以便其他组件使用
|
|
|
|
|
- const coursePermissions = {
|
|
|
|
|
- '课程权限': res.data.courseExpireTime || '无权限',
|
|
|
|
|
- '编程课': res.data.blocklyExpireTime || '无权限',
|
|
|
|
|
- 'AI实验课': res.data.aiCourseExpireTime || '无权限'
|
|
|
|
|
- };
|
|
|
|
|
- localStorage.setItem('coursePermissions', JSON.stringify(coursePermissions));
|
|
|
|
|
|
|
+ let user = res.data;
|
|
|
|
|
+
|
|
|
|
|
+ userInfo.value = {...user}
|
|
|
|
|
+ if (user.isRegister) {
|
|
|
|
|
+ userInfo.value.courseExpireTime = formatLocalDateTime(user.courseExpireTime);
|
|
|
|
|
+ userInfo.value.blocklyExpireTime = formatLocalDateTime(user.blocklyExpireTime);
|
|
|
|
|
+ userInfo.value.aiCourseExpireTime = formatLocalDateTime(user.aiCourseExpireTime);
|
|
|
|
|
+ }
|
|
|
|
|
+ localStorage.setItem('userName', user.nickname || user.userName);
|
|
|
|
|
+ localStorage.setItem('userInfo', user.nickname || user.userName);
|
|
|
|
|
+
|
|
|
|
|
+ //缓存用户角色路由
|
|
|
|
|
+ setCacheWithExpiry(CONFIG.USER_ROLE_ROUTE_KEY, user.roleRouteSet);
|
|
|
}
|
|
}
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error('获取用户信息失败:', error);
|
|
console.error('获取用户信息失败:', error);
|
|
@@ -158,8 +164,6 @@ const handleActivation = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- // 初始化用户名
|
|
|
|
|
- updateUserName()
|
|
|
|
|
// 获取用户信息
|
|
// 获取用户信息
|
|
|
fetchUserInfo()
|
|
fetchUserInfo()
|
|
|
// storage事件监听器,监听其他标签页对localStorage的修改
|
|
// storage事件监听器,监听其他标签页对localStorage的修改
|