提交 | 用户 | 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> |