From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/Profile/components/UserAvatar.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 54 insertions(+), 0 deletions(-)
diff --git a/src/views/Profile/components/UserAvatar.vue b/src/views/Profile/components/UserAvatar.vue
new file mode 100644
index 0000000..23ecc3a
--- /dev/null
+++ b/src/views/Profile/components/UserAvatar.vue
@@ -0,0 +1,54 @@
+<template>
+ <div class="change-avatar">
+ <CropperAvatar
+ ref="cropperRef"
+ :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
+ :showBtn="false"
+ :value="img"
+ width="120px"
+ @change="handelUpload"
+ />
+ </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { updateUserProfile } from '@/api/system/user/profile'
+import { CropperAvatar } from '@/components/Cropper'
+import { useUserStore } from '@/store/modules/user'
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { UploadRequestOptions } from 'element-plus/es/components/upload/src/upload'
+
+defineOptions({ name: 'UserAvatar' })
+
+defineProps({
+ img: propTypes.string.def('')
+})
+
+const userStore = useUserStore()
+
+const cropperRef = ref()
+const handelUpload = async ({ data }) => {
+ const { httpRequest } = useUpload()
+ const avatar = (
+ (await httpRequest({
+ file: data,
+ filename: 'avatar.png'
+ } as UploadRequestOptions)) as unknown as { data: string }
+ ).data
+ await updateUserProfile({ avatar })
+
+ // 鍏抽棴寮圭獥锛屽苟鏇存柊 userStore
+ cropperRef.value.close()
+ await userStore.setUserAvatarAction(avatar)
+}
+</script>
+
+<style lang="scss" scoped>
+.change-avatar {
+ img {
+ display: block;
+ margin-bottom: 15px;
+ border-radius: 50%;
+ }
+}
+</style>
--
Gitblit v1.8.0