feat: 🎸 简历列表弹窗

src/pages/CompanyJobsPage/components/JobInfoModal/index.css

@@ -24,9 +24,14 @@
       background-color: #fff;
     }
   }
-
+  .empty-data-wrapper {
+    width: 100%;
+    min-height: 555px;
+    display: flex;
+  }
   .job-info-modal-user-resumes-list {
     width: 100%;
+    min-height: 555px;
     margin-top: 16px;
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* 每行两列 */

src/pages/CompanyJobsPage/components/JobInfoModal/index.jsx

@@ -1,24 +1,48 @@
 import { useState } from "react";
+import { useSelector } from "react-redux";
 import { Input } from "@arco-design/web-react";
 import Modal from "@/components/Modal";
-import { mockData } from "@/data/mockData";
+import InfiniteScroll from "@/components/InfiniteScroll";
 import ResumeInfoModal from "@/pages/CompanyJobsPage/components/ResumeInfoModal";
 import FILEICON from "@/assets/images/CompanyJobsPage/file_icon.png";
+import { getResumesList } from "@/services";
 import "./index.css";
 
 const InputSearch = Input.Search;
-const { userResumes } = mockData;
+const PAGE_SIZE = 10;
 
 export default ({ visible, onClose, data }) => {
-  console.log(data);
+  const studentInfo = useSelector((state) => state.student.studentInfo);
   const [resumeModalShow, setResumeModalShow] = useState(false);
   const [resumeInfoModalShow, setResumeInfoModalShow] = useState(false);
+  const [resumeList, setResumeList] = useState([]); // 简历列表
+  const [listPage, setListPage] = useState(1);
+  const [listHasMore, setListHasMore] = useState(true);
 
   const handleCloseModal = () => {
     setResumeModalShow(false);
     onClose();
   };
 
+  const queryResumeList = async () => {
+    const res = await getResumesList({
+      page: listPage,
+      pageSize: PAGE_SIZE,
+      studentId: studentInfo?.id,
+    });
+    if (res.success) {
+      setResumeList((prevList) => {
+        const newList = [...prevList, ...res.data];
+        if (res.total === newList?.length) {
+          setListHasMore(false);
+        } else {
+          setListPage((prevPage) => prevPage + 1);
+        }
+        return newList;
+      });
+    }
+  };
+
   // 点击立即投递
   const handleClickDeliverBtn = (e) => {
     e.stopPropagation();
@@ -53,36 +77,46 @@ export default ({ visible, onClose, data }) => {
                 searchButton
                 placeholder="搜索简历"
               />
-
-              <ul className="job-info-modal-user-resumes-list">
-                {userResumes.map((item) => (
-                  <li
-                    key={item.id}
-                    className="list-item"
-                    onClick={() => userResumesClick(item)}
-                  >
-                    <div className="list-item-info">
-                      <img src={FILEICON} className="file-icon" />
-                      <div className="file-info">
-                        <p className="file-info-targetPosition">
-                          {item.targetPosition}
-                        </p>
-                        {item?.skills?.length > 0 && (
-                          <p className="file-info-skills">
-                            {item?.skills?.join("/")}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                    <div
-                      className="info-btn"
-                      onClick={(e) => userResumesBtnClick(e, item)}
+              {
+                <InfiniteScroll
+                  loadMore={queryResumeList}
+                  hasMore={listHasMore}
+                  empty={resumeList.length === 0}
+                  className={`${
+                    resumeList.length
+                      ? "job-info-modal-user-resumes-list"
+                      : "empty-data-wrapper"
+                  }`}
+                >
+                  {resumeList.map((item) => (
+                    <li
+                      key={item.id}
+                      className="list-item"
+                      onClick={() => userResumesClick(item)}
                     >
-                      简历详情
-                    </div>
-                  </li>
-                ))}
-              </ul>
+                      <div className="list-item-info">
+                        <img src={FILEICON} className="file-icon" />
+                        <div className="file-info">
+                          <p className="file-info-targetPosition">
+                            {item.title}
+                          </p>
+                          {item?.skills?.length > 0 && (
+                            <p className="file-info-skills">
+                              {item?.skills?.join("/")}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                      <div
+                        className="info-btn"
+                        onClick={(e) => userResumesBtnClick(e, item)}
+                      >
+                        简历详情
+                      </div>
+                    </li>
+                  ))}
+                </InfiniteScroll>
+              }
             </>
           ) : (
             <>

src/pages/CompanyJobsPage/index.jsx

@@ -2,9 +2,10 @@ import { useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { mapJobList, mapInterviewList } from "@/utils/dataMapper";
+import InfiniteScroll from "@/components/InfiniteScroll";
+import toast from "@/components/Toast";
 import JobList from "./components/JobList";
 import { getJobsList, getInterviewsList } from "@/services";
-import InfiniteScroll from "@/components/InfiniteScroll";
 
 import "./index.css";
 const PAGE_SIZE = 10;
@@ -22,30 +23,28 @@ const CompanyJobsPage = () => {
 
   // 获取面试信息
   const fetchInterviewsData = async () => {
-    try {
-      if (studentInfo?.id) {
-        const res = await getInterviewsList({
-          page: interviewsPage,
-          pageSize: PAGE_SIZE,
-          studentId: studentInfo?.id,
-          status: "SCHEDULED",
+    if (studentInfo?.id) {
+      const res = await getInterviewsList({
+        page: interviewsPage,
+        pageSize: PAGE_SIZE,
+        studentId: studentInfo?.id,
+        status: "SCHEDULED",
+      });
+      if (res.success) {
+        const mappedInterviews = mapInterviewList(res.data || []);
+        setInterviews((prevList) => {
+          const newList = [...prevList, ...mappedInterviews];
+          if (res.total === newList?.length) {
+            setInterviewsHasMore(false);
+          } else {
+            setInterviewsPage((prevPage) => prevPage + 1);
+          }
+          return newList;
         });
-        if (res.success) {
-          const mappedInterviews = mapInterviewList(res.data || []);
-          setInterviews((prevList) => {
-            const newList = [...prevList, ...mappedInterviews];
-            if (res.total === newList?.length) {
-              setInterviewsHasMore(false);
-            } else {
-              setInterviewsPage((prevPage) => prevPage + 1);
-            }
-            return newList;
-          });
-        }
+      } else {
+        setInterviews([]);
+        toast.error(res.message);
       }
-    } catch (error) {
-      console.error("Failed to fetch data:", error);
-      setInterviews([]);
     }
   };
 

src/services/companyJobs.js

@@ -25,3 +25,19 @@ export async function getInterviewsList(params) {
     params,
   });
 }
+
+// 获取简历列表
+export async function getResumesList(params) {
+  return request({
+    url: `/api/resumes`,
+    method: "GET",
+    params: params,
+  });
+}
+// 获取简历详情
+export async function getResumesDetail(id) {
+  return request({
+    url: `/api/resumes/${id}`,
+    method: "GET",
+  });
+}

src/services/index.js

@@ -5,7 +5,13 @@ import {
   getClassRanking,
 } from "./dashboard";
 import { getProjectsList } from "./projectLibrary";
-import { getJobsList, getJobsDetail, getInterviewsList } from "./companyJobs";
+import {
+  getJobsList,
+  getJobsDetail,
+  getInterviewsList,
+  getResumesList,
+  getResumesDetail,
+} from "./companyJobs";
 import { getLoginStudentInfo } from "./global";
 import {
   getDashboardStatistics,
@@ -13,7 +19,7 @@ import {
   getClassRank,
   getMyRanking,
 } from "./personalProfile";
-import { getResumesList, getResumesDetail } from "./resumeInterview";
+import {} from "./resumeInterview";
 
 export {
   // 仪表盘相关

src/services/resumeInterview.js

@@ -1,17 +1 @@
 import request from "@/utils/request";
-
-// 获取简历列表
-export async function getResumesList(params) {
-  return request({
-    url: `/api/resumes`,
-    method: "GET",
-    params: params,
-  });
-}
-// 获取简历详情
-export async function getResumesDetail(id) {
-  return request({
-    url: `/api/resumes/${id}`,
-    method: "GET",
-  });
-}