<template>
|
<header class="bg-white shadow-sm flex items-center">
|
<div class="flex w-full">
|
<div class="flex items-center h-20 mx-auto">
|
<!-- Logo -->
|
<div class="flex items-center cursor-pointer">
|
<router-link to="/">
|
<img :src="headerLogo" alt="Logo" class="h-20 w-auto" />
|
</router-link>
|
<!-- <span class="text-extra-large font-bold">工业大数据平台</span> -->
|
</div>
|
|
<!-- Navigation Menu -->
|
<nav class="flex ml-8">
|
<el-menu mode="horizontal" :ellipsis="false" class="border-none" router :default-active="activeRoute">
|
<el-menu-item index="/home" class="!px-4">首页</el-menu-item>
|
<el-menu-item index="/certified-products" class="!px-4">能效产品</el-menu-item>
|
<el-menu-item index="/eec-label-search" class="!px-4">证书查询</el-menu-item>
|
<el-menu-item index="/news-detail/99" class="!px-4">政策文件</el-menu-item>
|
<el-menu-item index="/select-selpara" class="!px-4" @click="linkClick">泵选型</el-menu-item>
|
</el-menu>
|
</nav>
|
|
<!-- Search and User Actions -->
|
<div class="flex items-center space-x-8 ml-[65px]">
|
<el-input v-model="searchQuery" placeholder="查证书" class="w-48" v-if="false">
|
<template #suffix>
|
<el-icon class="cursor-pointer" @click="handleSearch"><Search /></el-icon>
|
</template>
|
</el-input>
|
|
<!-- Add shopping cart icon here -->
|
<div class="flex items-center gap-4" @click="goToCart">
|
<el-badge :value="cartCount" :max="99" class="cart-badge">
|
<el-button class="flex items-center" link>
|
<el-icon class="text-lg" style="font-size: 20px;"><ShoppingCart /></el-icon>
|
</el-button>
|
</el-badge>
|
</div>
|
|
<div class="flex items-center text-gray-600 text-sm text-nowrap">
|
<template v-if="!userInfo.Token">
|
<!-- <a href="#" class="hover:text-blue-500">注册</a>
|
<span class="mx-2">·</span> -->
|
<a @click="toLogin" class="hover:text-blue-500">登录</a>
|
</template>
|
<template v-else>
|
<span class="text-blue-500 mr-2">{{ userInfo.RealName }}</span>
|
<a href="#" class="hover:text-blue-500" @click.prevent="handleLogout">退出</a>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</header>
|
</template>
|
|
<script setup lang="ts">
|
import headerLogo from '@/assets/logo/header_logo.png';
|
import { Search, ShoppingCart } from '@element-plus/icons-vue';
|
import { ElMessage } from 'element-plus';
|
import { computed, ref, watch } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import { useLogin } from '@/stores/useLogin';
|
import { useCartStore } from '@/stores/useCartStore';
|
|
const loginStore = useLogin();
|
const cartStore = useCartStore();
|
|
const route = useRoute();
|
const router = useRouter();
|
const searchQuery = ref('');
|
const handleSearch = () => {
|
if (!searchQuery.value) {
|
searchQuery.value = '查证书';
|
}
|
router.push(`/eec-label-search`);
|
};
|
const activeRoute = computed(() => route.path);
|
|
// 获取用户信息
|
const userInfo = computed(() => {
|
const UserInfo = loginStore.getUserInfo();
|
return UserInfo ? UserInfo : null;
|
});
|
|
const toLogin = () => {
|
router.replace({
|
path: '/login',
|
query: {
|
redirectPath: route.fullPath,
|
},
|
});
|
};
|
// 处理登出
|
const handleLogout = () => {
|
loginStore.logOut();
|
ElMessage.success('已退出登录');
|
router.replace({
|
path: '/login',
|
query: { redirectPath: route.fullPath },
|
});
|
};
|
|
const linkClick = () => {
|
if (userInfo.value.Token) {
|
router.push('/select-selpara');
|
} else {
|
loginStore.logOut();
|
router.replace({
|
path: '/login',
|
query: { redirectPath: route.fullPath },
|
});
|
}
|
};
|
|
// 从 Pinia store 获取购物车数量
|
const cartCount = computed(() => cartStore.cartItemCount);
|
|
const goToCart = () => {
|
if (userInfo.value.Token) {
|
router.push('/cart');
|
} else {
|
loginStore.logOut();
|
router.replace({
|
path: '/login',
|
query: { redirectPath: route.fullPath },
|
});
|
return
|
}
|
|
};
|
</script>
|
|
<style scoped>
|
:deep(.el-menu--horizontal .el-menu-item) {
|
height: 64px;
|
line-height: 64px;
|
font-size: 14px;
|
}
|
|
:deep(.el-menu--horizontal) {
|
border-bottom: none;
|
}
|
|
.cart-badge :deep(.el-badge__content) {
|
animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
}
|
|
@keyframes cartBadgeAnimation {
|
0% {
|
transform: scale(0);
|
opacity: 0;
|
}
|
50% {
|
transform: scale(1.2);
|
}
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
</style>
|
