dev/dcp-web-gate/src_old/components/header.vue

<template>
  <div>
    <div class="header1">
      <div class="header2">
        <div class="language">
          <span class="active">
            <span style="margin-left: 30px;" class="cursor" @click="locale('zh')">{{ $t('common.CN')}}</span>
            <span style="margin: 0 14px; display: inline-block; width: 2px; height: 14px; background: #F9F9F9"></span>
            <span style="margin-left: 9px;" class="cursor" @click="locale('en')">EN</span>
          </span>
          <span class="active" style="float: right;">
            <span
              style="margin-right: 9px;"
              @click="toView(2,'Register','')"
              v-if="i==1"
            >{{ $t('common.register')}}</span>
            <span
              style="margin-right: 9px;"
              @click="toView(2,'login','')"
              v-if="i==1"
            >{{ $t('common.login')}}</span>
            <!-- <span style="margin-right: 9px;" v-if="i==2 || i==3">
              {{ $t('common.OngoingProject')}}（
              <span style="color: #ff0000;">0</span>）
            </span> -->

            <el-dropdown trigger="click" @command="handleCommand">
              <span style="margin-right: 9px; cursor:pointer;color: #ccc;" v-if="i==2 || i==3">
                {{ $t('common.Usercenter')}}
                <i class="el-icon-arrow-down"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item,index) in options"
                    :command="item"
                  >{{$t(item.label)}}</el-dropdown-item>
                </el-dropdown-menu>
              </span>
            </el-dropdown>
            <span @click="toView(0,'SystemMessage','/SystemMessage')" style="margin-right: 9px;" v-if="i==2 || i==3">
              {{ $t('common.MessageNotification')}}（
              <span style="color: #ff0000;">{{systemMessageNum}}</span>）
            </span>
            <!-- <span style="margin-right: 9px;" v-if="i==2 || i==3">
              {{ $t('common.MyAttention')}}（
              <span style="color: #ff0000;">0</span>）
            </span> -->
            <!-- <span style="margin-right: 9px;" v-if="i==2 || i==3">{{ $t('common.MyCollection')}}</span> -->

            <!-- <span style="margin-right: 9px;" @click="toView(2,'customerService')">{{ $t('common.CustomerService')}}</span> -->
            <span
              style="margin-right: 9px;"
              @click="toView(2,'helpCenter')"
            >{{ $t('common.HelpCenter')}}</span>
            </span>
        </div>
        <div class="logo">
          <img
            :src="$i18n.locale=='zh'?require('@/assets/img/home/LOGO.png'):require('@/assets/img/home/GlobalEnergyInter.png')"
            alt
            :style="$i18n.locale=='zh'?'width: 836px;':'width:640px;transform:translateY(1px)'"
          />
        </div>
        <!-- <div class="title">
                GEIDCP 全球能源互联网发展合作平台
        </div>-->
      </div>
    </div>
  </div>
