完整的教务系统前端项目 - 包含所有修复和9月份数据
This commit is contained in:
KQL
129
src/pages/CompanyJobsPage/components/JobList/index.css
Normal file
129
src/pages/CompanyJobsPage/components/JobList/index.css
Normal file
@@ -0,0 +1,129 @@
|
||||
.company-jobs-page-left-list {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 0;
|
||||
|
||||
.company-jobs-page-left-list-item {
|
||||
width: 528px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
border: 1px solid #e5e6eb;
|
||||
background-color: #e5f1ff;
|
||||
background-image: url("@/assets/images/CompanyJobsPage/jobs_page_left_list_item_bg.png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -6px;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
background-size: 100% 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.icon-fulltime {
|
||||
background-image: url("@/assets/images/CompanyJobsPage/fulltime_icon.png");
|
||||
}
|
||||
.icon-internship {
|
||||
background-image: url("@/assets/images/CompanyJobsPage/internship_icon.png");
|
||||
}
|
||||
|
||||
.company-jobs-info {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.company-jobs-info-position {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.company-jobs-info-tags {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 5px;
|
||||
|
||||
.company-jobs-info-tag {
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 5px;
|
||||
padding: 1px 8px;
|
||||
color: #4e5969;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.company-jobs-info-position-count {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: #ff3f43;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.company-jobs-btn-wrapper {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.company-jobs-info-position-salary {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #ff9a2d;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.company-jobs-btn {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background-color: #0077ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> i {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-image: url("@/assets/images/CompanyJobsPage/btn_icon.png");
|
||||
background-size: 100% 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
96
src/pages/CompanyJobsPage/components/JobList/index.jsx
Normal file
96
src/pages/CompanyJobsPage/components/JobList/index.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { useState } from "react";
|
||||
import toast from "@/components/Toast";
|
||||
import JobInfoModal from "../JobInfoModal";
|
||||
import { getJobsDetail } from "@/services";
|
||||
import { mapJob } from "@/utils/dataMapper";
|
||||
import "./index.css";
|
||||
|
||||
export default ({ className = "", data = [], backgroundColor }) => {
|
||||
const [jobInfoData, setJobInfoData] = useState(undefined);
|
||||
const [jobInfoModalVisible, setJobInfoModalVisible] = useState(false);
|
||||
const [directToResume, setDirectToResume] = useState(false);
|
||||
|
||||
const handleJobClick = async (e, item) => {
|
||||
e.stopPropagation();
|
||||
const res = await getJobsDetail(item.id);
|
||||
if (res.success) {
|
||||
// Mock数据已经是前端格式，不需要映射
|
||||
setJobInfoData(res.data);
|
||||
setDirectToResume(false); // 点击岗位条目，显示详情
|
||||
setJobInfoModalVisible(true);
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickJobInfoModalClose = () => {
|
||||
setJobInfoData(undefined);
|
||||
setJobInfoModalVisible(false);
|
||||
};
|
||||
|
||||
// 直接投递按钮点击事件
|
||||
const handleDeliverClick = async (e, item) => {
|
||||
e.stopPropagation(); // 阻止冒泡到li的点击事件
|
||||
|
||||
// 获取岗位详情然后打开投递弹窗
|
||||
const res = await getJobsDetail(item.id);
|
||||
if (res.success) {
|
||||
setJobInfoData(res.data);
|
||||
setDirectToResume(true); // 点击投递按钮，直接显示简历选择界面
|
||||
setJobInfoModalVisible(true);
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className={`company-jobs-page-left-list ${className}`}>
|
||||
{data?.map((item) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className="company-jobs-page-left-list-item"
|
||||
style={{ backgroundColor }}
|
||||
onClick={(e) => handleJobClick(e, item)}
|
||||
>
|
||||
<i className={`icon icon-${item?.jobType}`}></i>
|
||||
<div className="company-jobs-info">
|
||||
<p className="company-jobs-info-position">{item?.position}</p>
|
||||
<ul className="company-jobs-info-tags">
|
||||
{item?.tags?.map((tag, index) => (
|
||||
<li
|
||||
key={`${item.id}-tag-${index}`}
|
||||
className="company-jobs-info-tag"
|
||||
>
|
||||
{tag}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="company-jobs-info-position-count">
|
||||
岗位招聘数量仅剩{item?.remainingPositions}名
|
||||
</p>
|
||||
</div>
|
||||
<div className="company-jobs-btn-wrapper">
|
||||
<p className="company-jobs-info-position-salary">
|
||||
{item?.salary}
|
||||
</p>
|
||||
<button
|
||||
className="company-jobs-btn"
|
||||
onClick={(e) => handleDeliverClick(e, item)}
|
||||
>
|
||||
<i />
|
||||
<span>投递</span>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<JobInfoModal
|
||||
data={jobInfoData}
|
||||
visible={jobInfoModalVisible}
|
||||
onClose={onClickJobInfoModalClose}
|
||||
directToResume={directToResume}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user