修改主页,添加机型
This commit is contained in:
huanglinhuan
228
src/pages/ProductDetail.js
Normal file
228
src/pages/ProductDetail.js
Normal file
@@ -0,0 +1,228 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
import './ProductDetail.css';
|
||||
|
||||
const ProductDetail = () => {
|
||||
const { series, sub, idx } = useParams();
|
||||
const location = useLocation();
|
||||
const product = location.state?.product;
|
||||
const [images, setImages] = useState([]);
|
||||
const [active, setActive] = useState(0);
|
||||
const [specs, setSpecs] = useState([]);
|
||||
const [sections, setSections] = useState([]);
|
||||
const [expanded, setExpanded] = useState({});
|
||||
const [specsLoading, setSpecsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const srcs = product
|
||||
? (Array.isArray(product.images) && product.images.length
|
||||
? product.images
|
||||
: (product.image ? [product.image] : []))
|
||||
: [];
|
||||
setImages(srcs);
|
||||
setActive(0);
|
||||
}, [product]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const loadImages = async () => {
|
||||
try {
|
||||
const qs = new URLSearchParams({ series, sub }).toString();
|
||||
const res = await fetch(`http://localhost:3001/api/docs/images?${qs}`);
|
||||
const data = await res.json();
|
||||
if (data.success && Array.isArray(data.data) && data.data.length) {
|
||||
setImages(data.data.map((d) => `http://localhost:3001${d.url}`));
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
loadImages();
|
||||
}, [series, sub]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadSpecs = async () => {
|
||||
try {
|
||||
setSpecsLoading(true);
|
||||
const qs = new URLSearchParams({ series, sub }).toString();
|
||||
const res = await fetch(`http://localhost:3001/api/docs/specs?${qs}`);
|
||||
const data = await res.json();
|
||||
if (data.success && Array.isArray(data.data)) {
|
||||
if (data.data.length && typeof data.data[0]?.title === 'string' && Array.isArray(data.data[0]?.rows)) {
|
||||
setSections(data.data);
|
||||
setSpecs([]);
|
||||
setExpanded({});
|
||||
} else {
|
||||
setSections([{ title: '参数', rows: data.data }]);
|
||||
setSpecs(data.data);
|
||||
setExpanded({});
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
finally {
|
||||
setSpecsLoading(false);
|
||||
}
|
||||
};
|
||||
loadSpecs();
|
||||
}, [series, sub]);
|
||||
|
||||
useEffect(() => {
|
||||
if (images.length <= 1) return;
|
||||
const timer = setInterval(() => {
|
||||
setActive((prev) => (prev + 1) % images.length);
|
||||
}, 4000);
|
||||
return () => clearInterval(timer);
|
||||
}, [images.length]);
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<div className="product-detail-page">
|
||||
<div className="container">
|
||||
<div className="error-state">未找到产品信息</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const prevSlide = () => setActive((prev) => (prev - 1 + images.length) % images.length);
|
||||
const nextSlide = () => setActive((prev) => (prev + 1) % images.length);
|
||||
|
||||
return (
|
||||
<div className="product-detail-page">
|
||||
<div className="container">
|
||||
<div className="carousel-full">
|
||||
<div className="section-tag tag-images">机型图片</div>
|
||||
{images.length > 1 && <button className="arrow left" onClick={prevSlide}>‹</button>}
|
||||
|
||||
<div className="slides">
|
||||
{images.map((src, idx) => (
|
||||
<div key={idx} className={`slide ${idx === active ? 'active' : ''}`}>
|
||||
<img className="slide-img" src={src} alt={`${product.name}-${idx+1}`} loading="lazy" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{images.length > 1 && <button className="arrow right" onClick={nextSlide}>›</button>}
|
||||
|
||||
{images.length > 1 && (
|
||||
<div className="indicators">
|
||||
{images.map((_, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className={`dot ${idx === active ? 'active' : ''}`}
|
||||
onClick={() => setActive(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="specs-section">
|
||||
<div className="section-narrow">
|
||||
<div className="section-tag tag-specs">详细参数</div>
|
||||
{specsLoading ? (
|
||||
<div className="specs-body"><table className="specs-table"><tbody><tr><td colSpan="2" className="specs-val">加载中...</td></tr></tbody></table></div>
|
||||
) : sections.length ? (
|
||||
sections.map((sec, i) => {
|
||||
const isOpen = !!expanded[i];
|
||||
const toggle = () => setExpanded((prev) => ({ ...prev, [i]: !prev[i] }));
|
||||
return (
|
||||
<div key={sec.title + i} className="specs-group">
|
||||
<button className="specs-group-header" onClick={toggle}>
|
||||
{sec.title} {isOpen ? '▲' : '▼'}
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="specs-body">
|
||||
<table className="specs-table">
|
||||
<tbody>
|
||||
{sec.rows.length ? (
|
||||
sec.rows.map((row) => {
|
||||
const k = String(row.key || '');
|
||||
const v = String(row.value || '');
|
||||
const kb = /^\*\*.*\*\*$/.test(k) || k.startsWith('!');
|
||||
const vb = /^\*\*.*\*\*$/.test(v) || v.startsWith('!');
|
||||
const bold = kb || vb;
|
||||
const cleanKey = k.replace(/^!/, '').replace(/^\*\*/, '').replace(/\*\*$/, '');
|
||||
const cleanVal = v.replace(/^!/, '').replace(/^\*\*/, '').replace(/\*\*$/, '');
|
||||
return (
|
||||
<tr key={row.key} className={bold ? 'specs-row-bold' : ''}>
|
||||
<td className={`specs-key ${bold ? 'specs-bold' : ''}`}>{cleanKey}</td>
|
||||
<td className={`specs-val ${bold ? 'specs-bold' : ''}`}>{cleanVal}</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr><td className="specs-val" colSpan="2">暂无参数</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="specs-body"><table className="specs-table"><tbody><tr><td colSpan="2" className="specs-val">暂无参数</td></tr></tbody></table></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="docs-section">
|
||||
<div className="section-narrow">
|
||||
<div className="section-tag tag-docs">资料下载</div>
|
||||
<div className="docs-body">
|
||||
<DocsList series={series} sub={sub} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DocsList = ({ series, sub }) => {
|
||||
const [docs, setDocs] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
React.useEffect(() => {
|
||||
const fetchDocs = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const qs = new URLSearchParams({ series, sub }).toString();
|
||||
const res = await fetch(`http://localhost:3001/api/docs/list?${qs}`);
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setDocs(data.data || []);
|
||||
} else {
|
||||
setError('获取资料失败');
|
||||
}
|
||||
} catch (e) {
|
||||
setError('网络错误');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchDocs();
|
||||
}, [series, sub]);
|
||||
|
||||
if (loading) return <div className="docs-loading">加载中...</div>;
|
||||
if (error) return <div className="docs-error">{error}</div>;
|
||||
|
||||
if (!docs.length) return <div className="docs-empty">暂无资料</div>;
|
||||
|
||||
return (
|
||||
<ul className="docs-list">
|
||||
{docs.map((d) => (
|
||||
<li key={d.url} className="docs-item">
|
||||
<a href={`http://localhost:3001${d.url}`} target="_blank" rel="noreferrer" className="docs-link">
|
||||
{d.name}
|
||||
</a>
|
||||
<span className="docs-size">{(d.size / 1024 / 1024).toFixed(2)}MB</span>
|
||||
<a href={`http://localhost:3001${d.url}`} download className="docs-download">下载</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductDetail;
|
||||
Reference in New Issue
Block a user