shop-pc/layouts/module/header/index.vue

<template>
  <div class="layout-header">
    <!-- 滚动吸顶头部 -->
    <div v-show="isSticky">
      <div
        class="sticky-bar-header"
        :class="{ 'sticky-bar-header--hide-shadow': hideBarShadow }"
      >
        <div class="sticky-bar-header__wrap flex flex-middle flex-between">
          <div class="flex flex-middle">
            <div class="bar-header-wrap__logo" @click="onOpenHomePage">
              <img src="~/assets/img/layout/logo-sticky.png" />
            </div>
            <el-menu
              :default-active="tabPath"
              mode="horizontal"
              @select="onTabSelect"
            >
              <el-menu-item
                v-for="item in tabList"
                :key="item.value"
                :index="item.value"
                >{{ item.label }}</el-menu-item
              >
            </el-menu>
          </div>
          <div class="bar-header-wrap__icons flex flex-middle">
            <img
              src="~/assets/img/layout/icon-search-sticky.png"
              @click="$router.push('/goods/list')"
            />
            <div class="header-wrap-icons__shop" @click="onOpenCartPage">
              <img src="~/assets/img/layout/icon-shop-sticky.png" />
              <div
                v-if="cartCount > 0"
                :class="{ 'wrap-icons-shop__tip--more': cartCount > 10 }"
                class="wrap-icons-shop__tip flex flex-middle flex-center"
              >
                {{ cartCount }}
              </div>
            </div>
            <div
              v-if="token"
              class="header-wrap-icons__login"
              @click="$router.push('/account/home')"
            >
              <img :src="userInfo.avatar" />
            </div>
            <div
              v-else
              class="header-wrap-icons__unlogin"
              @click="onLoginClick"
            >
              登录
            </div>
          </div>
        </div>
      </div>
    </div>
    <template>
      <HeaderInfoBar />
      <div class="default-bar-header">
        <div class="bar-header-box">
          <div class="bar-header-box__wrap flex flex-between flex-middle">
            <div class="header-box-wrap__logo" @click="onOpenHomePage">
              <img src="~/assets/img/layout/logo.png" />
            </div>
            <div class="header-box-wrap__right flex flex-middle">
              <div class="box-wrap-right__search flex">
                <div class="search-input">
                  <el-input
                    v-model="searchContent"
                    clearable
                    placeholder="请输入商品名称"
                    @keyup.enter.native="onSearch"
                  >
                  </el-input>
                </div>
                <div
                  slot="suffix"
                  class="search-icon flex flex-center flex-middle"
                  @click="onSearch"
                >
                  <img src="~/assets/img/layout/icon-search.png" />
                </div>
              </div>
              <!-- 购物车 -->
              <HeaderCart />
            </div>
          </div>
          <div class="bar-header-box__tab flex flex-middle">
            <HeaderCategory />
            <div
              v-for="item in tabList"
              :key="item.value"
              class="header-box-tab__common flex flex-center flex-middle"
              :class="{
                'header-box-tab__common--light':
                  item.value === $nuxt.$route.fullPath,
              }"
              @click="onTabSelect(item.value)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="!hideBarLine" class="layout-header-line"></div>
    </template>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { CATEGROY_LEVEL } from "@/constants";
import { ApiGetHomeSeckill } from "@/plugins/api/seckill";
import HeaderInfoBar from "./HeaderInfoBar.vue";
import HeaderCategory from "./HeaderCategory.vue";
import HeaderCart from "./HeaderCart.vue";

