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

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const WatermelonPage = () => {
  const navigate = useNavigate();
  const [selectedVariant, setSelectedVariant] = useState(0);
  const [quantity, setQuantity] = useState(1);

  const watermelonVariants = [
    {
      id: 1,
      name: '小果西瓜',
      description: '皮薄瓤红，汁多味甜，适合小家庭',
      weight: '3-4kg',
      price: 25.8,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/watermelon-small.jpg',
      features: ['皮薄瓤红', '汁多味甜', '适合小家庭']
    },
    {
      id: 2,
      name: '中果西瓜',
      description: '果形端正，甜度适中，适合家庭分享',
      weight: '5-6kg',
      price: 38.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/watermelon-medium.jpg',
      features: ['果形端正', '甜度适中', '家庭分享']
    },
    {
      id: 3,
      name: '大果西瓜',
      description: '果肉饱满，清甜爽口，适合聚会',
      weight: '7-8kg',
      price: 52.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/watermelon-large.jpg',
      features: ['果肉饱满', '清甜爽口', '适合聚会']
    }
  ];

  const selectedWatermelon = watermelonVariants[selectedVariant];
  const totalPrice = (selectedWatermelon.price * quantity).toFixed(2);

  const handleAddToCart = () => {
    alert(`已添加 ${quantity}个 ${selectedWatermelon.name} 到购物车`);
  };

  const handleBuyNow = () => {
    alert(`立即购买 ${quantity}个 ${selectedWatermelon.name}`);
  };

  return (
    <div style={containerStyle}>
      <div style={breadcrumbStyle}>
        <button onClick={() => navigate('/')} style={backButtonStyle}>
          ← 返回首页
        </button>
        <span style={breadcrumbTextStyle}> / 大荔西瓜</span>
      </div>

      <div style={contentStyle}>
        <div style={imageSectionStyle}>
          <img 
            src={selectedWatermelon.image} 
            alt={selectedWatermelon.name}
            style={mainImageStyle}
            onError={(e) => {
              e.target.src = 'https://d3sx9glhrpxv9q.cloudfront.net/watermelon.png';
            }}
          />
        </div>

        <div style={infoSectionStyle}>
          <h1 style={productTitleStyle}>大荔西瓜</h1>
          <p style={productDescriptionStyle}>
            大荔特产西瓜，皮薄瓤红，汁多味甜，消暑佳品。
            生长在沙质土壤中，昼夜温差大，糖分积累充分。
            每一颗都经过精心挑选，确保品质上乘，是夏季消暑的理想选择。
          </p>

          <div style={variantSectionStyle}>
            <h3 style={sectionTitleStyle}>选择规格</h3>
            <div style={variantGridStyle}>
              {watermelonVariants.map((variant, index) => (
                <div
                  key={variant.id}
                  style={{
                    ...variantCardStyle,
                    ...(selectedVariant === index ? selectedVariantStyle : {})
                  }}
                  onClick={() => setSelectedVariant(index)}
                >
                  <div style={variantNameStyle}>{variant.name}</div>
                  <div style={variantWeightStyle}>{variant.weight}</div>
                  <div style={variantPriceStyle}>¥{variant.price}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={featuresSectionStyle}>
            <h3 style={sectionTitleStyle}>产品特点</h3>
            <div style={featuresGridStyle}>
              {selectedWatermelon.features.map((feature, index) => (
                <div key={index} style={featureItemStyle}>
                  <span style={featureDotStyle}>•</span>
                  {feature}
                </div>
              ))}
            </div>
          </div>

          <div style={quantitySectionStyle}>
            <h3 style={sectionTitleStyle}>选择数量</h3>
            <div style={quantityControlStyle}>
              <button 
                style={quantityButtonStyle}
                onClick={() => setQuantity(Math.max(1, quantity - 1))}
              >
                -
              </button>
              <span style={quantityDisplayStyle}>{quantity}</span>
              <button 
                style={quantityButtonStyle}
                onClick={() => setQuantity(quantity + 1)}
              >
                +
              </button>
              <span style={quantityUnitStyle}>个</span>
            </div>
          </div>

          <div style={purchaseSectionStyle}>
            <div style={priceTotalStyle}>
              <span style={totalLabelStyle}>总价：</span>
              <span style={totalPriceStyle}>¥{totalPrice}</span>
            </div>
            <div style={buttonGroupStyle}>
              <button style={addToCartButtonStyle} onClick={handleAddToCart}>
                加入购物车
              </button>
              <button style={buyNowButtonStyle} onClick={handleBuyNow}>
                立即购买
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// 样式定义
const containerStyle = {
  maxWidth: '1200px',
  margin: '0 auto',
  padding: '2rem 1rem',
  minHeight: '100vh',
  backgroundColor: '#f8f9fa'
};

const breadcrumbStyle = {
  display: 'flex',
  alignItems: 'center',
  marginBottom: '2rem',
  padding: '1rem',
  backgroundColor: 'white',
  borderRadius: '10px',
  boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
};

const backButtonStyle = {
  background: 'none',
  border: 'none',
  color: '#ff5722',
  fontSize: '1rem',
  cursor: 'pointer',
  fontWeight: '600',
  padding: '0.5rem 0'
};

const breadcrumbTextStyle = {
  color: '#666',
  marginLeft: '0.5rem'
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr',
  gap: '3rem',
  alignItems: 'start'
};

const imageSectionStyle = {
  backgroundColor: 'white',
  borderRadius: '15px',
  padding: '2rem',
  boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
};

const mainImageStyle = {
  width: '100%',
  maxWidth: '400px',
  height: 'auto',
  borderRadius: '10px'
};

const infoSectionStyle = {
  backgroundColor: 'white',
  borderRadius: '15px',
  padding: '2rem',
  boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
};

const productTitleStyle = {
  fontSize: '2.2rem',
  fontWeight: 'bold',
  color: '#333',
  marginBottom: '1rem'
};

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

const variantSectionStyle = {
  marginBottom: '2rem'
};

const sectionTitleStyle = {
  fontSize: '1.3rem',
  fontWeight: 'bold',
  color: '#333',
  marginBottom: '1rem'
};

const variantGridStyle = {
  display: 'grid',
  gap: '1rem'
};

const variantCardStyle = {
  border: '2px solid #e0e0e0',
  borderRadius: '10px',
  padding: '1rem',
  cursor: 'pointer',
  transition: 'all 0.3s ease'
};

const selectedVariantStyle = {
  borderColor: '#ff5722',
  backgroundColor: '#fff3e0'
};

const variantNameStyle = {
  fontSize: '1.1rem',
  fontWeight: 'bold',
  color: '#333',
  marginBottom: '0.5rem'
};

const variantWeightStyle = {
  fontSize: '0.9rem',
  color: '#666',
  marginBottom: '0.5rem'
};

const variantPriceStyle = {
  fontSize: '1.2rem',
  fontWeight: 'bold',
  color: '#ff5722'
};

const featuresSectionStyle = {
  marginBottom: '2rem'
};

const featuresGridStyle = {
  display: 'grid',
  gap: '0.5rem'
};

const featureItemStyle = {
  display: 'flex',
  alignItems: 'center',
  fontSize: '1rem',
  color: '#555'
};

const featureDotStyle = {
  color: '#ff5722',
  marginRight: '0.5rem',
  fontWeight: 'bold'
};

const quantitySectionStyle = {
  marginBottom: '2rem'
};

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

const quantityButtonStyle = {
  width: '40px',
  height: '40px',
  border: '2px solid #ff5722',
  background: 'white',
  borderRadius: '50%',
  fontSize: '1.2rem',
  fontWeight: 'bold',
  color: '#ff5722',
  cursor: 'pointer',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
};

const quantityDisplayStyle = {
  fontSize: '1.2rem',
  fontWeight: 'bold',
  minWidth: '50px',
  textAlign: 'center'
};

const quantityUnitStyle = {
  color: '#666',
  fontSize: '1rem'
};

const purchaseSectionStyle = {
  borderTop: '2px solid #f0f0f0',
  paddingTop: '2rem'
};

const priceTotalStyle = {
  display: 'flex',
  alignItems: 'baseline',
  justifyContent: 'space-between',
  marginBottom: '1.5rem'
};

const totalLabelStyle = {
  fontSize: '1.2rem',
  color: '#333'
};

const totalPriceStyle = {
  fontSize: '2rem',
  fontWeight: 'bold',
  color: '#ff5722'
};

const buttonGroupStyle = {
  display: 'flex',
  gap: '1rem'
};

const addToCartButtonStyle = {
  flex: 1,
  padding: '1rem 2rem',
  border: '2px solid #ff5722',
  background: 'white',
  color: '#ff5722',
  borderRadius: '50px',
  fontSize: '1.1rem',
  fontWeight: 'bold',
  cursor: 'pointer',
  transition: 'all 0.3s ease'
};

const buyNowButtonStyle = {
  flex: 1,
  padding: '1rem 2rem',
  border: 'none',
  background: 'linear-gradient(135deg, #ff5722, #e64a19)',
  color: 'white',
  borderRadius: '50px',
  fontSize: '1.1rem',
  fontWeight: 'bold',
  cursor: 'pointer',
  transition: 'all 0.3s ease'
};

export default WatermelonPage;