quant-speed-AI/market_page
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish

Browse Source
This commit is contained in:
jeremygan2021
2026-02-11 00:26:27 +08:00
parent 5232ab9960
commit 61afc52ac2
6 changed files with 398 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/pages/ProductDetail.jsx
View File

@@ -1,6 +1,6 @@
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 } from 'antd';
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';
@@ -16,7 +16,12 @@ const ProductDetail = () => {
const [submitting, setSubmitting] = useState(false);
const [form] = Form.useForm();
const refCode = searchParams.get('ref') || 'flw666';
// 优先从 URL 获取，如果没有则从 localStorage 获取，不再默认绑定 flw666
const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
useEffect(() => {
console.log('[ProductDetail] Current ref_code:', refCode);
}, [refCode]);
useEffect(() => {
fetchProduct();
@@ -146,12 +151,28 @@ const ProductDetail = () => {
{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: 40 }}>
<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>
<Button type="primary" size="large" icon={<ShoppingCartOutlined />} onClick={() => setIsModalOpen(true)} style={{ height: 50, padding: '0 40px', fontSize: 18 }}>
立即购买
{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>