trace-system/frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show site images only in aftersales detail

Browse Source
This commit is contained in:
Frudrax Cheng
2026-06-02 11:23:04 +08:00
parent 0e05568c7a
commit b990980490
2 changed files with 91 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/AftersalesDetail.tsx
+31 -34
View File
@@ -251,10 +251,6 @@ function AftersalesDetailPage() {
.electronic-form-signature-title { flex: 0 0 auto; margin: 0 10px 0 0; font-weight: 600; white-space: nowrap; }
.electronic-form-signature-stage { flex: 1; height: 72px; min-width: 160px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #1f2937; }
.electronic-form-signature-img { max-width: 180px; max-height: 68px; object-fit: contain; }
.electronic-form-site-images { margin-top: 18px; }
.electronic-form-site-images-title { margin: 0 0 10px; font-weight: 600; }
.electronic-form-site-images-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.electronic-form-site-images-grid img { width: 100%; height: 150px; object-fit: cover; border: 1px solid #1f2937; }
</style>
</head>
<body>${formNode.outerHTML}</body>
@@ -405,30 +401,41 @@ function AftersalesDetailPage() {
</Descriptions.Item>
</Descriptions>
{order.authorizationStatus === 'authorized' && order.signature && (
<div style={{ marginBottom: 24 }}>
<div style={{ fontSize: 13, color: '#595959', marginBottom: 8 }}>
{order.authorizationStatus === 'authorized' && (order.signature || order.responsibleSignature) && (
<div className="aftersales-detail-signatures">
<div className="aftersales-detail-section-title">
客户确认签名
{order.confirmedAt && (
<span style={{ marginLeft: 12, color: '#8c8c8c', fontSize: 12 }}>
签署时间：{new Date(order.confirmedAt).toLocaleString('zh-CN')}
</span>
<span>签署时间：{new Date(order.confirmedAt).toLocaleString('zh-CN')}</span>
)}
</div>
<img
src={order.signature}
alt="客户确认签名"
style={{
maxWidth: 480,
maxHeight: 220,
width: '100%',
height: 'auto',
objectFit: 'contain',
border: '1px solid #f0f0f0',
borderRadius: 6,
background: '#fff',
}}
/>
<div className="aftersales-detail-signature-grid">
{order.responsibleSignature && (
<div className="aftersales-detail-signature-card">
<div className="aftersales-detail-signature-label">处理人签名</div>
<img src={order.responsibleSignature} alt="处理人签名" />
</div>
)}
{order.signature && (
<div className="aftersales-detail-signature-card">
<div className="aftersales-detail-signature-label">客户签名</div>
<img src={order.signature} alt="客户签名" />
</div>
)}
</div>
</div>
)}
{order.siteImages && order.siteImages.length > 0 && (
<div className="aftersales-detail-site-images">
<div className="aftersales-detail-section-title">现场图片</div>
<div className="aftersales-detail-site-image-grid">
{order.siteImages.map((url) => (
<a key={url} href={url} target="_blank" rel="noreferrer">
<img src={url} alt="现场图片" />
</a>
))}
</div>
</div>
)}
@@ -622,16 +629,6 @@ function AftersalesDetailPage() {
</tr>
</tbody>
</table>
{order.siteImages && order.siteImages.length > 0 && (
<div className="electronic-form-site-images">
<p className="electronic-form-site-images-title">现场图片</p>
<div className="electronic-form-site-images-grid">
{order.siteImages.map((url) => (
<img key={url} src={url} alt="现场图片" />
))}
</div>
</div>
)}
<div className="electronic-form-signatures">
<div className="electronic-form-signature-box">
<p className="electronic-form-signature-title">处理人签名：</p>
src/pages/styles/AftersalesDetail.css
+60 -11
View File
@@ -115,26 +115,71 @@
object-fit: contain;
}
.electronic-form-site-images {
margin-top: 18px;
.aftersales-detail-signatures,
.aftersales-detail-site-images {
margin-bottom: 24px;
}
.electronic-form-site-images-title {
margin: 0 0 10px;
font-weight: 600;
.aftersales-detail-section-title {
margin-bottom: 10px;
color: #595959;
font-size: 13px;
font-weight: 500;
}
.electronic-form-site-images-grid {
.aftersales-detail-section-title span {
margin-left: 12px;
color: #8c8c8c;
font-size: 12px;
font-weight: 400;
}
.aftersales-detail-signature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: 760px;
}
.electronic-form-site-images-grid img {
.aftersales-detail-signature-card {
padding: 12px;
border: 1px solid #f0f0f0;
border-radius: 6px;
background: #fff;
}
.aftersales-detail-signature-label {
margin-bottom: 8px;
color: #595959;
font-size: 13px;
}
.aftersales-detail-signature-card img {
width: 100%;
height: 150px;
height: 160px;
object-fit: contain;
}
.aftersales-detail-site-image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.aftersales-detail-site-image-grid a {
display: block;
aspect-ratio: 1;
overflow: hidden;
border: 1px solid #f0f0f0;
border-radius: 6px;
background: #fff;
}
.aftersales-detail-site-image-grid img {
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid #1f2937;
display: block;
}
@media (max-width: 720px) {
@@ -167,4 +212,8 @@
.electronic-form-signatures {
gap: 16px;
}
.aftersales-detail-signature-grid {
grid-template-columns: 1fr;
}
}