优化身份证读取流程,增加档案信息验证及错误提示

This commit is contained in:
yuchenglong
2025-12-02 11:24:32 +08:00
parent 34a2e17f13
commit ac7badf745
2 changed files with 88 additions and 14 deletions

View File

@@ -18,6 +18,14 @@
line-height: 114px;
}
.u1-instruction-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20%;
}
.u1-instruction {
width: 374px;
height: 33px;
@@ -29,8 +37,24 @@
text-align: left;
white-space: nowrap;
line-height: 44px;
margin-bottom: 20%;
}
.u1-error {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 800px;
overflow-wrap: break-word;
color: rgba(255, 0, 0, 1);
font-size: 36px;
font-family: NotoSansCJKsc-Medium;
font-weight: 500;
text-align: center;
line-height: 48px;
white-space: normal;
}
.u1-decor-line {
margin-top: 3%;
margin-bottom: 3%;
@@ -39,8 +63,7 @@
display: flex;
height: 108px;
width: 594px;
background: url(../../assets/buttons/button.png)
100% no-repeat;
background: url(../../assets/buttons/button.png) 100% no-repeat;
background-size: 100% 100%;
align-items: center;
justify-content: center;
@@ -59,7 +82,6 @@
line-height: 49px;
}
.u1-semicircle {
position: absolute;
left: 27%;

View File

@@ -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;
}
// 先验证档案信息,查询到才跳转
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} />
<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 && (