Administrator / spring-boot-microservices-onlineshooping-fullstack · Files

import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { useCart } from '../context/CartContext';

const ProductDetail = () => {
  const { id } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [quantity, setQuantity] = useState(1);
  const { addToCart } = useCart();

  useEffect(() => {
    // 模拟获取产品详情
    const mockProducts = {
      1: {
        id: 1,
        name: 'Wireless Bluetooth Headphones',
        price: 99.99,
        image: '/api/placeholder/400/400',
        category: 'electronics',
        description: 'High-quality wireless headphones with advanced noise cancellation technology. Perfect for music lovers and professionals.',
        features: [
          'Active Noise Cancellation',
          '30-hour battery life',
          'Comfortable over-ear design',
          'Bluetooth 5.0 connectivity',
          'Built-in microphone'
        ],
        specifications: {
          'Battery Life': '30 hours',
          'Connectivity': 'Bluetooth 5.0',
          'Weight': '250g',
          'Color': 'Black',
          'Warranty': '1 year'
        }
      },
      2: {
        id: 2,
        name: 'Smart Watch',
        price: 199.99,
        image: '/api/placeholder/400/400',
        category: 'electronics',
        description: 'Feature-rich smartwatch with comprehensive health monitoring and smart notifications.',
        features: [
          'Heart rate monitoring',
          'Sleep tracking',
          'GPS built-in',
          'Water resistant',
          'Smart notifications'
        ],
        specifications: {
          'Display': '1.4" AMOLED',
          'Battery': '7 days',
          'Water Resistance': '5 ATM',
          'Connectivity': 'Bluetooth, WiFi',
          'Compatibility': 'iOS & Android'
        }
      }
    };

    setTimeout(() => {
      setProduct(mockProducts[id] || null);
      setLoading(false);
    }, 1000);
  }, [id]);

  const handleAddToCart = () => {
    if (product) {
      addToCart(product, quantity);
      alert(`${quantity} ${product.name}(s) added to cart!`);
    }
  };

  if (loading) {
    return (
      <div style={loadingStyle}>
        <div>Loading product details...</div>
      </div>
    );
  }

  if (!product) {
    return (
      <div style={notFoundStyle}>
        <h2>Product Not Found</h2>
        <p>The product you're looking for doesn't exist.</p>
        <Link to="/products" style={backButtonStyle}>
          Back to Products
        </Link>
      </div>
    );
  }

  return (
    <div style={containerStyle}>
      <nav style={breadcrumbStyle}>
        <Link to="/">Home</Link> &gt; 
        <Link to="/products">Products</Link> &gt; 
        <span>{product.name}</span>
      </nav>

      <div style={productDetailStyle}>
        <div style={imageSectionStyle}>
          <div style={imagePlaceholderStyle}>
            {product.name}
          </div>
        </div>

        <div style={infoSectionStyle}>
          <h1 style={productNameStyle}>{product.name}</h1>
          <div style={priceStyle}>${product.price}</div>
          <p style={descriptionStyle}>{product.description}</p>

          <div style={featuresStyle}>
            <h3>Key Features:</h3>
            <ul style={featuresListStyle}>
              {product.features.map((feature, index) => (
                <li key={index}>{feature}</li>
              ))}
            </ul>
          </div>

          <div style={purchaseSectionStyle}>
            <div style={quantityStyle}>
              <label htmlFor="quantity">Quantity:</label>
              <select
                id="quantity"
                value={quantity}
                onChange={(e) => setQuantity(parseInt(e.target.value))}
                style={quantitySelectStyle}
              >
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => (
                  <option key={num} value={num}>{num}</option>
                ))}
              </select>
            </div>

            <button 
              onClick={handleAddToCart}
              style={addToCartButtonStyle}
            >
              Add to Cart - ${(product.price * quantity).toFixed(2)}
            </button>
          </div>
        </div>
      </div>

      <div style={specsSectionStyle}>
        <h3>Specifications</h3>
        <div style={specsGridStyle}>
          {Object.entries(product.specifications).map(([key, value]) => (
            <div key={key} style={specItemStyle}>
              <strong>{key}:</strong> {value}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const containerStyle = {
  maxWidth: '1200px',
  margin: '0 auto',
  padding: '2rem 1rem',
};

const breadcrumbStyle = {
  marginBottom: '2rem',
  fontSize: '0.9rem',
  color: '#666',
};

const productDetailStyle = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr',
  gap: '3rem',
  marginBottom: '3rem',
};

const imageSectionStyle = {
  display: 'flex',
  flexDirection: 'column',
  gap: '1rem',
};

const imagePlaceholderStyle = {
  width: '100%',
  height: '400px',
  backgroundColor: '#f5f5f5',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  color: '#666',
  borderRadius: '8px',
};

const infoSectionStyle = {
  display: 'flex',
  flexDirection: 'column',
  gap: '1.5rem',
};

const productNameStyle = {
  fontSize: '2rem',
  marginBottom: '0.5rem',
  color: '#333',
};

const priceStyle = {
  fontSize: '2rem',
  fontWeight: 'bold',
  color: '#2c5aa0',
};

const descriptionStyle = {
  fontSize: '1.1rem',
  lineHeight: '1.6',
  color: '#666',
};

const featuresStyle = {
  marginTop: '1rem',
};

const featuresListStyle = {
  paddingLeft: '1.5rem',
  lineHeight: '1.8',
};

const purchaseSectionStyle = {
  marginTop: '2rem',
  padding: '1.5rem',
  backgroundColor: '#f8f9fa',
  borderRadius: '8px',
};

const quantityStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '1rem',
  marginBottom: '1rem',
};

const quantitySelectStyle = {
  padding: '0.5rem',
  border: '1px solid #ddd',
  borderRadius: '4px',
};

const addToCartButtonStyle = {
  width: '100%',
  padding: '1rem 2rem',
  backgroundColor: '#2c5aa0',
  color: 'white',
  border: 'none',
  borderRadius: '4px',
  fontSize: '1.1rem',
  fontWeight: 'bold',
  cursor: 'pointer',
  transition: 'background-color 0.3s',
};

const specsSectionStyle = {
  marginTop: '3rem',
};

const specsGridStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
  gap: '1rem',
  marginTop: '1rem',
};

const specItemStyle = {
  padding: '1rem',
  backgroundColor: '#f8f9fa',
  borderRadius: '4px',
};

const loadingStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '50vh',
  fontSize: '1.2rem',
};

const notFoundStyle = {
  textAlign: 'center',
  padding: '4rem 1rem',
};

const backButtonStyle = {
  display: 'inline-block',
  marginTop: '1rem',
  padding: '0.5rem 1rem',
  backgroundColor: '#2c5aa0',
  color: 'white',
  textDecoration: 'none',
  borderRadius: '4px',
};

export default ProductDetail;