| 提交 | 用户 | age | ||
| 7ad4ce | 1 | <template> |
| C | 2 | <CollapseContainer title="基本设置" :canExpan="false"> |
| 9f8796 | 3 | <a-row :gutter="24"> |
| C | 4 | <a-col :span="14"> |
| 5 | <BasicForm @register="register" /> | |
| 6 | </a-col> | |
| 7 | <a-col :span="10"> | |
| 8 | <div class="change-avatar"> | |
| 56a966 | 9 | <div class="mb-2">头像</div> |
| b96ea0 | 10 | <CropperAvatar |
| 无 | 11 | :uploadApi="uploadApi" |
| 12 | :value="avatar" | |
| 13 | btnText="更换头像" | |
| 14 | :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }" | |
| 15 | @change="updateAvatar" | |
| 16 | width="150" | |
| 17 | /> | |
| 9f8796 | 18 | </div> |
| C | 19 | </a-col> |
| 20 | </a-row> | |
| 9edc28 | 21 | <Button type="primary" @click="handleSubmit"> 更新基本信息 </Button> |
| 7ad4ce | 22 | </CollapseContainer> |
| C | 23 | </template> |
| 24 | <script lang="ts"> | |
| b96ea0 | 25 | import { Button, Row, Col } from 'ant-design-vue'; |
| 7519a0 | 26 | import { computed, defineComponent, onMounted } from 'vue'; |
| 7ad4ce | 27 | import { BasicForm, useForm } from '/@/components/Form/index'; |
| b96ea0 | 28 | import { CollapseContainer } from '/@/components/Container'; |
| 无 | 29 | import { CropperAvatar } from '/@/components/Cropper'; |
| 7ad4ce | 30 | |
| C | 31 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 32 | ||
| 9f8796 | 33 | import headerImg from '/@/assets/images/header.jpg'; |
| 7ad4ce | 34 | import { accountInfoApi } from '/@/api/demo/account'; |
| C | 35 | import { baseSetschemas } from './data'; |
| 7519a0 | 36 | import { useUserStore } from '/@/store/modules/user'; |
| b96ea0 | 37 | import { uploadApi } from '/@/api/sys/upload'; |
| 7ad4ce | 38 | |
| C | 39 | export default defineComponent({ |
| 6392b7 | 40 | components: { |
| V | 41 | BasicForm, |
| 42 | CollapseContainer, | |
| 43 | Button, | |
| b96ea0 | 44 | ARow: Row, |
| 无 | 45 | ACol: Col, |
| 46 | CropperAvatar, | |
| 6392b7 | 47 | }, |
| 7ad4ce | 48 | setup() { |
| C | 49 | const { createMessage } = useMessage(); |
| 7519a0 | 50 | const userStore = useUserStore(); |
| 7ad4ce | 51 | |
| C | 52 | const [register, { setFieldsValue }] = useForm({ |
| 53 | labelWidth: 120, | |
| 54 | schemas: baseSetschemas, | |
| 55 | showActionButtonGroup: false, | |
| 56 | }); | |
| 57 | ||
| 58 | onMounted(async () => { | |
| 59 | const data = await accountInfoApi(); | |
| 60 | setFieldsValue(data); | |
| 61 | }); | |
| 62 | ||
| 7519a0 | 63 | const avatar = computed(() => { |
| N | 64 | const { avatar } = userStore.getUserInfo; |
| 8dd8a5 | 65 | console.log(avatar); |
| 7519a0 | 66 | return avatar || headerImg; |
| N | 67 | }); |
| 68 | ||
| dfe560 | 69 | function updateAvatar({ src, data }) { |
| b96ea0 | 70 | const userinfo = userStore.getUserInfo; |
| 无 | 71 | userinfo.avatar = src; |
| 72 | userStore.setUserInfo(userinfo); | |
| dfe560 | 73 | console.log('data', data); |
| b96ea0 | 74 | } |
| 无 | 75 | |
| 7ad4ce | 76 | return { |
| 7519a0 | 77 | avatar, |
| 7ad4ce | 78 | register, |
| e15b4f | 79 | uploadApi: uploadApi as any, |
| b96ea0 | 80 | updateAvatar, |
| 7ad4ce | 81 | handleSubmit: () => { |
| C | 82 | createMessage.success('更新成功！'); |
| 83 | }, | |
| 84 | }; | |
| 85 | }, | |
| 86 | }); | |
| 87 | </script> | |
| 9f8796 | 88 | |
| C | 89 | <style lang="less" scoped> |
| 90 | .change-avatar { | |
| 91 | img { | |
| 92 | display: block; | |
| 93 | margin-bottom: 15px; | |
| 94 | border-radius: 50%; | |
| 95 | } | |
| 96 | } | |
| 97 | </style> | |
