注册、选择分组逻辑和接口调试完毕

src/components/layout/NavList/index.vue

@@ -3,8 +3,8 @@
     <div class="user">
       <img src="/static/img/logo.png" alt="" class="uer-avator">
       <div class="user-info">
-        <span>二马</span>
-        <span>产品经理组</span>
+        <span>{{ user_info.user_name }}</span>
+        <span>{{ user_info.group_name }}</span>
       </div>
     </div>
     <ul class="menu">
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 
 export default {
   name: 'NavList',
@@ -34,20 +34,33 @@ export default {
       active: 1
     }
   },
+  computed: {
+    ...mapState(['user_info'])
+  },
   methods: {
     change (val) {
-      this.active = val
       switch (val) {
         case 1:
+          this.active = val
           this.$router.push({ path: '/' })
           break
         case 2:
-          this.$router.push({ path: '/helloworld' })
+          if (this.user_info.group_id === 0) {
+            this.$message({
+              message: '请先选择分组再进行次操作！',
+              type: 'warning'
+            })
+          } else {
+            this.active = val
+            this.$router.push({ path: '/weeklys' })
+          }
           break
         case 3:
+          this.active = val
           this.logOutF()
           break
         default:
+          this.active = val
           this.$router.push({ path: '/' })
           break
       }
@@ -60,7 +73,7 @@ export default {
       })
       this.$router.push({ path: '/log' })
     },
-    ...mapState({
+    ...mapMutations({
       logout: 'CLEAR'
     })
   }

src/store/index.js

@@ -8,38 +8,34 @@ const store = new Vuex.Store({
   state: {
     groups: [],
     user_info: {
-      user_id: 1,
-      user_name: '二马',
-      status: 1
-    },
-    group_info: {
-      id: 1,
-      name: '产品经理组'
-    },
-    state: null,
-    group_id: 1
+      // user_id: 1,
+      // group_id: 0,
+      // user_name: '二马',
+      // group_name: '...',
+      // status: 1
+    }
   },
   mutations: {
     SET_GROUPS: (state, groups) => {
       state.groups = groups
     },
     SET_USER_INFO: (state, userInfo) => {
-      // state.user_info = userInfo
-      Object.assign(state.user_info, userInfo)
+      // Object.assign(state.user_info, userInfo)
+      state.user_info = Object.assign({}, state.user_info, userInfo) // 这样才能保证页面数据动态展示，vue推荐更改键值对时全部覆盖，而不是像上一行注释代码那样操作（页面数据不会动态更新）。
     },
     SET_STATE: (state, val) => {
-      state.state = val
+      // state.user_info.state = val
+      let obj = state.user_info
+      obj.state = val
+      state.user_info = obj
     },
     CLEAR: (state) => {
-      state.state = null
       state.user_info = {}
     }
   },
   actions: {
     async setGroups ({ commit }) {
       const groups = await getGroupsInfo()
-      console.log('groups')
-      console.log(groups.groups)
       commit('SET_GROUPS', groups.groups)
       return groups
     }

src/utils/fetch.js

@@ -6,7 +6,8 @@ import { MessageBox, Notification } from 'element-ui'
 // 创建 axios 实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api 的 base_url
-  timeout: 5000 // 请求时间
+  timeout: 5000, // 请求时间
+  headers: {'Content-Type': 'application/json'}
 })
 
 // request 拦截器

src/views/group/index.vue

@@ -10,7 +10,7 @@
 
 <script>
 import groupItem from './groupItem'
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 import { saveGroup } from '../../api'
 
 export default {
@@ -41,11 +41,21 @@ export default {
           user_id: this.user_info.user_id,
           group_id: this.activeNumber
         }).then(res => {
-          if (res.infoCode === 200) {
+          if (res.infoCode === 200 || res.infoCode === '200') {
             this.$notify.success({
               title: '提交成功',
               message: res.infoText
             })
+            let name = null
+            this.groups.forEach(element => {
+              if (element.id === res.group_id) {
+                name = element.group_name
+              }
+            })
+            this.setUserInfo({
+              group_id: res.group_id,
+              group_name: name
+            })
             this.$router.push({ path: '/' })
           } else {
             this.$notify.error({
@@ -55,7 +65,10 @@ export default {
           }
         })
       }
-    }
+    },
+    ...mapMutations({
+      setUserInfo: 'SET_USER_INFO'
+    })
   }
 }
 </script>

src/views/login/index.vue

@@ -25,7 +25,7 @@
 
 <script>
 import { login } from '../../api'
-import { mapState } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
   name: 'Login',
@@ -69,15 +69,13 @@ export default {
   },
   methods: {
     submit () {
-      console.log('111')
       this.$refs.loginForm.validate(val => {
         let params = this.formData
         params.QQ = parseInt(params.QQ)
         delete params.passwordT
-        console.log(params)
         if (val) {
           login(params).then(res => {
-            if (res.infoCode === 200) {
+            if (res.infoCode === 200 || res.infoCode === '200') {
               this.$message({
                 message: '恭喜你，注册成功！',
                 type: 'success'
@@ -112,7 +110,7 @@ export default {
     to () {
       this.$router.push({ path: '/log' })
     },
-    ...mapState({
+    ...mapMutations({
       setUserInfo: 'SET_USER_INFO'
     })
   }