“dzb”
2022-11-02 12fd8f6b04b26ef02bccdf5fd0bcefb59541c7f6
src/views/layout/components/Header/index.vue
@@ -11,12 +11,14 @@
    <div class="header-right">
      <!-- 搜索框 -->
      <div class="menu-right__item search">
        <el-input suffix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
        <el-input suffix-icon="el-icon-search" v-model="keyword" placeholder="请输入搜索内容"></el-input>
      </div>
      <!-- 登录用户 -->
      <div class="menu-right__item user" @mousemove="flag.user=true" @mouseleave="flag.user=false">
        <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
        <span style="padding: 0 5px;">Admin</span>
        <el-avatar :size="20" :src="user.icon" v-if="user.icon"></el-avatar>
        <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else>
        </el-avatar>
        <span style="padding: 0 5px;">{{user.username? user.username:'Admin'}}</span>
        <i class="el-icon-arrow-down"></i>
        <!-- 用户操作 -->
        <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false">
@@ -91,6 +93,7 @@
        user: false,
        message: false
      },
      user: '',
      menuMessageList: [
        {
          label: '全部消息',
@@ -112,8 +115,12 @@
          num: 10,
          id: '4m'
        },
      ]
      ],
      keyword: '',
    };
  },
  created() {
    this.getLoginInfo();
  },
  methods: {
    // 退出功能
@@ -123,10 +130,9 @@
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.removeItem('token');
        sessionStorage.removeItem('tokenHead');
        sessionStorage.clear();
        this.$router.push({ path: "/login" })
      }).catch(err=>{
      }).catch(err => {
        console.log(err);
      })
    },
@@ -140,6 +146,23 @@
        }
      })
    },
    // 获取登录用户信息
    getLoginInfo() {
      const info = JSON.parse(sessionStorage.getItem('user'));
      if (info) {
        this.user = info;
      } else {
        const name = sessionStorage.getItem('name');
        this.$axios({
          method: 'get',
          url: 'sccg/admin/info?name=' + name,
        })
          .then(res => {
            sessionStorage.setItem('user', JSON.stringify(res.data));
            this.user = res.data;
          })
      }
    }
  }
};
</script>
@@ -167,7 +190,8 @@
        display: block;
        line-height: 40px;
        width: 100%;
        &:hover{
        &:hover {
          cursor: pointer;
          color: #fff;
        }
@@ -215,7 +239,7 @@
        position: absolute;
        top: 60px;
        width: 120px;
        z-index: 3000;
        .user-card__item {
          padding: 5px 0;
@@ -248,7 +272,7 @@
        top: 60px;
        width: 180px;
        left: -50px;
        z-index: 3000;
        :deep(.el-card__body) {
          padding: 0;
        }