keysass_portal/src/page/common/pagecomponent/commonheader.vue

<template>
  <div>
    <div class="fixhead">
      <div style="width: 1300px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;">
        <div @click="tishou" class="logoimg">
          <img src="/assets/loginreg/logo.png" alt="">
        </div>
        <div v-if='disnonelog' class='header'>
          <!-- <div v-if="menulist&&menulist.length>0"  class='headermenu'>
              <el-menu class="topmenuitem" active-text-color="#0066EB" mode="horizontal">
                <span v-for="(item, index1) in menulist" :key="index1">
                  <el-menu-item :index="item.link">
                    <a v-if="item.stepHref" :href="item.href" target="blank" >
                      <p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
                      <p v-else style="color:#0066EB">{{item.title}}</p>
                    </a>
                    <router-link v-else :to='item.link'>
                      <p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
                      <p v-else style="color:#0066EB">{{item.title}}</p>
                    </router-link>
                  </el-menu-item>
                  <el-submenu :index="item.link" v-if="item.submenu && item.submenu.length>0">
                      <el-menu-item v-for="(subitem, subkey) in item.submenu" :key="subkey" :index="subitem.link">
                        <a v-if="subitem.stepHref" :href="subitem.href" target="blank" >
                          <p v-if="!subitem.highlight" >{{subitem.title}}</p>
                          <p v-else style="color:#0066EB">{{subitem.title}}</p>
                        </a>
                        <router-link :to='subitem.link'>
                          <p v-if="!subitem.highlight">{{subitem.title}}</p>
                          <p v-else style="color:#0066EB">{{subitem.title}}</p>
                        </router-link>
                      </el-menu-item>
                    </el-submenu>
                </span>
              </el-menu>
            </div> -->
          <div v-if="menulist && menulist.length > 0" class='headermenu'>
            <div v-for="(item, key) in menulist" :key="key" class="topmenuitem">
              <a v-if="item.stepHref" :href="item.href" target="blank">
                <p class='menutitl' v-if="!item.highlight">{{ item.title }}</p>
                <p v-else style="color:#0066EB">{{ item.title }}</p>
              </a>
              <router-link v-else :to="item.link">
                <!-- <router-link v-else :to="item.link == '/market' ||item.link == '/college' ? '':item.link"> -->
                <p class='menutitl' v-if="!item.highlight">{{ item.title }}<i
                    v-if="item.submenu && item.submenu.length > 0" class="el-icon-caret-bottom"></i></p>
                <p v-else style="color:#0066EB">{{ item.title }}<i v-if="item.submenu && item.submenu.length > 0"
                    class="el-icon-caret-bottom"></i></p>

              </router-link>
              <div v-if="item.submenu && item.submenu.length > 0" class='submenuwarp'>
                <div v-for="(subitem, subkey) in item.submenu" :key="subkey" v-show="subitem.show">
                  <a v-if="item.stepHref" :href="subitem.href" target="blank">
                    <p class='menutitlChild' v-if="!subitem.highlight">{{ subitem.title }}</p>
                    <p v-else style="color:#0066EB">{{ subitem.title }}</p>
                  </a>
                  <router-link :to='subitem.link' class="submenop">
                    <p class='menutitlChild' v-if="!subitem.highlight">{{ subitem.title }}</p>
                    <p v-else style="color:#0066EB">{{ subitem.title }}</p>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if='disnonelog' class="worker">
          <div v-if='disnonelog' style="display:flex;font-size:14px;">
            <el-divider direction="vertical"></el-divider>
            <div v-if="token" style="display:flex;">
              <div class="permissions" @click="mypermissions('workbench')">
                <img style="margin-right:10px" src="/assets/home/gongzuotai.png" alt="">
                <p style="width:50px;">工作台</p>
              </div>


              <div class="permissions" @click="mypermissions('message')" style="margin-right:10px">
                <el-badge :value="messageCount" :max="100" :hidden="messageCount == 0"
                  :class="messageCount > 0 ? 'baggeitem' : 'baggeitemda'">
                  <img style="margin-right:5px" src="/assets/home/xiaoxi.png" alt="">
                </el-badge>
                <p style="margin-left:5px;width:65px;">站内消息</p>
              </div>
              <div class="predropdown">
                <el-dropdown trigger="click" placement='bottom'>
                  <div class="avatar-wrapper">
                    <img style="width:54px;height:54px;margin:13px 0 5px 0px;cursor:pointer;border-radius:50%"
                      :src="userinform.avatar" alt="">
                  </div>
                  <el-dropdown-menu slot="dropdown" style="top:66px!important">
                    <el-dropdown-item @click.native="mypermissions('imembers')">个人中心</el-dropdown-item>
                    <el-dropdown-item divided @click.native="logout">
                      <span>退出登录</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div v-else style="display:flex;align-items: center">
              <!-- <div class="loginbtn" @click="jump('log')">登录</div>
              <div class="regbtn" @click="jump('reg')">注册</div> -->
            </div>
          </div>

        </div>
        <div v-else style='display:flex;align-items:center;height:80px;margin-left:70%'>
          <img src="/assets/loginreg/dianhua.png" alt="">
          <p style="font-size: 18px;font-weight: bold;color: #595959;margin-left:10px">咨询热线：010-80750213</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import $ from 'jquery'
