From 65a34c2a476f8305579582b402445a640f531a65 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 11 三月 2025 16:17:16 +0800
Subject: [PATCH] 3333233332
---
src/components/AppHeader.vue | 102 ++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 85 insertions(+), 17 deletions(-)
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 2cb4e10..74f36e6 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -14,29 +14,38 @@
<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="/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 class="!px-4" @click="linkClick(' http://www.xpump.net/web/#/CN/Index')">鏌ユ车缃�</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">
+ <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">
- <a href="#" class="hover:text-blue-500">娉ㄥ唽</a>
- <span class="mx-2">路</span>
- <router-link to="/login" class="hover:text-blue-500">鐧诲綍</router-link>
+ <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.username }}</span>
+ <span class="text-blue-500 mr-2">{{ userInfo.RealName }}</span>
<a href="#" class="hover:text-blue-500" @click.prevent="handleLogout">閫�鍑�</a>
</template>
</div>
@@ -48,10 +57,15 @@
<script setup lang="ts">
import headerLogo from '@/assets/logo/header_logo.png';
-import { Search } from '@element-plus/icons-vue';
+import { Search, ShoppingCart } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
-import { computed, ref } from 'vue';
+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();
@@ -66,19 +80,55 @@
// 鑾峰彇鐢ㄦ埛淇℃伅
const userInfo = computed(() => {
- const info = localStorage.getItem('userInfo');
- return info ? JSON.parse(info) : null;
+ const UserInfo = loginStore.getUserInfo();
+ return UserInfo ? UserInfo : null;
});
+const toLogin = () => {
+ router.replace({
+ path: '/login',
+ query: {
+ redirectPath: route.fullPath,
+ },
+ });
+};
// 澶勭悊鐧诲嚭
const handleLogout = () => {
- localStorage.removeItem('userInfo');
+ loginStore.logOut();
ElMessage.success('宸查��鍑虹櫥褰�');
- router.push('/login');
+ router.replace({
+ path: '/login',
+ query: { redirectPath: route.fullPath },
+ });
};
-const linkClick = (url) => {
- window.open(url, '_blank');
+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>
@@ -92,4 +142,22 @@
: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>
--
Gitblit v1.9.3