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

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

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

  const tomatoVariants = [
    {
      id: 1,
      name: '特级番茄',
      description: '色泽红润，肉质饱满，营养丰富',
      weight: '500g',
      price: 8.8,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/tomato-premium.jpg',
      features: ['色泽红润', '肉质饱满', '营养丰富']
    },
    {
      id: 2,
      name: '有机番茄',
      description: '有机种植，无农药残留，健康安全',
      weight: '500g',
      price: 12.5,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/tomato-organic.jpg',
      features: ['有机种植', '无农药残留', '健康安全']
    },
    {
      id: 3,
      name: '家庭实惠装',
      description: '经济实惠，适合日常烹饪',
      weight: '1000g',
      price: 15.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/tomato-family.jpg',
      features: ['经济实惠', '日常烹饪', '新鲜采摘']
    }
  ];

  const selectedTomato = tomatoVariants[selectedVariant];
  const totalPrice = (selectedTomato.price * quantity).toFixed(2);

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

  const handleBuyNow = () => {
    alert(`立即购买 ${quantity}份 ${selectedTomato.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={selectedTomato.image} 
            alt={selectedTomato.name}
            style={mainImageStyle}
            onError={(e) => {
              e.target.src = 'https://d3sx9glhrpxv9q.cloudfront.net/tomatoes.jpg';
            }}
          />
        </div>

        <div style={infoSectionStyle}>
          <h1 style={productTitleStyle}>眉县番茄</h1>
          <p style={productDescriptionStyle}>
            眉县优质番茄，色泽红润，肉质饱满，营养丰富。
            采用科学种植技术，确保番茄的口感和营养价值，是健康饮食的理想选择。
            富含维生素C和番茄红素，具有很好的抗氧化功效，适合各种烹饪方式。
          </p>

          <div style={variantSectionStyle}>
            <h3 style={sectionTitleStyle}>选择规格</h3>
            <div style={variantGridStyle}>
              {tomatoVariants.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}>
              {selectedTomato.features.map((feature, index) => (
                <div key={index} style={featureItemStyle}>
                  <span style={featureDotStyle}>•</span>
                  {feature}
                </div>
              ))}
            </div>
          </div>

          <div style={nutritionSectionStyle}>
            <h3 style={sectionTitleStyle}>营养价值</h3>
            <div style={nutritionGridStyle}>
              <div style={nutritionItemStyle}>
                <span style={nutritionLabelStyle}>维生素C:</span>
                <span style={nutritionValueStyle}>14mg/100g</span>
              </div>
              <div style={nutritionItemStyle}>
                <span style={nutritionLabelStyle}>番茄红素:</span>
                <span style={nutritionValueStyle}>丰富</span>
              </div>
              <div style={nutritionItemStyle}>
                <span style={nutritionLabelStyle}>热量:</span>
                <span style={nutritionValueStyle}>18kcal/100g</span>
              </div>
              <div style={nutritionItemStyle}>
                <span style={nutritionLabelStyle}>膳食纤维:</span>
                <span style={nutritionValueStyle}>1.2g/100g</span>
              </div>
            </div>
          </div>

          <div style={cookingSectionStyle}>
            <h3 style={sectionTitleStyle}>推荐食用方法</h3>
            <div style={cookingGridStyle}>
              <div style={cookingItemStyle}>
                <span style={cookingIconStyle}>🍳</span>
                <span style={cookingTextStyle}>炒菜</span>
              </div>
              <div style={cookingItemStyle}>
                <span style={cookingIconStyle}>🍲</span>
                <span style={cookingTextStyle}>汤品</span>
              </div>
              <div style={cookingItemStyle}>
                <span style={cookingIconStyle}>🥗</span>
                <span style={cookingTextStyle}>沙拉</span>
              </div>
              <div style={cookingItemStyle}>
                <span style={cookingIconStyle}>🥫</span>
                <span style={cookingTextStyle}>酱料</span>
              </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 nutritionSectionStyle = {
  marginBottom: '2rem',
  padding: '1.5rem',
  backgroundColor: '#f8f9fa',
  borderRadius: '10px',
  border: '1px solid #e9ecef'
};

const nutritionGridStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: '1rem'
};

const nutritionItemStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '0.5rem 0',
  borderBottom: '1px solid #e9ecef'
};

const nutritionLabelStyle = {
  fontSize: '0.9rem',
  color: '#666',
  fontWeight: '500'
};

const nutritionValueStyle = {
  fontSize: '0.9rem',
  color: '#333',
  fontWeight: 'bold'
};

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

const cookingGridStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(4, 1fr)',
  gap: '1rem',
  textAlign: 'center'
};

const cookingItemStyle = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  padding: '1rem',
  backgroundColor: '#f8f9fa',
  borderRadius: '8px',
  border: '1px solid #e9ecef',
  transition: 'all 0.3s ease'
};

const cookingIconStyle = {
  fontSize: '1.5rem',
  marginBottom: '0.5rem'
};

const cookingTextStyle = {
  fontSize: '0.9rem',
  color: '#333',
  fontWeight: '500'
};

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',
  transition: 'all 0.3s ease'
};

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'
};

// 添加悬停效果
const addToCartButtonHoverStyle = {
  ...addToCartButtonStyle,
  ':hover': {
    background: '#ff5722',
    color: 'white',
    transform: 'translateY(-2px)',
    boxShadow: '0 4px 12px rgba(255, 87, 34, 0.3)'
  }
};

const buyNowButtonHoverStyle = {
  ...buyNowButtonStyle,
  ':hover': {
    transform: 'translateY(-2px)',
    boxShadow: '0 4px 12px rgba(255, 87, 34, 0.3)'
  }
};

const variantCardHoverStyle = {
  ...variantCardStyle,
  ':hover': {
    borderColor: '#ff5722',
    transform: 'translateY(-2px)',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
  }
};

const cookingItemHoverStyle = {
  ...cookingItemStyle,
  ':hover': {
    borderColor: '#ff5722',
    transform: 'translateY(-2px)',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
  }
};

export default TomatoPage;