优化身份证读取流程,增加档案信息验证及错误提示
This commit is contained in:
@@ -8,14 +8,17 @@ import semicircle from "../../assets/semicircle.png";
|
||||
import LongButton from "../../components/LongButton";
|
||||
import LongButtonLoading from "../../components/LongButtonLoading";
|
||||
import DecorLine from "../../components/DecorLine";
|
||||
import { getPatientInfo } from "../../api/hisApi";
|
||||
|
||||
const U1: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [reading, setReading] = useState(false);
|
||||
const [countdown, setCountdown] = useState(6);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const timerRef = useRef<number | null>(null);
|
||||
const intervalRef = useRef<number | null>(null);
|
||||
const errorTimerRef = useRef<number | null>(null);
|
||||
|
||||
// 实时监听身份证读取
|
||||
useEffect(() => {
|
||||
@@ -40,7 +43,7 @@ const U1: React.FC = () => {
|
||||
`Read IDCard success: ${payload.name} ${payload.id_card_no}`
|
||||
);
|
||||
|
||||
// 读到卡即跳转;清理倒计时
|
||||
// 清理倒计时
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
timerRef.current = null;
|
||||
@@ -49,9 +52,36 @@ const U1: React.FC = () => {
|
||||
clearInterval(intervalRef.current);
|
||||
intervalRef.current = null;
|
||||
}
|
||||
window.electronAPI.stopIdCardListen().catch(() => {});
|
||||
setReading(false);
|
||||
navigate("/u2");
|
||||
|
||||
// 先验证档案信息,查询到才跳转
|
||||
const idCardNo = payload.id_card_no;
|
||||
if (!idCardNo) {
|
||||
setErrorMsg("未读取到身份证号");
|
||||
setReading(false);
|
||||
window.electronAPI.stopIdCardListen().catch(() => {});
|
||||
return;
|
||||
}
|
||||
|
||||
getPatientInfo(idCardNo)
|
||||
.then((res) => {
|
||||
if (res.Status === 200 && res.Data) {
|
||||
// 查询成功,跳转到 u2
|
||||
window.electronAPI.stopIdCardListen().catch(() => {});
|
||||
setReading(false);
|
||||
navigate("/u2");
|
||||
} else {
|
||||
// 未查询到档案信息,显示错误提示,不跳转
|
||||
setErrorMsg("未查询到您的档案信息,请联系前台工作人员");
|
||||
setReading(false);
|
||||
window.electronAPI.stopIdCardListen().catch(() => {});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("getPatientInfo error", err);
|
||||
setErrorMsg("获取用户信息异常,请联系前台工作人员");
|
||||
setReading(false);
|
||||
window.electronAPI.stopIdCardListen().catch(() => {});
|
||||
});
|
||||
});
|
||||
|
||||
window.electronAPI.onIdCardError((e: any) => {
|
||||
@@ -64,13 +94,32 @@ const U1: React.FC = () => {
|
||||
window.electronAPI.removeIdCardListeners();
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||
if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
|
||||
};
|
||||
}, [navigate]);
|
||||
|
||||
// 错误信息 10 秒后自动消失
|
||||
useEffect(() => {
|
||||
if (errorMsg) {
|
||||
if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
|
||||
errorTimerRef.current = window.setTimeout(() => {
|
||||
setErrorMsg("");
|
||||
errorTimerRef.current = null;
|
||||
}, 10000);
|
||||
}
|
||||
return () => {
|
||||
if (errorTimerRef.current) {
|
||||
clearTimeout(errorTimerRef.current);
|
||||
errorTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [errorMsg]);
|
||||
|
||||
const handleStart = () => {
|
||||
if (reading) return; // 避免重复点击
|
||||
setReading(true);
|
||||
setCountdown(6);
|
||||
setErrorMsg(""); // 清空之前的错误信息
|
||||
|
||||
// 6 秒倒计时逻辑
|
||||
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||
@@ -109,7 +158,10 @@ const U1: React.FC = () => {
|
||||
</span>
|
||||
<DecorLine />
|
||||
<img alt="card reader" src={idcard} />
|
||||
<span className="u1-instruction">请放置身份证在读卡区域</span>
|
||||
<div className="u1-instruction-wrapper">
|
||||
<span className="u1-instruction">请放置身份证在读卡区域</span>
|
||||
{errorMsg && <span className="u1-error">{errorMsg}</span>}
|
||||
</div>
|
||||
<img className="u1-semicircle" alt="start button" src={semicircle} />
|
||||
{!reading && <LongButton text="开始签到" onClick={handleStart} />}
|
||||
{reading && (
|
||||
|
||||
Reference in New Issue
Block a user