HM21St_Page_User/src/components/Header.vue

<template>
  <!-- 顶部登录导航 -->
  <div
    class="LoginNav"
    :class="[type=='black'?'LoginNav-black':'']"
    :style="{background : headerBg}"
  >
    <div class="logo">
      <div
        class="logo-name"
        @click="cutLoginReg"
      >
      <!-- 二十一世纪英语智慧阅读平台 -->
      <!-- <img src="../assets/logo.png" /> -->
        <svg-icon icon-class="logo"></svg-icon>
      </div>
      <ul class="logo-projectlist">
        <li
          v-for="(itemI, indexI) in projectList"
          :key="indexI"
          :class="indexI == LoginNavIndex ? 'active' : ''"
          @click="handleCommand(indexI)"
        >
          {{ itemI.name }}
          <!-- <img
            class="active-img"
            v-if="indexI == LoginNavIndex"
            src="../assets/common/header_active.png"
          /> -->
        </li>
      </ul>
    </div>
    <div class="userName">
      <!-- <div :style="{background : userBg}" @click="handleLink('search','')"><img src="../assets/common/icon-search.png" /><label>搜索</label></div> -->
      <!-- <div :style="{background : userBg}"><img src="../assets/common/icon-shopping.png" /><label>购物车</label></div> -->
      <!-- <div :style="{background : userBg}" @click="handleLink('peraonal','like')"><img src="../assets/common/icon-like.png" /><label>收藏夹</label></div> -->
      <!-- <div :style="{background : userBg}" @click="handleLink('peraonal','')"><img src="../assets/common/icon-user.png" /></div> -->
      <div @click="handleLink('search','')" title="搜索"><svg-icon icon-class="search"></svg-icon></div>
      <!-- <div @click="handleLink('peraonal','like')" title="收藏夹"><svg-icon icon-class="like-line"></svg-icon></div> -->
      <div class="login" v-if="!userShow">
        <a @click="toLogin">登录</a>
        <a @click="handleLink('register','')">注册</a>
      </div>
      <el-dropdown @command="handleChange" v-else>
        <span class="el-dropdown-link">
            <el-image
                :src="touxiang?touxiang:userMessage.image_url?userMessage.image_url:require('../assets/avatar.png')"
                fit="cover" style="width:24px;height:24px;margin:0 8px">
            </el-image>
            <span class="name">{{userMessage.user_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command='personal'>个人中心</el-dropdown-item>
            <el-dropdown-item command='orgManage' v-if="userMessage.is_org_manager==='true'">机构管理</el-dropdown-item>
            <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
        :visible.sync="loginFlag"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="504px"
        class="login-dialog"
        v-if="loginFlag">
        <login @cancelLogin="cancelLogin" :toUrl="toUrl" :linkType="linkType"></login>
    </el-dialog>
  </div>
</template>

<script>
import { removeToken } from "@/utils/auth";
import Cookies from "js-cookie";
//import { setI18nLang } from "@/utils/i18n";
import { removeSession } from "@/utils/role";
import Login from "@/views/login.vue"
import { getToken } from '@/utils/auth'
export default {
  components: { Login },
  name: "LayoutHeader",
  props: ['headerBg', 'headerBorder', 'userBg', 'LoginNavIndex', 'type', 'touxiang'],
  data() {
    return {
      projectList: [
        {
          name: '商城',
          url: '/bookCity'
        },
        {
            name: '书架',
            url: '/bookShelf'
        },
        {
          name: '测评',
          url: '/evaluation'
        },
        {
          name: '词典',
          url: '/dictionary'
        },
        {
          name: '小记者',
          url: '/reporter'
        }
      ],
      userMessage: getToken()?JSON.parse(getToken()):null,
      userShow: Cookies.get('HM21St_User_Token')?true:false,
      loginFlag: false,
      toUrl: '',
      linkType: '',
    };
  },
  watch: {},
  computed: {

  },
  methods: {
    // 切换项目
    handleCommand(command) {
        this.toUrl = ''
        if(this.projectList[command].url!=='/bookShelf'){
            this.$router.push({
                path: this.projectList[command].url,
            });
        }else{
            if(this.userMessage){
                this.$router.push({
                    path: this.projectList[command].url,
                });
            }else{
                this.toUrl = this.projectList[command].url
                this.loginFlag = true
            }
        }
      
    },
    handleLogin(url,type){
        this.toUrl = url
        this.loginFlag = true
        this.linkType = type
    },
    // 切换登录的注册
    cutLoginReg() {
      window.location.href = "/";
    },
    QuitLogin() {
      removeToken();
      removeSession("SysList");
      Cookies.remove("registerToken");
      Cookies.remove("HM21St_User_Token")
      this.userShow = false;
      this.userMessage = null;
      window.location.href = "/";
    },
    handleLink(link,type){
        let url  = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
        this.$router.push({
            path: '/'+link,
            query: {
                headerConfig: encodeURIComponent(url),
                type:encodeURIComponent(type),
                id:link==='orgManage'?this.userMessage.org_id:''
            },
        }); 
    },
    handleChange(com){
        if(com==='personal'){
            this.handleLink('peraonal','')
        }else if(com==='logout'){
            this.QuitLogin()
        }else if(com==='orgManage'){
            this.handleLink('orgManage','')
        }
    },
    // 去登录
    toLogin(){
        this.loginFlag = true
    },
    // 关闭登录弹窗
    cancelLogin(){
        this.loginFlag = false
    }
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
};
</script>

<style lang="scss" scoped>
.LoginNav {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background: #383838;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 999;
  padding: 0 24px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  .logo {
    display: flex;
    align-items: center;
    padding-right: 40px;
    .logo-name {
      cursor: pointer;
      font-size: 0;
      z-index: 2;
      .svg-icon{
        width: 204px;
        height: 32px;
        color: #ffffff;
      }
    }
    .logo-projectlist {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      justify-content: center;
      li {
        padding: 5px 20px;
        color: rgba(255, 255, 255, 0.48);
        font-size: 16px;
        line-height: 54px;
        cursor: pointer;
        white-space: nowrap;
        position: relative;
        &:hover {
          color: #ffffff;
        }
        &.active {
          color: #ffffff;
          font-weight: 500;
        }
        .active-img {
          position: absolute;
          bottom: -1px;
          left: 50%;
          width: 24px;
          margin-left: -12px;
        }
      }
    }
  }
  .userName {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
    > div {
      cursor: pointer;
      display: flex;
      align-items: center;
    //   background: #242424;
    //   border-radius: 40px;
      padding: 0 8px;
      height: 40px;
      margin-left: 16px;
      color: rgba(255, 255, 255, 0.88);
      &.login{
        color: #FFFFFF;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        a{
            width: 60px;
            line-height: 32px;
            text-align: center;
            border-radius: 2px;
            &:hover{
                background: rgba(255, 255, 255, 0.12);
                color: rgba(255, 255, 255, 0.9);
            }
            &:focus{
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.7);
            }
        }
        :first-child{
            margin-right: 6px;
        }
      }
      img {
        width: 16px;
      }
      label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        // font-family: Harmony;
        margin-left: 8px;
      }
    //   &:last-child {
    //     border-radius: 20px;
    //     width: 40px;
    //     padding: 0 12px;
    //   }
    }
  }
  .el-dropdown{
    color: rgba(255, 255, 255, 0.88);
    .el-dropdown-link{
        display: flex;
        align-items: center;
    }
    .avatar{
        width: 24px;
        height: 24px;
        border-radius: 2px;
        margin: 0 8px;
    }
    .name{
        font-size: 14px;
        line-height: 22px;
    }
  }
  &-black{
    border-bottom-color: #ffffff;
    .svg-icon{
        color: rgba(0, 0, 0, 0.88) !important;
    }
    .logo-projectlist li{
        color: rgba(0, 0, 0, 0.56) !important;
        &:hover{
            color: rgba(0, 0, 0, 0.88) !important;
        }
    }
    .el-dropdown{
        color: #000000 !important;
    }
  }
}
</style>
<style lang="scss">
.LoginNav {
  .el-dropdown-menu__item {
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
      font-family: "sourceR";
      font-size: 16px;
    }
  }
  .el-menu--horizontal > .el-menu-item {
    height: 64px;
    line-height: 68px;
  }
  .el-dropdown {
    display: block;
    > span {
      font-family: "sourceR";
      font-size: 16px;
    }
  }
}
.projectList {
  &.el-dropdown-menu__item {
    line-height: 40px;
    display: flex;
    align-items: center;
    color: #000000;
    > img {
      top: 0;
    }
    > span {
      line-height: 40px;
      font-family: "sourceR";
    }
  }
  &:hover {
    background: rgba(255, 153, 0, 0.1) !important;
    color: #000 !important;
  }
  &.menuActive {
    background: #ff9900;
  }
}
.login-dialog{
   .el-dialog__header,.el-dialog__body{
        padding: 0;
    }
    .el-dialog{
        border: 1px solid #E5E6EB;
        box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        overflow: hidden;
    } 
}
</style>