113 lines
3.7 KiB
TypeScript
113 lines
3.7 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
||
import "./UI6.css";
|
||
import "../../assets/css/basic.css";
|
||
import { useNavigate } from "react-router-dom";
|
||
import BackButton from "../../components/BackButton";
|
||
import ConfirmButton from "../../components/ConfirmButton";
|
||
import DecorLine from "../../components/DecorLine";
|
||
import { getPackagItemDetail } from "../../api/hisApi";
|
||
|
||
const UI6: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
|
||
const handleBack = () => {
|
||
navigate(-1);
|
||
};
|
||
|
||
const handleConfirm = () => {
|
||
navigate("/UI7");
|
||
};
|
||
|
||
const [ListData, setListData] = useState<any[]>([]);
|
||
const [PackageInfo, setPackageInfo] = useState<any>({});
|
||
useEffect(() => {
|
||
getListData();
|
||
}, []);
|
||
|
||
|
||
const getListData = async () => {
|
||
const id_no = localStorage.getItem("lastIdCardNo");
|
||
if (!id_no) {
|
||
alert("请先输入身份证号");
|
||
return;
|
||
}
|
||
const res = await getPackagItemDetail(id_no as string);
|
||
if (res.Status === 200) {
|
||
// 处理数据：将 project_id 和 project_name 字符串分离为数组
|
||
const processedData = res.Data.listPackDetail.map((item: any) => {
|
||
// 将 project_id 字符串按中文顿号分割为数组
|
||
const project_ids = item.project_id
|
||
? item.project_id.split("、").map((id: string) => id.trim()).filter((id: string) => id)
|
||
: [];
|
||
|
||
// 将 project_name 字符串按中文顿号分割为数组
|
||
const project_names = item.project_name
|
||
? item.project_name.split("、").map((name: string) => name.trim()).filter((name: string) => name)
|
||
: [];
|
||
|
||
return {
|
||
...item,
|
||
project_ids,
|
||
project_names,
|
||
};
|
||
});
|
||
|
||
setListData(processedData);
|
||
setPackageInfo(res.Data.packagItemInfo);
|
||
} else {
|
||
alert(`获取列表数据失败: ${res.Message}`);
|
||
}
|
||
};
|
||
|
||
|
||
return (
|
||
<div className="basic-root">
|
||
<div className="basic-white-block">
|
||
<div className="basic-content">
|
||
<span className="basic-title">体检套餐确认</span>
|
||
<DecorLine />
|
||
|
||
<span className="basic-paragraph">
|
||
{localStorage.getItem("name")}{localStorage.getItem("gender") === "男" ? "先生" : "女士"}定制套餐
|
||
<br />
|
||
<br />
|
||
已帮您成功预约 {PackageInfo.appointment_datetime} 的体检，以下是体检套餐详情和价格。
|
||
</span>
|
||
|
||
<div className="ui6-table-container">
|
||
<table className="ui6-table">
|
||
<thead>
|
||
<tr>
|
||
<th className="ui6-table-header ui6-table-dept">科室</th>
|
||
<th className="ui6-table-header ui6-table-project">检查项目</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{ListData.map((item, index) => (
|
||
<tr key={index} className="ui6-table-row">
|
||
<td className="ui6-table-dept-cell">{item.department_name}</td>
|
||
<td className="ui6-table-project-cell">
|
||
{item.project_names.map((project: string, pIndex: number) => (
|
||
<div key={pIndex} className="ui6-project-item">
|
||
<span style={{ paddingLeft: 20 }}>{project}</span>
|
||
</div>
|
||
))}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="basic-confirm-section">
|
||
<BackButton text="返回" onClick={handleBack} />
|
||
<ConfirmButton text="确定" onClick={handleConfirm} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UI6;
|