export default {
  name: "DefaultHeader",
  components: { HeaderInfoBar, HeaderCategory, HeaderCart },
  props: {
    // 是否置顶
    isSticky: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchContent: "",
      tabPath: "/",
      cartProductList: [], // 购物车列表
    };
  },
  computed: {
    ...mapState(["userInfo", "token", "seckillTabVisible", "cartProducts"]),
    cartCount() {
      return this.cartProducts.length;
    },
    tabList() {
      const defaultList = [
        { label: "首页", value: "/" },
        {
          label: "开发书籍",
          value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
        },
      ];
      if (this.seckillTabVisible) {
        return [...defaultList, { label: "限时秒杀", value: "/seckill" }];
      }
      return defaultList;
    },

    // 是否隐藏吸顶tab底部阴影
    hideBarShadow() {
      return ["/seckill"].includes(this.$route.path);
    },

    // 是否隐藏底部黄色边框
    hideBarLine() {
      return ["/", "/seckill"].includes(this.$route.path);
    },
  },
  watch: {
    "$route.path"(val) {
      if (val !== "/goods/list") {
        this.searchContent = "";
      }
    },
  },
  created() {
    this.getSeckillData();
  },
  methods: {
    async getSeckillData() {
      const { result } = await ApiGetHomeSeckill();
      if (result && result.activityTimeVO) {
        this.$store.commit("setSeckillTabVisible", true);
      }
    },
    onLoginClick() {
      this.$isLoginValidate();
    },
    onTabSelect(value) {
      this.tabPath = value;
      this.searchContent = "";
      window.open(`${location.origin}${value}`);
    },
    onSearch() {
      this.$router.push({
        path: "/goods/list",
        query: {
          keyword: this.searchContent,
        },
      });
    },
    onOpenCartPage() {
      window.open(`${location.origin}/cart`);
    },
    onOpenHomePage() {
      if (this.$route.path === "/") {
        return;
      }
      window.open(`${location.origin}/`);
    },
  },
};
</script>
<style lang="scss" scoped>
.sticky-bar-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 10;
  background: #ffffff;
  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
  &--hide-shadow {
    box-shadow: none;
    /deep/.el-menu {
      .is-active {
        border-bottom: none !important;
      }
    }
  }
  .sticky-bar-header__wrap {
    @include layout-box;
    height: 100%;
    .bar-header-wrap__logo {
      width: 164px;
      height: 28px;
      margin-right: 50px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bar-header-wrap__icons {
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
      .header-wrap-icons__shop {
        position: relative;
        margin-left: 20px;
        .wrap-icons-shop__tip {
          position: absolute;
          left: 18px;
          top: -4px;
          height: 14px;
          width: 14px;
          background: #ff512b;
          font-size: 10px;
          color: #ffffff;
          border-radius: 50%;
          &--more {
            width: unset;
            padding: 0 3px;
            border-radius: 7px;
          }
        }
      }
      .header-wrap-icons__login {
        margin-left: 47px;
        img {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          object-fit: cover;
        }
      }
      .header-wrap-icons__unlogin {
        font-size: 16px;
        color: #909399;
        margin-left: 30px;
      }
    }
    /deep/ .el-menu {
      height: 50px;
      color: #666666;
      .is-active {
        color: #ff7f39;
        border-bottom: 3px solid #ff823c;
      }
      .el-menu-item:hover {
        color: #ff7f39;
      }
      .el-menu-item {
        height: 100%;
        line-height: 50px;
        font-size: 16px;
        margin: 0 30px;
        padding: 0 5px;
      }
    }
  }
}
.default-bar-header {
  padding-top: 32px;
  position: relative;
  z-index: 3;
  .bar-header-box {
    @include layout-box;
    background: #ffffff;
    .bar-header-box__wrap {
      height: 40px;
      font-size: 14px;
      margin-bottom: 38px;
      padding-right: 50px;
      cursor: pointer;
      .header-box-wrap__logo {
        width: 244px;
        height: 100%;
      }
      .header-box-wrap__right {
        .box-wrap-right__search {
          margin-right: 23px;
          .search-input {
            width: 551px;
            z-index: 1;
            border-radius: 4px;
            /deep/.el-input__inner:focus {
              border-color: #ff512b;
            }
          }
          .search-icon {
            width: 77px;
            margin-left: -2px;
            background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
            border-radius: 0px 4px 4px 0px;
            z-index: 2;
            cursor: pointer;
            img {
              width: 26px;
              height: 26px;
            }
          }
        }
      }
    }
    .bar-header-box__tab {
      height: 38px;
      .header-box-tab__common--light {
        color: #ff7f39 !important;
      }
      .header-box-tab__common {
        margin-left: 78px;
        height: 100%;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
        &:hover {
          color: #ff875b;
        }
      }
    }
  }
}
.layout-header-line {
  width: 100%;
  height: 2px;
  background: #ff875b;
}
</style>