395 lines
17 KiB
JavaScript
395 lines
17 KiB
JavaScript
/**
|
||
* Detail - 藏品详情页面
|
||
* Version: 1.2.90x
|
||
* 更新：
|
||
*/
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
|
||
export default function Detail() {
|
||
const params = new URLSearchParams(window.location.hash.split('?')[1] || '')
|
||
const id = params.get('id')
|
||
|
||
const [collection, setCollection] = useState(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState('')
|
||
const [showDelete, setShowDelete] = useState(false)
|
||
const [showImage, setShowImage] = useState(false)
|
||
const [currentImageIndex, setCurrentImageIndex] = useState(0)
|
||
|
||
useEffect(() => {
|
||
if (id) {
|
||
fetchDetail()
|
||
}
|
||
}, [id])
|
||
|
||
const fetchDetail = async () => {
|
||
setLoading(true)
|
||
const token = localStorage.getItem('token')
|
||
try {
|
||
const res = await fetch(`/api/collections/${id}`, {
|
||
headers: token ? { 'Authorization': 'Bearer ' + token } : {}
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const errorData = await res.json()
|
||
const errorCode = errorData.error?.code || 'E00000'
|
||
const errorMessage = errorData.error?.message || '加载失败'
|
||
|
||
// 标准错误码处理
|
||
if (res.status === 404) {
|
||
setError('E00033: 藏品不存在')
|
||
} else if (res.status === 401) {
|
||
setError('E00010: 未登录或登录已过期')
|
||
} else if (res.status === 403) {
|
||
setError('E00014: 无权访问此藏品')
|
||
} else {
|
||
setError(`${errorCode}: ${errorMessage}`)
|
||
}
|
||
setLoading(false)
|
||
return
|
||
}
|
||
|
||
const data = await res.json()
|
||
// 后端已返回 camelCase 格式，直接使用
|
||
const collectionData = data.data || data
|
||
|
||
if (collectionData && collectionData.id) {
|
||
setCollection(collectionData)
|
||
} else {
|
||
setError('E00000: 数据格式错误')
|
||
}
|
||
} catch (e) {
|
||
console.error(e)
|
||
setError('E00001: 网络连接失败')
|
||
}
|
||
setLoading(false)
|
||
}
|
||
|
||
const handleEdit = () => {
|
||
window.location.hash = '#/edit?id=' + id
|
||
}
|
||
|
||
const goBack = () => {
|
||
// 尝试返回到上次筛选的列表页面
|
||
const lastUrl = sessionStorage.getItem('lastListUrl')
|
||
if (lastUrl) {
|
||
sessionStorage.removeItem('lastListUrl')
|
||
window.location.hash = '#' + lastUrl
|
||
} else {
|
||
window.location.hash = '#/list'
|
||
}
|
||
}
|
||
|
||
const doDelete = async () => {
|
||
const token = localStorage.getItem('token')
|
||
try {
|
||
const res = await fetch(`/api/collections/${id}`, {
|
||
method: 'DELETE',
|
||
headers: { 'Authorization': 'Bearer ' + token }
|
||
})
|
||
if (res.ok) {
|
||
alert('删除成功！')
|
||
if (window.refreshList) window.refreshList()
|
||
window.location.hash = '#/list'
|
||
} else {
|
||
alert('删除失败')
|
||
}
|
||
} catch (e) {
|
||
alert('删除失败')
|
||
}
|
||
setShowDelete(false)
|
||
}
|
||
|
||
const getStatusText = (status) => {
|
||
const map = { 'in_collection': '收藏中', 'selling': '出售中', 'sold': '已售', 'grading': '送评中', 'repairing': '修复中', 'transit': '在途中', 'other': '其他' }
|
||
return map[status] || status || '-'
|
||
}
|
||
|
||
const getCategoryText = (category) => {
|
||
const map = { '自持': '自持', '寄存': '寄存', '寄售': '寄售', '共有': '共有', '寻号': '寻号', '其他': '其他' }
|
||
return map[category] || category || '-'
|
||
}
|
||
|
||
const Field = ({ label, value, green }) => (
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: '13px' }}>{label}</span>
|
||
<span style={{ color: green ? '#22c55e' : '#fff', fontSize: '13px', textAlign: 'right', maxWidth: '60%' }}>{value || '-'}</span>
|
||
</div>
|
||
)
|
||
|
||
const Section = ({ title, children }) => (
|
||
<div style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '10px', padding: '12px', marginBottom: '10px' }}>
|
||
<div style={{ color: '#fbbf24', fontSize: '13px', fontWeight: 'bold', marginBottom: '8px' }}>{title}</div>
|
||
{children}
|
||
</div>
|
||
)
|
||
|
||
if (loading) {
|
||
return <div style={{ padding: '40px', textAlign: 'center', color: '#94a3b8' }}>加载中...</div>
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div style={{ padding: '40px', textAlign: 'center' }}>
|
||
<div style={{ fontSize: '60px' }}>❌</div>
|
||
<div style={{ color: '#ef4444', marginTop: '16px', fontSize: '16px', fontWeight: 'bold' }}>{error}</div>
|
||
<button onClick={goBack} style={{ marginTop: '20px', padding: '12px 24px', background: '#fbbf24', color: '#1e293b', border: 'none', borderRadius: '8px', cursor: 'pointer' }}>返回列表</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!collection) {
|
||
return (
|
||
<div style={{ padding: '40px', textAlign: 'center' }}>
|
||
<div style={{ fontSize: '60px' }}>❌</div>
|
||
<div style={{ color: '#94a3b8', marginTop: '16px' }}>藏品不存在</div>
|
||
<button onClick={goBack} style={{ marginTop: '20px', padding: '12px 24px', background: '#fbbf24', color: '#1e293b', border: 'none', borderRadius: '8px', cursor: 'pointer' }}>返回列表</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div style={{ background: '#0f172a', minHeight: '100vh', paddingBottom: '80px' }}>
|
||
{/* 顶部 */}
|
||
<div style={{ padding: '12px 16px', background: 'rgba(255,255,255,0.02)', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', position: 'sticky', top: 0, zIndex: 100 }}>
|
||
<span style={{ fontSize: '16px', fontWeight: 'bold', color: '#fff' }}>藏品详情</span>
|
||
<div style={{ marginLeft: 'auto', display: 'flex', gap: '8px' }}>
|
||
<button onClick={goBack} style={{ padding: '6px 12px', background: 'rgba(255,255,255,0.1)', color: '#fff', border: 'none', borderRadius: '6px', fontSize: '13px' }}>返回</button>
|
||
<button onClick={() => setShowDelete(true)} style={{ padding: '6px 12px', background: '#ef4444', color: '#fff', border: 'none', borderRadius: '6px', fontSize: '13px' }}>删除</button>
|
||
<button onClick={handleEdit} style={{ padding: '6px 12px', background: '#fbbf24', color: '#1e293b', border: 'none', borderRadius: '6px', fontSize: '13px', fontWeight: '600' }}>编辑</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 主信息 */}
|
||
<div style={{ padding: '16px' }}>
|
||
{/* 图片显示 */}
|
||
{collection.images && collection.images.length > 0 && (
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(collection.images.length, 1)}, 1fr)`, gap: '12px' }}>
|
||
{collection.images.map((img, index) => (
|
||
<div key={img.id || index} style={{ position: 'relative' }}>
|
||
<img
|
||
src={img.path?.startsWith('http') ? img.path : `/${img.path || `uploads/collections/${img.filename}`}`}
|
||
alt={img.originalName || '藏品图片'}
|
||
onClick={() => { setCurrentImageIndex(index); setShowImage(true); }}
|
||
style={{
|
||
width: '100%',
|
||
aspectRatio: '1.5',
|
||
objectFit: 'contain',
|
||
borderRadius: '12px',
|
||
border: '2px solid #10b981',
|
||
cursor: 'pointer',
|
||
boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
|
||
background: '#0f172a'
|
||
}}
|
||
onError={(e) => {
|
||
// 图片加载失败时显示灰色占位符，不显示 logo
|
||
e.target.style.display = 'none';
|
||
e.target.parentElement.innerHTML = '<div style="width:100%;aspectRatio:1.5;background:rgba(255,255,255,0.05);border-radius:12px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);font-size:14px;">无图片</div>';
|
||
}}
|
||
/>
|
||
{collection.images.length > 1 && (
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: '8px',
|
||
left: '8px',
|
||
background: 'rgba(0,0,0,0.6)',
|
||
color: '#fff',
|
||
padding: '4px 8px',
|
||
borderRadius: '4px',
|
||
fontSize: '12px'
|
||
}}>
|
||
{index + 1}/{collection.images.length}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff', marginBottom: '8px' }}>{collection.name}</div>
|
||
<div style={{ textAlign: 'center', color: '#fbbf24', fontSize: '14px', fontFamily: 'monospace', fontWeight: 'bold' }}>{collection.prefixSerial || '-'}</div>
|
||
</div>
|
||
|
||
{/* 信息区块 */}
|
||
<div style={{ padding: '0 16px' }}>
|
||
<Section title="基本信息">
|
||
<Field label="编号" value={collection.code} />
|
||
<Field label="持仓类型" value={getCategoryText(collection.category)} />
|
||
<Field label="珍惜度" value={collection.rarity || '-'} green={collection.rarity && collection.rarity !== '通货'} />
|
||
<Field label="版别" value={collection.version} />
|
||
<Field label="面值" value={collection.denomination} />
|
||
<Field label="状态" value={getStatusText(collection.status)} green={collection.status === 'in_collection'} />
|
||
<Field label="包装" value={collection.packaging} />
|
||
<Field label="创建时间" value={collection.createdAt ? new Date(collection.createdAt).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') : '-'} />
|
||
</Section>
|
||
|
||
<Section title="评级信息">
|
||
<Field label="是否评级" value={collection.isGraded ? '已评级' : '未评级'} />
|
||
<Field label="评级公司" value={collection.gradingCompany} />
|
||
<Field label="评级分数" value={collection.gradingScore} green={collection.gradingScore} />
|
||
<Field label="三星" value={collection.threeStar ? '是' : '否'} green={collection.threeStar} />
|
||
</Section>
|
||
|
||
<Section title="特殊信息">
|
||
<Field label="特殊标识" value={collection.specialMark} />
|
||
<Field label="号码特征" value={collection.serialFeature} />
|
||
<Field label="号码分类" value={collection.numberCategory} />
|
||
<Field label="发行方" value={collection.issuer} />
|
||
<Field label="发行年份" value={collection.issueYear} />
|
||
<Field label="材质" value={collection.material} />
|
||
<Field label="发行量" value={collection.issueQuantity} />
|
||
</Section>
|
||
|
||
<Section title="价格信息">
|
||
<Field label="成本价" value={collection.costPrice ? '¥' + collection.costPrice : '-'} />
|
||
<Field label="目标价" value={collection.targetPrice ? '¥' + collection.targetPrice : '-'} />
|
||
<Field label="出售价" value={collection.goalPrice ? '¥' + collection.goalPrice : '-'} green={collection.goalPrice} />
|
||
<Field label="修复费" value={collection.repairFee ? '¥' + collection.repairFee : '-'} />
|
||
<Field label="评级费" value={collection.gradingFee ? '¥' + collection.gradingFee : '-'} />
|
||
<Field label="用途" value={collection.purpose} />
|
||
</Section>
|
||
|
||
{collection.remark && (
|
||
<Section title="备注">
|
||
<div style={{ color: '#fff', fontSize: '13px', lineHeight: '1.5' }}>{collection.remark}</div>
|
||
</Section>
|
||
)}
|
||
</div>
|
||
|
||
{/* 删除确认弹窗 */}
|
||
{showDelete && (
|
||
<div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
|
||
<div style={{ background: '#1e293b', borderRadius: '12px', padding: '24px', width: '80%', maxWidth: '300px' }}>
|
||
<div style={{ color: '#fff', fontSize: '16px', fontWeight: 'bold', marginBottom: '16px', textAlign: 'center' }}>确定删除此藏品？</div>
|
||
<div style={{ display: 'flex', gap: '12px' }}>
|
||
<button onClick={() => setShowDelete(false)} style={{ flex: 1, padding: '12px', background: 'rgba(255,255,255,0.1)', color: '#fff', border: 'none', borderRadius: '8px', fontSize: '14px' }}>取消</button>
|
||
<button onClick={doDelete} style={{ flex: 1, padding: '12px', background: '#ef4444', color: '#fff', border: 'none', borderRadius: '8px', fontSize: '14px' }}>删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 图片查看器 */}
|
||
{showImage && collection.images && collection.images.length > 0 && (
|
||
<div
|
||
style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.95)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' }}
|
||
onClick={() => setShowImage(false)}
|
||
>
|
||
{/* 左侧切换按钮 */}
|
||
{collection.images.length > 1 && (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); setCurrentImageIndex((currentImageIndex - 1 + collection.images.length) % collection.images.length); }}
|
||
style={{
|
||
position: 'absolute',
|
||
left: '20px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: '50%',
|
||
width: '50px',
|
||
height: '50px',
|
||
fontSize: '24px',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center'
|
||
}}
|
||
>
|
||
‹
|
||
</button>
|
||
)}
|
||
|
||
{/* 图片 */}
|
||
<img
|
||
src={collection.images[currentImageIndex].path?.startsWith('http') ? collection.images[currentImageIndex].path : `/${collection.images[currentImageIndex].path || `uploads/collections/${collection.images[currentImageIndex].filename}`}`}
|
||
alt={collection.images[currentImageIndex].originalName || '藏品图片'}
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
|
||
/>
|
||
|
||
{/* 右侧切换按钮 */}
|
||
{collection.images.length > 1 && (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); setCurrentImageIndex((currentImageIndex + 1) % collection.images.length); }}
|
||
style={{
|
||
position: 'absolute',
|
||
right: '20px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: '50%',
|
||
width: '50px',
|
||
height: '50px',
|
||
fontSize: '24px',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center'
|
||
}}
|
||
>
|
||
›
|
||
</button>
|
||
)}
|
||
|
||
{/* 图片指示器 */}
|
||
{collection.images.length > 1 && (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
bottom: '40px',
|
||
left: '50%',
|
||
transform: 'translateX(-50%)',
|
||
display: 'flex',
|
||
gap: '10px'
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{collection.images.map((_, index) => (
|
||
<div
|
||
key={index}
|
||
onClick={() => setCurrentImageIndex(index)}
|
||
style={{
|
||
width: '12px',
|
||
height: '12px',
|
||
borderRadius: '50%',
|
||
background: index === currentImageIndex ? '#fbbf24' : 'rgba(255,255,255,0.3)',
|
||
cursor: 'pointer',
|
||
border: '2px solid #fff'
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 关闭提示 */}
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
top: '20px',
|
||
right: '20px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: '50%',
|
||
width: '40px',
|
||
height: '40px',
|
||
fontSize: '24px',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center'
|
||
}}
|
||
onClick={() => setShowImage(false)}
|
||
>
|
||
×
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
// v2.7.1
|