优化身份证读取流程,增加档案信息验证及错误提示
This commit is contained in:
@@ -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%;
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user