proginn-frontend/components/header.vue

<template>
  <div id="proginn-header" :class="{transparent: transparent}">
    <div class="list">
      <a :href="baseUrl" class="nav-item">
        <img
          class="logo"
          :src="transparent ? WhiteLogo : 'https://stacdn.proginn.com/image/common/logo3@2x.png'"
        />
      </a>
      <a :href="baseUrl" class="nav-item">首页</a>
      <a :href="baseUrl+'/cloud?from=top_nav'" class="nav-item">云端工作</a>
      <a :href="baseUrl+'/users'" class="nav-item">程序员</a>
      <el-dropdown class="nav-dropdown">
        <el-button type="text" class="dashboard-title">更多服务</el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <a
              class="workstation"
              :href="jishuBaseUrl+'/?from=top_nav'"
              style="display: flex; align-items: center;"
            >
              <img
                src="@/assets/img/header/jishuin.png"
                style="width: 24px;height: 24px;margin-right: 5px;"
              />技术圈
            </a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a
              class="workstation"
              href="http://www.binstd.com/?from=proginn"
              style="display: flex; align-items: center;"
            >
              <img
                src="@/assets/img/header/binstd.png"
                style="width: 24px;height: 24px;margin-right: 5px;"
              />进制数据
            </a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a
              class="workstation"
              :href="baseUrl+'/job/'"
              style="display: flex; align-items: center;"
            >
              <img
                src="@/assets/img/header/job@2x.png"
                style="width: 24px;height: 24px;margin-right: 5px;"
              />兼职招聘
            </a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a
              class="workstation"
              :href="baseUrl+'/kaifain'"
              style="display: flex; align-items: center;"
            >
              <img
                src="@/assets/img/header/partners.png"
                style="width: 24px;height: 24px;margin-right: 5px;"
              />解决方案
            </a>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div>
        <div style="position: relative;">
          <input
            class="input"
            autocomplete="off"
            placeholder="搜索您感兴趣的程序员"
            v-model="keywork"
            @keyup.enter="clickInputEnter"
          />
          <i class="el-icon-search" @click="clickInputEnter"></i>
        </div>
        <div class="dropdown" style="display:none;"></div>
        <div class="dropdown" style="display:none;"></div>
      </div>
      <template v-if="myInfo.nickname">
        <el-dropdown class="nav-dropdown">
          <el-button type="text" class="dashboard-title">
            <i class="el-icon-tickets"></i>工作台
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a class="workstation" :href="baseUrl+'/wo/work_todo'">
                <i class="el-icon-edit"></i>我的待办
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="workstation" :href="baseUrl+'/wo/work_platform'">
                <i class="el-icon-date"></i>我的项目
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="workstation" :href="baseUrl+'/wo/work_hire'">
                <i class="el-icon-news"></i>我的雇佣
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="workstation" :href="baseUrl+'/wo/work_cloud'">
                <i class="el-icon-service"></i>我的云端
              </a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown class="nav-dropdown">
          <el-button type="text" class="message-box-title">
            <i class="el-icon-message"></i>消息
            <span
              v-if="messageCount.total > 0"
              class="message-count message-total"
            >{{messageCount.total}}</span>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="message-box" @click.native="clickMessages('/message/system')">
              <i class="circle blue"></i>系统消息
              <span v-if="messageCount.system" class="message-count">{{messageCount.system}}</span>
            </el-dropdown-item>
            <el-dropdown-item class="message-box" @click.native="clickMessages('/message/project')">
              <i class="circle orange"></i>工作通知
              <span v-if="messageCount.work" class="message-count">{{messageCount.work}}</span>
            </el-dropdown-item>
            <el-dropdown-item class="message-box" @click.native="clickMessages('/message/comment')">
              <i class="circle red"></i>评论回复
              <span v-if="messageCount.reply" class="message-count">{{messageCount.reply}}</span>
            </el-dropdown-item>
            <el-dropdown-item class="message-box" @click.native="clickMessages('/message/at')">
              <i class="circle green"></i>@我的
              <span v-if="messageCount.at" class="message-count">{{messageCount.at}}</span>
            </el-dropdown-item>
            <el-dropdown-item class="message-box" @click.native="clickMessages('/message/plus')">
              <i class="circle pink"></i>赞及其它
              <span
                v-if="messageCount.community_other"
                class="message-count"
              >{{messageCount.community_other}}</span>
            </el-dropdown-item>
            <el-dropdown-item class="message-box" @click.native="clickMessages('/message/coin')">
              <i class="circle yellow"></i>收支信息
              <span v-if="messageCount.balance" class="message-count">{{messageCount.balance}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-popover class="nav-popover" placement="bottom"  width="226" trigger="hover">
          <div class="ref" slot="reference">
            <a class="nav-header" :href="baseUrl+'/wo/work_todo'">
              <img class="header-user" :src="myInfo.icon_url" />
              <img
                v-if="myInfo.is_vip"
                class="header-vip-icon"
                :src="baseUrl+`/Public/image/h5/vip_icon${vipImage}.png`"
                alt="vip-icon"
              />
            </a>
            <span class="nickname">{{myInfo.nickname}}</span>
          </div>
          <div class="menu">
            <div v-if="myInfo.is_vip" class="vip-info vip-info-com">
              <div class="vip-info-top">
                <img
                  class="vip-icon"
                  :src="baseUrl+`/Public/image/h5/vip_icon${vipImage}.png`"
                  alt="vip-icon"
                />
                <span class="vip-content">
                  <span class="vip-title" :class="vipTextClass">{{vipText}}</span>
                  <br />
                  <span class="vip-end-date">{{vipInfo.endDate}}到期</span>
                </span>
              </div>
              <div class="vip-arcs">
                <a class="vip-arc" :class="vipTextClass" :href="baseUrl+'/type/vip/'+vipType">查看权益</a>
                <a
                  class="vip-arc"
                  :class="vipTextClass"
                  :href="baseUrl+'/vip/pay?number=3&amp;product_id='+this.$store.state.userinfo.vip_type_id+'&amp;next=/type/vip/'+vipType"
                >立即续费</a>
              </div>
            </div>
            <div class="vip-items">
              <a class="vip-item divider" :href="baseUrl+'/wo/work_platform'">
                <i class="el-icon-date"></i>我的项目
              </a>
              <a class="vip-item" :href="baseUrl+'/wo/work_hire'">
                <i class="el-icon-news"></i>我的雇佣
              </a>
              <a class="vip-item" :href="baseUrl+'/wo/work_cloud'">
                <i class="el-icon-service"></i>我的云端
              </a>
              <a class="vip-item divider" :href="baseUrl+`/wo/${myInfo.uid}`">
                <i class="el-icon-document"></i>我的主页
              </a>
              <a class="vip-item" :href="baseUrl+'/index/app'">
                <i class="el-icon-view"></i>关注微信
              </a>
              <a class="vip-item" :href="baseUrl+'/credit/pages'">
                <i class="el-icon-credit"></i>技术信用
              </a>
              <a class="vip-item divider" :href="baseUrl+'/index/app'">
                <i class="el-icon-download-app"></i>下载APP
              </a>
              <a class="vip-item" @click="clickQuit">
                <i class="el-icon-back" style="margin: 0 10px !important;"></i>退出
              </a>
            </div>
          </div>
        </el-popover>
      </template>
      <div v-else>
        <a class="account-ctrl" style="margin-right: 40px" :href="baseUrl+'/index/app'">下载APP</a>
        <a class="account-ctrl" :href="baseUrl+'/?loginbox=show'">登录</a>
        <a class="account-ctrl" style="margin-left: 40px;" :href="baseUrl+'/user/register'">注册</a>
      </div>
    </div>
  </div>
</template>

<script>
import WhiteLogo from "@/assets/img/white_logo@2x.png";

export default {
  props: ["transparent"],
  data() {
    return {
      baseUrl: "",
      jishuBaseUrl: "",
      // 搜索的关键词
      keywork: "",
      // 消息数量
      messageCount: {},
      WhiteLogo
    };
  },
  computed: {
    vipInfo() {
      let userinfo = this.$store.state.userinfo;
      return {
        id: userinfo.vip_type_id,
        endDate: userinfo.vip_end_date
      };
    },
    myInfo() {
      return this.$store.state.userinfo;
    },
    isCom() {
      return this.$store.state.userinfo.vip_type_id === "1";
    },
    vipImage() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
          return "_com";
        case 2:
          return "";
        case 3:
          return "_premium";
        default:
          return "";
      }
    },
    vipType() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
        case 3:
          return "enterprise";
          break;
        case 2:
          return "developer";
      }
    },
    vipTextClass() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
          return "is-newly";
        case 2:
          return "is-dev";
        case 3:
          return "is-premium";
        default:
          return "";
      }
    },
    vipText() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
          return "初创版会员";
        case 2:
          return "开发者会员";
        case 3:
          return "企业版会员";
        default:
          return "";
      }
    }
  },
  mounted() {
    if (this.myInfo && this.myInfo.nickname) {
      this.getMessageCount();
    }
  },
  methods: {
    async clickQuit() {
      location.href = this.baseUrl + "/user/quit";
    },
    clickMessages(url) {
      location.href = this.baseUrl + url;
    },
    clickInputEnter() {
      window.location.href = this.baseUrl + "/search/?keyword=" + this.keywork;
    },
    async getMessageCount() {
      let res = await this.$axios.$get(
        "/api/message/getUnreadCount",
        {},
        { neverLogout: true }
      );
      if (res) {
        this.messageCount = res.data;
      }
    }
  },
  created() {
    this.baseUrl = this.$store.state.domainConfig.siteUrl;
    this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
  }
};
</script>

