realtorEasier-webSite/pc/src/page/layout/header/index.vue

<template>
  <div class="header-layout">
    <div class="container">
      <div class="logo-layout">
        <router-link :to="{name: 'home'}" class="logo">
          <vcenter>
            <img :src="language === 'en' ? `@/assets/images/home/logo-cn.png` : require('@/assets/images/home/logo-cn.png')" alt>
          </vcenter>
        </router-link>
      </div>
      <div class="menu">
        <div
          class="list"
          ref="list"
        >
          <a
            v-for="nav in langHeader.navs"
            :key="nav.text"
            :class="{active: hoverCp === nav.cp}"
          >{{nav.text}}</a>
        </div>
      </div>
      <div class="ctrl">
        <div class="shop-btn">在线商城</div>
        <div class="language-w">
          <span class="country"></span>
          <span class="language">简体中文</span>
        </div>
        <div class="user">1</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import vcenter from '@/components/vcenter'
import { getPosition, isWide } from '@/util'

import browser from '@/util/browser'

export default {
  data () {
    return {
      height: 0,
      hoverCp: '',
      overb: false,
      active: true,
      ismobile: browser.mobile,
      browserLang: browser.language,
      isWide,
      count: 0
    }
  },
  methods: {
    clickHandle (nav) {
      if (nav.cp === 'case_overview') {
        this.$router.push({name: 'cases', params: {id: '房地产'}})
      } else if (nav.cp === 'service_overview') {
        this.$router.push({name: 'service_list', params: {id: 'use', active: 'pro'}})
      } else {
        this.$router.push({ name: nav.cp })
      }
    },
    handleLogout () {
      this.$toast.showConfirm('warn', this.language === 'en' ? 'Are you sure to log out?' : '确定要退出登录吗？', async () => {
        await this.$store.dispatch('logout')
        this.$router.push({name: 'home'})
      })
    },
    showCp (cp, height) {
      clearTimeout(this.timeout)
      if (cp !== 'about' && cp !== 'location') {
        this.$bus.$emit('showMask')
      }
      this.hoverCp = cp
      this.height = height
    },
    hideCp () {
      clearTimeout(this.timeout)
      this.$bus.$emit('hideMask')
      this.height = 0
      this.timeout = setTimeout(() => {
        this.hoverCp = null
      }, 200)
    },
    searchHandle () {
      if (this.hoverCp === 'isearch') {
        this.hideCp()
      } else {
        this.showCp('isearch', window.innerHeight - 68)
      }
    },
    loginHandle (type = null) {
      if (type === 'cart' && this.language === 'en') {
        return window.open('https://www.alibaba.com/product-detail/4DKanKan-Pro-3D-camera-3D-space_62183626283.html?spm=a2700.icbuShop.74.1.66b35b10I4miJd')
      }
      this.$bus.$emit('showAside')
    }
  },
  computed: {
    ...mapState({
      language: state => state.language.current,
      langHeader: state => state.language.home.headers,
      split: state => state.ui.navDivision,
      isLogin: state => state.user.token,
      info: state => state.user.info,
      deviceLogin: state => state.user.deviceLogin
    })
  },
  mounted () {
    let lang = ~this.browserLang.indexOf('zh') ? '中' : 'en'
    this.$store.commit('change_language', lang)
    if (this.isLogin && !this.deviceLogin) {
      let cart = JSON.parse(this.$store.state.user.cart)
      let count = 0
      cart.forEach(item => {
        count += item.goodsCount
      })
      this.count = count
    }
    this.$bus.$on('hadload', data => {
      this.$store.commit('change_nav_division', getPosition(this.$refs.list).x)
    })
    this.$bus.$on('updateCart', data => {
      this.count = data
    })
    this.$bus.$on('hideSearch', target => {
      if (this.$refs.isearchref) {
        if (!this.$refs.isearchref.contains(target)) {
          this.hideCp()
        }
      }
    })
    this.sizeHandle = () => {
      this.isWide = Math.round(devicePixelRatio * 100) === 100 ? window.innerWidth > 1600 : true
      this.$nextTick(() => {
        this.$store.commit('change_nav_division', getPosition(this.$refs.list).x)
      })
    }
    window.addEventListener('resize', this.sizeHandle)
    setTimeout(this.sizeHandle, 300)
  },
  destroyed () {
    window.removeEventListener('resize', this.sizeHandle)
  },
  components: { vcenter },
  watch: {
    language (newVal) {
      document.title = newVal === 'en' ? '4DKanKan' : '四维看看'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./istyle.scss";
</style>