fix: 用户头像、昵称修改

This commit is contained in:
dhb52 2024-02-17 19:19:51 +08:00
parent 2f37232f5e
commit a3e95b56ca
6 changed files with 42 additions and 24 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -18,7 +18,7 @@ import { useDesign } from '@/hooks/web/useDesign'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from 'vue-i18n'
import CopperModal from './CopperModal.vue'
import avatar from '@/assets/imgs/avatar.jpg'
import avatar from '@/assets/imgs/avatar.gif'
defineOptions({ name: 'CropperAvatar' })

View File

@ -1,18 +1,15 @@
<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { useDesign } from '@/hooks/web/useDesign'
import avatarImg from '@/assets/imgs/avatar.gif'
import { useUserStore } from '@/store/modules/user'
import { useDesign } from '@/hooks/web/useDesign'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useUserStore } from '@/store/modules/user'
defineOptions({ name: 'UserInfo' })
const { t } = useI18n()
const { wsCache } = useCache()
const { push, replace } = useRouter()
const userStore = useUserStore()
@ -23,24 +20,21 @@ const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('user-info')
const user = wsCache.get(CACHE_KEY.USER)
const avatar = computed(() => userStore.user.avatar ?? avatarImg)
const userName = computed(() => userStore.user.nickname ?? 'Admin')
const avatar = user.user.avatar ? user.user.avatar : avatarImg
const userName = user.user.nickname ? user.user.nickname : 'Admin'
const loginOut = () => {
ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
type: 'warning'
})
.then(async () => {
await userStore.loginOut()
tagsViewStore.delAllViews()
replace('/login?redirect=/index')
const loginOut = async () => {
try {
await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
type: 'warning'
})
.catch(() => {})
await userStore.loginOut()
tagsViewStore.delAllViews()
replace('/login?redirect=/index')
}
catch { }
}
const toProfile = async () => {
push('/user/profile')

View File

@ -63,6 +63,20 @@ export const useUserStore = defineStore('admin-user', {
wsCache.set(CACHE_KEY.USER, userInfo)
wsCache.set(CACHE_KEY.ROLE_ROUTERS, userInfo.menus)
},
async setUserAvatarAction(avatar: string) {
const userInfo = wsCache.get(CACHE_KEY.USER)
// NOTE: 是否需要像`setUserInfoAction`一样判断`userInfo != null`
this.user.avatar = avatar
userInfo.user.avatar = avatar
wsCache.set(CACHE_KEY.USER, userInfo)
},
async setUserNicknameAction(nickname: string) {
const userInfo = wsCache.get(CACHE_KEY.USER)
// NOTE: 是否需要像`setUserInfoAction`一样判断`userInfo != null`
this.user.nickname = nickname
userInfo.user.nickname = nickname
wsCache.set(CACHE_KEY.USER, userInfo)
},
async loginOut() {
await loginOut()
removeToken()

View File

@ -21,11 +21,13 @@ import {
updateUserProfile,
UserProfileUpdateReqVO
} from '@/api/system/user/profile'
import { useUserStore } from '@/store/modules/user'
defineOptions({ name: 'BasicInfo' })
const { t } = useI18n()
const message = useMessage() //
const userStore = useUserStore()
//
const rules = reactive<FormRules>({
nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
@ -78,13 +80,15 @@ const submit = () => {
const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
await updateUserProfile(data)
message.success(t('common.updateSuccess'))
await init()
const profile = await init()
userStore.setUserNicknameAction(profile.nickname)
}
})
}
const init = async () => {
const res = await getUserProfile()
unref(formRef)?.setValues(res)
return res
}
onMounted(async () => {
await init()

View File

@ -14,6 +14,8 @@
import { propTypes } from '@/utils/propTypes'
import { uploadAvatar } from '@/api/system/user/profile'
import { CropperAvatar } from '@/components/Cropper'
import { useUserStore } from '@/store/modules/user'
defineOptions({ name: 'UserAvatar' })
@ -21,10 +23,14 @@ defineProps({
img: propTypes.string.def('')
})
const userStore = useUserStore()
const cropperRef = ref()
const handelUpload = async ({ data }) => {
await uploadAvatar({ avatarFile: data })
const res = await uploadAvatar({ avatarFile: data })
cropperRef.value.close()
userStore.setUserAvatarAction(res.data)
}
</script>