77 lines
2.9 KiB
Vue
77 lines
2.9 KiB
Vue
<template>
|
|
<div class="fr clearfix flex items-center">
|
|
<div class="fl mr-5">
|
|
<el-input v-model="keywords" :placeholder="`${$t('searchKeywords')}`" :suffix-icon="Search" @change="onSearch"/>
|
|
</div>
|
|
<!-- 未登录 -->
|
|
<div v-if="!token" class="lang flex justify-center text-center items-center">
|
|
<el-space>
|
|
<nuxt-link to="/passport/login?type=register" type="text" class="text-sm text-gray-500">注册</nuxt-link>
|
|
<el-divider direction="vertical"/>
|
|
<nuxt-link to="/passport/login" type="text" class="text-sm text-gray-500">登录</nuxt-link>
|
|
</el-space>
|
|
</div>
|
|
<!-- 已登录 -->
|
|
<div v-else>
|
|
<div class="header__right items-center pr-4 xl:pr-0 md:flex hidden">
|
|
<el-space class="sm:flex hidden" size="large">
|
|
<ClientOnly>
|
|
<template v-if="token">
|
|
<el-dropdown @command="handleCommand">
|
|
<el-space class="flex items-center cursor-pointer">
|
|
<el-avatar class="cursor-pointer" :src="user?.avatar" :size="30" />
|
|
<span>{{ user?.tenantName }}</span>
|
|
</el-space>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="user"><nuxt-link to="/user">用户中心</nuxt-link></el-dropdown-item>
|
|
<!-- <el-dropdown-item command="password"><nuxt-link to="/user/password">修改密码</nuxt-link></el-dropdown-item>-->
|
|
<el-dropdown-item command="auth"><nuxt-link to="/user/auth">实名认证</nuxt-link></el-dropdown-item>
|
|
<el-dropdown-item divided command="order"><nuxt-link to="/user/order">我的订单</nuxt-link></el-dropdown-item>
|
|
<el-dropdown-item divided command="logOut"><nuxt-link to="/user/logout">退出登录</nuxt-link>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
<template v-else>
|
|
<el-button type="primary" v-if="!token" @click="navigateTo(`/passport/login`)">登录/注册</el-button>
|
|
<!-- <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>-->
|
|
</template>
|
|
</ClientOnly>
|
|
</el-space>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Search } from '@element-plus/icons-vue'
|
|
const token = useToken();
|
|
const user = useUser();
|
|
const keywords = ref<string>();
|
|
|
|
const onSearch = () => {
|
|
navigateTo(`/search/${keywords.value || '关键词不能为空！'}`)
|
|
}
|
|
|
|
function handleCommand(command: string) {
|
|
switch (command) {
|
|
case 'logOut':
|
|
logOut();
|
|
break;
|
|
default:
|
|
navigateTo('/user');
|
|
break;
|
|
}
|
|
}
|
|
|
|
function logOut() {
|
|
token.value = '';
|
|
localStorage.clear();
|
|
navigateTo('/passport/login')
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|