使用接口

src/pages/UI6/UI6.tsx

@@ -1,12 +1,17 @@
-import React from "react";
+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 = () => {
+
+  // !
+  localStorage.setItem("selectedExamId", "100030906");
+
   const navigate = useNavigate();
 
   const handleBack = () => {
@@ -16,49 +21,48 @@ const UI6: React.FC = () => {
   const handleConfirm = () => {
     navigate("/UI7");
   };
-  
-  const testData = [
-    {
-      "department": "B超科室",
-      "project": ["甲状腺B超", "腹部B超" , "乳腺B超"]
-    },
-    {
-      "department": "血常规科室",
-      "project": ["血常规", "血型"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图"]
-    },
-    {
-      "department": "心电图科室",
-      "project": ["心电图", "心电图","心电图", "心电图","心电图", "心电图","心电图", "心电图","心电图", "心电图"]
+
+  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">
@@ -68,10 +72,10 @@ const UI6: React.FC = () => {
           <DecorLine />
 
           <span className="basic-paragraph">
-              张哈哈女士定制套餐
+              {localStorage.getItem("name")}{localStorage.getItem("gender") === "男" ? "先生" : "女士"}定制套餐
               <br />
               <br />
-              已帮您成功预约2022-02-219:00-9:30的体检，以下是体检套餐详情和价格。
+              已帮您成功预约 {PackageInfo.appointment_datetime} 的体检，以下是体检套餐详情和价格。
           </span>
 
           <div className="ui6-table-container">
@@ -83,11 +87,11 @@ const UI6: React.FC = () => {
                 </tr>
               </thead>
               <tbody>
-                {testData.map((item, index) => (
+                {ListData.map((item, index) => (
                   <tr key={index} className="ui6-table-row">
-                    <td className="ui6-table-dept-cell">{item.department}</td>
+                    <td className="ui6-table-dept-cell">{item.department_name}</td>
                     <td className="ui6-table-project-cell">
-                      {item.project.map((project, pIndex) => (
+                      {item.project_names.map((project: string, pIndex: number) => (
                         <div key={pIndex} className="ui6-project-item">
                           <span style={{ paddingLeft: 20 }}>{project}</span>
                         </div>
@@ -101,7 +105,7 @@ const UI6: React.FC = () => {
 
           <div className="basic-confirm-section">
             <BackButton text="返回" onClick={handleBack} />
-            <ConfirmButton text="签名" onClick={handleConfirm} />
+            <ConfirmButton text="确定" onClick={handleConfirm} />
           </div>
         </div>
       </div>