bbs.hoolihome.com/components/common/MyHeader.vue

<template>
  <header class="my-header">
    <div class="header-wrap">
      <ul class="wrap-item left">
        <li class="item home">
          <a
            :href="`${wwwURL}${dealDirect()}`"
            target="_blank"
          >{{ $t("hoolihome") }}</a>
        </li>
      </ul>
      <ul class="wrap-item right">
        <li class="item lang">
          <a
            class="lang-wrap"
            href="javascript:void(0);">
            <img
              :src="localeArr[currentLocaleIndex].img"
              class="flag">
            <span class="lang-select">{{ localeArr[currentLocaleIndex].name }}</span>
            <span class="iconfont icon-xiala"/>
          </a>
          <ul class="box lang-list">
            <li
              v-for="(item,index) in localeArr"
              :key="index"
              class="lang-item"
              @click="handleSelectLang(index)">
              <img
                :src="item.img"
                class="flag">
              <span class="text">{{ item.name }}</span>
            </li>
          </ul>
        </li>
        <li
          v-if="loginUserInfo.token"
          class="item login-yes">
          <a
            :href="`${wwwURL}/${locale}/user/settings`"
            target="_blank"
            class="user-name">{{ loginUserInfo.userName }}</a>
          <span class="mid">，</span>
          <span
            :class="{'btn':true,'logout':true,'lock':isLogoutLock}"
            @click="handleLogout">{{ $t("logout") }}</span>
        </li>
        <li
          v-else
          class="item login-no">
          <a
            href="javascript:void(0);"
            @click="handleShowView('LoginBySms', { report: 1 })">{{ $t("signIn") }}</a>
          <span>/</span>
          <a
            href="javascript:void(0);"
            @click="handleShowView('RegisterByMobile', { report: 2 })">{{ $t("signUp") }}</a>
        </li>
      </ul>
    </div>
    <common-login
      v-if="currentView.view"
      :view-model.sync="currentView"/>
  </header>
</template>

<script>
import { php_api_user_login_out } from '~/common/apis.js'
import CommonLogin from '~/components/login-register/CommonLogin'
import { wwwURL } from '~/common/config.js'

export default {
  components: {
    CommonLogin
  },
  data() {
    return {
      wwwURL,
      localeArr: [
        {
          id: '1',
          locale: 'cn',
          name: '简体中文',
          img: '//static.hoolihome.com/common/default/lang-cn.jpg'
        },
        {
          id: '2',
          locale: 'en',
          name: 'English',
          img: '//static.hoolihome.com/common/default/lang-en.jpg'
        }
      ],
      currentLocaleIndex: 0,
      locale: 'cn',
      loginUserInfo: {},
      currentView: {},
      isLogoutLock: false,
      beforeViewData: null
    }
  },
  created() {
    let { locale, loginUserInfo } = this.$store.state
    this.locale = locale
    this.loginUserInfo = loginUserInfo
    this.localeArr.some((val, i) => {
      if (val.locale === locale) {
        this.currentLocaleIndex = i
        return true
      }
    })
  },
  mounted() {
    this.getThirdInfo()
  },
  methods: {
    getThirdInfo() {
      const loginUserInfo = this.$Utils.MyCookie.getCookie('loginUserInfo')
      const thirdLoginInfo = this.$Utils.MyCookie.getCookie('thirdLoginInfo')
      if (loginUserInfo) return // 有登录信息 不操作
      if (!thirdLoginInfo) return

      let thirdInfo
      try {
        thirdInfo = JSON.parse(decodeURIComponent(thirdLoginInfo))
      } catch (error) {}
      if (!thirdInfo) return

      const thirdData = thirdInfo.info
      switch (thirdInfo.type) {
        case 'reg': {
          this.handleShowView('RegisterByMobile', {
            isBindSocialInfo: true
          })
          return
        }
        // case 'login': {
        //   this.$Utils.MyCookie.deleteCookie('thirdLoginInfo', true)
        //   this.$Utils.MyCookie.setCookie(
        //     'loginUserInfo',
        //     encodeURIComponent(JSON.stringify(thirdData)),
        //     7,
        //     true
        //   )
        //   location.reload()
        //   return
        // }
        case 'error': {
          this.$Utils.MyCookie.deleteCookie('thirdLoginInfo', true)
          if (thirdData) {
            this.$alert(thirdData, this.$t('common.tips'))
          }
          return
        }
      }
    },
    dealDirect() {
      let { locale } = this.$store.state
      if (locale === 'cn') {
        let { fullPath } = this.$route
        if (fullPath.indexOf('/cn') === 0) {
          return '/cn'
        } else {
          return ''
        }
      } else {
        return `/${locale}`
      }
    },
    handleSelectLang(selectIndex) {
      let { locales } = this.$store.state
      let { fullPath } = this.$route
      let targetLang = this.localeArr[selectIndex].locale
      let routeLang = ''
      locales.some((val, index) => {
        if (fullPath.indexOf(`/${val}`) === 0) {
          routeLang = val
          return true
        }
      })
      if (routeLang) {
        if (targetLang === 'cn') {
          let url = fullPath.replace(`/${routeLang}`, '')
          window.location.href = url ? url : '/'
        } else {
          window.location.href = fullPath.replace(routeLang, targetLang)
        }
      } else {
        if (targetLang === 'cn') {
          window.location.reload()
        } else {
          window.location.href = `/${targetLang}${fullPath}`
        }
      }
    },
    handleShowView(view, params = {}) {
      if (params.report) {
        if (params.report === 1) {
          this.$hooliAnalysis.upload(
            {
              ec: this.$C.ENTRANCE_CODE.register
            },
            true
          )
        }
        if (params.report === 2) {
          this.$hooliAnalysis.upload({
            ec: this.$C.ENTRANCE_CODE.register,
            et: this.$C.EVENT_TYPE.click
          })
        }
      }
      delete params.report
      this.currentView = { view, params }
    },
    handleLogout() {
      this.isLogoutLock = true
      this.$axios
        .$post(php_api_user_login_out, {})
        .then(res => {
          this.$Utils.MyCookie.deleteCookie('loginUserInfo', true)
          window.location.reload()
        })
        .catch(e => {
          this.$Utils.MyCookie.deleteCookie('loginUserInfo', true)
          window.location.reload()
        })
    }
  }
}
</script>

