feat:完成立即购买

README.md

@@ -101,6 +101,27 @@ export {
   @include adj(transform, translate3d(-50%, 0, 0));
 }
 
+```
+
+## 登录相关
+```javascript
+// 访问token
+this.$store.state.token
+// 设置token
+this.$store.commit('setToken')
+// 退出登录
+this.$store.commit('setLoginOut')
+// 获取登录的用户信息
+this.$store.state.userInfo
+
+// 登录拦截
+// 示例：点击购买课程前需要判断当前用户是否登录
+function onPurchaseCourse() {
+	if (!this.$isLoginValidate()) {
+		return;
+	}
+	// 此处省略其他业务代码...
+}
 
 ```
 

components/BsLogin.vue

@@ -147,7 +147,11 @@ export default {
             Message.error("请勾选同意《用户协议》和《隐私协议》");
             return;
           }
-          const { result } = await ApiPostLogin({ ...this.form });
+          const { result } = await ApiPostLogin({
+            ...this.form,
+            clientId: 1,
+            systemId: 1,
+          });
           if (result) {
             this.dialogTableVisible = false;
             this.$store.commit("setToken", result.token);

layouts/default.vue

@@ -8,25 +8,69 @@
 <template>
   <div class="layout">
     <BsLogin :visible.sync="loginVisible" />
-    <!-- <Header /> -->
+    <Header
+      :is-categroy-open="categroyOption.open"
+      :show-categroy-tab="categroyOption.show"
+      :is-sticky="isSticky"
+    />
     <Nuxt />
     <Footer />
   </div>
 </template>
 <script>
 import BsLogin from "@/components/BsLogin.vue";
-import { TOKEN_KEY } from "@/constants";
 import Header from "./module/header/index.vue";
 import Footer from "./module/footer/index.vue";
+const CATEGROY_OPEN_PAGES = ["/"]; // 默认展开热门分类tab的页面
+const CATEGROY_HIDE_PAGES = ["/account"]; // 不展示热门分类tab的页面
 
 export default {
   name: "Layout",
   components: { Header, Footer, BsLogin },
   data() {
     return {
-      loginVisible: true,
+      isSticky: false,
+      ticking: false,
     };
   },
+  computed: {
+    loginVisible: {
+      get() {
+        return this.$store.state.loginVisible;
+      },
+      set(val) {
+        this.$store.commit("setLoginVisible", val);
+      },
+    },
+    categroyOption() {
+      // 当前页面路径
+      const currentPath = this.$route.path;
+      return {
+        open: CATEGROY_OPEN_PAGES.includes(currentPath),
+        show: !CATEGROY_HIDE_PAGES.includes(currentPath),
+      };
+    },
+  },
+  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>

layouts/module/header/HeaderInfoBar.vue

@@ -6,33 +6,42 @@
       <div class="header-wrap__logo">马士兵严选欢迎你！</div>
       <div class="header-wrap__content flex flex-middle">
         <div class="header-wrap-content__login">
-          <el-dropdown v-if="isLogin" @visible-change="menuVisible = $event">
+          <!-- 已登录 -->
+          <el-dropdown
+            v-if="token"
+            @visible-change="menuVisible = $event"
+            @command="handleCommandClick"
+          >
             <div
               class="wrap-content-login__info flex flex-middle flex-center"
               :class="{ 'wrap-content-login__info--hover': menuVisible }"
             >
-              <span>你好，{{ userInfo.name }}</span>
+              <span>你好，{{ userInfo.nickname }}</span>
               <img class="content-login-info__logo" :src="menuIcon" />
             </div>
             <el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
               <div class="menu-item__wrap flex flex-middle">
-                <img class="menu-item-wrap__avatar" />
+                <img class="menu-item-wrap__avatar" :src="userInfo.avatar" />
-                <span>{{ userInfo.name }}</span>
+                <span>{{ userInfo.nickname }}</span>
               </div>
               <div class="menu-item__line"></div>
               <el-dropdown-item
                 class="flex flex-between flex-middle"
                 v-for="item in menuList"
                 :key="item.value"
+                :command="item.value"
               >
                 <span> {{ item.label }}</span>
                 <img src="@/static/images/layout/icon-arrow.png" />
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
+          <!-- 未登录 -->
           <div v-else class="wrap-content-login__text flex">
             <span>请先</span>
-            <span class="content-login-text--light">登录/注册</span>
+            <span class="content-login-text--light" @click="onLoginClick">
+              登录/注册
+            </span>
           </div>
         </div>
         <template>
@@ -58,6 +67,7 @@
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 const MENU_VALUE = {
   PERSONAL: 1,
   ADDRESS: 2,
@@ -65,12 +75,9 @@ const MENU_VALUE = {
 };
 
 export default {
+  name: "HeaderInfoBar",
   data() {
     return {
-      isLogin: true,
-      userInfo: {
-        name: "仙女广",
-      },
       menuVisible: false,
       menuList: [
         {
@@ -89,6 +96,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(["userInfo", "token"]),
     menuIcon() {
       return this.menuVisible
         ? require("@/static/images/layout/icon-up-light.png")
@@ -96,7 +104,21 @@ export default {
     },
   },
   methods: {
-    onMenuClick() {},
+    onLoginClick() {
+      this.$isLoginValidate();
+    },
+    handleCommandClick(event) {
+      switch (event) {
+        case MENU_VALUE.PERSONAL:
+          this.$router.push('/account');
+          break;
+        case MENU_VALUE.ADDRESS:
+          this.$router.push('/account');
+           break;
+        case MENU_VALUE.LOGON_OUT:
+          this.$store.commit("setLoginOut");
+      }
+    },
   },
 };
 </script>

layouts/module/header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-header" :class="{ 'layout-sticky-bar-header': isSticky }">
+  <div class="layout-header">
     <template v-if="isSticky">
       <div class="sticky-bar-header">
         <div class="sticky-bar-header__wrap flex flex-middle flex-between">
@@ -9,7 +9,7 @@
               src="@/static/images/layout/logo-sticky.png"
             />
             <el-menu
-              :default-active="tabIndex"
+              :default-active="tabPath"
               mode="horizontal"
               @select="handleTabSelect"
             >
@@ -27,12 +27,21 @@
               <img src="@/static/images/layout/icon-shop-sticky.png" />
               <span class="">3</span>
             </div>
-            <div class="header-wrap-icons__login">登录</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 v-else>
+    <template>
       <HeaderInfoBar />
       <div class="default-bar-header">
         <div class="bar-header-box">
@@ -61,29 +70,38 @@
             </div>
           </div>
           <div class="bar-header-box__tab flex flex-middle">
-            <div class="header-box-tab__category">
+            <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="@/static/images/layout/icon-category.png" />
                 <span>热门分类</span>
               </div>
-              <div class="tab-category__menu flex flex-left">
+              <div
+                v-show="isCategroyOpen || categroyVisible"
+                class="tab-category__menu flex flex-left"
+                @mouseenter="handleCategoryTwoChange(true)"
+                @mouseleave="handleCategoryTwoChange(false)"
+              >
+                <!-- 左侧一级分类 -->
                 <div class="tab-category-menu__left">
                   <div
                     v-for="item in categrayData"
                     :key="item.id"
-                    @mouseenter="handleMouEnter(item.id)"
+                    @mouseenter="handleCategoSelect(item.id)"
-                    @mouseleave="categrayHoverVisible = false"
                     class="menu-left__item flex flex-middle"
                   >
                     <img />
                     <span>{{ item.name }}</span>
                   </div>
                 </div>
+                <!-- 右侧二级分类 -->
                 <div
-                  v-show="categrayHoverVisible"
+                  v-show="categroyTwoVisible"
-                  class="tab-category-menu__right flex flex-wrap"
+                  class="tab-category-menu__right"
-                  @mouseenter="categrayHoverVisible = true"
-                  @mouseleave="categrayHoverVisible = false"
                 >
                   <div
                     v-for="item in currentCategrayList"
@@ -101,9 +119,9 @@
               class="header-box-tab__common flex flex-center flex-middle"
               :class="{
                 'header-box-tab__common--light':
-                  item.path === $nuxt.$route.path,
+                  item.value === $nuxt.$route.path,
               }"
-              :to="item.path"
+              :to="item.value"
             >
               {{ item.label }}
             </nuxt-link>
@@ -114,43 +132,53 @@
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 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 },
   props: {
+    // 是否置顶
     isSticky: {
       type: Boolean,
       default: false,
     },
+
+    // 热门分类是否默认展开
+    isCategroyOpen: {
+      type: Boolean,
+      default: false,
+    },
+
+    // 是否展示热门分类tab
+    showCategroyTab: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
       searchContent: "",
-      tabIndex: TAB_TYPE.HOME,
+      tabPath: "/",
       tabList: [
-        { label: "首页", value: TAB_TYPE.HOME, path: "/" },
+        { label: "首页", value: "/" },
-        { label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
+        { label: "爆款推荐", value: "/hot" },
-        { label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
+        { label: "开发书籍", value: "/book" },
-        { label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
+        { label: "限时秒杀", value: "/skill" },
       ],
-      categrayHoverVisible: false,
+      categroyTwoVisible: false, // 是否展示二级分类
-      currentCategrayId: 0,
+      categroyVisible: false, // 是否展示一级分类
+      currentCategrayId: 0, // 当前鼠标悬停的一级分类id
       categrayData: [],
     };
   },
   computed: {
+    ...mapState(["userInfo", "token"]),
     currentCategrayList() {
       const data = this.categrayData.find(({ id }) => {
         return this.currentCategrayId === id;
@@ -162,10 +190,24 @@ export default {
     this.getCategroyData();
   },
   methods: {
-    handleMouEnter(id) {
+    onLoginClick() {
-      this.categrayHoverVisible = true;
+      this.$isLoginValidate();
+    },
+    // 一级分类选中
+    handleCategoSelect(id) {
       this.currentCategrayId = id;
     },
+    // 一级分类是否可见
+    handleCategoryChange(val) {
+      this.categroyVisible = val;
+    },
+    // 二级分类是否可见
+    handleCategoryTwoChange(val) {
+      this.categroyTwoVisible = val;
+    },
+    handleTabSelect(path) {
+      this.$router.push({ path });
+    },
     // 获取热门分类信息
     async getCategroyData() {
       const { result } = await ApiGetCategoryOneList();
@@ -178,7 +220,7 @@ export default {
             if (resultGoods && resultGoods.length > 0) {
               return {
                 ...item,
-                list: resultGoods.data,
+                list: resultGoods,
               };
             }
           })
@@ -189,15 +231,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.layout-sticky-bar-header {
-  height: 50px;
-}
 .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.10000000149011612);
   .sticky-bar-header__wrap {
     width: 1200px;
     height: 100%;
@@ -210,15 +252,12 @@ export default {
     .bar-header-wrap__icons {
       cursor: pointer;
       img {
-        width: 23px;
+        width: 24px;
-        height: 23px;
+        height: 24px;
       }
       .header-wrap-icons__shop {
         position: relative;
-        margin: 0 30px 0 14px;
+        margin-left: 14px;
-        img {
-          width: 30px;
-        }
         span {
           position: absolute;
           right: -6px;
@@ -235,8 +274,17 @@ export default {
         }
       }
       .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 {
@@ -291,6 +339,7 @@ export default {
             background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
             border-radius: 0px 8px 8px 0px;
             z-index: 2;
+            cursor: pointer;
             img {
               width: 26px;
               height: 26px;
@@ -373,13 +422,11 @@ export default {
             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 {
+              display: inline-block;
               font-size: 12px;
               color: #999999;
               margin-right: 20px;

nuxt.config.js

@@ -42,7 +42,8 @@ export default {
   plugins: [
     '@/plugins/element-ui',
     '@/plugins/axios',
-    '@plugins/axiosTk.js'
+    '@plugins/axiosTk.js',
+    '@plugins/vue-inject.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

plugins/vue-inject.js

@@ -0,0 +1,17 @@
+import Vue from "vue";
+import { TOKEN_KEY } from "@/constants";
+
+const injectOptions = {
+  // 是否需要登录拦截
+  $isLoginValidate() {
+    if (this.$cookies.get(TOKEN_KEY)) {
+      return true;
+    }
+    this.$store.commit("setLoginVisible", true);
+    return false;
+  },
+};
+
+for (let key in injectOptions) {
+  Vue.prototype[key] = injectOptions[key];
+}

store/index.js

@@ -12,6 +12,7 @@ const ONE_DAY = 86400000; // 一天的毫秒数 24 * 60 * 60 * 1000;
 const state = () => ({
   token: "",
   userInfo: {},
+  loginVisible: false, // 是否展示登录弹窗
 });
 const mutations = {
   setUserInfo(state, info) {
@@ -29,6 +30,9 @@ const mutations = {
     state.userInfo = {};
     this.$cookies.remove(TOKEN_KEY);
   },
+  setLoginVisible(state, visible) {
+    state.loginVisible = visible;
+  },
 };
 const actions = {
   async nuxtServerInit({ state, commit, dispatch }) {
@@ -44,10 +48,6 @@ const actions = {
       commit("setUserInfo", result);
     }
   },
-  loginOut({ commit }) {
-    commit("setLoginOut");
-    // 此处请求接口
-  },
 };
 
 export { state, mutations, actions };