修改购物车功能

tanghaolin

2025-03-09 2839044a1269268e277f23f66cf2b86dcf85de3b

 src/components/AppHeader.vue

@@ -1,37 +1,53 @@
<template>
   <header class="bg-white shadow-sm">
      <div class="container mx-auto px-40">
         <div class="flex items-center justify-between h-16">
   <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">
            <div class="flex items-center cursor-pointer">
               <router-link to="/">
                  <img src="/logo.svg" alt="Logo" class="h-8 w-auto" />
                  <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-1 ml-8">
            <nav class="flex ml-8">
               <el-menu mode="horizontal" :ellipsis="false" class="border-none" router :default-active="activeRoute">
                  <el-menu-item index="/" class="!px-4">首页</el-menu-item>
                  <el-menu-item index="/industrial-software" class="!px-4">工业软件|工业APP</el-menu-item>
                  <el-menu-item index="/supply-demand" class="!px-4">供需对接</el-menu-item>
                  <el-menu-item index="/application" class="!px-4">应用推广</el-menu-item>
                  <el-menu-item index="/public-service" class="!px-4">公共服务</el-menu-item>
                  <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-4">
               <el-input v-model="searchQuery" placeholder="找工业/找大数据" class="w-48">
            <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><Search /></el-icon>
                     <el-icon class="cursor-pointer" @click="handleSearch"><Search /></el-icon>
                  </template>
               </el-input>

               <div class="flex items-center text-gray-600 text-sm">
                  <a href="#" class="hover:text-blue-500">注册</a>
                  <span class="mx-2">·</span>
                  <a href="#" class="hover:text-blue-500">登录</a>
               <!-- 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>
@@ -40,14 +56,80 @@
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
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>
@@ -60,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>