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

<template>
  <div>
      <div class="header-container">
        <div class="header-content">
          <span class="active language">
            <span style="display: inline-block;width: 226px;height: 100%;position: relative;vertical-align: middle;margin-right: 20px;">
              <img src="@/assets/img/home/LOGO2020-12-22.png" alt="" style="width: 80%;height: 70%; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);">
            </span>
            <span 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 class="cursor" @click="locale('en')">EN</span>
          </span>
          <span class="active" style="float: right;">
            <span
              style="margin-left: 20px;"
              @click="toView(2,'Register','')"
              v-if="i==1"
            >
            <img src="@/assets/注册.png" style="height: 12px;width: 12px;margin-right: 4px">{{ $t('common.register')}}</span>
            <span
              style="margin-left: 20px;"
              @click="toView(2,'login','')"
              v-if="i==1"
            ><img src="@/assets/登录.png" style="height: 12px;width: 12px;margin-right: 4px">{{ $t('common.login')}}</span>
            <i class="el-icon-s-custom" style="color: #fff;margin-right: -15px;" v-if="i==2 || i==3"></i>
            <el-dropdown trigger="click" @command="handleCommand" style="margin-left: 20px;" v-if="i==2 || i==3">

              <span class="el-dropdown-link">
                {{ $t('common.Usercenter')}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item,index) in options"
                  :key="index"
                  :command="item"
                >{{$t(item.label)}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <i class="el-icon-message-solid"  style="margin-left: 20px;color: #fff;" v-if="i==2 || i==3"></i>
            <span @click="systemMessageNumToView(0,'SystemMessage','/SystemMessage')"  v-if="i==2 || i==3">
              {{ $t('common.MessageNotification')}}( <span style="color: #ff0000;">{{systemMessageNum}} </span>)
            </span>
<!--            <span-->
<!--              style="margin-left: 20px;"-->
<!--              @click="toView(2,'helpCenter')"-->
<!--            >{{ $t('common.HelpCenter')}}</span>-->
          </span>
        </div>
        <div class="banner-container">
          <el-carousel  :interval="5000" arrow="always">
            <el-carousel-item key="item1" style="height: 350px;">
              <img class="banner" src="@/assets/img/home/bannerBlue.png" alt="" @click="getPiOnline">
              <img class="logo1" v-show="$i18n.locale=='zh'" src="@/assets/img/home/fengcheBlue.png" alt="">
              <img class="logo1" v-show="$i18n.locale=='en'" src="@/assets/img/home/enBlue.png" alt="">
            </el-carousel-item>
            <el-carousel-item key="item2" style="height: 350px;">
              <img class="banner" src="@/assets/img/home/bannerFenche.jpg" alt="">
              <img class="logo1" v-show="$i18n.locale=='zh'" src="@/assets/img/home/fengche.png" alt="">
              <img class="logo1" v-show="$i18n.locale=='en'" src="@/assets/img/home/enYellow.png" alt="">
            </el-carousel-item>
            <el-carousel-item key="item3" style="height: 350px;">
              <img class="banner" src="@/assets/img/home/bannerTaiyang.png" alt="">
              <img class="logo1" v-show="$i18n.locale=='zh'" src="@/assets/img/home/taiyang.png" alt="">
              <img class="logo1" v-show="$i18n.locale=='en'" src="@/assets/img/home/enXing.png" alt="">
            </el-carousel-item>
            <el-carousel-item key="item4" style="height: 350px;">
              <img class="banner" src="@/assets/img/home/power.png" alt="" @click="getPic">
              <!-- <img class="logo1" v-show="$i18n.locale=='zh'" src="@/assets/img/home/taiyang.png" alt="">
              <img class="logo1" v-show="$i18n.locale=='en'" src="@/assets/img/home/enXing.png" alt=""> -->
            </el-carousel-item>
          </el-carousel>
          <!-- <div class="banner-content">
            <img class="logo" src="@/assets/img/home/logo1.png" alt="">

          </div> -->
        </div>
      </div>
       <LoginReminder ref="loginReminder"></LoginReminder>
  </div>
</template>

  <script>
    import Bus from "@/api/bus";   //注意引入
    import LoginReminder from '@/views/conferenceServices/LoginReminder.vue'
    import {selectPushMsgNum,selectNoticeInfoNum} from '@/api/userCenter'
  export default {
    name: 'headerNew',
    components:{
        LoginReminder
    },
    data () {
      return {
        //消息通知消息类型
        messageType:0,
        systemMessageNum:0,
        i:'1',
        options: [{
          value: 'userCenterView',
          label: 'common.Usercenter',
          json:''
        }, {
          value: 'SystemMessage',
          label: 'common.MessageCenter',
          json:'/SystemMessage'
        },{
          value: 'myConcerns',
          label: 'common.ManagementCenter',
          json:'/myConcerns'
        },{
          value: 'information',
          label: 'common.MyAccount',
          json:'/information'
        },{
          value: 'loginOut',
          label: 'common.Logout',
          json:''
        }],
      }
    },

  mounted() {
    this.getInitData();
    this.getMessageNum();
  },
  methods: {
    getPic(){
        let id='1635830161416949760'
        // http://localhost:8080/#/NewConferenceNetworkCh?key=1635830161416949760
        if(this.$i18n.locale=='zh'){
            // let path ='NewConferenceNetworkCh'
            // let path = 'ConferenceDetail'
            // let rpath = { path: path, query: { key: id, intentions: this.intentions}};
            // sessionStorage.setItem('pathReminder', JSON.stringify(rpath));
            // this.$refs.loginReminder.activeChange(path, id);
            window.open('https://www.geidco.org.cn/html/qqnyhlw/zt20230925/index.html')
        }else{
            // let path ='NewConferenceNetworkEn'
            // let path = 'ConferenceDetail'
            // let rpath = { path: path, query: { key: id, intentions: this.intentions}};
            // sessionStorage.setItem('pathReminder', JSON.stringify(rpath));
            // this.$refs.loginReminder.activeChange(path, id);
            window.open('https://www.geidco.org.cn/html/qqnyhlw/zt20230925/en.html')
        }
    },
    getPiOnline(){
      window.open('https://media.un.org/en/asset/k1l/k1lj5tjh52')
    },
    getInitData() {
      debugger
      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);
      }
      debugger
      if(this.i !=1){
        this.getMessageNum();
      }
    },
    getMessageNum(){
      if(this.i !=1){
        this.messageType = 0;
        this.systemMessageNum = 0;
        let readStatus='unread'
        selectPushMsgNum(readStatus).then(res=>{
          if(res.data.page.totalCount>0){
            this.systemMessageNum = this.systemMessageNum+parseInt(res.data.page.totalCount);
            this.messageType = 1;
          }
        })
        selectNoticeInfoNum(readStatus).then(res=>{
          if(res.data.page.totalCount>0){
            this.systemMessageNum = this.systemMessageNum+parseInt(res.data.page.totalCount);
            this.messageType = 2;
          }
        })
      }
    },
    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);
          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'){
          sessionStorage.removeItem('pathReminder');
          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'),
          });
        });
      },
    systemMessageNumToView(num, router, json){
      if(this.messageType==2){
        this.toView(0,'notification','/notification')
      }else{
        this.toView(0, 'SystemMessage', '/SystemMessage');
      }
    },
    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 (this.$Cookies.get('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>
<style scoped>
*{
  box-sizing: border-box;

}
.header-container{
  width: 100%;
  background: #0E4891;
}
.header-content{
  width: 1200px;
  height: 60px;
  margin: 0 auto;
  color: #F9F9F9;
  font-weight: 400;
  font-size: 16px;
  line-height: 60px;
}
/* .language span{
  display: inline-block;
  height: 14px;
}
.language span:first-child{
  position: relative;
}
.language span:first-child::after{
  content: '';
  display: inline-block;
  width: 2px;
  height: 14px;
  background: #F9F9F9;
  position: absolute;
  top: 0;
  right: 0;
} */
.banner-container{
  position: relative;
}
.banner-content{
  width: 1200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -600px;
}
.logo {
  position: absolute;
  top: 27px;
  left: 0;

}
.header-container>>>.el-carousel__container {
  height: 350px;
}
.logo1 {
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}
.banner{
  width: 100%;
  height: 100%;
}
.title {
  position: absolute;
  top: 60px;
  left: 450px;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}
.active span:hover {
  color: #ff0000;
  cursor: pointer;
}
.header-container /deep/ .el-dropdown {
  color: #F9F9F9;
  font-size: 16px;
}
</style>