gaoyixia-pc/src/components/layout/Header.vue

<template>
  <div class="header">
    <div class="header-icon" @click="$router.push('/index')">GYXQCDZ</div>
    <div class="header-search">
      <input
        class="search"
        type="text"
        v-model="searchState.value"
        @keydown.enter="handleSearch"
      />
      <div class="hot">
        <img src="@/assets/icon/resoubang.png" />
        <span>热搜榜</span>
      </div>
      <div class="btn" @click="handleSearch">
        <i class="el-icon-search"></i>
        搜索
      </div>
    </div>
    <div class="header-user">
      <div class="user-login" v-if="!!userInfo">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-s-promotion"
          style="background-color: #0054f7; width: 80px; height: 35px"
          v-if="handleFilter()"
          @click="handleContribute"
        >
          发布
        </el-button>
        <div class="user-login-avatar-box">
          <img
            class="user-login-avatar"
            :class="{ can: !!personalPath }"
            :src="
              userInfo.headimg ? userInfo.headimg : '@/assets/icon/avatar.png'
            "
            @click="
              vipPath.includes(routePath)
                ? $router.push('/vip')
                : handlePersonal()
            "
          />
          <div class="mark" v-if="centerMarkNum">{{ centerMarkNum }}</div>
        </div>
      </div>
      <div class="user-login-none" v-else>
        <el-button
          type="primary"
          style="background-color: #0054f7"
          @click="handleLogin"
          >登录/注册</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      path: ["video", "image-text", "information"],
      vipPath: ["/index", "/search"],
    };
  },
  computed: {
    ...mapState(["userInfo", "routePath", "searchState", "mark_num"]),
    contributePath() {
      return `/${this.handleFilter()}-contribute`;
    },
    personalPath() {
      return `/${this.handleFilter()}/comment-on-my`;
    },
    centerMarkNum() {
      let markNumState =
          this.mark_num[
            `${this.handleFilter().replace(/-([a-z])/g, function (g) {
              return g[1].toUpperCase();
            })}MarkNum`
          ],
        num = 0,
        computedArr = ["comment_num", "reply_num", "follow_num", "praise_num"];
      for (let key in markNumState) {
        if (computedArr.includes(key)) num += markNumState[key];
      }
      return num;
    },
  },
  mounted() {},
  methods: {
    // 跳转登录
    handleLogin() {
      this.$router.push({ name: "login" });
    },
    // 跳转发布
    handleContribute() {
      if (this.routePath == this.contributePath) return;
      this.$router.push(this.contributePath);
    },
    // 跳转个人中心
    handlePersonal() {
      if (!this.handleFilter()) return;
      if (this.routePath == this.personalPath) return;
      // this.$router.open(this.personalPath);
      this.$router.push(this.personalPath);
    },
    // 取值
    handleFilter() {
      let path = "";
      this.path.forEach((item) => {
        if (
          !this.routePath.includes("contribute") &&
          this.routePath.includes(item)
        ) {
          path = item;
        }
      });
      return path;
    },
    // 搜索
    handleSearch() {
      this.$store.commit("setSearchState", {
        type: this.handleFilter(),
      });
      if (this.routePath == "/search") return;
      this.$router.push(`/search`);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: $headerHeight;
  width: 100%;
  // min-width: 1200px;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  background-color: white;
  .header-icon {
    width: 160px;
    font-size: 28px;
    font-weight: 400;
    color: #2a63f3;
    line-height: 38px;
    user-select: none;
    cursor: pointer;
  }

  .header-search {
    width: 40%;
    min-width: 500px;
    max-width: 800px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    .search {
      width: calc(100% - 100px);
      height: 50px;
      outline: none;
      padding: 0 20px;
      box-sizing: border-box;
      border: 1px solid #2a63f3;
      border-right: none;
      transform: translate(1px, 0);
      border-top-left-radius: 23px;
      border-bottom-left-radius: 25px;
      font-size: 16px;
    }
    .hot {
      position: absolute;
      right: 130px;
      font-size: 14px;
      font-weight: 400;
      color: #ff7b15;
      display: flex;
      align-items: center;
      user-select: none;
      img {
        width: 18px;
        height: 18px;
      }
    }
    .btn {
      width: 100px;
      height: 50px;
      background: #2a63f3;
      font-size: 17px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 50px;
      border-top-right-radius: 23px;
      border-bottom-right-radius: 25px;
      user-select: none;
      cursor: pointer;
    }
  }

  .header-user {
    display: flex;
    justify-content: center;
    align-items: center;

    .user-login {
      width: 160px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .user-login-avatar-box {
        height: 50px;
        width: 50px;
        margin-left: 20px;
        position: relative;
        .user-login-avatar {
          height: 100%;
          width: 100%;
          border-radius: 50%;
        }
        .mark {
          height: 16px;
          width: 32px;
          background-color: #ff3535;
          color: white;
          border-radius: 16px;
          margin-left: 20px;
          text-align: center;
          line-height: 16px;
          font-size: 12px;
          border: 1px solid white;
          position: absolute;
          top: -3px;
          right: -20px;
          transform: scale(0.9);
        }
      }
      .can {
        cursor: pointer;
      }
    }
  }
}
</style>