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

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

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

  const redDateVariants = [
    {
      id: 1,
      name: '特级红枣',
      description: '肉质饱满，甜度适中，滋补养生',
      weight: '500g',
      price: 32.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/reddate-premium.jpg',
      features: ['肉质饱满', '甜度适中', '滋补养生']
    },
    {
      id: 2,
      name: '精品礼盒',
      description: '精选大枣，包装精美，送礼佳品',
      weight: '1000g',
      price: 58.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/reddate-deluxe.jpg',
      features: ['精选大枣', '包装精美', '送礼佳品']
    },
    {
      id: 3,
      name: '家庭实惠装',
      description: '经济实惠，适合日常食用',
      weight: '2000g',
      price: 98.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/reddate-family.jpg',
      features: ['经济实惠', '日常食用', '营养丰富']
    }
  ];

  const selectedRedDate = redDateVariants[selectedVariant];
  const totalPrice = (selectedRedDate.price * quantity).toFixed(2);

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

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

        <div style={infoSectionStyle}>
          <h1 style={productTitleStyle}>延川红枣</h1>
          <p style={productDescriptionStyle}>
            延川特产红枣，肉质饱满，甜度适中，滋补养生。
            富含多种维生素和矿物质，具有很好的补血养颜功效。
            采用传统晾晒工艺，保留了红枣的天然营养成分和风味。
          </p>

          <div style={variantSectionStyle}>
            <h3 style={sectionTitleStyle}>选择规格</h3>
            <div style={variantGridStyle}>
              {redDateVariants.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}>
              {selectedRedDate.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 RedDatePage;