jobwebsite/src/components/Talent/Home/NewJob/index.tsx

import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Image, Pagination, Row, Col, Divider, Tag, Card, Avatar, Typography } from 'antd';
import { EllipsisOutlined, FireOutlined, EnvironmentOutlined, RightOutlined, StarOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link } from 'umi';
import { PostJobSearch } from '@/services/apis/post';

import CommonJob from '@/components/Common/Job'
const HomeNewJob: 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)

    useEffect(() => {
        PostJobSearch({ page: 1, pagesize: 6 }).then(res => {
            setList(res.data.jobs)
        })
    }, []);
    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#19be6e',
                    },
                    components: {
                        Button: {
                            colorText: '#19be6e'
                        }
                    }
                }}
            >

                <Space direction='vertical' size={20} style={{ width: '1152px' }}>
                    {/* <Flex justify='center' align='center'>
                        <Typography.Title level={2}>热门职位</Typography.Title>
                    </Flex> */}
                    {/* <Divider orientation="left" orientationMargin="0"><Typography.Title level={2}>热门职位</Typography.Title></Divider> */}
                    <Row gutter={[10, 10]}>
                        {
                            list.length > 0 && list.map((item: any, index: number) => (
                                <>
                                    <Col span={24}>
                                        <CommonJob item={item}></CommonJob>
                                    </Col>
                                </>
                            ))
                        }
                    </Row>
                    <Flex justify='center' align='center'>
                        <Space>
                            <Link to={{ pathname: '/talent/search' }}>
                                <Button icon={<RightOutlined />} iconPosition='end'>更多职位</Button>
                            </Link>
                        </Space>
                    </Flex>
                </Space>
            </ConfigProvider >

        </>
    );
};

export default HomeNewJob;




{/* <ProList
                                        ghost
                                        grid={{ gutter: 20, column: 2 }}
                                        rowKey="id"
                                        dataSource={list}
                                        request={async (params = {} as Record<string, any>) =>
                                            PostJobSearch({
                                                page: 1,
                                                pagesize: 2,
                                                sort: 'id',
                                                sortby: 'desc',
                                            }).then(res => {
                                                setList(res.data.jobs)
                                                setTotal(res.data.total)
                                            })
                                        }
                                        showActions="hover"
                                        metas={{
                                            title: {
                                                dataIndex: 'name'
                                            },
                                            subTitle: {

                                            },
                                            actions: {
                                                render: () => [<StarOutlined />]
                                            },
                                            content: {
                                                render: (text, row) => {
                                                    return (
                                                        <>
                                                            <Space direction='vertical' style={{ marginBottom: 10 }}>
                                                                <Space size={4}>
                                                                    <Tag>
                                                                        {row.experience_text ? row.experience_text : '经验不限'}
                                                                    </Tag>
                                                                    <Tag>
                                                                        {row.school_degree_text ? row.school_degree_text : '学历不限'}
                                                                    </Tag>
                                                                    <Tag>
                                                                        {row.profelevel_text ? '职称不限' : '职称不限'}
                                                                    </Tag>
                                                                </Space>
                                                                <Space size={10}>
                                                                    <Avatar src="/images/onlylogo.jpg" style={{ width: 48, height: 48 }} />
                                                                    <Space direction='vertical' style={{ height: 48 }}>
                                                                        <Link to='/'>{row.full_name}</Link>
                                                                        <div style={{fontSize: 12}}>{row.locations ? row.locations[0].name : '未知地址'}</div>
                                                                    </Space>
                                                                </Space>
                                                            </Space>

                                                        </>
                                                    )
                                                }
                                            }
                                        }}
                                    /> */}