86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import React from "react";
|
||
import "./u4.css";
|
||
import { useNavigate } from "react-router-dom";
|
||
import DecorLine from "../../components/DecorLine";
|
||
import LongButton from "../../components/LongButton";
|
||
import radio0 from "../../assets/radio-0.png";
|
||
import radio1 from "../../assets/radio-1.png";
|
||
interface testType {
|
||
id: number;
|
||
title: string;
|
||
desc: string;
|
||
taboo: string;
|
||
}
|
||
|
||
const U4: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const [test, setTest] = React.useState<testType[]>([]);
|
||
const handleConfirm = () => {
|
||
navigate("/UI6");
|
||
};
|
||
React.useEffect(() => {
|
||
setTest([
|
||
{
|
||
id: 1,
|
||
title: "乳腺 B 超",
|
||
desc: "适合 40 岁",
|
||
taboo: "无特别限制",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "乳腺钼靶",
|
||
desc: "适合40岁以上",
|
||
taboo: "孕期、哺乳期",
|
||
},
|
||
]);
|
||
}, []);
|
||
const [selectedId, setSelectedId] = React.useState<number | null>(1);
|
||
|
||
React.useEffect(() => {
|
||
console.log("选择的项目", selectedId);
|
||
}, [selectedId]);
|
||
return (
|
||
<div className="u4-root">
|
||
<span className="u4-title">请确认体检选项</span>
|
||
<DecorLine />
|
||
|
||
<div className="u4-card-grid">
|
||
{test.map((t) => (
|
||
<div
|
||
key={t.id}
|
||
className="u4-card"
|
||
onClick={() => setSelectedId(t.id)}
|
||
>
|
||
<div className="u4-card-header">
|
||
<img
|
||
className={
|
||
"u4-radio " + (selectedId === t.id ? "selected" : "")
|
||
}
|
||
src={selectedId === t.id ? radio1 : radio0}
|
||
alt={selectedId === t.id ? "已选" : "未选"}
|
||
/>
|
||
<div className="u4-card-title">{t.title}</div>
|
||
</div>
|
||
|
||
<div className="u4-card-body">
|
||
<div className="u4-detail-row">
|
||
<div className="u4-detail-bar" />
|
||
<div className="u4-detail-text">{t.desc}</div>
|
||
</div>
|
||
<div className="u4-detail-row">
|
||
<div className="u4-detail-bar" />
|
||
<div className="u4-detail-text">禁忌：{t.taboo}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<span className="u4-subtitle">请根据自身状态选择合适的项目</span>
|
||
|
||
<LongButton text="确认选择" onClick={handleConfirm} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default U4;
|