finish upload avatar

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

@@ -66,6 +66,12 @@ export interface GetUserInfoModel {
   avatar: string
   // 介绍
   desc?: string
+  // 创建日期
+  date: string
+  // 上次修改密码日期
+  last: string
+  // 电话
+  contact: string
 }
 
 export interface GetLoginSaltModel {

frontend/vben/src/components/Cropper/src/CopperModal.vue

@@ -187,7 +187,7 @@
           try {
             setModalProps({ confirmLoading: true })
             const result = await uploadApi({ name: 'file', file: blob, filename })
-            emit('uploadSuccess', { source: previewSource.value, data: result.url })
+            emit('uploadSuccess', { source: previewSource.value, data: result.data.result.url })
             closeModal()
           } finally {
             setModalProps({ confirmLoading: false })

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

@@ -8,8 +8,8 @@
         <div class="change-avatar">
           <div class="mb-2">头像</div>
           <CropperAvatar
-            :uploadApi="uploadApi"
-            :value="avatar"
+            :uploadApi="onUpload as any"
+            :value="avatarRef"
             btnText="更换头像"
             :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
             @change="updateAvatar"
@@ -23,7 +23,7 @@
 </template>
 <script lang="ts">
   import { Button, Row, Col } from 'ant-design-vue'
-  import { computed, defineComponent, onMounted } from 'vue'
+  import { ref, defineComponent, onMounted } from 'vue'
   import { BasicForm, useForm } from '/@/components/Form/index'
   import { CollapseContainer } from '/@/components/Container'
   import { CropperAvatar } from '/@/components/Cropper'
@@ -31,7 +31,6 @@
   import { useMessage } from '/@/hooks/web/useMessage'
 
   import headerImg from '/@/assets/images/header.jpg'
-  import { accountInfoApi } from '/@/api/demo/account'
   import { baseSetschemas } from './data'
   import { useUserStore } from '/@/store/modules/user'
   import { uploadApi } from '/@/api/sys/upload'
@@ -48,6 +47,7 @@
     setup() {
       const { createMessage } = useMessage()
       const userStore = useUserStore()
+      const { avatar } = userStore.getUserInfo
 
       const [register, { setFieldsValue }] = useForm({
         labelWidth: 120,
@@ -56,27 +56,36 @@
       })
 
       onMounted(async () => {
-        const data = await accountInfoApi()
+        const data = userStore.getUserInfo
         setFieldsValue(data)
       })
 
-      const avatar = computed(() => {
-        const { avatar } = userStore.getUserInfo
-        console.log(avatar)
-        return avatar || headerImg
-      })
+      const avatarRef = ref(avatar || headerImg)
 
-      function updateAvatar({ src, data }) {
+      function updateAvatar({ src }) {
         const userinfo = userStore.getUserInfo
         userinfo.avatar = src
         userStore.setUserInfo(userinfo)
-        console.log('data', data)
+      }
+
+      async function onUpload(value: { file: Blob; name: string }) {
+        const data = userStore.getUserInfo
+        const result = await uploadApi(
+          {
+            name: 'avatar',
+            file: value.file,
+            filename: data.username,
+          },
+          () => {},
+        )
+        avatarRef.value = result.data.url
+        return result
       }
 
       return {
-        avatar,
+        avatarRef,
         register,
-        uploadApi: uploadApi as any,
+        onUpload,
         updateAvatar,
         handleSubmit: () => {
           createMessage.success('更新成功！')

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

@@ -23,14 +23,28 @@
   import { List } from 'ant-design-vue'
   import { defineComponent } from 'vue'
   import { CollapseContainer } from '/@/components/Container/index'
-
-  import { secureSettingList } from './data'
+  import { useUserStore } from '/@/store/modules/user'
 
   export default defineComponent({
     components: { CollapseContainer, List, ListItem: List.Item, ListItemMeta: List.Item.Meta },
     setup() {
+      const userStore = useUserStore()
+      const { last, contact } = userStore.getUserInfo
       return {
-        list: secureSettingList,
+        list: [
+          {
+            key: '1',
+            title: '账户密码',
+            description: '上次修改密码: ' + last,
+            extra: '修改',
+          },
+          {
+            key: '2',
+            title: '我的手机',
+            description: '已绑定手机: ' + contact,
+            extra: '修改',
+          },
+        ],
       }
     },
   })

frontend/vben/src/views/page/settings/data.ts

@@ -1,14 +1,5 @@
 import { FormSchema } from '/@/components/Form/index'
 
-export interface ListItem {
-  key: string
-  title: string
-  description: string
-  extra?: string
-  avatar?: string
-  color?: string
-}
-
 // tab的list
 export const settingList = [
   {
@@ -26,31 +17,15 @@ export const settingList = [
 // 基础设置 form
 export const baseSetschemas: FormSchema[] = [
   {
-    field: 'name',
+    field: 'realName',
     component: 'Input',
     label: '昵称',
     colProps: { span: 18 },
   },
   {
-    field: 'introduction',
+    field: 'desc',
     component: 'InputTextArea',
     label: '个人简介',
     colProps: { span: 18 },
   },
 ]
-
-// 安全设置 list
-export const secureSettingList: ListItem[] = [
-  {
-    key: '1',
-    title: '账户密码',
-    description: '上次修改密码: 2022年1月1日0时0分0秒',
-    extra: '修改',
-  },
-  {
-    key: '2',
-    title: '我的手机',
-    description: '已绑定手机: 138****8293',
-    extra: '修改',
-  },
-]