feature(个人中心)：添加个人用户信息

src/App.vue

@@ -49,7 +49,8 @@
             </el-button>
             <el-dropdown class="ml12" size="medium" @command="handleCommand">
               <span class="flex flex-center">
-                <img :src="userInfo.avatar" />
+                <img v-if="userInfo.avatar" :src="userInfo.avatar" />
+                <img v-else src="./assets/img/default-avatar.png">
                 <i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">

src/api/login.js

@@ -26,6 +26,10 @@ export function register(query) {
 export function getUserByUserName(data) {
   return request.postRequest(basePath, "User", "GetUserByUserName", data);
 }
+// 根据用户名获取用户信息
+export function getProfile(data) {
+  return request.postRequest(basePath, "User", "GetProfile", data);
+}
 // 通知公告列表
 export function getNoticeList(query) {
   return request.postRequest(basePath, 'Notice', 'GetList', query)

src/components/PersonalInfo.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-dialog title="个人信息"
+             :visible.sync="visible"
+             width="800px">
+    <el-form ref="formRef"
+             :model="form"
+             size="mini">
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="用户昵称"
+                        prop="nickName">
+            <el-input v-model="form.nickName"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>
+<script>
+import to from "await-to-js";
+import { getProfile } from "@/api/login";
+export default {
+  name: "Register",
+  data() {
+    return {
+      visible: false,
+      form: {
+        avatar: "",
+        nickName: "",
+        phone: "",
+        email: "",
+        sex: "30",
+      },
+    };
+  },
+  methods: {
+    async openDialog() {
+      this.visible = true;
+      const [err, res] = await to(getProfile());
+      if (err) return;
+      this.form = res.data;
+    },
+  },
+};
+</script>

src/router.js

@@ -27,11 +27,6 @@ let router = new Router({
       },
       component: () => import("./views/News.vue"),
     },
-    {
-      path: "/newsdetails/:id",
-      name: "newsdetails",
-      component: () => import("./views/NewsDetails.vue"),
-    },
     // 仪器列表
     {
       path: "/appointment/equipment-details",
@@ -65,11 +60,6 @@ let router = new Router({
       name: "casedetails",
       component: () => import("./views/CaseDetails.vue"),
     },
-    {
-      path: "/goin",
-      name: "goin",
-      component: () => import("./views/GoIn.vue"),
-    },
     {
       path: "/download",
       name: "download",
@@ -100,62 +90,7 @@ let router = new Router({
         requireAuth: true,
       },
       component: () => import("./views/ContactUs.vue"),
-    },
-    {
-      path: "/admin",
-      name: "admin",
-      meta: {
-        requireAuth: true,
-      },
-      component: () => import("./views/Admin.vue"),
-      children: [
-        {
-          path: "/admin/user",
-          name: "user",
-          component: () => import("./views/Admin/User.vue"),
-        },
-        {
-          path: "/admin/news",
-          name: "new",
-          component: () => import("./views/Admin/News.vue"),
-        },
-        {
-          path: "/admin/cases",
-          name: "cases",
-          component: () => import("./views/Admin/Cases.vue"),
-        },
-        {
-          path: "/admin/team",
-          name: "team",
-          component: () => import("./views/Admin/Team.vue"),
-        },
-        {
-          path: "/admin/course",
-          name: "course",
-          component: () => import("./views/Admin/Course.vue"),
-        },
-        {
-          path: "/admin/enterprise",
-          name: "enterprise",
-          component: () => import("./views/Admin/Enterprise.vue"),
-        },
-        {
-          path: "/admin/honor",
-          name: "honor",
-          component: () => import("./views/Admin/Honor.vue"),
-        },
-        {
-          path: "/admin/dictionary",
-          name: "dictionary",
-          component: () => import("./views/Admin/Dictionary.vue"),
-        },
-        {
-          path: "/admin/page",
-          name: "page",
-          component: () => import("./views/Admin/Page.vue"),
-        },
-      ],
-    },
+    }
   ],
 });
 
@@ -166,7 +101,10 @@ router.beforeEach(async (to, from, next) => {
   if (token && !store.getters.userInfo.id) {
     const [err, res] = await awaitTo(getUserByUserName());
     if (err) return;
-    store.dispatch("setUserInfo", res.data.userInfo);
+    const obj = res.data.userInfo
+    obj.roleNames = res.data.roles.map(item => item.roleName).join(',')
+    obj.pgName = res.data.projectGroupRes ? res.data.projectGroupRes.pgName : ''
+    store.dispatch("setUserInfo", obj);
   }
   // 判断是否需要登录权限
   if (to.matched.some((res) => res.meta.requireAuth)) {

src/views/PersonalCenter.vue

@@ -1,6 +1,23 @@
 <template>
   <div class="news">
-    <Banner :img="require('@/assets/img/news.png')" />
+    <div class="center-banner">
+      <div class="content">
+        <div class="user">
+          <img v-if="userInfo.avatar" :src="userInfo.avatar" />
+          <img v-else src="../assets/img/default-avatar.png">
+          <p>
+            <span>Hi~{{ userInfo.nickName }}</span>
+            <span>{{ userInfo.roleNames }}</span>
+            <span>{{ userInfo.pgName || '未加入课题组' }}</span>
+          </p>
+        </div>
+        <div class="btns">
+          <p>安全积分：<span>100</span></p>
+          <el-button size="medium"
+                     round>个人设置</el-button>
+        </div>
+      </div>
+    </div>
     <div class="common-container">
       <el-container>
         <div class="left-tabs">
@@ -333,6 +350,7 @@
         </div>
       </el-container>
     </div>
+    <PersonalInfoDialog ref="personalInfoDialogRef" />
   </div>
 </template>
 
@@ -345,9 +363,16 @@ import FullCalendar from "@fullcalendar/vue";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { getNoticeList } from "@/api/login";
-import { getInstrList, getInstrListByUser, userCancelAppoint, cancelAppoint } from "@/api/instr";
+import {
+  getInstrList,
+  getInstrListByUser,
+  userCancelAppoint,
+  cancelAppoint,
+} from "@/api/instr";
 import moment from "moment";
 import to from "await-to-js";
+import { mapGetters } from "vuex";
+import PersonalInfoDialog from "@/components/PersonalInfo";
 export default {
   name: "PersonalCenter",
   components: {
@@ -355,6 +380,10 @@ export default {
     LeftTabs,
     RightContent,
     FullCalendar,
+    PersonalInfoDialog,
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
   },
   data() {
     return {
@@ -597,9 +626,7 @@ export default {
         })
         .catch(() => {});
     },
-    editAppoint() {
-
-    },
+    editAppoint() {},
     // 选择tab
     tabSelect(row, index) {
       this.active = index;
@@ -713,6 +740,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.center-banner {
+  background: url(../assets/img/login-bg.png) top no-repeat;
+  height: 240px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .content {
+    height: 180px;
+    width: 1200px;
+    border-radius: 16px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    .user {
+      display: flex;
+      align-items: center;
+      img {
+        height: 100px;
+        width: 100px;
+        border-radius: 50%;
+      }
+      p {
+        height: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        margin-left: 12px;
+        span:nth-child(1) {
+          font-weight: bold;
+          font-size: 18px;
+        }
+        span:nth-child(3) {
+          font-weight: bold;
+        }
+      }
+    }
+    .btns {
+      display: flex;
+      align-items: center;
+      > p {
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        line-height: 30px;
+        font-weight: bold;
+        span {
+          font-size: 30px;
+          font-weight: bold;
+          color: #1d66dc;
+          font-style: italic;
+        }
+      }
+    }
+  }
+}
 .flex {
   width: 100%;
   flex-wrap: wrap;