root
/
jiachenlong
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改成交行情列表展示格式

This commit is contained in:
甲辰生产 2026-04-11 21:34:43 +08:00
parent e8ac05decd
commit 73de6a1f85
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/pages/News.jsx
View File

@ -647,22 +647,23 @@ export default function News() {
{infoList.map(item => {
// 成交行情 tab - 按维度汇总展示
if (activeTab === 'deal') {
// 从content中解析各个字段
const content = item.content || ''
const categoryMatch = content.match(/分类:\s*(.+?)(?:\n|$)/)
const packagingMatch = content.match(/包装:\s*(.+?)(?:\n|$)/)
const platformMatch = content.match(/平台:\s*(.+?)(?:\n|$)/)
const sellerMatch = content.match(/出售者:\s*(.+?)(?:\n|$)/)
const dateMatch = content.match(/日期:\s*(.+?)(?:\n|$)/)
const gradeMatch = content.match(/评级:\s*(.+?)(?:\n|$)/)
const category = categoryMatch ? categoryMatch[1].trim() : item.category || '-'
const packaging = packagingMatch ? packagingMatch[1].trim() : item.packaging || '-'
const platform = platformMatch ? platformMatch[1].trim() : '-'
const seller = sellerMatch ? sellerMatch[1].trim() : '-'
const dealDate = dateMatch ? dateMatch[1].trim() : item.deal_date || '-'
const grade = gradeMatch ? gradeMatch[1].trim() : ''
const gradingCompany = item.grading_company || ''
// 从冠字号判断版本（龙钞J0，马钞J1，蛇钞J3等）
const serial = item.title?.split('-')[0] || ''
const serial = (item.title || '').split('-')[0] || ''
let version = '其他'
if (serial.startsWith('J0')) version = '龙钞'
else if (serial.startsWith('J1')) version = '马钞'
@ -670,20 +671,31 @@ export default function News() {
return (
<div key={item.id} style={{ background: '#1e293b', borderRadius: '12px', padding: '12px', marginBottom: '10px' }}>
{/* 第一行：冠字号 | 版别 | 包装 | 分数 + 价格 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
<div style={{ color: '#fbbf24', fontSize: '15px', fontWeight: '600' }}>{(item.title || '').split('-')[0]}</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<span style={{ color: '#fbbf24', fontSize: '15px', fontWeight: '600' }}>{serial}</span>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>|</span>
<span style={{ background: '#3b82f6', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{version}</span>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>|</span>
<span style={{ background: '#8b5cf6', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{packaging}</span>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>|</span>
<span style={{ background: '#06b6d4', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{grade}</span>
</div>
<div style={{ color: '#22c55e', fontSize: '16px', fontWeight: '700' }}>¥{item.deal_price?.toLocaleString()}</div>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
<span style={{ background: '#3b82f6', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{version}</span>
<span style={{ background: '#8b5cf6', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{packaging}</span>
<span style={{ background: '#06b6d4', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{category}</span>
<span style={{ background: '#f97316', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{platform}</span>
{/* 第二行：编码 | 分类 | 评级机构 | 平台 | 日期 */}
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
<span style={{ color: '#64748b', fontSize: '11px' }}>{item.deal_no}</span>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>|</span>
<span style={{ background: '#f97316', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{category}</span>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>|</span>
{gradingCompany && <span style={{ background: '#ec4899', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{gradingCompany}</span>}
<span style={{ color: '#94a3b8', fontSize: '12px' }}>|</span>
<span style={{ background: '#10b981', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{platform}</span>
<span style={{ color: '#94a3b8', fontSize: '12px' }}>|</span>
<span style={{ background: '#64748b', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{dealDate}</span>
</div>
{seller && seller !== '-' && (
<div style={{ color: '#94a3b8', fontSize: '12px', marginTop: '6px' }}>出售者: {seller}</div>
)}
</div>
)
}