退出登录

src/views/home/jdcomponents/JDHeader.vue

@@ -3,21 +3,58 @@
     <!-- 顶部窄条 -->
     <div class="header-top">
       <div class="flex-between top-inner" :class="{ 'w': headerClass == 'header-indexEnterprise' }">
-        <div class="loc-wrap">
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            style="vertical-align: -2px; margin-right: 2px"
-          >
-            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-            <circle cx="12" cy="10" r="3"></circle>
-          </svg>
-          湖北
+        <div style="display: flex">
+          <div class="loc-wrap">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              style="vertical-align: -2px; margin-right: 2px"
+            >
+              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+              <circle cx="12" cy="10" r="3"></circle>
+            </svg>
+            湖北
+          </div>
+          <!-- 登录者公司下拉 (图2高奢重构) -->
+          <div class="nav-item has-dropdown company-dropdown">
+            <span class="dept-text">您好！{{ userInfo.customerName || '' }}</span>
+            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <!-- 👑 尊贵企业公司与用户信息面板 (图2大气重构) -->
+            <div class="dropdown-menu company-menu">
+              <div class="user-info-card flex">
+                <!-- 左侧头像与会员徽章 -->
+                <div class="avatar-area flex-column align-center">
+                  <div class="avatar-circle">
+                    <!-- 使用精致的 Joy 狗头像，若图片加载失败则自动fallback -->
+                    <img src="@/assets/images/pcdiy/logo2.png" alt="" class="avatar-img" />
+                  </div>
+                  <span class="member-gold-badge">企业会员</span>
+                </div>
+                <!-- 右侧详细信息 -->
+                <div class="info-area flex-column">
+                  <div class="user-row">
+                    账号名称：<span class="user-red-name">{{ userInfo.user?.nickName || '' }}</span>
+                  </div>
+                  <div class="company-row">归属公司：{{ userInfo.customerName || '' }}</div>
+                  <div class="dept-row">所属部门：{{ userInfo.user?.deptName || '' }}</div>
+                </div>
+              </div>
+              <!-- 底部操作区 -->
+              <div class="card-divider"></div>
+              <div class="action-bar flex-end">
+                <!-- <span class="action-txt-btn">切换登录</span> -->
+                <span class="action-txt-btn" @click="onlogout">退出</span>
+              </div>
+            </div>
+          </div>
         </div>
+
         <ul class="top-nav-links flex">
           <li @click="onPath('/order/orderManage')">我的订单</li>
           <li class="spacer"></li>
@@ -102,6 +139,14 @@ getPlatformConfigList({ configKey: 'servicePhone' }).then((res) => {
     }
   }
 });
+
+import { getInfo } from '@/api/login';
+const userInfo = ref<any>({});
+getInfo().then((res) => {
+  if (res.code == 200) {
+    userInfo.value = res.data;
+  }
+});
 const isFixed = ref(false);
 
 const handleScroll = () => {
@@ -116,6 +161,15 @@ onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll);
 });
 
