143 lines
5.1 KiB
TypeScript
143 lines
5.1 KiB
TypeScript
import { useParams, Link } from 'react-router-dom'
|
|
import { useAuth } from '../../contexts/AuthContext'
|
|
import PageContainer from '../../components/PageContainer'
|
|
import PageHeader from '../../components/PageHeader'
|
|
import './ClaimDetail.css'
|
|
|
|
function ClaimDetail() {
|
|
const { id } = useParams()
|
|
const { user } = useAuth()
|
|
const isPolicyHolder = user?.role === '投保人'
|
|
const _isInsurer = user?.role === '保险人'
|
|
void _isInsurer // 预留：保险人视图
|
|
|
|
// 模拟数据（后续替换为 API 调用）
|
|
const mockClaim = {
|
|
id: id || '1',
|
|
projectNumber: 'CT-2025-001',
|
|
projectTitle: 'XX药物临床试验项目',
|
|
coverage: '全面保障',
|
|
insurer: '太平洋保险',
|
|
status: '待处理',
|
|
details: {
|
|
claimNumber: 'CL-2025-001',
|
|
claimDate: '2025-02-01',
|
|
claimAmount: '50000',
|
|
claimReason: '受试者发生不良事件，需要医疗费用报销',
|
|
description: '理赔详细描述信息...'
|
|
},
|
|
documents: [
|
|
{ name: '理赔申请书', type: 'pdf', url: '#' },
|
|
{ name: '医疗费用清单', type: 'xlsx', url: '#' },
|
|
{ name: '医院诊断证明', type: 'pdf', url: '#' }
|
|
]
|
|
}
|
|
|
|
return (
|
|
<PageContainer>
|
|
<div className="claim-detail-page">
|
|
<PageHeader
|
|
title="理赔评估明细"
|
|
description={`理赔编号：${mockClaim.details.claimNumber}`}
|
|
/>
|
|
<div className="page-body">
|
|
{/* 基本信息 */}
|
|
<section className="detail-section">
|
|
<h2 className="section-title">基本信息</h2>
|
|
<div className="card main-card">
|
|
<div className="info-grid">
|
|
<div className="info-item">
|
|
<label>项目编号</label>
|
|
<span>{mockClaim.projectNumber}</span>
|
|
</div>
|
|
<div className="info-item">
|
|
<label>试验题目</label>
|
|
<span>{mockClaim.projectTitle}</span>
|
|
</div>
|
|
<div className="info-item">
|
|
<label>保障范围</label>
|
|
<span>{mockClaim.coverage}</span>
|
|
</div>
|
|
<div className="info-item">
|
|
<label>承保公司</label>
|
|
<span>{mockClaim.insurer}</span>
|
|
</div>
|
|
<div className="info-item">
|
|
<label>理赔编号</label>
|
|
<span>{mockClaim.details.claimNumber}</span>
|
|
</div>
|
|
<div className="info-item">
|
|
<label>理赔日期</label>
|
|
<span>{mockClaim.details.claimDate}</span>
|
|
</div>
|
|
<div className="info-item">
|
|
<label>理赔金额</label>
|
|
<span className="amount">¥{mockClaim.details.claimAmount}</span>
|
|
</div>
|
|
<div className="info-item">
|
|
<label>理赔状态</label>
|
|
<span className={`status-badge status-pending`}>{mockClaim.status}</span>
|
|
</div>
|
|
<div className="info-item full-width">
|
|
<label>理赔原因</label>
|
|
<span>{mockClaim.details.claimReason}</span>
|
|
</div>
|
|
<div className="info-item full-width">
|
|
<label>详细描述</label>
|
|
<span>{mockClaim.details.description}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 相关文档 */}
|
|
<section className="detail-section">
|
|
<h2 className="section-title">相关文档</h2>
|
|
<div className="card main-card">
|
|
<div className="documents-list">
|
|
{mockClaim.documents.map((doc, index) => (
|
|
<div key={index} className="document-item">
|
|
<div className="document-icon">
|
|
{doc.type === 'pdf' ? '📄' : '📊'}
|
|
</div>
|
|
<div className="document-info">
|
|
<div className="document-name">{doc.name}</div>
|
|
<div className="document-type">{doc.type.toUpperCase()}</div>
|
|
</div>
|
|
<div className="document-actions">
|
|
<a href={doc.url} className="btn btn-sm btn-link" download>
|
|
下载
|
|
</a>
|
|
<button className="btn btn-sm btn-link">
|
|
预览
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 操作按钮 */}
|
|
<div className="action-bar">
|
|
<Link to="/dashboard/claims" className="btn btn-secondary">
|
|
返回列表
|
|
</Link>
|
|
{isPolicyHolder ? (
|
|
<button className="btn btn-primary">
|
|
申请理赔
|
|
</button>
|
|
) : (
|
|
<button className="btn btn-primary">
|
|
处理理赔
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageContainer>
|
|
)
|
|
}
|
|
|
|
export default ClaimDetail
|