import { mapGetters } from "vuex";
import store from "@/store";
import { listMyMessageCount } from '@/api/system/message'
export default {
  props: ['menulist'],
  data() {
    return {
      searchcontent: '',
      disnonelog: true,
      messageCount: 0,
      cartCount: 0
    }
  },
  computed: {
    ...mapGetters(['token', 'logindate', 'avatar', 'userinform']),
    count() {
      return store.getters.messageCount;　　//需要监听的数据
    },
    cartCountW() {
      return store.getters.cartCount;　//需要监听的数据
    },
  },
  created() {
    if (this.token) {
      listMyMessageCount().then(response => {
        this.messageCount = response.data;
        this.cartCount = response.cartCount;
        store.commit('SET_MESSAGECOUNT', this.messageCount);
        store.commit('SET_CARTCOUNT', this.cartCount);
      }).catch(() => {
        //  console.log('请求失败')
      })
    }
  },
  watch: {
    $route: {
      handler(val, old) {
        if (!val.query.type) {
          this.disnonelog = true;
        } else {
          this.disnonelog = false;
        }
        if (this.menulist && this.menulist.length > 0) {
          // console.log('菜单栏',this.menulist)     
          if (val.name == 'home') {
            let activehome = this.menulist.filter(item => item.title == '首页')
            activehome[0].highlight = true
            // console.log('首页',activehome)
          } else {
            let activehome = this.menulist.filter(item => item.title == '首页')
            activehome[0].highlight = false
          }
          if (val.path.indexOf('/market') === 0) {
            let activeName = this.menulist.filter(item => item.title == '工具服务')
            activeName[0].highlight = true
            // console.log('工具市场',activeName)
          } else {
            let activeName = this.menulist.filter(item => item.title == '工具服务')
            activeName[0].highlight = false
          }


          if (val.path.indexOf('/crowdsourcing') === 0) {
            // console.log('众包市场路由')
            let activeNamecrowd = this.menulist.filter(item => item.title == '众包服务')
            activeNamecrowd[0].highlight = true
            // console.log('众包市场',activeNamecrowd)
          } else {
            let activeNamecrowd = this.menulist.filter(item => item.title == '众包服务')
            activeNamecrowd[0].highlight = false
          }
          if (val.path.indexOf('/ability') === 0) {
            // console.log('众包市场路由')
            let activeNamecrowd = this.menulist.filter(item => item.title == '人才服务')
            activeNamecrowd[0].highlight = true
            // console.log('众包市场',activeNamecrowd)
          } else {
            let activeNamecrowd = this.menulist.filter(item => item.title == '人才服务')
            activeNamecrowd[0].highlight = false
          }
          if (val.path.indexOf('/college') === 0) {
            let activecollege = this.menulist.filter(item => item.title == '培训服务')
            activecollege[0].highlight = true
            // console.log('培训学院',activecollege)
          } else {
            let activecollege = this.menulist.filter(item => item.title == '培训服务')
            activecollege[0].highlight = false
          }
          // if(val.path.indexOf('/news')===0){
          //   // console.log('行业动态')
          //   let activeindusty=this.menulist.filter(item=>item.title=='行业动态')
          //     activeindusty[0].highlight=true
          //     // console.log('众包市场',activeindusty)
          // }else{
          //   let activeindusty=this.menulist.filter(item=>item.title=='行业动态')
          //   activeindusty[0].highlight=false
          // }
          if (val.path.indexOf('/about') === 0) {
            let activeabout = this.menulist.filter(item => item.title == '关于我们')
            activeabout[0].highlight = true
            // console.log('关于我们',activeabout)
          } else {
            let activeabout = this.menulist.filter(item => item.title == '关于我们')
            activeabout[0].highlight = false
          }
        }
        // console.log('路由--', val,old)  
      },
      immediate: true
    },
    count(newVal, oldVal) {
      this.messageCount = newVal;
    },
    cartCountW(newVal, oldVal) {
      this.cartCount = newVal;
    }
  },
  mounted() {
    // console.log('this.disnonelog',this.disnonelog,this.token) 
  },
  destroyed() {

  },
  methods: {
    //跳转登录/注册
    jump(type) {
      this.$router.push(`/login?type=${type}`)
    },
    //logo跳转首页
    tishou() {
      this.$router.push('/')
    },
    //我的功能
    mypermissions(type) {
      let currentdata = Date.parse(new Date());
      let logindate = this.logindate;
      let timedifference = currentdata - (parseInt(logindate) + 432000000);
      if (timedifference > 0) {
        this.$confirm('登录状态失效，请您重新登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login?type=log')
        }).catch(() => {
          // console.log('取消')
        })
      } else {
        if (type == 'message') {
          this.$router.push('/console/message')
        } else if (type == 'shopping') {
          this.$router.push('/console/cart')
        } else if (type == 'workbench') {
          this.$router.push('/console/myparticipate')
        } else if (type == 'imembers') {
          this.$router.push('/console/profile')
        }
        // console.log('跳转对应的页面');        
      }
    },
    //退出登录
    logout() {
      this.$confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          // this.$router.push('/login?type=log')
        })
      })
    },
  }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0
}

