默认头像

src/layout/components/HeaderWrap.vue

@@ -41,6 +41,31 @@ function handleReadNotice(){
 }
 const hasUnRead=ref(false)//是否有未读
 
+const userName=computed(()=>{
+  return localStorage.getItem('userName')
+})
+function resetpwd() {
+  router.push('/system/resetPwd')
+}
+
+function logout() {
+  ElMessageBox.confirm(
+    '确认退出吗?',
+    '提示',
+    { type: 'warning', }
+  ).then(() => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('userName')
+    router.replace('/login')
+  }).catch()
+}
+function handleCommand(command){
+    const commandMap = {
+        'logout':logout,
+        'resetpwd':resetpwd
+    }
+    commandMap[command]()
+}
 
 </script>
 
@@ -68,6 +93,19 @@ const hasUnRead=ref(false)//是否有未读
       </template>
       <NoticeWrap @change="e=>hasUnRead=e"/>
     </el-popover>
+    <!-- 用户信息 -->
+    <el-dropdown @command="handleCommand">
+        <div class="system-user-box">
+            <img src="@/assets/imgs/default_user.png">
+            {{ userName||'清风好物俱乐部' }}
+        </div>
+        <template #dropdown>
+        <el-dropdown-menu>
+            <el-dropdown-item command="resetpwd">修改密码</el-dropdown-item>
+            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+        </template>
+    </el-dropdown>
   </div>
 </template>
 
@@ -113,5 +151,14 @@ const hasUnRead=ref(false)//是否有未读
       right: -2px;
     }
   }
+  .system-user-box{
+    display: flex;
+    align-items: center;
+    img{
+        width:28px;
+        height: 28px;
+        margin-right: 5px;
+    }
+  }
 }
 </style>

src/layout/components/LeftWrap.vue

@@ -84,10 +84,6 @@ function getNavList(){
 }
 getNavList()
 
-const userName=computed(()=>{
-  return localStorage.getItem('userName')
-})
-
 function resetpwd() {
   router.push('/system/resetPwd')
 }
@@ -157,17 +153,17 @@ function getMenuIcon(item){
         </el-sub-menu>
       </template>
     </el-menu>
-    <el-popover placement="right" :width="100" trigger="click">
+    <!-- <el-popover placement="right" :width="100" trigger="click">
       <template #reference>
         <div style="text-align: center">
-          <svg-icon name="person" size="24px" v-if="menuClose"></svg-icon>
+            123456
         </div>
       </template>
       <div>
         <div style="text-align:center;padding:10px 0;cursor: pointer;" @click="resetpwd">修改密码</div>
         <div style="text-align:center;padding:10px 0;cursor: pointer;" @click="logout">退出登录</div>
       </div>
-    </el-popover>
+    </el-popover> -->
   </div>
 </template>