<script setup lang="ts">
|
import { ContentWrap } from '@/components/ContentWrap'
|
import { ref, unref } from 'vue'
|
import { ElDivider, ElImage, ElTag, ElTabPane, ElTabs, ElButton, ElMessage } from 'element-plus'
|
import defaultAvatar from '@/assets/imgs/avatar.jpg'
|
import UploadAvatar from './components/UploadAvatar.vue'
|
import { Dialog } from '@/components/Dialog'
|
import EditInfo from './components/EditInfo.vue'
|
import EditPassword from './components/EditPassword.vue'
|
import { getUserInfo } from '@/api/user/user.js'
|
|
const userInfo = ref()
|
const fetchDetailUserApi = async () => {
|
// 这里可以调用接口获取用户信息
|
const res = await getUserInfo()
|
userInfo.value = res.data
|
}
|
fetchDetailUserApi()
|
|
const activeName = ref('first')
|
|
const dialogVisible = ref(false)
|
|
const uploadAvatarRef = ref<ComponentRef<typeof UploadAvatar>>()
|
const avatarLoading = ref(false)
|
const saveAvatar = async () => {
|
try {
|
avatarLoading.value = true
|
const base64 = unref(uploadAvatarRef)?.getBase64()
|
console.log(base64)
|
// 这里可以调用修改头像接口
|
fetchDetailUserApi()
|
ElMessage.success('修改成功')
|
dialogVisible.value = false
|
} catch (error) {
|
console.log(error)
|
} finally {
|
avatarLoading.value = false
|
}
|
}
|
</script>
|
|
<template>
|
<div class="flex w-100% h-100%">
|
<ContentWrap title="个人信息" class="w-100% flex-[2]">
|
<div class="flex justify-center items-center">
|
<div class="avatar w-[150px] h-[150px] relative cursor-pointer">
|
<ElImage
|
class="w-[150px] h-[150px] rounded-full"
|
:src="'http://192.168.1.103:9090/' + userInfo?.headImageUrl"
|
fit="fill"
|
/>
|
</div>
|
</div>
|
<ElDivider />
|
<div class="flex justify-between items-center">
|
<div>账号：</div>
|
<div>{{ userInfo?.userName }}</div>
|
</div>
|
<ElDivider />
|
<div class="flex justify-between items-center">
|
<div>昵称：</div>
|
<div>{{ userInfo?.userTrueName }}</div>
|
</div>
|
<ElDivider />
|
|
<div class="flex justify-between items-center">
|
<div>所属角色：</div>
|
<div>
|
<template v-if="userInfo?.roleName">
|
<ElTag class="ml-2 mb-w">{{ userInfo?.roleName }} </ElTag>
|
</template>
|
<template v-else>-</template>
|
</div>
|
</div>
|
<ElDivider />
|
</ContentWrap>
|
<!-- <ContentWrap title="基本资料" class="flex-[3] ml-20px">
|
<ElTabs v-model="activeName">
|
<ElTabPane label="修改密码" name="second">
|
<EditPassword />
|
</ElTabPane>
|
</ElTabs>
|
</ContentWrap> -->
|
</div>
|
|
<Dialog v-model="dialogVisible" title="修改头像" width="800px">
|
<UploadAvatar ref="uploadAvatarRef" :url="userInfo?.avatarUrl || defaultAvatar" />
|
|
<template #footer>
|
<ElButton type="primary" :loading="avatarLoading" @click="saveAvatar"> 保存 </ElButton>
|
<ElButton @click="dialogVisible = false">关闭</ElButton>
|
</template>
|
</Dialog>
|
</template>
|
|
<style lang="less" scoped>
|
.avatar {
|
position: relative;
|
|
&::after {
|
position: absolute;
|
top: 0;
|
left: 0;
|
display: flex;
|
width: 100%;
|
height: 100%;
|
font-size: 50px;
|
color: #fff;
|
background-color: rgb(0 0 0 / 40%);
|
border-radius: 50%;
|
content: '+';
|
opacity: 0;
|
justify-content: center;
|
align-items: center;
|
}
|
|
&:hover {
|
&::after {
|
opacity: 1;
|
}
|
}
|
}
|
</style>
|
