68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import React, { useState, useEffect, useCallback } from "react";
|
||
import "./UI9.css";
|
||
import { useNavigate } from "react-router-dom";
|
||
import DecorLine from "../../components/DecorLine";
|
||
|
||
import BackButton from "../../components/BackButton";
|
||
import ConfirmButton from "../../components/ConfirmButton";
|
||
import success from "../../assets/success.png";
|
||
import UI9A from "../../assets/ui9A.png";
|
||
import UI9B from "../../assets/ui9B.png";
|
||
const UI9: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
// 是否认证成功
|
||
const isAuthenticated = false;
|
||
const handleBack = () => {
|
||
navigate(-1);
|
||
};
|
||
|
||
const handleConfirm = useCallback(() => {
|
||
localStorage.removeItem("selectedExamId");
|
||
localStorage.removeItem("lastIdCardNo");
|
||
navigate("/");
|
||
}, [navigate]);
|
||
|
||
const [countdown, setCountdown] = useState(10);
|
||
const [backTime, setBackTime] = useState("确认(10S)");
|
||
|
||
useEffect(() => {
|
||
if (countdown > 0) {
|
||
setBackTime(`确认(${countdown}S)`);
|
||
const timer = setTimeout(() => setCountdown((prev) => prev - 1), 1000);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
if (countdown <= 0) {
|
||
navigate("/");
|
||
return;
|
||
}
|
||
setBackTime("确认");
|
||
}, [countdown, navigate]);
|
||
|
||
return (
|
||
<div className="ui9-root">
|
||
<span className="ui9-title">太平VIP客户认证</span>
|
||
<DecorLine />
|
||
{isAuthenticated ? (
|
||
<>
|
||
<span className="ui9-text">认证成功</span>
|
||
<img className="ui9-success-img" src={success} alt="success" />
|
||
</>
|
||
) : (
|
||
<>
|
||
<span className="ui9-text">一对一专属服务</span>
|
||
<img className="ui9-vip-img" src={UI9A} alt="vip" />
|
||
{/* 认证二维码 */}
|
||
<img className="ui9-qrcode" src={UI9B} alt="二维码位置" />
|
||
<span className="ui9-instruction">如您体检方面有任何问题，可以联系咨询企业微信客服</span>
|
||
</>
|
||
)}
|
||
<div className="ui9-confirm-section">
|
||
<BackButton text="返回" onClick={handleBack} />
|
||
<ConfirmButton text={backTime} onClick={handleConfirm} />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UI9;
|