上传头像 部分卡片加入模型选择

src/views/home/setting/General.vue

@@ -1,12 +1,19 @@
 <template>
 	<div>
 		<div class="label">{{ $t('Home.userProfile') }}</div>
-		<div class="profile">
-			<img :src="userInfo?.profile" />
-			<span class="edit" @click="onProfileEdit">
-				<svg-icon name="profile-edit" size="11" />
-			</span>
-		</div>
+		<el-tooltip
+			class="box-item"
+			effect="dark"
+			:content="`${$t('Home.remainingNum')} ${remainingNum}`"
+			placement="top"
+		>
+			<div class="profile">
+				<img :src="userInfo?.avatar" />
+				<span class="edit" @click="onProfileEdit">
+					<svg-icon name="profile-edit" size="11" />
+				</span>
+			</div>
+		</el-tooltip>
 	</div>
 	<div>
 		<div class="label">{{ $t('Home.userName') }}</div>
@@ -27,11 +34,13 @@
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, nextTick, inject } from 'vue'
+	import { computed, ref, nextTick, inject, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	import dropdownMenu from '@/components/dropdown-menu.vue'
 	import { useUserInfoStore } from '@/stores'
 	import { useI18n } from 'vue-i18n'
+	import { uploadImage } from '@/api/upload'
+	import { UpdateUserAvatar, getAvatarLimit } from '@/api/user'
 	const router = useRouter()
 	const { locale } = useI18n()
 	const userInfoStore = useUserInfoStore()
@@ -40,6 +49,7 @@
 		{ label: 'English', value: 'ENGLISH' },
 		{ label: '中文', value: 'CHINESE_SIMPLIFIED' }
 	])
+	const remainingNum = ref(0)
 	const changeLang = (value: string) => {
 		locale.value = value
 		localStorage.setItem('language', value)
@@ -50,10 +60,32 @@
 	const logout = () => {
 		userInfoStore.logOut()
 	}
+	const getAvatarLimitNum = ()=>{
+		getAvatarLimit().then((res:any) => {
+			if (res) {
+				remainingNum.value = res
+			}
+		})	
+	}
 	const onProfileEdit = () => {
 		// MyEvent.emit('openProfileEditDialog')
-		console.log('openProfileEditDialog')
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/png, image/jpeg, image/jpg'
+		input.addEventListener('change', (e) => {
+			const file = e.target.files[0]
+			const formData = new FormData()
+			formData.append('avatar', file)
+			UpdateUserAvatar(formData).then((res) => {
+				userInfoStore.updateUserInfo({avatar: res})
+				getAvatarLimitNum()
+			})
+		})
+		input.click()
 	}
+	onMounted(()=>{
+		getAvatarLimitNum()
+	})
 </script>
  
 <style lang="less" scoped>
@@ -75,6 +107,7 @@
 			width: 100%;
 			height: 100%;
 			border-radius: 50%;
+			object-fit: cover;
 		}
 		> .edit {
 			position: absolute;