/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-16 17:53:50
|
* @LastEditTime: 2023-08-03 15:22:59
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description:拍摄证件照回填和选择历史人口
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Modal, Button } from 'dingtalk-design-mobile';
|
import { idCardphoto, idCardTip } from '../../assets/img';
|
import UploadFile from '../UploadFile';
|
import { showToast } from '../../utils/utility';
|
|
const IdcardOCR = ({ data, OCRsuccessCallback }) => {
|
const history = useHistory();
|
const [visible, setVisible] = useState(false); //拍摄证件回填弹窗
|
|
function ConClick(type) {
|
if (type == 'idcardOcr') {
|
// todo
|
// showToast({ content: '该功能将于近期开放' });
|
setVisible(true);
|
} else if (type == 'hisPerson') {
|
history.push(`/hztGrid/person/hisPersonList`);
|
}
|
}
|
|
function visibleOnClick(type, v) {
|
setVisible(false);
|
}
|
|
function bottomOnclick(type) {
|
switch (type) {
|
case 'reset':
|
return setVisible(false);
|
case 'submit':
|
setVisible(false);
|
return;
|
case 'default':
|
return;
|
}
|
}
|
|
return (
|
<>
|
<div
|
className="idcard-ocr-main"
|
onClick={() => {
|
ConClick(data.type);
|
}}
|
>
|
<img src={data.bgImg} className="idcard-ocr-main-img" />
|
<div className="idcard-ocr-main-title">
|
<div className="idcard-ocr-main-title-top">{data.title}</div>
|
<div className="idcard-ocr-main-title-bottom">{data.contents}</div>
|
</div>
|
</div>
|
<Modal
|
className="idcard-ocr-main-modal-m"
|
style={{ width: '90%' }}
|
visible={visible}
|
title="拍摄证件回填"
|
onClose={() => () => visibleOnClick('', false)}
|
>
|
<div className="idcard-ocr-main-modal">
|
<span className="idcard-ocr-main-modal-space"></span>
|
<span>请拍摄身份证人像面</span>
|
</div>
|
<div className="idcard-ocr-main-modal-img">
|
<img src={idCardphoto} alt="" />
|
</div>
|
<div className="idcard-ocr-main-modal">
|
<span className="idcard-ocr-main-modal-space"></span>
|
<span>拍摄要求</span>
|
</div>
|
<div className="idcard-ocr-main-modal-img2">
|
<img src={idCardTip} alt="" />
|
</div>
|
<div className="modal-down-main-foot-button">
|
<div style={{ flex: 1 }}>
|
<UploadFile
|
onSuccessCallback={(e) => {
|
OCRsuccessCallback(e);
|
setVisible(false);
|
}}
|
OCRshow={true}
|
capture="camera"
|
>
|
<Button type="primary">立即拍摄</Button>
|
</UploadFile>
|
</div>
|
</div>
|
<div style={{ padding: '0 12px 24px 12px' }} className="modal-down-main-foot-button">
|
<Button
|
onClick={() => {
|
bottomOnclick('reset');
|
}}
|
style={{ flex: 1, marginRight: '8px' }}
|
>
|
暂不拍摄
|
</Button>
|
<div style={{ flex: 1, marginLeft: '8px' }}>
|
<UploadFile
|
onSuccessCallback={(e) => {
|
OCRsuccessCallback(e);
|
setVisible(false);
|
}}
|
OCRshow={true}
|
>
|
<Button>使用手机照片</Button>
|
</UploadFile>
|
</div>
|
</div>
|
</Modal>
|
</>
|
);
|
};
|
|
export default IdcardOCR;
|
