feat: 首页登录注销

README.md

@@ -113,7 +113,15 @@ this.$store.commit('setToken')
 this.$store.commit('setLoginOut')
 // 获取登录的用户信息
 this.$store.state.userInfo
-// 是否需要登录拦截
+
-this.$isLoginValidate();
+// 登录拦截
+// 示例：点击购买课程前需要判断当前用户是否登录
+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/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,19 @@ export default {
     },
   },
   methods: {
-    onMenuClick() {},
+    onLoginClick() {
+      this.$isLoginValidate();
+    },
+    handleCommandClick(event) {
+      switch (event) {
+        case MENU_VALUE.PERSONAL:
+          this.$router.push('/account');
+          case MENU_VALUE.ADDRESS:
+          this.$router.push('/account');
+        case MENU_VALUE.LOGON_OUT:
+          this.$store.commit("setLoginOut");
+      }
+    },
   },
 };
 </script>

layouts/module/header/index.vue

@@ -81,7 +81,7 @@
                 </div>
                 <div
                   v-show="categrayHoverVisible"
-                  class="tab-category-menu__right flex flex-wrap"
+                  class="tab-category-menu__right"
                   @mouseenter="categrayHoverVisible = true"
                   @mouseleave="categrayHoverVisible = false"
                 >
@@ -178,7 +178,7 @@ export default {
             if (resultGoods && resultGoods.length > 0) {
               return {
                 ...item,
-                list: resultGoods.data,
+                list: resultGoods,
               };
             }
           })
@@ -291,6 +291,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 +374,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;

pages/index/index.vue

@@ -17,8 +17,5 @@ import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
 export default {
   components: { Banner, Seckil },
-  mounted() {
-    this.$isLoginValidate();
-  },
 };
 </script>