添加spump选型内容

tanghaolin

2025-03-07 95b61d104bced72ff0786668abeeb0e5122fcdd8

 src/components/AppHeader.vue

@@ -29,6 +29,15 @@
                  </template>
               </el-input>

               <!-- Add shopping cart icon here -->
               <div class="flex items-center gap-4">
                  <el-badge :value="cartCount" :max="99" class="cart-badge">
                     <el-button class="flex items-center" link @click="goToCart">
                        <el-icon class="text-xl"><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>
@@ -48,13 +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();
@@ -94,6 +105,13 @@
const linkClick = () => {
   router.push('/select-selpara');
};

// 从 Pinia store 获取购物车数量
const cartCount = computed(() => cartStore.cartItemCount);

const goToCart = () => {
   router.push('/cart');
};
</script>

<style scoped>
@@ -106,4 +124,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>