.fixhead {
  position: fixed;
  top: 0;
  z-index: 99;
  background: #FFFFFF;
  width: 100%;
  box-shadow: 0 6px 9px 0 rgb(0 0 0 / 6%);
}

.reg {
  height: 88px;
  width: 100%;
  background-image: url('/organmanage/assets/reg/nav.png');
  background-size: 100% 88px;
  background-repeat: no-repeat;
}

.header {
  /* width:100%; */
  height: 78px;
  text-align: center;
  display: flex;
  position: relative;

}

.header /deep/ .el-menu.el-menu--horizontal {
  border: none;
}

.header /deep/ .el-menu-item {
  padding: 10px 15px;
  height: 78px;
  font-size: 15px;
  color: #000000;
  font-weight: bold;
}

.header /deep/ .el-submenu__title {
  font-size: 15px;
  color: #000000;
  font-weight: bold;
}

.headermenu {
  width: 680px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  align-content: center;
  flex-direction: row;
  text-align: center;
  line-height: 78px;
  /* margin:0 30px 0 10px; */
}

.topmenuitem {
  /* width: 120px; */
  height: 78px;
  font-weight: 400;
  position: relative;
}

.topmenuitem a {
  text-decoration: none;
  font-size: 15px;
  color: #000000;
  font-weight: bold;

}

.topmenuitem:hover {
  /* border-bottom:3px solid #FFFF; */
}

.menutitl {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 78px;
}

.menutitl:hover {
  color: #0066EB;
}

.menutitlChild {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 40px;
}

