4.28 高质量运营
This commit is contained in:
104
src/pages/HighQualityOperation/JobStyleList.tsx
Normal file
104
src/pages/HighQualityOperation/JobStyleList.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './style.less';
|
||||
import { Input, List, Spin } from 'antd';
|
||||
import topic_activity_default from '@/assets/topic/topic_activity_default.jpg'
|
||||
import time_icon from '@/assets/topic/timeIcon.png'
|
||||
import { getImageUrl } from './utils';
|
||||
import { history } from 'umi';
|
||||
import { getHomeGraceful } from './Home/service';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
const JobStyleList: React.FC<{}> = () => {
|
||||
//graceful data
|
||||
const [gracefulList, setGracefulList] = useState<any[]>([]);
|
||||
//loading
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
//page
|
||||
const [page, setPage] = useState<number>(1);
|
||||
|
||||
//get graceful
|
||||
const getGracefulData = (value: string) => {
|
||||
setLoading(true);
|
||||
getHomeGraceful({ param: value }).then(async res => {
|
||||
if (res?.code == 200) {
|
||||
setGracefulList(res?.data);
|
||||
setPage(1);
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}
|
||||
//onclick
|
||||
const clickTitle = (data: any) => {
|
||||
history.push({ pathname: "/highQualityOperation/detail", state: { detail: data } });
|
||||
}
|
||||
//to home
|
||||
const toHome = () => {
|
||||
history.push("/highQualityOperation/home");
|
||||
}
|
||||
//to previous page
|
||||
const toPreviousPage = () => {
|
||||
setPage((page) => page - 1);
|
||||
}
|
||||
//to next page
|
||||
const toNextPage = () => {
|
||||
setPage((page) => page + 1);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getGracefulData('');
|
||||
}, [])
|
||||
return (
|
||||
<div className="h-page-container">
|
||||
<div className="top-banner">
|
||||
<div className="back-home">
|
||||
<span onClick={() => toHome()}>返回首页</span>
|
||||
{page > 1 && <span onClick={() => toPreviousPage()}>上一页</span>}
|
||||
{gracefulList.length != 0 && page < Math.ceil(gracefulList.length / 10) && <span onClick={() => toNextPage()}>下一页</span>}
|
||||
</div>
|
||||
</div>
|
||||
<Spin spinning={loading}>
|
||||
<div className="search">
|
||||
<span className="text"><span>工作风采</span></span>
|
||||
<div className="search-box">
|
||||
<Search
|
||||
placeholder="输入标题"
|
||||
allowClear
|
||||
enterButton="搜索"
|
||||
style={{ width: 322 }}
|
||||
onSearch={getGracefulData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-content">
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
pagination={{
|
||||
size: 'small',
|
||||
onChange: page => {
|
||||
setPage(page);
|
||||
},
|
||||
current: page,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSize: 10,
|
||||
}}
|
||||
dataSource={gracefulList}
|
||||
renderItem={item => (
|
||||
<List.Item>
|
||||
<div className="list-pic">
|
||||
<img src={getImageUrl(item.filePath, topic_activity_default)} />
|
||||
<p className="tit"><span onClick={() => clickTitle(item)}>{item.title}</span></p>
|
||||
<p className="detail">{item.secordTitle}</p>
|
||||
<span className="time"><img src={time_icon} />{item.createTime}</span>
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default JobStyleList;
|
Reference in New Issue
Block a user