完成购物车功能

src/components/CartIcon.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Badge } from "@nutui/nutui-react-taro";
+import { Cart } from "@nutui/icons-react-taro";
+import Taro from '@tarojs/taro';
+import { useCart } from "@/hooks/useCart";
+
+interface CartIconProps {
+  style?: React.CSSProperties;
+  className?: string;
+  size?: number;
+  showBadge?: boolean;
+  onClick?: () => void;
+}
+
+const CartIcon: React.FC<CartIconProps> = ({
+  style,
+  className = '',
+  size = 16,
+  showBadge = true,
+  onClick
+}) => {
+  const { cartCount } = useCart();
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    } else {
+      // 默认跳转到购物车页面
+      Taro.switchTab({ url: '/pages/cart/cart' });
+    }
+  };
+
+  if (showBadge) {
+    return (
+      <div 
+        className={className}
+        style={style}
+        onClick={handleClick}
+      >
+        <Badge value={cartCount} top="-2" right="2">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Cart size={size} />
+          </div>
+        </Badge>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className={className}
+      style={style}
+      onClick={handleClick}
+    >
+      <Cart size={size} />
+    </div>
+  );
+};
+
+export default CartIcon;