添加公司名称并添加下拉列表展示

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
+  companyName: state => state.user.companyName,
   badge: state => state.user.badge,
   name: state => state.user.name,
   introduction: state => state.user.introduction,

src/store/modules/user.js

@@ -1,4 +1,5 @@
 import { login, register, logout, getInfo } from '@/api/login';
+import { userInfo } from '@/api/home/info';
 import { getMsgCount } from '@/api/home/news';
 import { getToken, setToken, removeToken } from '@/utils/auth';
 
@@ -9,6 +10,7 @@ const user = {
     name: '',
     userId: '',
     avatar: '',
+    companyName: '',
     roles: [],
     permissions: []
   },
@@ -23,6 +25,9 @@ const user = {
     SET_NAME: (state, name) => {
       state.name = name;
     },
+    SET_COMNAME: (state, companyName) => {
+      state.companyName = companyName;
+    },
     SET_USER_ID: (state, userId) => {
       state.userId = userId;
       localStorage.setItem('web-userId', userId);
@@ -92,7 +97,14 @@ const user = {
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
         getInfo(state.token)
-          .then(res => {
+          .then(async res => {
+            const { data } = await userInfo();
+            if (data) {
+              // 公司名
+              commit('SET_COMNAME', data.companyName);
+            } else {
+              commit('SET_COMNAME', data);
+            }
             const user = res.data;
             const avatar = !res.data.icon
               ? require('@/assets/image/profile.jpg')

src/views/components/header/index.vue

@@ -9,17 +9,25 @@
           <i class="mark">|</i>
           <el-button type="text" @click="handlePage(false)">注册</el-button>
         </div>
-        <div
-          class="login_btn avatar-wrapper"
-          v-else
-          @click="handlePath('/mine')"
-        >
-          <!-- <span>
-            <i>20</i>
-          </span> -->
-          <el-badge :value="badge" :max="10" class="item">
-            <img :src="avatar" class="user-avatar" />
-          </el-badge>
+        <div class="login_btn avatar-wrapper" v-else>
+          <span style="margin-right:20px">{{
+            companyName == '' || !companyName ? '请先完善个人信息' : companyName
+          }}</span>
+          <el-popover placement="bottom" trigger="hover">
+            <div class="pop">
+              <div @click="handlePath('/mine/info')">基本信息</div>
+              <div @click="handlePath('/mine/account')">账户安全</div>
+              <div @click="handlePath('/mine/ollection')">我的收藏</div>
+              <div @click="handlePath('/mine/news')">
+                消息通知
+                <span></span>
+              </div>
+              <div @click="logout">退出登录</div>
+            </div>
+            <el-badge :value="badge" :max="10" class="item" slot="reference">
+              <img :src="avatar" class="user-avatar" />
+            </el-badge>
+          </el-popover>
         </div>
         <div class="img2_box">
           <img src="@/assets/image/02.png" alt="" />
@@ -47,7 +55,7 @@
 import { mapGetters } from 'vuex';
 export default {
   computed: {
-    ...mapGetters(['avatar', 'badge'])
+    ...mapGetters(['avatar', 'companyName', 'badge'])
   },
   data() {
     return {
@@ -55,6 +63,17 @@ export default {
     };
   },
   methods: {
+    async logout() {
+      this.$confirm('确定退出账号吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('LogOut').then(() => {
+          location.href = '/';
+        });
+      });
+    },
     handlePage(flag) {
       this.$router.push({ path: '/login', query: { status: flag } });
     },
@@ -101,11 +120,14 @@ export default {
       }
     }
     .avatar-wrapper {
-      text-align: right;
+      // text-align: right;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
       .el-badge {
         // display: block;
         // position: relative;
-        top: 10px;
+        // top: 10px;
         right: 8px;
         border: 1px solid #ffa32c;
         border-radius: 50%;
@@ -117,6 +139,9 @@ export default {
           height: 40px;
           border-radius: 50%;
         }
+        .user-avatar:hover {
+          border: 1px solid #ffa32c;
+        }
       }
     }
     .img2_box {
@@ -148,4 +173,30 @@ export default {
     }
   }
 }
+.el-popover {
+  .pop {
+    text-align: center;
+    font-size: 16px;
+    line-height: 34px;
+    div:nth-child(4) {
+      position: relative;
+    }
+    div {
+      span {
+        position: absolute;
+        top: 50%;
+        right: 15px;
+        transform: translateY(-50%);
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background-color: red;
+      }
+    }
+    div:hover {
+      background-color: #ccc;
+      cursor: pointer;
+    }
+  }
+}
 </style>

src/views/home/info.vue

@@ -236,6 +236,7 @@ export default {
           });
           this.form.labelIdList = ids;
           updateCompanyUser(this.form).then(({ message }) => {
+            store.commit('SET_COMNAME', this.form.companyName);
             this.msgSuccess(message);
             this.getUserInfo();
           });

src/views/home/mine.vue

@@ -56,8 +56,15 @@ export default {
   },
   watch: {
     $route(newVal, oldVal) {
+      console.log(newVal);
       if (newVal.path === '/mine/info') {
         this.index = 0;
+      } else if (newVal.path === '/mine/account') {
+        this.index = 1;
+      } else if (newVal.path === '/mine/ollection') {
+        this.index = 2;
+      } else if (newVal.path === '/mine/news') {
+        this.index = 3;
       }
     }
   },