FE_huoran_client/src/layouts/header/index.vue

<template>
  <div :class="['header', { channel: isHome, estate: isEstate, iasf: isIasf }]">
    <a class="logo" @click="toIndex">
      <template>
        <img :src="logoForm.logoUrl" alt="">
        {{ logoForm.title }}
      </template>
    </a>
    <!-- pc端 -->
    <template v-if="$store.getters.getModelType">
      <navbar v-if="navShow" ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" :isIasf.sync="isIasf"
        @showMoreBtns="updateBtnsType"></navbar>
      <!-- 导航最右侧工具栏 -->
      <div class="tools">
        <div v-for="(item, i) in tools.slice(0, 5)" :key="i" class="item" @click="toolClick(item)">
          <img v-if="item.icon" :src="item.icon" alt="" class="icon">
          <span v-if="item.buttonText" class="text">{{ item.buttonText }}</span>
        </div>
        <!-- 如果图标超过5个，则显示省略号 -->
        <el-popover v-if="tools.length > 5" placement="bottom" width="297" trigger="click" popper-class="tool-more">
          <ul class="more-wrap">
            <li v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
              <img v-if="item.icon" :src="item.icon" alt="" class="icon">
              <p v-if="item.buttonText" class="text">{{ item.buttonText }}</p>
            </li>
          </ul>
          <i slot="reference" class="el-icon-more cursor-pointer" style="color: #535353"></i>
        </el-popover>
      </div>
    </template>
    <!-- 手机端 -->
    <div v-else class="mobile-tools">
      <!-- 导航最右侧工具栏 -->
      <div class="tools">
        <template v-if="tools.length < 3">
          <div v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
            <img v-if="item.icon" :src="item.icon" alt="" class="icon">
            <span v-if="item.buttonText" class="text">{{ item.buttonText }}</span>
          </div>
        </template>
        <!-- 如果图标超过5个，则显示省略号 -->
        <el-popover v-else placement="bottom" width="297" trigger="click" popper-class="tool-more">
          <ul class="more-wrap">
            <li v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
              <img v-if="item.icon" :src="item.icon" alt="" class="icon">
              <p v-if="item.buttonText" class="text">{{ item.buttonText }}</p>
            </li>
          </ul>
          <img slot="reference" src="@/assets/images/more.svg" alt="">
        </el-popover>
      </div>

      <img class="menu-icon" src="@/assets/images/menu.svg" alt="" @click.stop="updateType(!modelType)">
      <div class="contentBox" v-show="modelType">
        <navbar ref="nav" :isHome.sync="isHome" @updateModelType="updateType"></navbar>
      </div>
    </div>

    <el-dialog title="" :visible.sync="toolVisible" center :width="$store.getters.getModelType ? '500px' : '100%'"
      append-to-body :top="qrcodeTop" lock-scroll custom-class="qrcode-dia">
      <div class="pic-wrap">
        <img class="pic" :src="toolPic" alt="">
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Util from '@/libs/util'
import { mapMutations } from 'vuex'
import navbar from '../navbar'
export default {
  data () {
    return {
      Util,
      isHome: true,
      isEstate: false,
      isIasf: false,
      showSearch: false,
      height: 907,
      title: '',
      searchTimer: null,
      modelType: false,
      navShow: true,
      qrcodeVisible: false,
      logoForm: {
        title: '',
        logoUrl: '',
      },
      timer: null,
      qrcodeTop: '100px',
      tools: [],
      toolVisible: false,
      toolPic: '',
    };
  },
  components: {
    navbar,
  },
  computed: {
    isSfel () {
      return this.$route.path === '/sfel'
    },
    site () {
      return this.$route.query.siteId || this.$store.getters.site
    },
  },
  watch: {
    '$route.path': {
      handler () {
        this.isHome = Util.isIndex()
        this.isEstate = this.$route.path === '/estate/index'
        this.isIasf = this.$route.path === '/iasf'
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.getLogo()
    this.getTool()
    this.setKeyword('')

    const height = (window.innerHeight - (this.$store.getters.getModelType ? 758 : 600)) / 2
    this.qrcodeTop = (height > 0 ? height : 0) + 'px'

    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    document.body.addEventListener('click', e => {
      e.stopPropagation()
      this.modelType = false
    })
  },
  methods: {
    ...mapMutations('content', [
      'setKeyword'
    ]),
    // 获取logo
    async getLogo () {
      const res = await this.$post(`${this.api.findLogo}?siteId=${this.site}`)
      if (res.data) {
        this.logoForm = res.data
      }
    },
    // 获取导航图标
    async getTool () {
      const res = await this.$post(`${this.api.navList}?siteId=${this.site}&isDisable=0`)
      if (res.data) {
        this.tools = res.data
      }
    },
    toIndex () {
      this.$refs.nav.jump()
    },
    stop () { },
    /**
     * pc端下,当导航栏条目大于10的情况下,显示更多按钮
     * type : true显示,false隐藏
     */
    updateBtnsType (type) {
      this.showMoreBtns = type
    },
    // 获取页面滚动距离(home长页专用)
    handleScroll () {
      if (Util.isIndex()) {
        const h = this.height
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        // const rule = scrollTop > h
        const rule = scrollTop > 120
        if (this.isHome == rule) {
          if (this.isHome != !(rule)) this.navShow = false
          this.isHome = !(rule)
          this.isEstate = !(rule) && this.$route.path === '/estate/index'
          this.$nextTick(() => {
            this.navShow = true
          })
        }
      }
    },
    // 图标点击
    toolClick (item) {
      // 链接
      if (item.buttonContent === '0') {
        item.newTab ? window.open(item.linkAddress) : (location.href = item.linkAddress)
      } else {
        // 弹框
        this.toolPic = item.imagePath
        this.toolVisible = true
      }
    },
    // 注册登录
    toLogin () {
      if (this.GTA) {
        window.open('https://izhixinyun.com/#/login')
      } else {
        if (this.site == 7) {
          window.open('https://www.occupationlab.com/#/login')
        } else {
          this.qrcodeVisible = true
        }
      }
    },
    updateType (type) {
      this.modelType = type
    }
  }
};
</script>
<style scoped lang="scss">
$height: 90px;

.header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: $height;
  padding: 0 5% 0 5%;

  &:not(.channel) {
    background-color: #fff;
    border-bottom: 1px solid #f3f3f3;
  }

  &.estate {
    background-color: rgba(0, 0, 0, 0.15);
  }

  .logo {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    cursor: pointer;

    img {
      max-width: 130px;
      max-height: 50px;
      margin-right: 10px;
    }
  }

  .tools {
    display: flex;
    align-items: center;

    .item {
      display: inline-flex;
      align-items: center;
      margin-right: 15px;
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        opacity: 0.9;
      }

      .icon {
        max-width: 30px;
        max-height: 30px;
      }

      .text {
        margin-left: 5px;
        color: #666;
        font-size: 14px;
      }
    }
  }



  .search {
    margin-right: 43px;
  }

  .mobile-tools {
    display: inline-flex;
    align-items: center;

    .login {
      font-size: 1.5rem;
      color: #c1c1c1;
      cursor: pointer;
    }
  }

  .menu-icon {
    margin-left: 10px;
    font-size: 1.8rem;
    color: #c1c1c1;
    cursor: pointer;
  }
}

