68 lines
2.2 KiB
Vue
Executable File
68 lines
2.2 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<ElDropdown v-if="userStore.isLogin" @command="handleCommand">
|
|
<div class="flex items-center">
|
|
<ElAvatar :size="25" :src="userStore.userInfo.avatar" />
|
|
<div class="ml-1 text-white text-lg flex">
|
|
<span class="mr-2">个人中心</span>
|
|
<ElIcon><ArrowDown /></ElIcon>
|
|
</div>
|
|
</div>
|
|
<template #dropdown>
|
|
<ElDropdownMenu>
|
|
<NuxtLink to="/user/info">
|
|
<ElDropdownItem command="user">个人信息</ElDropdownItem>
|
|
</NuxtLink>
|
|
<NuxtLink to="/user/collection">
|
|
<ElDropdownItem command="collect">
|
|
我的收藏
|
|
</ElDropdownItem>
|
|
</NuxtLink>
|
|
<NuxtLink to="/account/security">
|
|
<ElDropdownItem command="account">
|
|
账号安全
|
|
</ElDropdownItem>
|
|
</NuxtLink>
|
|
<ElDropdownItem command="logout">退出登录</ElDropdownItem>
|
|
</ElDropdownMenu>
|
|
</template>
|
|
</ElDropdown>
|
|
|
|
<div v-else class="cursor-pointer text-lg" @click="handleToLogin">
|
|
登录/注册
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {
|
|
ElAvatar,
|
|
ElDropdown,
|
|
ElDropdownMenu,
|
|
ElDropdownItem,
|
|
ElIcon
|
|
} from 'element-plus'
|
|
import { ArrowDown } from '@element-plus/icons-vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { PopupTypeEnum, useAccount } from '../account/useAccount'
|
|
import feedback from '~~/utils/feedback'
|
|
import { logout } from '~~/api/account'
|
|
const { setPopupType, toggleShowPopup } = useAccount()
|
|
const userStore = useUserStore()
|
|
|
|
const handleToLogin = () => {
|
|
setPopupType(PopupTypeEnum.LOGIN)
|
|
toggleShowPopup(true)
|
|
}
|
|
|
|
const handleCommand = async (command: string) => {
|
|
switch (command) {
|
|
case 'logout':
|
|
await feedback.confirm('确定退出登录吗？')
|
|
await logout()
|
|
userStore.logout()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|