Files
lislgosms/src/apps/client/ClientEnterpriseAuthPage.tsx
T
2026-09-15 15:58:29 +08:00

641 lines
24 KiB
TypeScript

import { useEffect, useState } from 'react';
import { AlertCircle, Check, ChevronRight, Landmark, ShieldCheck, Upload, UserCheck } from 'lucide-react';
import { Button, FileActions, Input, Select, Textarea } from '@/components/ui';
import { clientApi, type EnterpriseCertification, type FileObject, type FileRef } from '@/api/adminApi';
import { displayFileName } from '@/utils/fileName';
type AuthStep = 'overview' | 'profile' | 'method' | 'recharge' | 'face' | 'faceScan' | 'pending' | 'success' | 'failed';
type AuthMethod = 'face' | 'recharge';
type CertificationStatus = 'uncertified' | 'pending' | 'approved' | 'rejected';
const companyInfo = {
name: '上海闪联九玖信息通信技术有限公司',
code: 'XXXXXXXXXX',
legalPerson: '张三',
certifiedAt: '2022年07月09日 13:12:01',
address: '上海XXX区XX路XX号',
};
type CertificationForm = {
companyName: string;
licenseNo: string;
province: string;
city: string;
address: string;
contactName: string;
contactIdCard: string;
contactPhone: string;
contactEmail: string;
legalPerson: string;
legalPersonIdCard: string;
};
const emptyCertificationForm: CertificationForm = {
companyName: '',
licenseNo: '',
province: '',
city: '',
address: '',
contactName: '',
contactIdCard: '',
contactPhone: '',
contactEmail: '',
legalPerson: '',
legalPersonIdCard: '',
};
function UploadPanel({
file,
uploading,
onFile,
}: {
file: FileObject | null;
uploading: boolean;
onFile: (file: File | undefined) => void;
}) {
const fileRef: FileRef | null = file
? { contentType: file.contentType, fileName: file.fileName, fileObjectId: file.id }
: null;
return (
<label className="enterprise-upload">
<Upload size={38} />
<strong>{uploading ? '上传中...' : file ? displayFileName(file.fileName) : '点击上传'}</strong>
<FileActions file={fileRef} portal="client" />
<input
accept="image/png,image/jpeg,image/webp,application/pdf"
disabled={uploading}
onChange={(event) => onFile(event.target.files?.[0])}
style={{ display: 'none' }}
type="file"
/>
</label>
);
}
function EnterpriseStepper({ current }: { current: number }) {
const steps = ['填写资料', '选择认证方式', '校验认证信息', '认证完成'];
return (
<div className="enterprise-stepper">
{steps.map((label, index) => {
const step = index + 1;
const complete = step < current;
const active = step === current;
return (
<div className="enterprise-stepper__item" key={label}>
<span
className={['enterprise-stepper__dot', complete ? 'is-complete' : '', active ? 'is-active' : '']
.filter(Boolean)
.join(' ')}
>
{complete ? <Check size={20} /> : step}
</span>
<strong className={active || complete ? 'is-active' : ''}>{label}</strong>
{index < steps.length - 1 ? <ChevronRight className="enterprise-stepper__arrow" size={22} /> : null}
</div>
);
})}
</div>
);
}
function AuthHeader({ status }: { status: CertificationStatus }) {
const statusText: Record<CertificationStatus, string> = {
uncertified: '未认证',
pending: '审核中',
approved: '已通过',
rejected: '未通过',
};
return (
<div className="system-page-toolbar">
<div className="sms-send-title">
<span className="sms-send-title__icon">
<ShieldCheck size={22} />
</span>
<h1>企业认证</h1>
</div>
<span className={`enterprise-review-status enterprise-review-status--${status}`}>{statusText[status]}</span>
</div>
);
}
function statusFromCertification(certification: EnterpriseCertification | null): CertificationStatus {
if (!certification) {
return 'uncertified';
}
if (certification.status === 'approved') {
return 'approved';
}
if (certification.status === 'rejected') {
return 'rejected';
}
return 'pending';
}
export function ClientEnterpriseAuthPage() {
const [step, setStep] = useState<AuthStep>('overview');
const [method, setMethod] = useState<AuthMethod>('face');
const [status, setStatus] = useState<CertificationStatus>('uncertified');
const [form, setForm] = useState<CertificationForm>(emptyCertificationForm);
const [latestCertification, setLatestCertification] = useState<EnterpriseCertification | null>(null);
const [licenseFile, setLicenseFile] = useState<FileObject | null>(null);
const [uploading, setUploading] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState('');
const currentStep =
step === 'profile'
? 1
: step === 'method'
? 2
: step === 'recharge' || step === 'face' || step === 'faceScan'
? 3
: step === 'pending' || step === 'success' || step === 'failed'
? 4
: 1;
const certificationMaterials = latestCertification?.materials ?? {};
const displayCompany = latestCertification?.companyName || form.companyName || companyInfo.name;
const displayLicenseNo = latestCertification?.licenseNo || form.licenseNo || companyInfo.code;
const displayAddress = String(certificationMaterials.address ?? (form.address || companyInfo.address));
const displayLegalPerson = String(
certificationMaterials.legalPerson ?? (form.legalPerson || companyInfo.legalPerson),
);
function loadCertification() {
clientApi
.listEnterpriseCertifications()
.then((items) => {
const latest = items[0] ?? null;
setLatestCertification(latest);
setStatus(statusFromCertification(latest));
if (latest) {
const materials = latest.materials ?? {};
setForm({
companyName: latest.companyName ?? '',
licenseNo: latest.licenseNo ?? '',
province: String(materials.province ?? ''),
city: String(materials.city ?? ''),
address: String(materials.address ?? ''),
contactName: latest.contactName ?? '',
contactIdCard: String(materials.contactIdCard ?? ''),
contactPhone: latest.contactPhone ?? '',
contactEmail: String(materials.contactEmail ?? ''),
legalPerson: String(materials.legalPerson ?? ''),
legalPersonIdCard: String(materials.legalPersonIdCard ?? ''),
});
}
setError('');
})
.catch((failure: Error) => setError(failure.message || '企业认证信息加载失败'));
}
useEffect(() => {
loadCertification();
}, []);
function updateForm<K extends keyof CertificationForm>(key: K, value: CertificationForm[K]) {
setForm((current) => ({ ...current, [key]: value }));
}
function uploadLicense(file: File | undefined) {
if (!file) return;
setUploading(true);
clientApi
.uploadFileObject(file, { purpose: 'enterprise_certification', prefix: 'enterprise-certifications/license' })
.then((fileObject) => {
setLicenseFile(fileObject);
setError('');
})
.catch((failure: Error) => setError(failure.message || '营业执照上传失败'))
.finally(() => setUploading(false));
}
function submitCertification() {
if (!form.companyName.trim() || !form.licenseNo.trim() || !form.contactName.trim() || !form.contactPhone.trim()) {
setError('请填写企业名称、统一社会信用代码、联系人姓名和联系人手机号');
setStep('profile');
return;
}
setSubmitting(true);
clientApi
.submitEnterpriseCertification({
companyName: form.companyName.trim(),
licenseNo: form.licenseNo.trim(),
contactName: form.contactName.trim(),
contactPhone: form.contactPhone.trim(),
materials: {
licenseFileObjectId: licenseFile?.id,
licenseFileName: licenseFile?.fileName,
licenseFileContentType: licenseFile?.contentType,
province: form.province,
city: form.city,
address: form.address,
contactIdCard: form.contactIdCard,
contactEmail: form.contactEmail,
legalPerson: form.legalPerson,
legalPersonIdCard: form.legalPersonIdCard,
authMethod: method,
},
})
.then((created) => {
setLatestCertification(created);
setStatus('pending');
setStep('pending');
setError('');
})
.catch((failure: Error) => setError(failure.message || '企业认证提交失败'))
.finally(() => setSubmitting(false));
}
if (step === 'overview') {
const overviewCopy =
status === 'approved'
? '企业认证已审核通过,可正常使用发送、签名报备等能力。'
: status === 'pending'
? '企业认证资料已提交,平台运营将在 1 个工作日内完成审核。'
: status === 'rejected'
? '企业认证未通过,请根据驳回原因修改资料后重新提交。'
: '您还未进行企业认证';
return (
<section className="page-stack enterprise-page">
<AuthHeader status={status} />
{error ? <p className="form-error">{error}</p> : null}
<div className={`surface enterprise-status-card enterprise-status-card--${status}`}>
<strong>{overviewCopy}</strong>
{status === 'pending' ? (
<button type="button" onClick={() => setStep('pending')}>
查看审核进度 &gt;
</button>
) : null}
</div>
<div className="surface enterprise-info-card">
<dl>
<div>
<dt>企业名称:</dt>
<dd>{latestCertification ? displayCompany : '待认证'}</dd>
</div>
<div>
<dt>认证时间:</dt>
<dd>{latestCertification?.reviewedAt ?? latestCertification?.submittedAt ?? '待审核完成'}</dd>
</div>
<div>
<dt>统一社会信用代码:</dt>
<dd>{latestCertification ? displayLicenseNo : '待认证'}</dd>
</div>
<div>
<dt>通讯地址:</dt>
<dd>{latestCertification ? displayAddress : '待认证'}</dd>
</div>
<div>
<dt>法定代表人:</dt>
<dd>{latestCertification ? displayLegalPerson : '待认证'}</dd>
</div>
</dl>
</div>
</section>
);
}
return (
<section className="page-stack enterprise-page">
<h1 className="enterprise-page-title">企业认证</h1>
{error ? <p className="form-error">{error}</p> : null}
<div className="surface enterprise-flow-card">
<EnterpriseStepper current={currentStep} />
{step === 'profile' ? (
<div className="enterprise-form-panel">
<label className="enterprise-required">营业执照</label>
<UploadPanel file={licenseFile} onFile={uploadLicense} uploading={uploading} />
<p className="enterprise-help">请上传电子版营业执照,JPG或PNG格式,大小不超过5M</p>
<Input
label="* 企业名称"
onChange={(event) => updateForm('companyName', event.target.value)}
placeholder="请填写企业全称"
hint="请严格按照营业执照上的企业名称进行填写"
value={form.companyName}
/>
<Input
label="* 统一社会信用代码/其他组织机构代码"
onChange={(event) => updateForm('licenseNo', event.target.value)}
placeholder="请填写统一社会信用代码(若无请填写其他组织机构代码)"
value={form.licenseNo}
/>
<div className="enterprise-address-selects">
<span>* 通讯地址</span>
<div>
<Select
onChange={(event) => updateForm('province', event.target.value)}
options={[
{ label: '请选择省/直辖市', value: '' },
{ label: '上海市', value: '上海市' },
{ label: '北京市', value: '北京市' },
{ label: '山东省', value: '山东省' },
{ label: '河南省', value: '河南省' },
]}
value={form.province}
/>
<Select
onChange={(event) => updateForm('city', event.target.value)}
options={[
{ label: '请选择', value: '' },
{ label: '浦东新区', value: 'pudong' },
{ label: '徐汇区', value: 'xuhui' },
{ label: '济南市', value: '济南市' },
{ label: '郑州市', value: '郑州市' },
]}
value={form.city}
/>
</div>
</div>
<Textarea
onChange={(event) => updateForm('address', event.target.value)}
placeholder="请填写详细的通讯地址,可与证件上的地址不一致"
rows={5}
value={form.address}
/>
<p className="enterprise-form-note">为方便沟通企业进展情况,需补充联系人(法人或员工都可)信息</p>
<Input
label="* 企业联系人姓名"
onChange={(event) => updateForm('contactName', event.target.value)}
placeholder="请填写企业联系人姓名"
value={form.contactName}
/>
<Input
label="* 企业联系人身份证号"
onChange={(event) => updateForm('contactIdCard', event.target.value)}
placeholder="请填写企业联系人身份证号"
value={form.contactIdCard}
/>
<Input
label="* 企业联系人手机号"
onChange={(event) => updateForm('contactPhone', event.target.value)}
placeholder="请填写企业联系人手机号"
value={form.contactPhone}
/>
<Input
label="企业联系人邮箱"
onChange={(event) => updateForm('contactEmail', event.target.value)}
placeholder="请填写企业联系人邮箱"
value={form.contactEmail}
/>
<div className="enterprise-actions">
<Button onClick={() => setStep('overview')} variant="secondary">
取消
</Button>
<Button onClick={() => setStep('method')}>下一步</Button>
</div>
</div>
) : null}
{step === 'method' ? (
<div className="enterprise-method-panel">
<button
className={['enterprise-method-card', method === 'face' ? 'is-selected' : ''].filter(Boolean).join(' ')}
onClick={() => setMethod('face')}
type="button"
>
<UserCheck size={56} />
<div>
<strong>
企业法人人脸识别认证 <span>即时完成</span>
</strong>
<p>填写法人姓名与身份证号码</p>
<p>企业法人亲自进行校验</p>
</div>
</button>
<button
className={['enterprise-method-card', method === 'recharge' ? 'is-selected' : '']
.filter(Boolean)
.join(' ')}
onClick={() => setMethod('recharge')}
type="button"
>
<Landmark size={56} />
<div>
<strong>
聆界平台充值认证 <span>1个工作日完成</span>
</strong>
<p>使用企业对公账户向聆界平台进行验证充值小于1</p>
<p>认证成功后,验证金将自动打入企业的聆界平台账户中,可随时使用</p>
<p>若打款错误或失败,验证金将自动退回</p>
</div>
</button>
<div className="enterprise-actions">
<Button onClick={() => setStep('profile')} variant="secondary">
返回修改企业信息
</Button>
<Button onClick={() => setStep(method === 'face' ? 'face' : 'recharge')}>下一步</Button>
</div>
</div>
) : null}
{step === 'recharge' ? (
<div className="enterprise-verify-panel">
<p>
<span>认证方式</span>
<strong>聆界平台充值认证</strong>
</p>
<p className="enterprise-verify-copy">
请使用 <em>企业银行对公账户</em> 向聆界平台账户打款 <em>(小于1元)</em>{' '}
至迅联天下平台账户,认证成功后,验证金将自动打入企业的平台账户中。
</p>
<h2>付款方信息</h2>
<p>
<span>付款企业</span>
<strong>{form.companyName || '待填写企业名称'}</strong>
</p>
<small>
请使用与企业营业执照名称一致的对公账户进行转账,以便系统进行识别,若填报错误企业信息,转账将无效暨审核不通过
</small>
<div className="enterprise-info-alert">
<AlertCircle size={20} />
<span>
为避免充值失败的情况,请在点击 <strong>确认并充值</strong>{' '}
后,根据页面提示的金额进行转账,验证、充值金额有效期:<em>安全充值有效期为7个工作日</em>
,验证次数为2次。
</span>
</div>
<div className="enterprise-actions enterprise-actions--center">
<Button disabled={submitting} onClick={submitCertification}>
{submitting ? '提交中...' : '确认并充值'}
</Button>
<Button onClick={() => setStep('method')} variant="secondary">
返回选择认证方式
</Button>
</div>
</div>
) : null}
{step === 'face' ? (
<div className="enterprise-face-panel">
<p>
<span>认证方式</span>
<strong>企业法人人脸识别认证</strong>
</p>
<h2>企业法人基本信息</h2>
<Input
label="* 企业法人姓名"
onChange={(event) => updateForm('legalPerson', event.target.value)}
placeholder="请填写企业法人姓名"
value={form.legalPerson}
/>
<Input
label="* 企业法人身份证号"
onChange={(event) => updateForm('legalPersonIdCard', event.target.value)}
placeholder="请填写企业法人身份证号"
value={form.legalPersonIdCard}
/>
<div className="enterprise-actions">
<Button onClick={() => setStep('method')} variant="secondary">
返回选择认证方式
</Button>
<Button onClick={() => setStep('faceScan')}>完成填写</Button>
</div>
</div>
) : null}
{step === 'faceScan' ? (
<div className="enterprise-face-panel">
<p>
<span>认证方式</span>
<strong>企业法人人脸识别认证</strong>
</p>
<h2>企业法人基本信息</h2>
<dl className="enterprise-legal-summary">
<div>
<dt>企业法人姓名</dt>
<dd>{form.legalPerson || '-'}</dd>
</div>
<div>
<dt>企业法人身份证号</dt>
<dd>{form.legalPersonIdCard || '-'}</dd>
</div>
</dl>
<div className="enterprise-qr-section">
<h2>扫码认证</h2>
<p>
为了验证您的身份,请使用支付宝扫码进行人脸识别,剩余有效时间:<em>5957</em>
</p>
<div className="enterprise-qr">二维码</div>
<span>完成扫描操作后,资料将提交至运营端审核。</span>
<div className="enterprise-actions enterprise-actions--center">
<Button onClick={() => setStep('face')} variant="secondary">
重新填写法人信息
</Button>
<Button disabled={submitting} onClick={submitCertification}>
{submitting ? '提交中...' : '提交审核'}
</Button>
</div>
</div>
</div>
) : null}
{step === 'pending' ? (
<div className="enterprise-result enterprise-result--pending">
<span>
<ShieldCheck size={70} />
</span>
<h2>认证资料已提交,等待运营审核</h2>
<p>
当前状态:运营端审核中。审核通过后将自动解锁短信发送、签名报备等能力;未通过时可根据驳回原因重新提交。
</p>
<dl>
<div>
<dt>企业名称:</dt>
<dd>{displayCompany}</dd>
</div>
<div>
<dt>提交时间:</dt>
<dd>{latestCertification?.submittedAt ?? '-'}</dd>
</div>
<div>
<dt>审核时效:</dt>
<dd>1 个工作日内</dd>
</div>
<div>
<dt>当前节点:</dt>
<dd>运营端资料审核</dd>
</div>
</dl>
<div className="enterprise-actions enterprise-actions--center">
<Button onClick={() => setStep('overview')} variant="secondary">
返回概览
</Button>
</div>
</div>
) : null}
{step === 'success' ? (
<div className="enterprise-result enterprise-result--success">
<span>
<Check size={70} />
</span>
<h2>认证审核通过</h2>
<dl>
<div>
<dt>企业名称:</dt>
<dd>{displayCompany}</dd>
</div>
<div>
<dt>统一社会信用代码:</dt>
<dd>{displayLicenseNo}</dd>
</div>
<div>
<dt>法定代表人:</dt>
<dd>{displayLegalPerson}</dd>
</div>
<div>
<dt>认证时间:</dt>
<dd>{latestCertification?.reviewedAt ?? latestCertification?.submittedAt ?? '-'}</dd>
</div>
<div>
<dt>通讯地址:</dt>
<dd>{displayAddress}</dd>
</div>
</dl>
<Button onClick={() => setStep('overview')} variant="secondary">
返回概览
</Button>
</div>
) : null}
{step === 'failed' ? (
<div className="enterprise-result enterprise-result--failed">
<span>!</span>
<h2>认证审核未通过</h2>
<p>驳回原因:{latestCertification?.rejectReason ?? '请根据运营端审核意见修改资料后重新提交。'}</p>
<button type="button" onClick={() => setStep('profile')}>
重新提交资料 <ChevronRight size={18} />
</button>
<div className="enterprise-actions enterprise-actions--center">
<Button onClick={() => setStep('profile')}>重新提交</Button>
<Button onClick={() => setStep('overview')} variant="secondary">
关闭页面
</Button>
</div>
</div>
) : null}
</div>
</section>
);
}