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

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

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

  const pomegranateVariants = [
    {
      id: 1,
      name: '特级石榴',
      description: '籽粒饱满，色泽红艳，口感清甜',
      weight: '个',
      price: 22.5,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/pomegranate-premium.jpg',
      features: ['籽粒饱满', '色泽红艳', '口感清甜']
    },
    {
      id: 2,
      name: '精品礼盒',
      description: '精选大果，包装精美，送礼佳品',
      weight: '2个装',
      price: 40.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/pomegranate-deluxe.jpg',
      features: ['精选大果', '包装精美', '送礼佳品']
    },
    {
      id: 3,
      name: '家庭分享装',
      description: '经济实惠，适合全家享用',
      weight: '4个装',
      price: 75.0,
      image: 'https://d3sx9glhrpxv9q.cloudfront.net/pomegranate-family.jpg',
      features: ['经济实惠', '家庭分享', '新鲜采摘']
    }
  ];

  const selectedPomegranate = pomegranateVariants[selectedVariant];
  const totalPrice = (selectedPomegranate.price * quantity).toFixed(2);

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

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

        <div style={infoSectionStyle}>
          <h1 style={productTitleStyle}>长安石榴</h1>
          <p style={productDescriptionStyle}>
            长安特产石榴，籽粒饱满如红宝石，色泽红艳，口感清甜。
            富含多种维生素和矿物质，营养价值高，具有很好的抗氧化功效。
            每一颗都经过精心挑选，确保品质上乘。
          </p>

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