+import { useUserStore } from '@/store/modules/user';
+const onlogout = () => {
+  useUserStore()
+    .logout()
+    .then(() => {
+      onPath('/login');
+    });
+};
+
 // 根据路由路径返回不同的 class
 const route = useRoute();
 const headerClass = computed(() => {
@@ -356,4 +410,196 @@ const headerClass = computed(() => {
     }
   }
 }
+
+/* 导航项通用样式 */
+.nav-item {
+  margin-left: 15px;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  color: #666;
+}
+.nav-item:hover {
+  color: #e1251b;
+  background: #f9f9f9;
+}
+
+/* 最右侧项微调，把 padding-right 设为 0 以保证与“我的采购单”右边缘完美垂直对齐 */
+.nav-item.last-item {
+  padding-right: 0 !important;
+}
+
+.red-link {
+  color: #e1251b !important;
+}
+.font-bold {
+  font-weight: bold;
+}
+
+/* 下拉小箭头 */
+.arrow {
+  width: 20px !important;
+  height: 20px !important;
+  font-size: 20px !important;
+  margin-left: 5px;
+  color: #a0a0a0;
+  transition:
+    transform 0.2s ease,
+    color 0.2s ease;
+  vertical-align: middle !important;
+  display: inline-block !important;
+}
+.has-dropdown:hover .arrow {
+  transform: rotate(180deg);
+  color: #e1251b;
+}
+
+/* ==================== 👑 悬停下拉浮现菜单 (高奢大气商务重构) ==================== */
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(8px); /* 留出 8px 精致桥接悬空格局 */
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.06); /* 超细呼吸细灰边框 */
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.08),
+    0 1px 4px rgba(0, 0, 0, 0.02); /* 高奢多层立体虚化投影 */
+  border-radius: 8px; /* 大气圆润 8px 圆角 */
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 10001;
+  min-width: 140px; /* 大气加宽 */
+  padding: 4px 0 !important; /* 紧凑设计：缩减上下边距，消除松垮感 */
+  box-sizing: border-box;
+}
+
+/* 加上桥接热区以保证悬浮进入顺畅无漂移 */
+.dropdown-menu::before {
+  content: '';
+  position: absolute;
+  top: -12px;
+  left: 0;
+  right: 0;
+  height: 12px;
+  background: transparent;
+}
+
+.has-dropdown:hover .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(2px);
+}
+
+/* 👑 1. 尊贵企业公司与用户信息面板样式 (图2高奢大气重塑) */
+.company-dropdown .dropdown-menu.company-menu {
+  width: 380px !important; /* 拓宽至高大气 380px 宽度，防止公司和部门换行 */
+  padding: 16px !important;
+  left: 0;
+  transform: translateY(8px);
+}
+.company-dropdown:hover .dropdown-menu.company-menu {
+  transform: translateY(2px);
+}
+
+.user-info-card {
+  width: 100% !important;
+  align-items: center !important;
+  gap: 16px !important;
+  box-sizing: border-box !important;
+}
+
+/* 左侧头像与黑金标签 */
+.avatar-area {
+  flex-shrink: 0 !important;
+  align-items: center !important;
+}
+.avatar-circle {
+  width: 56px !important;
+  height: 56px !important;
+  border-radius: 50% !important;
+  background: #fff5f5 !important;
+  border: 2px solid #fff1f0 !important; /* 精致红粉边框突显立体感 */
+  overflow: hidden !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.avatar-img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+}
+.member-gold-badge {
+  margin-top: 5px !important;
+  background: #222222 !important; /* 黑金质感 */
+  color: #fad18f !important; /* 尊贵金黄字 */
+  font-size: 10px !important;
+  font-weight: bold !important;
+  padding: 1px 7px !important;
+  border-radius: 10px !important;
+  border: 1px solid #333333 !important;
+  line-height: 1.2 !important;
+  white-space: nowrap !important;
+  transform: scale(0.9) !important;
+}
+
+/* 右侧公司与账号 */
+.info-area {
+  flex: 1 !important;
+  justify-content: center !important;
+  text-align: left !important;
+}
+.user-row {
+  font-size: 13.5px !important;
+  color: #555555 !important;
+  font-weight: 500 !important;
+  line-height: 1.4 !important;
+}
+.user-red-name {
+  color: #e1251b !important; /* 醒目优易红 */
+  font-weight: bold !important;
+}
+.company-row,
+.dept-row {
+  font-size: 12px !important;
+  color: #666666 !important;
+  margin-top: 5px !important;
+  line-height: 1.4 !important;
+  word-break: break-all !important;
+}
+
+/* 底部操作区细分割线 */
+.card-divider {
+  height: 1px !important;
+  background: rgba(0, 0, 0, 0.05) !important;
+  width: 100% !important;
+  margin: 8px 0 6px 0 !important; /* 深度紧缩：缩小间距 */
+}
+.action-bar {
+  width: 100% !important;
+  display: flex !important;
+  justify-content: flex-end !important;
+  gap: 16px !important;
+  height: 20px !important; /* 锁死精致高度 */
+  line-height: 20px !important;
+  margin-bottom: -4px !important; /* 精巧向上拉伸，消除下方残留的过大留白 */
+}
+.action-txt-btn {
+  font-size: 13.5px !important; /* 文字调大：极佳的辨识度 */
+  color: #666666 !important;
+  cursor: pointer !important;
+  transition: color 0.2s ease !important;
+  font-weight: 500 !important;
+}
+.action-txt-btn:hover {
+  color: #e1251b !important; /* Hover 时大红 */
+}
 </style>