140 lines
5.7 KiB
Vue
140 lines
5.7 KiB
Vue
<template>
|
|
<div class="fr clearfix flex items-center">
|
|
<!-- PC端 -->
|
|
<div v-if="setting.searchBtn" class="fl mr-5 hidden-sm-and-down">
|
|
<el-input v-model="keywords" :placeholder="`${$t('searchKeywords')}`" :suffix-icon="Search" @change="onSearch"/>
|
|
</div>
|
|
<template v-if="setting.loginBtn">
|
|
<!-- 未登录 -->
|
|
<div v-if="!token" class="lang flex justify-center text-center items-center">
|
|
<el-space class="hidden-sm-and-down">
|
|
<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?.nickname }}</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 command="order" divided><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 class="hidden-sm-and-up mx-7 sm:mx-0">
|
|
<div class="el-dropdown-link flex items-center" @click="drawer = true">
|
|
<el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
|
|
<el-icon v-else color="black" :size="24"><Fold /></el-icon>
|
|
</div>
|
|
<el-drawer
|
|
v-model="drawer"
|
|
:size="290"
|
|
>
|
|
<div id="menu">
|
|
<el-menu
|
|
currentIndex="/product"
|
|
:unique-opened="true"
|
|
>
|
|
<template v-for="(item,index) in navigations" :key="index">
|
|
<el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
|
|
<template #title><span>{{ item.title }}</span></template>
|
|
<el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
|
|
<el-space>
|
|
<el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
|
|
<a :href="navTo(sub)">{{ sub.title }}</a>
|
|
</el-space>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
<!-- <div v-if="setting.searchBtn" class="search-tools flex justify-center p-4 mt-5">-->
|
|
<!-- <el-input v-model="keywords" placeholder="请输入关键词..." :suffix-icon="Search" @change="onSearch"/>-->
|
|
<!-- </div>-->
|
|
<!-- <div v-if="setting.langBtn" class="lang flex justify-center text-center">-->
|
|
<!-- <el-space>-->
|
|
<!-- <a @click="onLang(`zh`)" class="text-sm text-gray-500">中文版</a>-->
|
|
<!-- <el-divider direction="vertical" />-->
|
|
<!-- <a @click="onLang(`en`)" class="text-sm text-gray-400">English</a>-->
|
|
<!-- </el-space>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Search, Fold } from '@element-plus/icons-vue'
|
|
import {useConfigInfo, useMenu, useSetting} from "~/composables/configState";
|
|
import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
|
|
import {listCmsLangLog} from "~/api/cms/cmsLangLog";
|
|
const token = useToken();
|
|
const user = useUser();
|
|
const navigations = useMenu();
|
|
const setting = useSetting();
|
|
const keywords = ref<string>();
|
|
const drawer = ref<boolean>(false);
|
|
const langList = ref<CmsLangLog[]>([]);
|
|
|
|
const onSearch = () => {
|
|
navigateTo(`/search/${keywords.value || '关键词不能为空！'}`)
|
|
}
|
|
|
|
function handleCommand(command: string) {
|
|
switch (command) {
|
|
case 'logOut':
|
|
logOut();
|
|
break;
|
|
default:
|
|
navigateTo('/user');
|
|
break;
|
|
}
|
|
}
|
|
|
|
// TODO 读取国际化配置
|
|
listCmsLangLog({}).then(list => {
|
|
langList.value = list;
|
|
})
|
|
|
|
const onLang = (lang: string) => {
|
|
navigateTo(`?lang=${lang}`)
|
|
drawer.value = false;
|
|
}
|
|
|
|
function logOut() {
|
|
token.value = '';
|
|
localStorage.clear();
|
|
navigateTo('/passport/login')
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.el-menu{
|
|
border-right: none;
|
|
}
|
|
</style>
|