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

<template>
  <div>
    <HeaderInfoBar />
    <div class="default-header">
      <div class="default-header-box">
        <div class="default-header-box__wrap flex flex-between flex-middle">
          <img
            class="header-box-wrap__logo"
            src="@/static/images/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">
                <img src="@/static/images/layout/icon-search.png" />
              </div>
            </div>
            <div class="box-wrap-right__cart flex flex-middle">
              <img src="@/static/images/layout/icon-shop.png" />
              <span>购物车</span>
              <div class="wrap-right-cart__tip">3</div>
            </div>
          </div>
        </div>
        <div class="default-header-box__tab flex flex-middle">
          <div class="header-box-tab__category">
            <div class="tab-category__label flex flex-center flex-middle">
              <img src="@/static/images/layout/icon-category.png" />
              <span>热门分类</span>
            </div>
            <div class="tab-category__menu flex flex-left">
              <div class="tab-category-menu__left">
                <div
                  v-for="item in categrayData"
                  :key="item.id"
                  @mouseenter="handleMouEnter(item.id)"
                  @mouseleave="categrayHoverVisible = false"
                  class="menu-left__item flex felx-middle"
                >
                  <img />
                  <span>{{ item.name }}</span>
                </div>
              </div>
              <div v-show="categrayHoverVisible">
                <div
                  class="tab-category-menu__right flex flex-wrap"
                  @mouseenter="categrayHoverVisible = true"
                >
                  <div
                    v-for="item in currentCategrayList"
                    :key="item.id"
                    class="menu-right__item"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <nuxt-link
            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.path === $nuxt.$route.path,
            }"
            :to="item.path"
          >
            {{ item.label }}
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderInfoBar from "./HeaderInfoBar.vue";
import {
  ApiGetCategoryOneList,
  ApiGetCategoryTwoAndGoods,
} from "@/plugins/api/goods";

const TAB_TYPE = {
  HOME: 1,
  RECOMMEND: 2,
  BOOK: 3,
  TIME_LIMIT: 4,
};
export default {
  name: "DefaultHeader",
  components: { HeaderInfoBar },
  data() {
    return {
      searchContent: "",
      activityTab: TAB_TYPE.HOME,
      tabList: [
        { label: "首页", value: TAB_TYPE.HOME, path: "/" },
        { label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
        { label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
        { label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
      ],
      categrayData: [],
      categrayHoverVisible: false,
      currentCategrayId: 0,
    };
  },
  computed: {
    currentCategrayList() {
      const data = this.categrayData.find(({ id }) => {
        return this.currentCategrayId === id;
      });
      return (data && data.list) || [];
    },
  },
  mounted() {
    this.getCategroyData();
  },
  methods: {
    handleMouEnter(id) {
      this.categrayHoverVisible = true;
      this.currentCategrayId = id;
    },
    // 获取热门分类信息
    async getCategroyData() {
      const { result } = await ApiGetCategoryOneList();
      if (result.data.length > 0) {
        this.categrayData = await Promise.all(
          result.data.map(async (item) => {
            const { result } = await ApiGetCategoryTwoAndGoods({
              categoryId: item.id,
            });
            if (result.data.length > 0) {
              return {
                ...item,
                list: result.data,
              };
            }
          })
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.default-header {
  padding-top: 32px;
  position: relative;
  z-index: 3;
  .default-header-box {
    width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    .default-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;
            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;
          }
        }
      }
    }
    .default-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: 34px 0;
            background: #ffffff;
            .menu-left__item:hover {
              color: #ff875b;
            }
            .menu-left__item {
              height: 50px;
              cursor: pointer;
              padding: 0 24px 0 41px;
              img {
                width: 20px;
                height: 20px;
                margin-right: 16px;
              }
            }
          }
          .tab-category-menu__right {
            width: 510px;
            padding: 30px 26px;
            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
            border: 1px solid #eeeeee;
            background: #ffffff;
            .menu-right__item:last-child {
              margin-bottom: 0;
            }
            .menu-right__item:hover {
              color: #ff875b;
            }
            .menu-right__item {
              font-size: 12px;
              color: #999999;
              margin-right: 20px;
              cursor: pointer;
            }
          }
        }
      }
      .header-box-tab__common--light {
        color: #ff7f39 !important;
      }
      .header-box-tab__common {
        width: 160px;
        height: 100%;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
      }
    }
  }
}
</style>