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-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-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-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> </style>
</head> </head>
<body>${formNode.outerHTML}</body> <body>${formNode.outerHTML}</body>
@@ -405,30 +401,41 @@ function AftersalesDetailPage() {
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
{order.authorizationStatus === 'authorized' && order.signature && ( {order.authorizationStatus === 'authorized' && (order.signature || order.responsibleSignature) && (
<div style={{ marginBottom: 24 }}> <div className="aftersales-detail-signatures">
<div style={{ fontSize: 13, color: '#595959', marginBottom: 8 }}> <div className="aftersales-detail-section-title">
客户确认签名 客户确认签名
{order.confirmedAt && ( {order.confirmedAt && (
<span style={{ marginLeft: 12, color: '#8c8c8c', fontSize: 12 }}> <span>签署时间：{new Date(order.confirmedAt).toLocaleString('zh-CN')}</span>
签署时间：{new Date(order.confirmedAt).toLocaleString('zh-CN')}
</span>
)} )}
</div> </div>
<img <div className="aftersales-detail-signature-grid">
src={order.signature} {order.responsibleSignature && (
alt="客户确认签名" <div className="aftersales-detail-signature-card">
style={{ <div className="aftersales-detail-signature-label">处理人签名</div>
maxWidth: 480, <img src={order.responsibleSignature} alt="处理人签名" />
maxHeight: 220, </div>
width: '100%', )}
height: 'auto', {order.signature && (
objectFit: 'contain', <div className="aftersales-detail-signature-card">
border: '1px solid #f0f0f0', <div className="aftersales-detail-signature-label">客户签名</div>
borderRadius: 6, <img src={order.signature} alt="客户签名" />
background: '#fff', </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> </div>
)} )}
@@ -622,16 +629,6 @@ function AftersalesDetailPage() {
</tr> </tr>
</tbody> </tbody>
</table> </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-signatures">
<div className="electronic-form-signature-box"> <div className="electronic-form-signature-box">
<p className="electronic-form-signature-title">处理人签名：</p> <p className="electronic-form-signature-title">处理人签名：</p>
src/pages/styles/AftersalesDetail.css
+60 -11
View File
@@ -115,26 +115,71 @@
object-fit: contain; object-fit: contain;
} }
.electronic-form-site-images { .aftersales-detail-signatures,
margin-top: 18px; .aftersales-detail-site-images {
margin-bottom: 24px;
} }
.electronic-form-site-images-title { .aftersales-detail-section-title {
margin: 0 0 10px; margin-bottom: 10px;
font-weight: 600; 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; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px; 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%; 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; object-fit: cover;
border: 1px solid #1f2937; display: block;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
@@ -167,4 +212,8 @@
.electronic-form-signatures { .electronic-form-signatures {
gap: 16px; gap: 16px;
} }
.aftersales-detail-signature-grid {
grid-template-columns: 1fr;
}
} }