.menutitlChild:hover {
  color: #0066EB;
}

.topmenuitem:hover .menutitl {
  /* font-size:18px; */
  /* color:#0066EB; */
}

.topmenuitem>>>a.is-active {
  /* font-size:18px; */
  color: #0066EB;
}

.topmenuitem:hover .submenuwarp {
  display: initial;
}

.submenuwarp {
  position: absolute;
  left: 0px;
  top: 77px;
  width: 200px;
  background-color: #FFFFFF;
  /* background-color: #FEB45FFF; */
  z-index: 3;
  display: flex;
  flex-direction: column;
  display: none;
  border-radius: 2px;
  padding: 0 10px;
  /* border: 1px solid #ccc; */
}

/* .submenuwarp::before {  
    content: "";
    display: block;
    position: absolute;
    left: 24px;
    top: -13px;
    border-width: 6px;
    border-style: dashed  solid  dashed  dashed;
    border-color:transparent transparent #CCC transparent;
  } */
.submenop {
  text-decoration: none;
  line-height: 40px;
  text-align: left;
  color: #000;
}

.submenudd:hover {
  background-color: #FFF3EDFF;
  /* color:#FEB45FFF; */

}

.submenuwarp .submenudd {
  width: 200px;
  height: 36px;
  font-size: 14px !important;
  display: block;
  line-height: 36px;
  color: #333333FF;
}

.logoimg {
  /* cursor:pointer;
    position:absolute;
    margin-left:20%;
    margin-top:10px;
    z-index:99 */

}

.logoimg img {
  width: 138px;
  height: 64px;
}

@media screen and (max-width: 1700px) {
  .logoimg {
    /* cursor:pointer;
        position:absolute;
        margin-left:10%;
        margin-top:10px */
  }

  .headermenu {
    width: 680px;
  }

  .worker {
    /* position:absolute;
        margin-left:74%!important;
        height:80px;
        margin-top:-80px */
  }
}

@media screen and (max-width: 1500px) {
  .logoimg {
    /* cursor:pointer;
        position:absolute;
        margin-left:5%;
        margin-top:10px */
  }

  .worker {
    /* position:absolute;
        margin-left:70%!important;
        height:80px;
        margin-top:-80px */
  }
}

.worker {
  /* position:absolute;
        margin-left:70%;
        height:80px;
        margin-top:-80px */
}

.worker>>>.el-divider--vertical {
  height: 27px;
  background: #1A1A1A;
  opacity: 0.15;
  margin: 25px 10px 25px 15px;
}

.loginbtn {
  margin-left: 20px;
  width: 60px;
  height: 30px;
  font-size: 15px;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(45deg, #2978EE, #0066EB);
  border: none;
  border-radius: 6px;
  line-height: 30px;
  cursor: pointer;
  text-align: center;
}

.regbtn {
  margin-left: 20px;
  width: 60px;
  height: 30px;
  font-size: 15px;
  color: #0066EB;
  background: transparent;
  border: 1px solid #0066EB;
  border-radius: 6px;
  line-height: 30px;
  cursor: pointer;
  text-align: center;
}

.permissions {
  display: flex;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}

.avatar-wrapper img:hover {
  opacity: 0.5;
  /* transition: 0.3s; */
}

.baggeitem {
  margin-top: 5px;
  margin-right: 15px;
}

.baggeitemda {
  margin-top: 5px;
  /* margin-right:10px; */
}

.el-dropdown-menu__item {
  padding: 0px 20px !important;
  /* margin: 10px 0!important; */
}

.el-dropdown-menu {
  top: 60px !important;
  margin-top: 10px !important;
}

.tostnew {
  position: absolute;
  top: -13px;
  right: -23px;
}

.tostnewimg {
  width: 58px;
  height: 26px;
}

.tostnewtext {
  position: absolute;
  top: 16px;
  right: 5px;
  white-space: nowrap;
  font-weight: 500;
  font-size: 12px !important;
  color: #FFFFFF;
  line-height: 26px !important;
}
</style>