feat: 个人中心

src/assets/images/logout.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678692281445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4160" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M867.5 470.8L758 365c-18.2-17-19.2-45.5-2.3-63.7 17-18.2 45.5-19.2 63.7-2.3 0.4 0.4 0.9 0.8 1.3 1.2l187.6 181.5c17.9 17.3 18.3 45.9 1 63.8L821.6 739.2c-18.1 17.1-46.6 16.3-63.7-1.7-16.1-17-16.5-43.5-0.9-61l112.1-115.6H422.3c-24.9 0-45.1-20.2-45.1-45.1 0-24.9 20.2-45.1 45.1-45.1l445.2 0.1zM92.1 917.3h555.4c24.9 1.1 44.1 22.1 43 47-1 23.3-19.7 42-43 43H47.1c-24.9 0-45-20.1-45.1-45V61.7c0-24.9 20.2-45.1 45.1-45.1h600.4c24.9 0 45.1 20.2 45.1 45.1 0 24.9-20.2 45.1-45.1 45.1H92l0.1 810.5z" p-id="4161"></path></svg>
\ No newline at end of file

src/components/head.vue

@@ -19,7 +19,16 @@
           </li>
         </ul>
       </nav>
-      <div class="right_btn">
+      <div class="user-info" v-if="!userInfo">
+        <div class="user-msg">
+          <span class="user-name">{{ '小溪' }}</span>
+          <span>欢迎您</span>
+        </div>
+        <div class="logout" title="退出登录" @click="logout">
+          <img src="../assets/images/logout.png"/>
+        </div>
+      </div>
+      <div class="right_btn" v-else>
         <!-- <el-button type="primary" size="mini" @click="login">登录</el-button>
         <el-button size="mini" @click="register">注册</el-button> -->
         <div class="user-operate">
@@ -34,6 +43,7 @@
 </template>
 
 <script>
+import { mapMutations, mapState } from 'vuex'
 import headerNavMobile from './headerNavMobile.vue'
 
 export default {
@@ -58,11 +68,13 @@ export default {
     }
   },
   computed: {
+    ...mapState(['userInfo']),
     active() {
       return this.$route.path
     },
   },
   methods: {
+    ...mapMutations(['setUserInfo']),
     changePath() {
       this.scrollParent().scrollTo({
         behavior: 'smooth',
@@ -78,6 +90,11 @@ export default {
     freeTrial() {
       window.open('https://demo.jomalls.com')
     },
+    logout() {
+      localStorage.removeItem('userInfo')
+      this.setUserInfo(undefined)
+      this.$router.push('/login')
+    },
   },
 }
 </script>
@@ -127,12 +144,31 @@ export default {
   padding: 0 20px;
   color: #fff;
 }
-.right_btn {
+.right_btn,
+.user-info {
   display: flex;
   align-items: center;
   margin-left: auto;
 }
 
+.user-msg {
+  margin-right: 50px;
+}
+
+.user-name {
+  margin-right: 10px;
+}
+
+.logout img {
+  width: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.user-info {
+  color: #fff;
+}
+
 .login-btn {
   position: relative;
   margin-right: 20px;

src/main.js

@@ -19,6 +19,12 @@ import './assets/css/common.css'
 import './assets/css/index.css'
 import './styles/index.scss'
 
+const isMobile = () => window.innerWidth <= 1100
+Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())
+window.addEventListener('resize', () => {
+  Vue.prototype.$isMobile = isMobile()
+})
+
 
 new Vue({
   store,

src/store/index.js

@@ -6,8 +6,12 @@ export default new Vuex.Store({
   modules: {
   },
   state: {
+    userInfo: JSON.parse(JSON.stringify(localStorage.getItem('userInfo'))) || undefined,
   },
   mutations: {
+    setUserInfo(state, profile) {
+      state.userInfo = profile
+    }
   },
   actions: {
   },

src/views/contact.vue

 <template>
   <div class="login_bg">
-    <div class="login_content">
+    <div class="contact-header">
+      <div class="header-image">
+        <img src="../assets/logo.png" height="40px" />
+      </div>
+      <div class="user-info">
+        <div class="user-msg">
+          <span class="user-name">{{ '小溪' }}</span>
+          <span>欢迎您</span>
+        </div>
+        <div class="logout" title="退出登录" @click="logout">
+          <img src="../assets/images/logout.png" />
+        </div>
+      </div>
+    </div>
+    <div class="login_content" v-if="userInfo">
+      <div class="no-authority">
         <h1
           style="
             text-align: center;
@@ -27,19 +42,27 @@
         </el-button>
       </div>
     </div>
+    <div class="contain" v-else></div>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'register',
   components: {},
   data() {
     return {}
   },
+  computed: {
+    ...mapState(['userInfo']),
+  },
   methods: {
     goBack() {
       this.$router.push('/')
     },
+    logout() {},
+    
   },
 }
 </script>
@@ -47,16 +70,55 @@ export default {
 .login_bg {
   width: 100%;
   height: 100%;
-  position: relative;
-  background: url(../assets/contact.jpg) center / cover no-repeat;
+  display: flex;
+  flex-direction: column;
 }
 .login_content {
+  flex: 1;
+  background: url(../assets/contact.jpg) center / cover no-repeat;
+  position: relative;
+}
+
+.contact-header {
+  display: flex;
+  align-items: center;
+  background-color: #182633;
+  height: 60px;
+  padding: 0 100px;
+  justify-content: space-between;
+}
+
+.user-msg {
+  color: #fff;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+}
+
+.logout img {
+  width: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.user-msg {
+  margin-right: 50px;
+}
+
+.user-name {
+  margin-right: 10px;
+}
+
+.no-authority {
   position: absolute;
   top: 50%;
-  left: 60%;
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-  background-position: top right, center;
-  background-repeat: no-repeat;
+  transform: translateY(-50%);
+  left: 40%;
+}
+
+.contain {
+  flex: 1;
 }
 </style>

src/views/login.vue

@@ -173,6 +173,7 @@
 <script>
 import { post, get } from '../utils/axios'
 import md5 from 'js-md5'
+import { mapMutations } from 'vuex'
 export default {
   name: 'login',
   components: {},
@@ -217,6 +218,7 @@ export default {
     },
   },
   methods: {
+    ...mapMutations(['setUserInfo']),
     async verCode() {
       try {
         await new Promise((resolve, reject) => {
@@ -291,6 +293,8 @@ export default {
             password: passwordHash,
           }).then((res) => {
             if (res.code === 200) {
+              localStorage.setItem('userInfo', res.data)
+              this.setUserInfo(res.data)
               this.ruleForm = {}
               this.$router.push('/contact')
             }