280 lines
12 KiB
TypeScript
280 lines
12 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
AlertCircle,
|
|
Building2,
|
|
Check,
|
|
ChevronRight,
|
|
CreditCard,
|
|
Landmark,
|
|
ShieldCheck,
|
|
Upload,
|
|
UserCheck,
|
|
} from 'lucide-react';
|
|
import { Button, Input, Select, Textarea } from '@/components/ui';
|
|
|
|
type AuthStep = 'overview' | 'profile' | 'method' | 'recharge' | 'face' | 'faceScan' | 'success' | 'failed';
|
|
type AuthMethod = 'face' | 'recharge';
|
|
|
|
const companyInfo = {
|
|
name: '上海闪联九玖信息通信技术有限公司',
|
|
code: 'XXXXXXXXXX',
|
|
legalPerson: '张三',
|
|
certifiedAt: '2022年07月09日 13:12:01',
|
|
address: '上海XXX区XX路XX号',
|
|
};
|
|
|
|
function UploadPanel() {
|
|
return (
|
|
<div className="enterprise-upload">
|
|
<Upload size={38} />
|
|
<strong>点击上传</strong>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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({ onCertified }: { onCertified: () => void }) {
|
|
return (
|
|
<div className="system-page-toolbar">
|
|
<div className="sms-send-title">
|
|
<span className="sms-send-title__icon"><ShieldCheck size={22} /></span>
|
|
<h1>企业认证</h1>
|
|
</div>
|
|
<Button onClick={onCertified} variant="secondary">设为已认证（测试）</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ClientEnterpriseAuthPage() {
|
|
const [step, setStep] = useState<AuthStep>('overview');
|
|
const [method, setMethod] = useState<AuthMethod>('face');
|
|
|
|
const currentStep = step === 'profile' ? 1 : step === 'method' ? 2 : step === 'recharge' || step === 'face' || step === 'faceScan' ? 3 : step === 'success' || step === 'failed' ? 4 : 1;
|
|
|
|
if (step === 'overview') {
|
|
return (
|
|
<section className="page-stack enterprise-page">
|
|
<AuthHeader onCertified={() => setStep('success')} />
|
|
|
|
<div className="surface enterprise-status-card">
|
|
<strong>您还未进行企业认证</strong>
|
|
<button type="button" onClick={() => setStep('profile')}>企业认证 ></button>
|
|
</div>
|
|
|
|
<div className="surface enterprise-info-card">
|
|
<dl>
|
|
<div><dt>企业名称：</dt><dd>未知</dd></div>
|
|
<div><dt>认证时间：</dt><dd>未知</dd></div>
|
|
<div><dt>统一社会信用代码：</dt><dd>未知</dd></div>
|
|
<div><dt>通讯地址：</dt><dd>未知</dd></div>
|
|
<div><dt>法定代表人：</dt><dd>未知</dd></div>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="page-stack enterprise-page">
|
|
<h1 className="enterprise-page-title">企业认证</h1>
|
|
|
|
<div className="surface enterprise-flow-card">
|
|
<EnterpriseStepper current={currentStep} />
|
|
|
|
{step === 'profile' ? (
|
|
<div className="enterprise-form-panel">
|
|
<label className="enterprise-required">营业执照</label>
|
|
<UploadPanel />
|
|
<p className="enterprise-help">请上传电子版营业执照，JPG或PNG格式，大小不超过5M</p>
|
|
|
|
<Input label="* 企业名称" placeholder="请填写企业全称" hint="请严格按照营业执照上的企业名称进行填写" />
|
|
<Input label="* 统一社会信用代码/其他组织机构代码" placeholder="请填写统一社会信用代码（若无请填写其他组织机构代码）" />
|
|
|
|
<div className="enterprise-address-selects">
|
|
<span>* 通讯地址</span>
|
|
<div>
|
|
<Select
|
|
options={[
|
|
{ label: '请选择省/直辖市', value: '' },
|
|
{ label: '上海市', value: 'shanghai' },
|
|
{ label: '北京市', value: 'beijing' },
|
|
]}
|
|
defaultValue=""
|
|
/>
|
|
<Select
|
|
options={[
|
|
{ label: '请选择', value: '' },
|
|
{ label: '浦东新区', value: 'pudong' },
|
|
{ label: '徐汇区', value: 'xuhui' },
|
|
]}
|
|
defaultValue=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Textarea placeholder="请填写详细的通讯地址，可与证件上的地址不一致" rows={5} />
|
|
|
|
<p className="enterprise-form-note">为方便沟通企业进展情况，需补充联系人（法人或员工都可）信息</p>
|
|
<Input label="* 企业联系人姓名" placeholder="请填写企业联系人姓名" />
|
|
<Input label="* 企业联系人身份证号" placeholder="请填写企业联系人身份证号" />
|
|
<Input label="* 企业联系人手机号" placeholder="请填写企业联系人手机号" />
|
|
<Input label="企业联系人邮箱" placeholder="请填写企业联系人邮箱" />
|
|
|
|
<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>XXXXXXX公司</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 onClick={() => setStep('success')}>确认并充值</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="* 企业法人姓名" placeholder="请填写企业法人姓名" />
|
|
<Input label="* 企业法人身份证号" placeholder="请填写企业法人身份证号" />
|
|
|
|
<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>张三</dd></div>
|
|
<div><dt>企业法人身份证号</dt><dd>162xxxxxxxxxxxxx</dd></div>
|
|
</dl>
|
|
|
|
<div className="enterprise-qr-section">
|
|
<h2>扫码认证</h2>
|
|
<p>为了验证您的身份，请使用支付宝扫码进行人脸识别，剩余有效时间：<em>59分57秒</em></p>
|
|
<div className="enterprise-qr">二维码</div>
|
|
<span>完成扫描操作后，实名将立即成功</span>
|
|
<div className="enterprise-actions enterprise-actions--center">
|
|
<Button onClick={() => setStep('face')} variant="secondary">重新填写法人信息</Button>
|
|
<Button onClick={() => setStep('success')} className="enterprise-success-test">测试：认证成功</Button>
|
|
<Button onClick={() => setStep('failed')} variant="danger">测试：认证失败</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{step === 'success' ? (
|
|
<div className="enterprise-result enterprise-result--success">
|
|
<span><Check size={70} /></span>
|
|
<h2>恭喜您，认证成功！</h2>
|
|
<dl>
|
|
<div><dt>企业名称：</dt><dd>{companyInfo.name}</dd></div>
|
|
<div><dt>统一社会信用代码：</dt><dd>{companyInfo.code}</dd></div>
|
|
<div><dt>法定代表人：</dt><dd>{companyInfo.legalPerson}</dd></div>
|
|
<div><dt>认证时间：</dt><dd>{companyInfo.certifiedAt}</dd></div>
|
|
<div><dt>通讯地址：</dt><dd>{companyInfo.address}</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>相同方式认证时限倒计时：</p>
|
|
<strong>2天23小时59分</strong>
|
|
<button type="button" onClick={() => setStep('method')}>选其他认证方式 <ChevronRight size={18} /></button>
|
|
<div className="enterprise-actions enterprise-actions--center">
|
|
<Button onClick={() => setStep('method')} variant="secondary">选择其他认证方式</Button>
|
|
<Button onClick={() => setStep('overview')} variant="secondary">关闭页面</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|