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

<template>
  <div class="layout-header">
    <!-- 滚动吸顶头部 -->
    <template v-if="isSticky">
      <div class="sticky-bar-header">
        <div class="sticky-bar-header__wrap flex flex-middle flex-between">
          <div class="flex flex-middle">
            <img
              class="bar-header-wrap__logo"
              src="~/assets/img/layout/logo-sticky.png"
            />
            <el-menu
              :default-active="tabPath"
              mode="horizontal"
              @select="handleTabSelect"
            >
              <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" />
            <div class="header-wrap-icons__shop">
              <img src="~/assets/img/layout/icon-shop-sticky.png" />
              <span class="">3</span>
            </div>
            <div v-if="token" class="header-wrap-icons__login">
              <img :src="userInfo.avatar" />
            </div>
            <div
              v-else
              class="header-wrap-icons__unlogin"
              @click="onLoginClick"
            >
              登录
            </div>
          </div>
        </div>
      </div>
    </template>
    <template>
      <HeaderInfoBar />
      <div class="default-bar-header">
        <div class="bar-header-box">
          <div class="bar-header-box__wrap flex flex-between flex-middle">
            <img
              class="header-box-wrap__logo"
              src="~/assets/img/layout/logo.png"
            />
            <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"
                    placeholder="请输入商品名称"
                  ></el-input>
                </div>
                <div
                  class="search-icon flex flex-center flex-middle"
                  @click="onSearch"
                >
                  <img src="~/assets/img/layout/icon-search.png" />
                </div>
              </div>
              <div
                class="box-wrap-right__cart flex flex-middle"
                @click="onJumpCart"
              >
                <img src="~/assets/img/layout/icon-shop.png" />
                <span>购物车</span>
                <div class="wrap-right-cart__tip">3</div>
              </div>
            </div>
          </div>
          <!-- 热门分类 -->
          <div class="bar-header-box__tab flex flex-middle">
            <div
              v-show="showCategroyTab"
              class="header-box-tab__category"
              @mouseenter="handleCategoryChange(true)"
              @mouseleave="handleCategoryChange(false)"
            >
              <div class="tab-category__label flex flex-center flex-middle">
                <img src="~/assets/img/layout/icon-category.png" />
                <span>热门分类</span>
              </div>
              <div
                v-show="isCategroyOpen || categroyVisible"
                class="tab-category__menu flex"
                @mouseenter="handleCategoryTwoChange(true)"
                @mouseleave="handleCategoryTwoChange(false)"
              >
                <!-- 左侧一级分类 -->
                <div class="tab-category-menu__left">
                  <div
                    v-for="item in categroyData"
                    :key="item.id"
                    @mouseenter="handleCategoryHover(item.id)"
                    @click="onCategoryClick(item.id, CATEGROY_LEVEL.ONE)"
                    class="menu-left__item flex flex-middle"
                    :class="{
                      'menu-left__item--light': item.id === currentCategroyId,
                    }"
                  >
                    <img />
                    <span>{{ item.name }}</span>
                  </div>
                </div>
                <!-- 右侧二级分类 -->
                <div
                  v-show="categroyTwoVisible"
                  class="tab-category-menu__right flex-1"
                >
                  <div
                    v-for="item in categroyData"
                    :key="item.id"
                    @mouseenter="handleCategoryHover(item.id)"
                    class="category-menu-right__wrap"
                    :class="{
                      'category-menu-right__wrap--light':
                        item.id === currentCategroyId,
                    }"
                  >
                    <span
                      v-for="itemList in item.list"
                      :key="itemList.id"
                      class="menu-right-wrap__item"
                      @click="onCategoryClick(itemList.id, CATEGROY_LEVEL.TWO)"
                      >{{ itemList.name }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <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)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="!hideBarLine" class="layout-header-line"></div>
    </template>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  ApiGetCategoryOneList,
  ApiGetCategoryTwoAndGoods,
} from "@/plugins/api/goods";
import { CATEGROY_LEVEL } from "@/constants";
import HeaderInfoBar from "./HeaderInfoBar.vue";

