Fx66/src/components/Header.vue

<template>
  <header class="top-header-box" :class="{init:isHome===true&&scrollState===false}">
    <div class="top-header">
      <div class="header-logo">
        <img src="../assets/img/mainlogo.png" alt="FX66" v-show="isHome===true&&scrollState===false">
        <img src="../assets/img/logo2.png" alt="FX66" v-show="!(isHome===true&&scrollState===false)">
      </div>
      <ul class="header-line">
        <li :class="{active:$route.path=='/home'}" @click="golink('/home')"><span>首页</span></li>  
        <li :class="{active:$route.path=='/applyAgent'}" @click="golink('/applyAgent')">
          <span>申请经纪商</span>
          <i class="badge">HOT</i>
        </li>
      </ul>
      <div class="userMsg" v-show="userstate">
        <div class="item">
          <i class="iconfont icon-user"></i>
          <span>{{username}}</span>
        </div>
        <div class="item" @click="quit()">
          <i class="iconfont icon-tuichu"></i>
          <span>退出</span>
        </div>
      </div>
      <div class="userMsg" v-show="!userstate&&isHome===false">
        <div class="item">
          <span @click="golink('/home')">登录</span>
        </div>
        <div class="item">
          <span @click="golink('/home')">注册</span>
        </div>
      </div>
    </div>
  </header>
</template>
<script>
  import {getcookie,setcookie,deletecookie,loginOut} from '../assets/js/common.js'
  import bus from "../assets/js/bus.js"
  export default{
    data(){
      return{
        isHome:false,
        scrollState:false,
        userstate:false,
        username:""
      }
    },
    mounted(){
      this.$nextTick(()=>{
        if (this.$route.path=="/home") {
          this.isHome=true;
        };
        window.addEventListener("scroll",this.headerchange);
        this.currentPath=this.$route.path;
        let token = getcookie("token");//登录记号
        //此处负责刚进入页面时，进行获取用户名
        if (token) {
          this.userstate=true;
          this.username = getcookie("username");
        }else{
          this.userstate=false;
        }
        //此处负责登录时，刷新用户名
        var that = this;
        bus.$on("reUsername",function(){
          that.userstate=true;
          that.username=getcookie("username");
        })
      });
    },
    methods:{
      headerchange(){
        if (document.documentElement.scrollTop>0) {
          this.scrollState=true;
        }else{
          this.scrollState=false;
        }
      },
      golink(address){
        let token=getcookie('token');
        //如果已经登录允许跳转
        if (token) {
          //this.$router访问路由器，调用push方法完成路由跳转
          this.$router.push({path:address});
        }else{
          if (address=='/applyAgent') {
            //$notify是ele自带的一个全局方法，实现提示框的效果
            this.$notify({
              title:'提示',
              message:'请先登录',
              type:'warning',
              duration:'2000'
            });
          }
          else{
            //完成经纪商页面跳到首页
            this.$router.push({path:address});
          }
        }
      },
      quit(){
        loginOut(this)
      }
    }
  }
</script>
<style scoped>
  .top-header-box{
    position: fixed;
    background-color: #fff;
    width: 100%;
    z-index: 100;
    overflow: hidden;
    .top-header{
      width: 1200px;
      margin: 0 auto;
      text-align: left;
      .header-logo{
        width: 98px;
        float: left;
        height: 75px;
        display: flex;
        align-items: center;
        margin-right: 55px;
        img{
          width: 100%;
        }
      }
      .header-line{
        font-size: 14px;
        li{
          float: left;
          height: 75px;
          width: 118px;
          line-height: 75px;
          text-align: center;
          position: relative;
          color: #333;
          cursor: pointer;
          &.active{
            background-color: var(--text-color-active);
            color: #fff;
          }
          i{
            position: absolute;
            top: 8px;
            right: 0;
            width: 38px;
            height: 18px;
            line-height: 18px;
            background-color: #ff4e00;
            border-radius: 2px;
            font-size: 12px;
            color: #fff;
            &::after{
              content: '';
              width: 0;
              height: 0;
              position: absolute;
              z-index: -1;
              border-top: 14px solid #ff4e00;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              bottom: 0;
              left: 30%;
              margin-bottom: -8px;
              transform: rotateZ(30deg);
            }
          }
        }
      }
      .userMsg{
        float: right;
        line-height: 72px;
        color: #333;
        .item{
          float: left;
          font-size: 14px;
          cursor: pointer;
          &:nth-child(2){
            margin-left: 30px;
          }
        }
      }
    }
    &.init{
      background-color: rgba(0,0,0,.2);
      .header-line{
        li{
          color: #fff;
          &.active{
            background-color: #fff;
            color: var(--text-color-active);
          }
        }
      }
      .userMsg{
        color: #fff;
      }
    }
  }
</style>