Replace phone verification with canvas signature on confirm page

Adds a canvas-based SignaturePad component used on the customer
confirm page. Authorize now requires a non-empty signature; reject
opens a required reason modal. The archived signature is shown to
the customer after confirming and on the admin detail page.

Also fixes the confirm page being clipped at the top when its
content exceeds the viewport: the public layout used
height:100vh + overflow:hidden which cropped the centered card.
Switched to min-height:100vh so tall content can scroll naturally.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Frudrax Cheng
2026-05-26 18:02:18 +08:00
parent f61004ba12
commit 1d944b0fd3
7 changed files with 252 additions and 37 deletions
+24
View File
@@ -322,6 +322,30 @@ function AftersalesDetailPage() {
</Descriptions.Item>
</Descriptions>
{order.authorizationStatus === 'authorized' && order.signature && (
<div style={{ marginBottom: 24 }}>
<div style={{ fontSize: 13, color: '#595959', marginBottom: 8 }}>
{order.confirmedAt && (
<span style={{ marginLeft: 12, color: '#8c8c8c', fontSize: 12 }}>
{new Date(order.confirmedAt).toLocaleString('zh-CN')}
</span>
)}
</div>
<img
src={order.signature}
alt="客户签名"
style={{
maxWidth: 480,
width: '100%',
border: '1px solid #f0f0f0',
borderRadius: 6,
background: '#fff',
}}
/>
</div>
)}
<Form form={form} layout="vertical" onFinish={handleSave} disabled={!canEdit}>
<Form.Item
name="companyAddress"