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

<template>
  <div>
    <div class="header1">
      <div class="header2">
        <div class="language">
            <div v-if="!langeInfo">
          <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></div>
          <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 {
        langeInfo:'',
      //消息通知消息类型
      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.langeInfo = localStorage.getItem('aaa')
    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>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
body {
  margin: 0;
  padding: 0;
}
.header1 {
  /* width:1500px; */
  height: 170px;
  margin: auto;
  /* background: #2c558a; */
  /* background: url("../assets/img/home/banner2.jpg") no-repeat ; */
  /* animation: panoramic 10s linear infinite alternate; */

}
/* .header1:hover {
            animation-play-state: paused;
} */

/* @keyframes panoramic {
    to {
        background-position: 100% 0;
    }
} */
.header2 {
  width: 1200px;
  height: 170px;
  margin: auto;
  position: relative;
  border-bottom: 1px solid #4e84b9;

  /* background: skyblue; */
}
.language {
  line-height: 12px;
  color: #f9f9f9;
  font-weight: 400;
  font-size: 16px;
  padding-top: 15px;
}
.logo {
  position: absolute;
  top: 50px;
  left: 70px;
  /* width: 200px; */
  /* height: 55px; */
  margin-top: 15px;
  /* background-image: url(@/assets/logo.png); */
}
.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>