jobwebsite/src/pages/Talent/Fair/index.tsx

import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Image, Tooltip, Row, Col, Pagination, Tag, Card, Affix, Typography, Anchor } from 'antd';
import { SearchOutlined, LikeOutlined, EnvironmentOutlined, FieldTimeOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link } from 'umi';
import { Imageprefix } from '@/constants';


import { GetRecruitmentList } from '@/services/apis/fair';
import EmptyResult from '@/components/Common/EmptyResult'

const HomePage: React.FC = () => {
    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(12)
    const [keyword, setKeyword] = useState<string>('')

    useEffect(() => {
        GetRecruitmentList({ page: 1, pagesize: 12, sortby: 'desc' }).then(res => {
            setList(res.data.recruitments)
            setTotal(res.data.total)
        })
    }, []);



    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#19be6e',
                    },
                    components: {
                        Button: {
                            colorText: '#19be6e'
                        }
                    }
                }}
            >
                <PageContainer
                    header={{ title: '', }}
                    style={{ minHeight: 1000 }}
                >
                    <Flex justify='center' align='center' style={{ marginBottom: '40px' }}>
                        <Input
                            size='large'
                            prefix={<SearchOutlined style={{ color: '#19be6e' }} />}
                            placeholder="请输入要搜索的招聘会" allowClear onBlur={(e) => {
                                setKeyword(e.target.value)
                            }} addonAfter={
                                <>
                                    <Button type='text' onClick={() => {
                                        GetRecruitmentList({ page: 1, pagesize: 12, sortby: 'desc', keyword: keyword }).then(res => {
                                            setList(res.data.recruitments)
                                            setTotal(res.data.total)
                                        })
                                    }}>开始搜索</Button>
                                </>
                            } />
                    </Flex>
                    <Row gutter={[20, 20]}>
                        {
                            list.length > 0 && list.map((item: any, index: number) => (
                                <>
                                    <Col span={6}>
                                        <Link to={{ pathname: `/talent/fair/detail?id=${item.id}` }} target="_blank">
                                            <Flex vertical align='center' justify='center' style={{ background: '#fff', borderRadius: '4px' }}>
                                                <div style={{
                                                    width: '100%',
                                                    position: 'relative',
                                                    paddingTop: '56.25%', /* 16:9 的比例 */
                                                    overflow: 'hidden'
                                                }}>
                                                    <img src={item.photo ? `${Imageprefix}${item.photo}` : '/images/logo.jpg'} style={{
                                                        position: 'absolute',
                                                        top: 0,
                                                        left: 0,
                                                        width: '100%',
                                                        height: '100%',
                                                        borderRadius: '8px 8px 0 0'
                                                    }} />
                                                </div>
                                                <Typography.Paragraph
                                                    ellipsis={{ rows: 2 }}
                                                    style={{ fontSize: 16, fontWeight: 'bold', padding: '0 16px', marginTop: 8, minHeight: 50, width: '100%' }}
                                                >
                                                    {item.title}
                                                </Typography.Paragraph>
                                                <Typography.Paragraph
                                                    ellipsis={{ rows: 1 }}
                                                    style={{ fontSize: 12, color: 'gray', padding: '0 16px', whiteSpace: 'nowrap', width: '100%' }}
                                                >
                                                    <FieldTimeOutlined />   {item.open_date} {item.close_date ? <>至{item.close_date}</> : ''}
                                                </Typography.Paragraph>
                                                <Typography.Paragraph
                                                    ellipsis={{ rows: 1 }}
                                                    style={{ fontSize: 12, color: 'gray', padding: '0 16px', whiteSpace: 'nowrap', width: '100%' }}
                                                >
                                                    <EnvironmentOutlined />   {item.address}
                                                </Typography.Paragraph>
                                            </Flex >
                                        </Link>

                                    </Col >
                                </>
                            ))
                        }
                    </Row>
                    {
                        !list || list.length == 0 && <EmptyResult description="没有找到符合条件的招聘会" />
                    }
                    <Flex justify='center' align='center' style={{ margin: '40px 0' }}>
                        <Pagination
                            hideOnSinglePage
                            total={total}
                            showTotal={(total) => `总共${total}条`}
                            current={page}
                            pageSize={pageSize}
                            pageSizeOptions={['12', '24', '36']}
                            onChange={(page, pageSize) => {
                                setPage(page)
                                setPageSize(pageSize)
                                GetRecruitmentList({ page: page, pagesize: pageSize, sortby: 'desc', keyword: keyword ? keyword : '' }).then(res => {
                                    setList(res.data.recruitments)
                                    setTotal(res.data.total)
                                })
                            }}
                        />
                    </Flex>
                </PageContainer >

            </ConfigProvider >
        </>
    );
};

export default HomePage;