sms

frontend/src/pages/ProductDetail.jsx

@@ -0,0 +1,308 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { Button, Row, Col, Tag, Statistic, Modal, Form, Input, InputNumber, message, Spin, Descriptions, Radio, Alert } from 'antd';
+import { ShoppingCartOutlined, SafetyCertificateOutlined, ThunderboltOutlined, EyeOutlined, StarOutlined } from '@ant-design/icons';
+import { getConfigs, createOrder, nativePay } from '../api';
+import ModelViewer from '../components/ModelViewer';
+import { useAuth } from '../context/AuthContext';
+import './ProductDetail.css';
+
+const ProductDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [form] = Form.useForm();
+  
+  const { user } = useAuth();
+
+  // 优先从 URL 获取，如果没有则从 localStorage 获取，不再默认绑定 flw666
+  const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
+
+  useEffect(() => {
+    // 自动填充用户信息
+    if (user) {
+        form.setFieldsValue({
+            phone_number: user.phone_number,
+            // 如果后端返回了地址信息，这里也可以填充
+            // shipping_address: user.shipping_address 
+        });
+    }
+  }, [isModalOpen, user]); // 当弹窗打开或用户状态变化时填充
+
+  useEffect(() => {
+    console.log('[ProductDetail] Current ref_code:', refCode);
+  }, [refCode]);
+
+  useEffect(() => {
+    fetchProduct();
+  }, [id]);
+
+  const fetchProduct = async () => {
+    try {
+      const response = await getConfigs();
+      const found = response.data.find(p => String(p.id) === id);
+      if (found) {
+        setProduct(found);
+      } else {
+        message.error('未找到该产品');
+        navigate('/');
+      }
+    } catch (error) {
+      console.error('Failed to fetch product:', error);
+      message.error('加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBuy = async (values) => {
+    setSubmitting(true);
+    try {
+      const isPickup = values.delivery_method === 'pickup';
+      const orderData = {
+        goodid: product.id,
+        quantity: values.quantity,
+        customer_name: values.customer_name,
+        phone_number: values.phone_number,
+        // 如果是自提，手动设置地址，否则使用表单中的地址
+        shipping_address: isPickup ? '线下自提' : values.shipping_address,
+        ref_code: refCode
+      };
+      
+      console.log('提交订单数据:', orderData); // 调试日志
+      const response = await nativePay(orderData);
+      message.success('订单已创建，请完成支付');
+      navigate(`/payment/${response.data.order_id}`, { 
+         state: { 
+           codeUrl: response.data.code_url,
+           order_id: response.data.order_id,
+           orderInfo: {
+             ...orderData,
+             id: response.data.order_id,
+             config_name: product.name,
+             total_price: product.price * values.quantity
+           }
+         } 
+       });
+    } catch (error) {
+      console.error(error);
+      message.error('创建订单失败，请检查填写信息');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const getModelPaths = (p) => {
+    if (!p) return null;
+    
+    // 优先使用后台配置的 3D 模型 URL
+    if (p.model_3d_url) {
+      return { obj: p.model_3d_url };
+    }
+
+    return null;
+  };
+
+  const modelPaths = getModelPaths(product);
+
+  const renderIcon = (feature) => {
+      if (feature.display_icon) {
+          return <img src={feature.display_icon} alt={feature.title} style={{ width: 60, height: 60, objectFit: 'contain', marginBottom: 20 }} />;
+      }
+      
+      const iconProps = { style: { fontSize: 60, color: '#00b96b', marginBottom: 20 } };
+      
+      switch(feature.icon_name) {
+          case 'SafetyCertificate':
+              return <SafetyCertificateOutlined {...iconProps} />;
+          case 'Eye':
+              return <EyeOutlined {...iconProps} style={{ ...iconProps.style, color: '#1890ff' }} />;
+          case 'Thunderbolt':
+              return <ThunderboltOutlined {...iconProps} style={{ ...iconProps.style, color: '#faad14' }} />;
+          default:
+              return <StarOutlined {...iconProps} />;
+      }
+  };
+
+  if (loading) return <div style={{ padding: 50, textAlign: 'center' }}><Spin size="large" /></div>;
+  if (!product) return null;
+
+  return (
+    <div className="product-detail-container" style={{ paddingBottom: '60px' }}>
+      {/* Hero Section */}
+      <Row gutter={40} align="middle" style={{ minHeight: '60vh' }}>
+        <Col xs={24} md={12}>
+          <div style={{ 
+            height: 400, 
+            background: 'radial-gradient(circle, #2a2a2a 0%, #000 100%)', 
+            borderRadius: 20, 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'center',
+            border: '1px solid #333',
+            overflow: 'hidden'
+          }}>
+             {modelPaths ? (
+               <ModelViewer objPath={modelPaths.obj} mtlPath={modelPaths.mtl} />
+             ) : product.static_image_url ? (
+               <img src={product.static_image_url} alt={product.name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
+             ) : (
+               <ThunderboltOutlined style={{ fontSize: 120, color: '#00b96b' }} />
+             )}
+          </div>
+        </Col>
+        <Col xs={24} md={12}>
+          <h1 style={{ fontSize: 48, fontWeight: 'bold', color: '#fff' }}>{product.name}</h1>
+          <p style={{ fontSize: 20, color: '#888', margin: '20px 0' }}>{product.description}</p>
+          
+          <div style={{ marginBottom: 30, display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+            <Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan', padding: '4px 12px', fontSize: '14px', margin: 0 }}>{product.chip_type}</Tag>
+            {product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue', padding: '4px 12px', fontSize: '14px', margin: 0 }}>高清摄像头</Tag>}
+            {product.has_microphone && <Tag color="purple" style={{ background: 'rgba(114,46,209,0.1)', border: '1px solid #722ed1', padding: '4px 12px', fontSize: '14px', margin: 0 }}>阵列麦克风</Tag>}
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20, marginBottom: 20 }}>
+             <Statistic title="售价" value={product.price} prefix="¥" valueStyle={{ color: '#00b96b', fontSize: 36 }} titleStyle={{ color: '#888' }} />
+             <Statistic title="库存" value={product.stock} suffix="件" valueStyle={{ color: product.stock < 5 ? '#ff4d4f' : '#fff', fontSize: 20 }} titleStyle={{ color: '#888' }} />
+          </div>
+
+          {product.stock < 5 && product.stock > 0 && (
+            <Alert message={`库存紧张，仅剩 ${product.stock} 件！`} type="warning" showIcon style={{ marginBottom: 20, background: 'rgba(250, 173, 20, 0.1)', border: '1px solid #faad14', color: '#faad14' }} />
+          )}
+
+          {product.stock === 0 && (
+             <Alert message="该商品暂时缺货" type="error" showIcon style={{ marginBottom: 20 }} />
+          )}
+
+          <Button 
+            type="primary" 
+            size="large" 
+            icon={<ShoppingCartOutlined />} 
+            onClick={() => setIsModalOpen(true)} 
+            disabled={product.stock === 0}
+            style={{ height: 50, padding: '0 40px', fontSize: 18 }}
+          >
+            {product.stock === 0 ? '暂时缺货' : '立即购买'}
+          </Button>
+        </Col>
+      </Row>
+
+      {/* Feature Section */}
+      <div style={{ marginTop: 100 }}>
+        {product.features && product.features.length > 0 ? (
+            product.features.map((feature, index) => (
+                <div className="feature-section" key={index}>
+                    {renderIcon(feature)}
+                    <div className="feature-title">{feature.title}</div>
+                    <div className="feature-desc">{feature.description}</div>
+                </div>
+            ))
+        ) : (
+            // Fallback content if no features are configured
+            <>
+                <div className="feature-section">
+                <SafetyCertificateOutlined style={{ fontSize: 60, color: '#00b96b', marginBottom: 20 }} />
+                <div className="feature-title">工业级安全标准</div>
+                <div className="feature-desc">
+                    采用军工级加密芯片，保障您的数据隐私安全。无论是边缘计算还是云端同步，全程加密传输，让 AI 应用无后顾之忧。
+                </div>
+                </div>
+                
+                <div className="feature-section">
+                <EyeOutlined style={{ fontSize: 60, color: '#1890ff', marginBottom: 20 }} />
+                <div className="feature-title">超清视觉感知</div>
+                <div className="feature-desc">
+                    搭载 4K 高清摄像头与 AI 视觉算法，实时捕捉每一个细节。支持人脸识别、物体检测、姿态分析等多种视觉任务。
+                </div>
+                </div>
+
+                <div className="feature-section">
+                <ThunderboltOutlined style={{ fontSize: 60, color: '#faad14', marginBottom: 20 }} />
+                <div className="feature-title">极致性能释放</div>
+                <div className="feature-desc">
+                    {product.chip_type} 强劲核心，提供高达 XX TOPS 的算力支持。低功耗设计，满足 24 小时全天候运行需求。
+                </div>
+                </div>
+            </>
+        )}
+        
+        {product.display_detail_image ? (
+            <div style={{ 
+                margin: '60px auto', 
+                maxWidth: '900px', 
+                width: '100%',
+                overflow: 'hidden', 
+                borderRadius: 12,
+                boxShadow: '0 10px 40px rgba(0,0,0,0.5)'
+            }}>
+                <img src={product.display_detail_image} alt="产品详情" style={{ width: '100%', display: 'block', height: 'auto' }} />
+            </div>
+        ) : (
+            <div style={{ margin: '60px 0', height: 800, background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#333', fontSize: 24, border: '1px dashed #333' }}>
+                产品详情长图展示区域 (请在后台配置)
+            </div>
+        )}
+      </div>
+
+      {/* Order Modal */}
+      <Modal
+        title="填写收货信息"
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        footer={null}
+        destroyOnHidden
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleBuy}
+          initialValues={{ quantity: 1, delivery_method: 'shipping' }}
+        >
+          <Form.Item label="配送方式" name="delivery_method">
+            <Radio.Group buttonStyle="solid">
+              <Radio.Button value="shipping">快递配送</Radio.Button>
+              <Radio.Button value="pickup">线下自提</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item label="购买数量" name="quantity" rules={[{ required: true }]}>
+            <InputNumber min={1} max={100} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item label="收货人姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
+            <Input placeholder="张三" />
+          </Form.Item>
+          <Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
+            <Input placeholder="13800000000" />
+          </Form.Item>
+          <Form.Item 
+            noStyle 
+            shouldUpdate={(prevValues, currentValues) => prevValues.delivery_method !== currentValues.delivery_method}
+          >
+            {({ getFieldValue }) => 
+              getFieldValue('delivery_method') === 'shipping' ? (
+                <Form.Item label="收货地址" name="shipping_address" rules={[{ required: true, message: '请输入地址' }]}>
+                  <Input.TextArea rows={3} placeholder="北京市..." />
+                </Form.Item>
+              ) : (
+                <div style={{ marginBottom: 24, padding: '12px', background: '#f5f5f5', borderRadius: '4px', border: '1px solid #d9d9d9' }}>
+                  <p style={{ margin: 0, color: '#666' }}>自提地址：昆明市云纺国际商厦B座1406</p>
+                  <p style={{ margin: 0, fontSize: '12px', color: '#999' }}>请在工作日 9:00 - 18:00 期间前往提货</p>
+                </div>
+              )
+            }
+          </Form.Item>
+          
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+            <Button onClick={() => setIsModalOpen(false)}>取消</Button>
+            <Button type="primary" htmlType="submit" loading={submitting}>提交订单</Button>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default ProductDetail;