<style lang="less" scoped>
.my-header {
  background-color: #303030;
  .header-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    color: #ffffff;
    a {
      color: #ffffff;
      &:hover {
        color: #ed5f48;
      }
    }
    .wrap-item {
      display: flex;
      justify-content: center;
      align-items: center;
      .item {
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      &.left {
        .home {
          margin-left: 5px;
        }
      }
      &.right {
        .item {
          position: relative;
          display: flex;
          height: 30px;
          align-items: center;
          margin-right: 40px;
          &:hover {
            .box {
              opacity: 1;
              filter: alpha(opacity=100);
              pointer-events: auto;
              transform: translate(-50%, 0) scale(1);
            }
          }
          .box {
            position: absolute;
            left: 50%;
            top: 30px;
            z-index: 1;
            transform: translateX(-50%);
            background-color: #ffffff;
            border-radius: 2px;
            box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.07);
            filter: alpha(opacity=0);
            opacity: 0;
            transition: all 500ms cubic-bezier(0.34, 1.21, 0.4, 1);
            transform-origin: 50% 0;
            transform: translate(-50%, 0) scale(0);
          }
          &.lang {
            .lang-wrap {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-weight: 500;
              color: #ffffff;
              &:hover {
                opacity: 0.8;
              }
              .lang-select {
                margin-right: 3px;
              }
              .icon-xiala {
                font-size: 12px;
              }
            }
            .lang-list {
              width: 150px;
              .lang-item {
                display: flex;
                align-items: center;
                height: 42px;
                padding-left: 16px;
                font-size: 14px;
                font-family: Roboto-Regular;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                cursor: pointer;
                &:hover {
                  color: #ff523d;
                  background-color: #f2f2f2;
                }
              }
            }
            .flag {
              width: 36px;
              margin-right: 10px;
            }
          }
          &.login-yes {
            margin-right: 5px;
            .user-name {
              cursor: pointer;
              color: #ff523d;
              font-family: PingFangSC-Regular;
              &:hover {
                opacity: 0.8;
              }
            }
            .logout {
              cursor: pointer;
              &:hover {
                color: #ff523d;
              }
              &.lock {
                pointer-events: none;
              }
            }
          }
          &.login-no {
            margin-right: 5px;
          }
        }
      }
    }
  }
  .layer-login-register {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0.5);
    .layer-login-register-wrap {
      margin-top: 15%;
    }
  }
}
</style>