.search-wrap {
  position: absolute;
  top: 67px;
  right: 89px;
  display: flex;
  align-items: center;
  padding: 10px 15px 10px 10px;
  background-color: #fff;
  box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3);

  input {
    width: 300px;
    height: 40px;
    padding: 0 40px 0 15px;
    font-size: 1.14rem;
    color: #333;
    line-height: 46px;
    border: 0;
    border-radius: 4px;
    outline: none;
  }

  .search-icon {
    padding-right: 15px;
    margin: 0 15px;
    cursor: pointer;
    border-right: 1px solid #ccc;
  }

  .close-icon {
    font-size: 2rem;
    cursor: pointer;
  }
}

.menu-child {
  /deep/ .el-submenu__title {
    font-size: 1rem;
  }
}

.contentBox {
  width: 100%;
  position: absolute;
  top: 90px;
  left: 0;
  background-color: white;
  z-index: 9999;
  max-height: 30rem;
  overflow-y: scroll;
}

/deep/.qrcode-dia {
  background-color: transparent;
  box-shadow: none;

  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
    background-color: transparent;
    overflow: hidden;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .pic-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pic {
    max-width: 100%;
  }
}

@media (max-width: 1200px) {
  /deep/.qrcode-dia {
    .pic {
      width: 95%;
    }
  }
}

@media (max-width: 1660px) {
  .header {
    .logo {
      left: 10px;
    }

    .search {
      margin-right: 20px !important;
    }

    .tools {
      right: 30px;
    }
  }
}

@media (max-width: 1200px) {
  .header {
    color: black !important;
    background-color: #fff;
  }

  .search-wrap {
    right: 10px;
    top: 0;
    width: 70%;

    input {
      width: 15rem;
      padding: 0 0.5rem 0 0.1rem;
    }
  }
}
</style>
<style lang="scss">
/style>