66 lines
2.5 KiB
JavaScript
66 lines
2.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Styles from './mobile.module.less';
|
|
import { Picker, Form, Input, Button } from 'antd-mobile';
|
|
export default function Render(props) {
|
|
const { methods, data } = props;
|
|
const { t, update, onConfirm } = methods;
|
|
const { oakFullpath, idState, name, idNumber, idCardType, idCardTypeArr, idStateStr, } = data;
|
|
const [open, setOpen] = useState(false);
|
|
const disabled = !idState || ['verified', 'verifying'].includes(idState);
|
|
return (<div className={Styles.pageBody}>
|
|
<div className={Styles.container}>
|
|
<Form layout="horizontal">
|
|
<Form.Item label={t('user:attr.name')} required>
|
|
<Input disabled={disabled} value={name} onChange={(val) => {
|
|
update({
|
|
name: val,
|
|
});
|
|
}} placeholder={t('please input name')}/>
|
|
</Form.Item>
|
|
<Form.Item label={t('user:attr.idCardType')} required>
|
|
<div onClick={disabled
|
|
?
|
|
undefined
|
|
: () => {
|
|
setOpen(true);
|
|
}}>
|
|
<Input value={idCardType
|
|
? t('user:v.idCardType.' + idCardType)
|
|
: ''} readOnly placeholder={t('please choose idCardType')}/>
|
|
</div>
|
|
|
|
<Picker columns={[idCardTypeArr]} visible={open} onClose={() => {
|
|
setOpen(false);
|
|
}} value={idCardType ? [idCardType] : undefined} onConfirm={(v) => {
|
|
const val = v[0];
|
|
if (idCardType === val) {
|
|
return;
|
|
}
|
|
update({
|
|
idCardType: v[0],
|
|
idNumber: '',
|
|
});
|
|
}}/>
|
|
</Form.Item>
|
|
<Form.Item label={t('user:attr.idNumber')} required>
|
|
<Input value={idNumber} disabled={!idCardType || disabled} onChange={(val) => {
|
|
update({
|
|
idNumber: val,
|
|
});
|
|
}} placeholder={t('please input idNumber')}/>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
|
|
{disabled ?
|
|
(<div className={Styles.idState}>
|
|
{idStateStr}
|
|
</div>) :
|
|
(<Button block color="primary" size="large" onClick={() => {
|
|
onConfirm();
|
|
}}>
|
|
{t('commit')}
|
|
</Button>)}
|
|
</div>);
|
|
}
|