shop-pc/layouts/default.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:56:39
 * @LastEditors: ch
 * @LastEditTime: 2022-05-08 15:53:49
 * @Description: file content
-->
<template>
  <div class="layout">
    <BsLogin :visible.sync="loginVisible" />
    <Header
      :is-categroy-open="isHomePage"
      :hide-bar-line="isHideBarLinePage"
      :hide-sticky-shadow="isHideSeckillPage"
      :show-categroy-tab="showCategroyTab"
      :is-sticky="isSticky"
    />
    <Nuxt />
    <Footer />
  </div>
</template>
<script>
import BsLogin from "@/components/BsLogin.vue";
import Header from "./module/header/index.vue";
import Footer from "./module/footer/index.vue";
const CATEGROY_HIDE_PAGES = [/\/account/]; // 隐藏热门分类tab的页面

export default {
  name: "Layout",
  components: { Header, Footer, BsLogin },
  data() {
    return {
      isSticky: false,
      ticking: false,
    };
  },
  computed: {
    loginVisible: {
      get() {
        return this.$store.state.loginVisible;
      },
      set(val) {
        this.$store.commit("setLoginVisible", val);
      },
    },
    isHomePage() {
      return this.$route.path === "/";
    },
    isHideBarLinePage() {
      return ["/", "/seckill"].includes(this.$route.path);
    },
    isHideSeckillPage() {
      return this.$route.path === "/seckill";
    },
    showCategroyTab() {
      return !CATEGROY_HIDE_PAGES.some((reg) => {
        return reg.test(this.$route.path);
      });
    },
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.scrollEventMethod);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollEventMethod);
  },
  methods: {
    scrollEventMethod(e) {
      const that = this;
      // 节流
      if (!that.ticking) {
        window.requestAnimationFrame(function () {
          that.ticking = false;
          that.isSticky = window.scrollY > 300;
        });
        that.ticking = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.layout-footer {
  height: 189px;
  background: #ddd;
}
</style>