<style scoped>
#proginn-header {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background: white;
  z-index: 10;
}
.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
}
.nav-item {
  display: flex;
  height: 83px;
  align-items: center;
  font-size: 15px;
  color: #515151;
  /* padding: 0 15px; */
  box-sizing: border-box;
}
.nav-item:first-child {
  padding: 0;
}
.nav-item:nth-child(n + 2):hover {
  color: #1782d9;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #1782d9;
}
.nav-dropdown,
.nav-popover {
  --imgWidth: 28px;
  height: 40px;
  display: flex;
  align-items: center;
}
.nav-popover > .ref {
  display: flex;
  align-items: center;
}
.nav-header {
  position: relative;
  width: var(--imgWidth);
  height: var(--imgWidth);
  margin-right: 5px;
}
.logo {
  width: 140px;
  height: auto;
}
.input {
  width: 234px;
  height: 40px;
  border-radius: 20px;
  background: #f6f6f6;
  padding: 0 40px;
  border: 1px solid #ebebeb;
  font-size: 13px;
}

.el-icon-search {
  position: absolute;
  top: 12px;
  right: 20px;
  color: grey;
  cursor: pointer;
}
.el-icon-credit {
  background: url("~@/assets/img/header/creditIconMine.png") no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 9px !important;
}
.el-icon-download-app {
  background: url("~@/assets/img/header/download@2x.png") no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 9px !important;
}
.el-icon-search::before {
  font-size: 14px;
  font-weight: 800;
}
i {
  margin-right: 4px;
}
i.circle {
  display: inline-block;
  --width: 12px;
  width: var(--width);
  height: var(--width);
  border-radius: calc(var(--width) / 2);
}
i.blue {
  background: #3b83c0;
}
i.orange {
  background: #e07b53;
}
i.red {
  background: #d95c5c;
}
i.green {
  background: #5bbd72;
}
i.pink {
  background: #d9499a;
}
i.yellow {
  background: #f2c61f;
}
.message-box {
  position: relative;
  display: flex;
  align-items: center;
}
.message-count {
  color: white;
  margin-left: 4px;
  display: block;
  line-height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  background: grey;
}
.message-count.message-total {
  position: absolute;
  top: 0px;
  right: -10px;
  background: #d95c5c;
}
span.other-icon {
  display: block;
  margin-left: 30px;
}
.nickname {
  font-size: 15px;
}
.vip-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 206px;
  height: 120px;
}
.vip-info-top {
  display: flex;
  width: 142px;
}
.vip-title {
  color: #cb9d53;
  font-size: 16px;
  line-height: 36px;
}
.vip-icon {
  width: 24px;
  height: 24px;
  margin: 10px 8px 0 0;
}
.vip-end-date {
  font-size: 12px;
  color: #999;
}
.vip-arcs {
  display: flex;
  justify-content: space-between;
  width: 142px;
  margin-top: 11px;
}
.vip-arc {
  flex: 1;
  font-size: 13px;
  color: #cb9d53;
  text-align: center;
}
.vip-arc:first-child {
  border-right: 1px solid rgba(245, 245, 245, 1);
}
.vip-info-com .vip-title {
  color: rgb(113, 177, 253);
}
.vip-info-com .vip-arc {
  color: rgb(113, 177, 253);
}
.header-user {
  width: var(--imgWidth);
  height: var(--imgWidth);
  border-radius: 20px;
}
.header-vip-icon {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 16px;
  height: 16px;
}
.vip-items {
  display: flex;
  flex-direction: column;
}
.vip-item {
  line-height: 32px;
  color: #606266;
}
.vip-item > i {
  margin: 0 10px;
}
.divider {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  padding-top: 10px;
  cursor: pointer;
}
.vip-info-com .is-dev {
  color: #cb9d53;
}
.vip-info-com .is-newly {
  color: #308eff;
}

.vip-info-com .is-premium {
  color: #00c469;
}

.workstation {
  color: #606266;
}
.account-ctrl {
  color: #606266;
}
#proginn-header a {
  text-decoration: none !important;
}
#proginn-header.transparent {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#proginn-header.transparent a {
  color: white;
}
.message-box-title,
.dashboard-title {
  color: #515151;
  font-size: 15px;
}
#proginn-header.transparent .message-box-title,
#proginn-header.transparent .dashboard-title {
  color: white;
}
#proginn-header.transparent .nickname {
  color: white;
}
</style>