|
|
@@ -1,8 +1,11 @@
|
|
|
<template>
|
|
|
<!-- 用户信息下拉菜单 -->
|
|
|
- <el-dropdown>
|
|
|
+ <el-dropdown @visible-change="handleVisibleChange">
|
|
|
<div class="user-name-box">
|
|
|
{{ userName }}
|
|
|
+ <!-- 根据下拉框状态显示不同的箭头图标 -->
|
|
|
+ <el-icon v-if="!dropdownVisible" class="arrow-icon"><ArrowDownBold /></el-icon>
|
|
|
+ <el-icon v-else class="arrow-icon"><ArrowUpBold /></el-icon>
|
|
|
</div>
|
|
|
<template #dropdown>
|
|
|
<el-dropdown-menu class="dropdown-menu user-popover-content">
|
|
|
@@ -19,7 +22,7 @@
|
|
|
<div v-for="(course, index) in courses" :key="index" class="course-item">
|
|
|
<div class="check-circle">✓</div>
|
|
|
<span>{{ course.name }}</span>
|
|
|
- <span>{{ course.expireDate }}</span>
|
|
|
+ <span>{{ course.expireDate }}{{ course.expireDate !== '无权限' ? '到期' : '' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -53,6 +56,8 @@ import { logoutLogic } from '@/utils/loginUtils.js'
|
|
|
import { homeRoutes } from "@/router/index.js"
|
|
|
// 用户信息接口
|
|
|
import { getUserInfo } from '@/api/user/user.js'
|
|
|
+// 图标
|
|
|
+import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
|
|
|
|
|
|
// 激活码响应式变量
|
|
|
const activationCode = ref('')
|
|
|
@@ -63,11 +68,19 @@ const courses = ref([])
|
|
|
// 用户名响应式变量
|
|
|
const userName = ref(import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME)
|
|
|
|
|
|
+// 下拉框可见性状态
|
|
|
+const dropdownVisible = ref(false)
|
|
|
+
|
|
|
// 更新用户名
|
|
|
const updateUserName = () => {
|
|
|
userName.value = localStorage.getItem('userName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME
|
|
|
}
|
|
|
|
|
|
+// 处理下拉框显示/隐藏事件
|
|
|
+const handleVisibleChange = (visible) => {
|
|
|
+ dropdownVisible.value = visible
|
|
|
+}
|
|
|
+
|
|
|
// 获取用户信息
|
|
|
const fetchUserInfo = async () => {
|
|
|
try {
|
|
|
@@ -160,6 +173,13 @@ onMounted(() => {
|
|
|
border-radius: rpx(15);
|
|
|
padding: rpx(0) rpx(10);
|
|
|
min-width: rpx(20);
|
|
|
+ gap: rpx(3);
|
|
|
+}
|
|
|
+
|
|
|
+// 箭头图标样式
|
|
|
+.arrow-icon {
|
|
|
+ font-size: rpx(7);
|
|
|
+ transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
// 用户信息弹框样式
|