finish page/settings

frontend/vben/src/api/sys/model/userModel.ts

@@ -30,6 +30,15 @@ export interface SetContactParams {
   contact: string
 }
 
+/**
+ * @description: Set UserInfo interface parameters
+ */
+export interface SetUserInfoParams {
+  nick: string
+  desc: string
+  avtr: string
+}
+
 /**
  * @description: Register interface parameters
  */

frontend/vben/src/api/sys/user.ts

@@ -6,6 +6,7 @@ import {
   ResetPasswordParams,
   SetPasswordParams,
   SetContactParams,
+  SetUserInfoParams,
   RegisterParams,
   ResetPasswordResultModel,
   RegisterResultModel,
@@ -21,6 +22,7 @@ enum Api {
   ResetPassword = '/resetPassword',
   SetPassword = '/setPassword',
   SetContact = '/setContact',
+  SetUserInfo = '/setUserInfo',
   Register = '/register',
   GetUserInfo = '/getUserInfo',
   GetUsersCount = '/getUsersCount',
@@ -88,6 +90,21 @@ export function setContactApi(params: SetContactParams, mode: ErrorMessageMode =
   )
 }
 
+/**
+ * @description: set userinfo api, borrowing the ResetPasswordResultModel as they're the same
+ */
+export function setUserInfoApi(params: SetUserInfoParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<ResetPasswordResultModel>(
+    {
+      url: Api.SetUserInfo,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
 /**
  * @description: register api
  */

frontend/vben/src/views/page/settings/BaseSetting.vue

@@ -12,7 +12,6 @@
             :value="avatarRef"
             btnText="更换头像"
             :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
-            @change="updateAvatar"
             width="150"
           />
         </div>
@@ -27,13 +26,12 @@
   import { BasicForm, useForm } from '/@/components/Form/index'
   import { CollapseContainer } from '/@/components/Container'
   import { CropperAvatar } from '/@/components/Cropper'
-
   import { useMessage } from '/@/hooks/web/useMessage'
-
   import headerImg from '/@/assets/images/header.jpg'
   import { baseSetschemas } from './data'
   import { useUserStore } from '/@/store/modules/user'
   import { uploadApi } from '/@/api/sys/upload'
+  import { setUserInfoApi } from '/@/api/sys/user'
 
   export default defineComponent({
     components: {
@@ -45,11 +43,10 @@
       CropperAvatar,
     },
     setup() {
-      const { createMessage } = useMessage()
       const userStore = useUserStore()
       const { avatar } = userStore.getUserInfo
 
-      const [register, { setFieldsValue }] = useForm({
+      const [register, { getFieldsValue, setFieldsValue }] = useForm({
         labelWidth: 120,
         schemas: baseSetschemas,
         showActionButtonGroup: false,
@@ -62,9 +59,11 @@
 
       const avatarRef = ref(avatar || headerImg)
 
-      function updateAvatar({ src }) {
+      function updateUserInfo(nick: string, desc: string, avtr: string) {
         const userinfo = userStore.getUserInfo
-        userinfo.avatar = src
+        userinfo.realName = nick
+        userinfo.desc = desc
+        userinfo.avatar = avtr
         userStore.setUserInfo(userinfo)
       }
 
@@ -78,18 +77,30 @@
           },
           () => {},
         )
-        avatarRef.value = result.data.url
+        avatarRef.value = (result.data as any).result.url
         return result
       }
 
+      const { createMessage } = useMessage()
+
+      function handleSubmit() {
+        const { realName, desc } = getFieldsValue()
+        setUserInfoApi({
+          nick: realName,
+          desc: desc,
+          avtr: avatarRef.value,
+        }).then((value) => {
+          if (avatarRef.value && avatarRef.value != headerImg)
+            updateUserInfo(realName, desc, avatarRef.value)
+          createMessage.success(value.msg)
+        })
+      }
+
       return {
         avatarRef,
         register,
         onUpload,
-        updateAvatar,
-        handleSubmit: () => {
-          createMessage.success('更新成功！')
-        },
+        handleSubmit,
       }
     },
   })

frontend/vben/src/views/page/settings/contact/index.vue

@@ -15,6 +15,7 @@
   import { BasicForm, useForm } from '/@/components/Form'
   import { setContactApi } from '/@/api/sys/user'
   import { useMessage } from '/@/hooks/web/useMessage'
+  import { useUserStore } from '/@/store/modules/user'
   import md5 from 'md5'
 
   import { formSchema } from './contact.data'
@@ -31,6 +32,7 @@
       })
 
       const { createMessage } = useMessage()
+      const userStore = useUserStore()
 
       async function handleSubmit() {
         try {
@@ -41,6 +43,7 @@
             contact: contactNew,
           })
           createMessage.success(msg)
+          userStore.getUserInfoAction()
         } catch (_) {}
       }