export default {
  name: "DefaultHeader",
  components: { HeaderInfoBar },
  props: {
    // 是否置顶
    isSticky: {
      type: Boolean,
      default: false,
    },

    // 热门分类是否默认展开
    isCategroyOpen: {
      type: Boolean,
      default: false,
    },

    // 是否展示热门分类tab
    showCategroyTab: {
      type: Boolean,
      default: true,
    },

    // 是否隐藏底部黄色边框
    hideBarLine: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      CATEGROY_LEVEL,
      searchContent: "",
      tabPath: "/",
      tabList: [
        { label: "首页", value: "/" },
        {
          label: "开发书籍",
          value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
        },
        { label: "限时秒杀", value: "/sckill" },
      ],
      categroyTwoVisible: false, // 是否展示二级分类
      categroyVisible: false, // 是否展示一级分类
      currentCategroyId: 0, // 当前鼠标悬停的一级分类id
      categroyData: [],
    };
  },
  computed: {
    ...mapState(["userInfo", "token"]),
  },
  mounted() {
    this.getCategroyData();
  },
  methods: {
    onLoginClick() {
      this.$isLoginValidate();
    },
    // 一级分类鼠标悬停
    handleCategoryHover(id) {
      this.currentCategroyId = id;
    },
    // 分类点击
    onCategoryClick(id, levelType) {
      this.categroyVisible = false;
      this.categroyTwoVisible = false;
      this.$router.push({
        path: "/goods/list",
        query: {
          id,
          levelType,
        },
      });
    },
    // 一级分类是否可见
    handleCategoryChange(val) {
      this.categroyVisible = val;
      if (!val) {
        this.currentCategroyId = 0;
      }
    },
    // 二级分类是否可见
    handleCategoryTwoChange(val) {
      this.categroyTwoVisible = val;
    },
    handleTabSelect(value) {
      this.$router.push({ path: value });
    },
    onTabSelect({ value }) {
      this.tabPath = value;
      this.$router.push({ path: value });
    },
    onJumpCart() {
      if (!this.$isLoginValidate()) {
        return;
      }
      this.$router.push("/cart");
    },
    // 获取热门分类信息
    async getCategroyData() {
      const { result } = await ApiGetCategoryOneList();
      if (result && result.length > 0) {
        this.categroyData = await Promise.all(
          result.map(async (item) => {
            const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
              categoryId: item.id,
            });
            if (resultGoods && resultGoods.length > 0) {
              return {
                ...item,
                list: resultGoods,
              };
            }
          })
        );
      }
    },
    onSearch() {
      this.$router.push({
        path: "/goods/list",
        query: {
          keyword: this.searchContent,
        },
      });
    },
  },
};
</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);
  .sticky-bar-header__wrap {
    @include layout-box;
    height: 100%;
    .bar-header-wrap__logo {
      width: 164px;
      height: 28px;
      margin-right: 50px;
    }
    .bar-header-wrap__icons {
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
      .header-wrap-icons__shop {
        position: relative;
        margin-left: 14px;
        span {
          position: absolute;
          right: -6px;
          top: -4px;
          display: block;
          height: 14px;
          padding: 0 2px;
          line-height: 14px;
          text-align: center;
          background: #ff512b;
          font-size: 10px;
          color: #ffffff;
          border-radius: 50%;
        }
      }
      .header-wrap-icons__login {
        margin-left: 47px;
        img {
          width: 34px;
          height: 34px;
          border-radius: 50%;
        }
      }
      .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: 2px solid #ff823c;
      }
      .el-menu-item:hover {
        color: #ff7f39;
      }
      .el-menu-item {
        height: 100%;
        line-height: 50px;
        font-size: 16px;
        margin: 0 20px;
      }
    }
  }
}
.default-bar-header {
  padding-top: 32px;
  position: relative;
  z-index: 3;
  .bar-header-box {
    @include layout-box;
    background: #ffffff;
    .bar-header-box__wrap {
      height: 42px;
      font-size: 14px;
      margin-bottom: 38px;
      padding-right: 50px;
      .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;
            /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 8px 8px 0px;
            z-index: 2;
            cursor: pointer;
            img {
              width: 26px;
              height: 26px;
            }
          }
        }
        .box-wrap-right__cart {
          padding: 0 18px;
          height: 42px;
          line-height: 42px;
          color: #999999;
          border-radius: 8px 8px 8px 8px;
          border: 1px solid #eeeeee;
          cursor: pointer;
          .wrap-right-cart__tip {
            min-width: 14px;
            height: 14px;
            padding: 0 3px;
            font-size: 10px;
            line-height: 14px;
            text-align: center;
            background: #ff512b;
            border-radius: 50%;
            color: #ffffff;
          }
          img {
            width: 16px;
            height: 16px;
            margin: 0 4px 0 10px;
          }
        }
      }
    }
    .bar-header-box__tab {
      height: 38px;
      .header-box-tab__category {
        position: relative;
        height: 100%;
        .tab-category__label {
          width: 190px;
          height: 100%;
          background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
          border-radius: 4px 4px 0px 0px;
          font-weight: bold;
          color: #ffffff;
          cursor: pointer;
          img {
            width: 20px;
            height: 20px;
            margin-right: 16px;
          }
        }
        .tab-category__menu {
          position: absolute;
          top: 38px;
          left: 0;
          font-size: 14px;
          color: #333333;
          .tab-category-menu__left {
            width: 190px;
            padding: 15px 0;
            background: #ffffff;
            .menu-left__item {
              height: 50px;
              cursor: pointer;
              padding: 0 24px 0 41px;
              &:hover,
              &--light {
                color: #ff875b;
              }
              img {
                width: 20px;
                height: 20px;
                margin-right: 16px;
              }
            }
          }
          .tab-category-menu__right {
            padding: 15px 26px;
            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
            border: 1px solid #eeeeee;
            background: #ffffff;
            .category-menu-right__wrap {
              height: 50px;
              line-height: 50px;
              padding: 0 16px;
              font-size: 12px;
              color: #999999;
              white-space: nowrap;
              &:hover,
              &--light {
                background: #f8f8f8;
              }
              .menu-right-wrap__item {
                color: #999999;
                margin-right: 20px;
                cursor: pointer;
                &:hover {
                  color: #ff875b;
                }
              }
            }
          }
        }
      }
      .header-box-tab__common--light {
        color: #ff7f39 !important;
      }
      .header-box-tab__common {
        width: 160px;
        height: 100%;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
      }
    }
  }
}
.layout-header-line {
  width: 100%;
  height: 2px;
  background: #ff875b;
}
</style>