添加个人资料页面

src/api/sys/model/userModel.ts

@@ -24,7 +24,7 @@ export interface AddUserParams {
   username: string;
   password: string;
   // 真实名字
-  nickName: string;
+  nickname: string;
 
   status?: boolean;
   // 介绍
@@ -36,13 +36,19 @@ export interface EditUserParams {
   username: string;
   password: string;
   // 真实名字
-  nickName: string;
+  nickname: string;
 
   status?: boolean;
   // 介绍
   detail?: string;
   menus?: string[] | number[];
 }
+export interface EditMyInfoParams {
+  password: string;
+  // 真实名字
+  nickname: string;
+  email: string;
+}
 
 export interface DeleteUserParams {
   id: number;
@@ -99,7 +105,7 @@ export interface GetUserInfoModel {
   id: string | number;
   // 用户名
   username: string;
-  nickName: string;
+  nickname: string;
   email: string;
   logintime: number;
   row: any;

src/api/sys/user.ts

@@ -5,6 +5,7 @@ import {
   GetUserInfoByUserIdParams,
   getUserListParams,
   GetUserInfoModel,
+  EditMyInfoParams,
   CommonRowModel,
   getGroupTreeModel,
   CommonTreeModel,
@@ -58,6 +59,16 @@ export function getMyInfo() {
 /**
  * @description: getUserInfoById
  */
+export function editMyInfo(params: EditMyInfoParams) {
+  return defHttp.request<GetUserInfoModel>({
+    url: Api.MyInfoUrl,
+    method: 'PUT',
+    params,
+  });
+}
+/**
+ * @description: getUserInfoById
+ */
 export function getUserInfoById(params: GetUserInfoByUserIdParams) {
   return defHttp.request<GetUserInfoModel>({
     url: Api.AdminUrl + params.id,

src/layouts/default/header/components/lock/LockModal.vue

@@ -10,7 +10,7 @@
       <div :class="`${prefixCls}__header`">
         <img :src="avatar" :class="`${prefixCls}__header-img`" />
         <p :class="`${prefixCls}__header-name`">
-          {{ getNickname }}
+          {{ getnickname }}
         </p>
       </div>
 
@@ -44,7 +44,7 @@
       const userStore = useUserStore();
       const lockStore = useLockStore();
 
-      const getNickname = computed(() => userStore.getUserInfo?.nickName);
+      const getnickname = computed(() => userStore.getUserInfo?.nickname);
       const [register, { closeModal }] = useModalInner();
 
       const [registerForm, { validateFields, resetFields }] = useForm({
@@ -79,7 +79,7 @@
       return {
         t,
         prefixCls,
-        getNickname,
+        getnickname,
         register,
         registerForm,
         handleLock,

src/layouts/default/header/components/user-dropdown/index.vue

@@ -4,7 +4,7 @@
       <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
       <span :class="`${prefixCls}__info hidden md:block`">
         <span :class="`${prefixCls}__name  `" class="truncate">
-          {{ getUserInfo.nickName }}
+          {{ getUserInfo.nickname }}
         </span>
       </span>
     </span>
@@ -75,8 +75,8 @@
       const userStore = useUserStore();
 
       const getUserInfo = computed(() => {
-        const { nickName = '', avatar, desc } = userStore.getUserInfo || {};
-        return { nickName, avatar: avatar || headerImg, desc };
+        const { nickname = '', avatar, desc } = userStore.getUserInfo || {};
+        return { nickname, avatar: avatar || headerImg, desc };
       });
 
       const [register, { openModal }] = useModal();

src/views/dashboard/house/index.vue

@@ -86,4 +86,4 @@
 </script>
 <style lang="less" scoped>
   @import './index.less';
-</style>
+</style>

src/views/home/survey/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap" style="padding: 40px">
+  <div class="wrap" style="padding: 20px">
     <p class="head-title">协会概况</p>
     <div class="header-content">
       <div class="edit-text">
@@ -7,6 +7,14 @@
       </div>
       <div class="association-intro"> 协会介绍 </div>
     </div>
+    <div class="content">
+      <div class="left-content">
+        <div class="head-title">会员概况</div>
+      </div>
+      <div class="right-content">
+        <div class="head-title">近期公告</div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -29,21 +37,63 @@
   }
 
   .edit-text {
-    width: 250px;
+    max-width: 350px;
   }
 
   .edit-text textarea {
     width: 100%;
-    height: 250px;
+    height: 300px;
     padding: 10px;
     outline: none;
     resize: none;
   }
 
   .association-intro {
-    margin-left: 50px;
     padding: 10px;
+    margin-left: 50px;
+    flex: 1;
+    border: 1px solid gray;
+  }
+
+  .content {
+    display: flex;
+    margin: 20px 0;
+  }
+
+  .left-content {
+    width: 250px;
+    height: 320px;
+    margin-right: 20px;
+    text-align: center;
+    border: 1px solid gray;
+  }
+
+  .right-content {
     flex: 1;
-    border: 1px solid;
+    padding: 15px;
+    border: 1px solid gray;
+  }
+  @media (max-width: 639px) {
+    .header-content,
+    .content {
+      display: block;
+      width: 90%;
+      margin: 0 auto;
+    }
+
+    .association-intro {
+      height: 320px;
+      padding: 10px;
+      margin: 10px auto;
+      margin-left: 0;
+      border: 1px solid gray;
+    }
+
+    .left-content,
+    .right-content {
+      width: 100%;
+      height: 320px;
+      margin: 20px 0;
+    }
   }
 </style>

src/views/home/user/index.vue

@@ -1,14 +1,208 @@
 <template>
-  <div class="wrap"> 个人信息 </div>
+  <div class="wrap">
+    <div class="title">个人资料</div>
+    <div class="userinfo">
+      <div class="user-avatar">
+        <img :src="'/src/assets/images/avatar.jpg'" alt="" />
+      </div>
+      <div class="username">{{ user.username }}</div>
+      <div class="email">{{ user.email }}</div>
+    </div>
+    <div class="user-form">
+      <div class="form-item">
+        <div class="lable-item">用户名</div>
+        <div class="input">
+          <input disabled type="text" :value="username" />
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="lable-item">Email<span class="red">*</span></div>
+        <div class="input">
+          <input type="text" v-model="email" />
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="lable-item">昵称<span class="red">*</span></div>
+        <div class="input">
+          <input type="text" v-model="nickname" />
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="lable-item">密码</div>
+        <div class="input">
+          <input type="password" placeholder="不修改密码请留空" v-model="password" />
+        </div>
+      </div>
+      <div class="btn-warp">
+        <a-button @click="submit({ nickname, email, password })" type="success">提交</a-button>
+        <a-button @click="reset">重置</a-button>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getMyInfo, editMyInfo } from '/@/api/sys/user';
+  import { useUserStore } from '/@/store/modules/user';
   export default defineComponent({
     name: 'User',
     components: {},
     setup() {
-      return {};
+      const userStore = useUserStore();
+      console.log(`userStore`, userStore);
+      const { createMessage } = useMessage();
+      const { success, error } = createMessage;
+      const userinfo = reactive({
+        username: '',
+        nickname: '',
+        email: '',
+        // avatar: 'https://img2.baidu.com/it/u=3033110424,3848444763&fm=26&fmt=auto&gp=0.jpg',
+        password: '',
+      });
+      const user = reactive({
+        username: '',
+        nickname: '',
+        email: '',
+      });
+      init(); // 初始化获取信息
+      function init() {
+        getMyInfo().then((res) => {
+          const data = res.row;
+          userinfo.username = data.username;
+          userinfo.nickname = data.nickname;
+          userinfo.email = data.email;
+          userinfo.password = '';
+          user.nickname = data.nickname;
+          user.username = data.username;
+          user.email = data.email;
+          userStore.setUserInfo(data);
+        });
+      }
+      function reset() {
+        userinfo.username = user.username;
+        userinfo.nickname = user.nickname;
+        userinfo.email = user.email;
+        userinfo.password = '';
+      }
+      function submit(data) {
+        const pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+        if (data.nickname === '') {
+          error('昵称不能为空！');
+          return;
+        } else if (!pattern.test(data.email)) {
+          error('邮箱格式错误！');
+          return;
+        }
+        editMyInfo(data)
+          .then(() => {
+            success('修改成功！');
+            init();
+          })
+          .catch((err) => {
+            error(err);
+          });
+      }
+      return {
+        reset,
+        submit,
+        user,
+        ...toRefs(userinfo),
+      };
     },
   });
 </script>
+<style scoped>
+  .wrap {
+    margin: 20px;
+  }
+
+  .title {
+    font-size: 20px;
+  }
+
+  .userinfo {
+    width: 200px;
+    margin: 0 auto;
+    margin-top: 50px;
+    text-align: center;
+  }
+
+  .user-avatar {
+    width: 152px;
+    height: 152px;
+    padding: 4px;
+    margin: 0 auto;
+    border: 2px solid #d2d6de;
+    border-radius: 50%;
+    box-sizing: border-box;
+  }
+
+  .user-avatar img {
+    width: 140px;
+    height: 140px;
+    margin: 0 auto;
+    border-radius: 50%;
+  }
+
+  .username {
+    padding-top: 2px;
+    font-size: 25px;
+  }
+
+  .email {
+    font-size: 18px;
+    color: #abacac;
+  }
+
+  .red {
+    color: red;
+  }
+
+  .user-form {
+    width: 350px;
+    margin: 10px auto;
+  }
+
+  .form-item {
+    width: 100%;
+    padding: 5px 0;
+  }
+
+  .lable-item {
+    margin-bottom: 2px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .form-item input {
+    width: 100%;
+    padding: 5px;
+    border: 1px solid #abacac;
+    border-radius: 2px;
+    outline: none;
+  }
+
+  .btn-warp {
+    margin: 15px 0;
+  }
+
+  .btn-warp button {
+    margin: 0 2px;
+  }
+  @media (max-width: 400px) {
+    .form-item input {
+      width: 95%;
+    }
+  }
+  @media (max-width: 360px) {
+    .form-item input {
+      width: 90%;
+    }
+  }
+  @media (max-width: 320px) {
+    .form-item input {
+      width: 80%;
+    }
+  }
+</style>

src/views/sys/login/LoginForm.vue

@@ -155,7 +155,7 @@
           if (userInfo) {
             notification.success({
               message: t('sys.login.loginSuccessTitle'),
-              description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.nickName}`,
+              description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.nickname}`,
               duration: 3,
             });
           }

types/store.ts

@@ -37,10 +37,10 @@ interface Group {
 export interface UserInfo {
   id: string | number;
   username: string;
-  nickName: string;
+  nickname: string;
   avatar: string;
   groups?: Group[];
-  email?: string;
+  email: string;
   loginip?: string;
   loginfailure?: number;
   status?: string;