Merge branch 'feature/task1.0.0_xg' into 'feature/task1.0.0'

Feature/task1.0.0 xg See merge request yanxuan-frontend/shop-pc!6
2 years ago · 818f988257
parent dfce24e466 00788dbd5c
commit 818f988257
8 changed files with 92 additions and 26 deletions
--- a/README.md
+++ b/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;
+	}
+	// 此处省略其他业务代码...
+}

 ```

--- a/components/BsLogin.vue
+++ b/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);
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -15,17 +15,21 @@
 </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";

 export default {
  name: "Layout",
  components: { Header, Footer, BsLogin },
-  data() {
-    return {
-      loginVisible: true,
-    };
+  computed: {
+    loginVisible: {
+      get() {
+        return this.$store.state.loginVisible;
+      },
+      set(val) {
+        this.$store.commit("setLoginVisible", val);
+      },
+    },
  },
 };
 </script>
--- a/layouts/module/header/HeaderInfoBar.vue
+++ b/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" />
-                <span>{{ userInfo.name }}</span>
+                <img class="menu-item-wrap__avatar" :src="userInfo.avatar" />
+                <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>
--- a/layouts/module/header/index.vue
+++ b/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;
--- a/nuxt.config.js
+++ b/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
--- a/plugins/vue-inject.js
+++ b/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];
+}
--- a/store/index.js
+++ b/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 };