</template>

  <script>
    import Bus from "@/api/bus";   //注意引入
    import {selectPushMsgNum} from '@/api/userCenter'
    // import Cookies from 'js-cookie'; //引入cookie操作依赖
  export default {
    name: 'Headers',
    data () {
      return {
        i:'1',
        systemMessageNum:0,
        options: [{
          value: 'userCenterView',
          label: 'common.Usercenter',
          json:''
        }, {
          value: 'information',
          label: 'common.BasicInformation',
          json:'information'
        }, {
          value: 'authentication',
          label: 'common.RealAuthentication',
          json:'/authentication'
        }, {
          value: 'securitySetting',
          label: 'common.SecuritySettings',
          json:'/securitySetting'
        }, {
          value: 'loginOut',
          label: 'common.Logout',
          json:''
        }],
      }
    },

  mounted() {
    this.getInitData();
    this.getMessageNum();
  },
  methods: {
    getMessageNum(){
      if(this.i !=1){
        let readStatus='unread'
        selectPushMsgNum(readStatus).then(res=>{
          if(res.data.page.totalCount>0){
            this.systemMessageNum = res.data.page.totalCount;
          }else{
            this.systemMessageNum = 0;
          }
        })
      }
    },
    getInitData() {
      let locale = window.localStorage.getItem("locale");

      if (!locale) {
        window.localStorage.setItem("locale", "en");
      }
      document.title = this.$t('common.GEIDcpTitleSeptember');
      this.$i18n.locale = locale;
      console.log(
        window.localStorage.getItem("locale"),
        window.localStorage.getItem("userLogin")
      );
      //if (window.localStorage.getItem('userLogin')) {
      if (this.$Cookies.get("token") && this.$i18n.locale == "zh") {
        return (this.i = 2);
      } else if (
        this.$i18n.locale == "en" && this.$Cookies.get("token")
      ) {
        return (this.i = 3);
      } else {
        return (this.i = 1);
      }
    },
    locale(lang) {
      this.$i18n.locale = lang;
      let locale = window.localStorage.getItem("locale");
      if (locale) {
        window.localStorage.setItem("locale", lang);
      } else {
        window.localStorage["locale"] = lang;
      }
    },
    getInitData(){
        let locale=window.localStorage.getItem('locale');
        let langdefaultLanguage = navigator.language||navigator.userLanguage;//常规浏览器语言和IE浏览器
        langdefaultLanguage = langdefaultLanguage.substr(0, 2);//截取lang前2位字符
        if(langdefaultLanguage !== 'zh'){
          langdefaultLanguage = 'en';

        }
        if(!locale){
          window.localStorage.setItem('locale',langdefaultLanguage)
        }
        this.$i18n.locale = locale
        console.log(window.localStorage.getItem('locale'),window.localStorage.getItem('userLogin'))
        //if (window.localStorage.getItem('userLogin')) {
        if (this.$Cookies.get('token') && this.$i18n.locale=='zh') {
            return this.i=2
        }else if(this.$i18n.locale=='en'&& this.$Cookies.get('token')){
          return this.i=3
        }else {
            return this.i=1
        }
    },
    locale(lang){
        this.$i18n.locale = lang
        let locale=window.localStorage.getItem('locale')
        if(locale){
          window.localStorage.setItem('locale',lang)
        }else {
          window.localStorage['locale'] = lang;
        }
        console.log(window.localStorage.getItem('locale'))
      },
      handleCommand(command){
        if(command.value=='loginOut'){
          this.loginOut()
        }else {
          this.toView(0,command.value,command.json)
        }
    },
      // 退出登录
      loginOut(){
        this.$confirm(this.$t('common.Thisoperationwilllogout')+'?', this.$t('common.Tips'), {
          confirmButtonText: this.$t('common.OK'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          // 退出的逻辑代码
          this.$store
            .dispatch("user/LOGOUT")
            .then(() => {
              // location.href = "/";
              this.$router.push({
                path: "/login",
              });
            })
            .catch((error) => {
              location.href = "/";
            });
          // this.toView(2,'login','')// 返回登录
          // window.localStorage.removeItem('token')
          window.sessionStorage.removeItem("token");
          // Cookies.remove('login');
          this.getInitData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('common.Cancelled'),
          });
        });
      },
    toView(num, router, json) {
      this.$router.push({ name: router, query: { key: json } });
      // this.$store.state.router=router
      this.$store.commit("modify", router);
      // this.$router.push({name:'userCenterView'})
      //  this.$store.state.router=router
      // this.$store.commit('modify', router)
      window.localStorage.setItem("router", router);
      if (num == 1) {
        let i = {
          label: "用户中心",
          value: "userCenterView",
        };
        if (window.sessionStorage.getItem("token")) {
          return (this.i = 2);
        } else if (this.$i18n.locale == "en") {
          return (this.i = 3);
        } else {
          return (this.i = 1);
        }
        this.$nextTick(() => {
          Bus.$emit("title", i);
        });

        //  this.BusChange(i)
      }
    }
  },
};
</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
body {
  margin: 0;
  padding: 0;
}
.header1 {
  width: 100%;
  height: 120px;
  margin: auto;
  background: #2c558a;
  /* border-bottom: 2px solid #c2c2c2; */
}
.header2 {
  width: 1200px;
  height: 120px;
  margin: auto;
  position: relative;
  border-bottom: 1px solid #fff;
  background: url("../assets/img/home/banner.png") no-repeat;
}
.language {
  line-height: 12px;
  color:  #F9F9F9;
  font-weight: 400;
  font-size: 16px;
  padding-top: 15px;
}
.logo {
  position: absolute;
  top: 50px;
  left: 80px;
  width: 260px;
  height: 55px;
  /* background-image: url(@/assets/logo.png); */
}
.title {
  position: absolute;
  top: 60px;
  left: 450px;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}
.active span:hover {
  color: #ff0000;
  cursor: pointer;
}
.el-dropdown {
  color:#F9F9F9;
  font-size: 16px;
}

</style>