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

<template>
    <div>
        <div class="header1">
            <div class="header2">
                <div class="language">
                    <span class="active"
                        v-if="$store.state.router!='ConferenceNetwork' && $store.state.router!='MeetingApplyForm'">
                        <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 style="margin-right: 9px" class="cursor" @click="locale('en')">EN</span>
                    </span>
                    <span class="active" style="float: right">
                        <span class="cursor" style="margin-right: 12px" @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 class="cursor" style="margin-right: 12px" @click="toView(2, 'login', '')"
                            v-if="i == 1"><img src="@/assets/登录.png"
                                style="height: 12px; width: 12px; margin-right: 4px" />{{ $t("common.login") }}</span>
                        <!-- <span class="cursor" style="margin-right: 12px;" v-if="i==2 || i==3">{{ $t('common.OngoingProject')}}（<span style="color: #ff0000;">0</span>）</span> -->
                        <!-- <span class="cursor" style="margin-right: 12px;" v-if="i==2 || i==3">{{ $t('common.MyAttention')}}（<span style="color: #ff0000;">0</span>）</span> -->
                        <!-- <span class="cursor" style="margin-right: 12px;" v-if="i==2 || i==3">{{ $t('common.MyCollection')}}</span> -->
                        <i class="el-icon-s-custom" style="color: #fff; margin-right: 4px" v-if="i == 2 || i == 3"></i>
                        <el-dropdown trigger="click" @command="handleCommand" v-if="i == 2 || i == 3">
                            <!-- <i class="el-icon-s-custom" style="color: #fff;"></i> -->
                            <span style="margin-right: 9px; cursor: pointer; font-size: 16px" v-if="i == 2 || i == 3">
                                {{ $t("common.Usercenter") }}
                                <i class="el-icon-arrow-down"></i>
                                <el-dropdown-menu slot="dropdowns">
                                    <el-dropdown-item v-for="(item, index) in options" :key="index" :command="item">{{
                                    $t(item.label) }}
                                        <el-dropdown-menu slot="dropdowns">
                                            <el-dropdown-item v-for="(item, index) in options" :key="index"
                                                :command="item">{{ $t(item.label) }}
                                            </el-dropdown-item>

                                        </el-dropdown-menu>
                                    </el-dropdown-item>

                                </el-dropdown-menu>
                            </span>
                        </el-dropdown>
                        <i class="el-icon-message-solid" style="margin-left: 20px; color: #fff"
                            v-if="i == 2 || i == 3"></i>
                        <span class="cursor" @click="systemMessageNumToView(0, 'SystemMessage', '/SystemMessage')"
                            style="margin-right: 12px" v-if="i == 2 || i == 3">
                            {{ $t("common.MessageNotification") }}
                            （ <span style="color: #ff0000">{{systemMessageNum}}</span> ）
                        </span>

                        <!-- <span class="cursor" style="margin-right: 12px;" @click="toView(2,'customerService')">{{ $t('common.CustomerService')}}</span> -->
                        <!-- <span class="cursor" style="margin-right: 12px;" @click="toView(2,'helpCenter')">{{ $t('common.HelpCenter')}}</span> -->
                    </span>
                </div>
                <div class="logo">
                    <img src="@/assets/img/home/LOGO2020-12-22.png" alt="" style="width: 260px" class="cursor"
                        @click="toView(0, 'home')" />
                </div>
                <div class="title" v-show="searchLoad">
                    <!-- <span  class="cursor" style="font-family: Microsoft YaHei;font-size: 34px;">GEIDCP</span>  -->
                    <span style="float: left; width: 74%">
                        <el-input :placeholder="$t('common.EnterContent')" class="input-with-select"
                            v-model="homeItemTitle" maxlength="50" show-word-limit
                            @keyup.enter.native="toViewChange('WholeStationSearch')">
                            <el-select v-model="select" slot="prepend">
                                <el-option :label="$t('common.WholeStation')" value="all"></el-option>
                                <el-option :label="$t('common.Project')" value="project"></el-option>
                                <el-option :label="$t('common.Enterprise')" value="unit"></el-option>
                                <el-option :label="$t('common.News')" value="information"></el-option>
                                <el-option :label="$t('common.Events')" value="activity"></el-option>
                                <el-option :label="$t('common.Conference')" value="meeting"></el-option>
                                <el-option :label="$t('common.Publications')" value="journal"></el-option>
                                <el-option :label="$t('common.Country')" value="country"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search"
                                @click="toViewChange('WholeStationSearch')"></el-button>
                        </el-input>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
  import Bus from "@/api/bus"; //注意引入
  import {selectPushMsgNum,selectNoticeInfoNum} from '@/api/userCenter'
  export default {
    name: "HeaderItem",
    props:['selectShow'],
    data() {
      return {
        //消息通知消息类型
        messageType:0,
        title: "项目资源",
        systemMessageNum:0,
        homeItemTitle: "",
        select: "all",
        searchLoad:true,
        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.BasicInformation",
            json: "information",
          },
          {
            value: "loginOut",
            label: "common.Logout",
            json: "",
          },
        ],
      };
    },
    created() {
      Bus.$on("title", (val) => {
        this.title = val.label;
      });
      // Bus.$on("serch", (val) => {
      //     this.serch=val.label.substring(0,2)
      // });
    },
    watch: {
      "$route.path"(){
          this.getSearchLoad();
      },
      "$i18n.locale"() {
        if (this.$i18n.locale == "en" && this.$Cookies.get('token')) {
          this.i = 3;
        } else if (
          this.$i18n.locale == "zh" &&
          this.$Cookies.get('token')
        ) {
          this.i = 2;
        } else {
          this.i = 1;
        }
      },
  
    },
  
    mounted() {
      this.getSearchLoad();
      this.getInitData();
      this.getMessageNum();
    },
    methods: {
      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;
            }
          })
        }
      },
      getSearchLoad(){
        let router = this.$route.path;
        this.searchLoad = true;
        if(router == '/WholeStationSearch'){
          this.searchLoad=false;
          this.$forceUpdate();
        }
      },
      getInitData() {
        let locale = window.localStorage.getItem("locale");
        if (!locale) {
          this.$store.commit("modify", router);
          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);
        }
      },
      handleCommand(command) {
        if (command.value == "loginOut") {
          sessionStorage.removeItem("pathReminder");
          this.loginOut();
        } else {
          this.toView(0, command.value, command.json);
        }
      },
      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"));
        this.$bus.emit("setLang", window.localStorage.getItem("locale"));
      },
      loginOut() {
        this.$confirm(this.$t("common.Thisoperationwilllogout") + "?",this.$t("common.Tips"),{ confirmButtonText: this.$t("common.OK"),cancelButtonText: this.$t("common.cancel"), type: "warning",}).then(() => {
            // Cookies.remove('login');
            // let ss=Cookies.get('login');
            // debugger
            // 退出的逻辑代码
            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");
            // debugger
            this.getInitData();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("common.Cancelled"),
            });
          });
      },
      toViewChange(router, json) {
        if (!this.homeItemTitle) {
          this.$message({
            message: this.$t("common.Theinputboxcannotbeempty"),
            type: "warning",
          });
        } else {
          this.$store.commit("modify", router);
          window.localStorage.setItem("router", router);
          const { href } = this.$router.resolve({
            name: router,
            query: {
              select: this.select,
              input: this.homeItemTitle,
            },
          });
          window.open(href, "_blank");
        }
      },
      systemMessageNumToView(num, router, json){
        if(this.messageType==2){
          this.toView(0,'notification','/notification')
        }else{
          this.toView(0, 'SystemMessage', '/SystemMessage');
        }
      },
      toView(num, router, json) {
        if (json) {
          this.$store.commit("modify", router);
          window.localStorage.setItem("router", router);
          this.$router.push({ name: router, query: { key: json } });
        } else {
          this.$store.commit("modify", router);
          window.localStorage.setItem("router", router);
          this.$router.push({ name: 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);
          });
        }
      },
    },
  };
  </script>
  
<style scoped>
body {
  margin: 0;
  padding: 0;
}
.header1 {
  height: 170px;
  margin: auto;
  background: url("../assets/img/home/banner2.jpg");
}
.header2 {
  height: 170px;
  margin: auto;
  position: relative;
}
.language {
  line-height: 12px;
  color: #f9f9f9;
  font-weight: 400;
  font-size: 16px;
  padding-top: 15px;
}
.logo {
  position: absolute;
  top: 50px;
  left: 70px;
  margin-top: 15px;
}
.title {
  margin-top: 15px;
  position: absolute;
  top: 60px;
  left: 605px;
  font-size: 27px;
  font-weight: 700;
  height: 50px;
  /* line-height: 50px; */
  color: #fff;
  width: 705px;
}
@media (max-width: 1199px) {
  .title {
    width: 580px;
  }
}
.header1 >>> .el-input__inner {
  height: 50px !important;
}
.header1 >>> .el-input-group__prepend {
  background-color: #fff;
  color: #000;
}

.active span:hover {
  color: #ff0000;
  cursor: pointer;
}
.el-dropdown {
  color: #f9f9f9;
  font-size: 16px;
}
.header1 >>> .el-select {
  width: 88px;
}
</style>