提交 | 用户 | 时间
|
820397
|
1 |
<template> |
H |
2 |
<div class="change-avatar"> |
|
3 |
<CropperAvatar |
|
4 |
ref="cropperRef" |
|
5 |
:btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }" |
|
6 |
:showBtn="false" |
|
7 |
:value="img" |
|
8 |
width="120px" |
|
9 |
@change="handelUpload" |
|
10 |
/> |
|
11 |
</div> |
|
12 |
</template> |
|
13 |
<script lang="ts" setup> |
|
14 |
import { propTypes } from '@/utils/propTypes' |
|
15 |
import { uploadAvatar } from '@/api/system/user/profile' |
|
16 |
import { CropperAvatar } from '@/components/Cropper' |
|
17 |
import { useUserStore } from '@/store/modules/user' |
|
18 |
|
|
19 |
|
|
20 |
defineOptions({ name: 'UserAvatar' }) |
|
21 |
|
|
22 |
defineProps({ |
|
23 |
img: propTypes.string.def('') |
|
24 |
}) |
|
25 |
|
|
26 |
const userStore = useUserStore() |
|
27 |
|
|
28 |
|
|
29 |
const cropperRef = ref() |
|
30 |
const handelUpload = async ({ data }) => { |
|
31 |
const res = await uploadAvatar({ avatarFile: data }) |
|
32 |
cropperRef.value.close() |
|
33 |
userStore.setUserAvatarAction(res.data) |
|
34 |
} |
|
35 |
</script> |
|
36 |
|
|
37 |
<style lang="scss" scoped> |
|
38 |
.change-avatar { |
|
39 |
img { |
|
40 |
display: block; |
|
41 |
margin-bottom: 15px; |
|
42 |
border-radius: 50%; |
|
43 |
} |
|
44 |
} |
|
45 |
</style> |