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

import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Image, Select, Row, Col, Carousel, Card, List, Tag, Typography, Divider, Segmented, Anchor, Modal } from 'antd';
import { SearchOutlined, EllipsisOutlined, ArrowRightOutlined, EnvironmentOutlined, CaretUpOutlined, RightOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link } from 'umi';


import HomeNewJob from '@/components/Talent/Home/NewJob';
import HomeUrgentJob from '@/components/Talent/Home/UrgentJob';
import HomeCompany from '@/components/Talent/Home/Company';
import HomeHighJob from '@/components/Talent/Home/HighJob';
import HomeCampusJob from '@/components/Talent/Home/CampusJob';
import HomeProbation from '@/components/Talent/Home/Probation';
import HomeFamous from '@/components/Talent/Home/Famous';
import TalentHomeBanner from '@/components/Talent/Home/Banner';
import TalentHomeInformation from '@/components/Talent/Home/Information';
import TalentHomeSearch from '@/components/Talent/Home/Search';
import TalentHomeFair from '@/components/Talent/Home/Fair';



import { PostJobSearch } from '@/services/apis/post';

import LoginIndex from '@/components/Login/Index/index'





const HomePage: React.FC = ({ dispatch, dictModel }: any) => {
    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(3)
    const [positionList, setPositionList] = useState<any[]>([]);
    const [loginHeight, setLoginHeight] = useState<number>(475) // 获取登录的高度
    const [keywordName, setKeywordName] = useState<string>('');
    const [positionType, setPositionType] = useState<string>('热门职位')

    // 切换登录
    const [type, setType] = useState<string>('jobseeker')
    const [openPreview, setOpenPreview] = useState(false);


    // useEffect(() => {
    //     PostJobSearch({ page: 1, pagesize: 3, keyword: '文员' }).then(res => {
    //         setList(res.data.jobs)
    //     })
    // }, []);

    const getHeight = (value: number) => {
        setLoginHeight(value)
    }






    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#19be6e',
                    },
                    components: {
                        Button: {
                            colorText: '#19be6e'
                        },
                        Segmented: {
                            trackBg: '#f0f0f0',
                            itemSelectedColor: '#19be6e',
                            trackPadding: -16
                        }
                    }
                }}
            >
                {/* 固定 */}
                <Anchor
                    offsetTop={87}
                    style={{ position: 'fixed', bottom: 87, background: '#f5f5f5', paddingRight: 20, borderRadius: 10, zIndex: 99 }}
                    items={[
                        { title: (<><h3>知名企业</h3></>), key: 4, href: '#fomaus' },
                        { title: (<><h3>热门企业</h3></>), key: 2, href: '#company' },
                        { title: (<><h3>热门职位</h3></>), key: 1, href: '#newjob' },
                        { title: (<><h3>校园招聘</h3></>), key: 5, href: '#campusjob' },
                        { title: (<><h3>招聘会</h3></>), key: 3, href: '#fair' },
                        { title: (<><h3>见习基地</h3></>), key: 6, href: '#probation' },
                        { title: (<><h3>关于我们</h3></>), key: 7, href: '#about' },
                    ]}
                />
                <PageContainer header={{ title: ' ' }} style={{ background: '#ffffff' }}
                >
                    <Row gutter={[16, 16]}>
                        <Col span={localStorage.getItem('token') ? 24 : 18}>
                            <Space direction='vertical' size={20} style={{ width: '100%' }}>
                                <Flex justify='center' align='center'>
                                    <Space.Compact style={{ width: '80%' }}>
                                        <Input
                                            size='large'
                                            prefix={<SearchOutlined style={{ color: '#19be6e' }} />}
                                            placeholder="请输入关键词"
                                            allowClear
                                            value={keywordName}
                                            onChange={(e) => {
                                                setKeywordName(e.target.value)
                                            }}
                                        />
                                        <Link to={{ pathname: `/talent/search/job?keyword=${keywordName}` }}>
                                            <Button size='large' type='primary' style={{ width: 200 }}>搜索</Button>
                                        </Link>
                                    </Space.Compact>
                                </Flex>

                                <Flex justify='center' align='center'>
                                    <Space size={30} style={{ width: '70%' }}>
                                        <Link to={{ pathname: `/talent/search/job?keyword=客服` }} style={{ color: 'gray' }}>
                                            客服
                                        </Link>
                                        <Link to={{ pathname: `/talent/search/job?keyword=会计` }} style={{ color: 'gray' }}>
                                            会计
                                        </Link>
                                        <Link to={{ pathname: `/talent/search/job?keyword=销售` }} style={{ color: 'gray' }}>
                                            销售
                                        </Link>
                                        <Link to={{ pathname: `/talent/search/job?keyword=策划` }} style={{ color: 'gray' }}>
                                            策划
                                        </Link>
                                        <Link to={{ pathname: `/talent/search/job?keyword=外贸` }} style={{ color: 'gray' }}>
                                            外贸
                                        </Link>
                                        <Link to={{ pathname: `/talent/search/job?keyword=文员` }} style={{ color: 'gray' }}>
                                            文员
                                        </Link>
                                        <Link to={{ pathname: `/talent/search/job?keyword=行政` }} style={{ color: 'gray' }}>
                                            行政
                                        </Link>
                                    </Space>
                                </Flex>
                            </Space>
                        </Col>
                        {
                            !localStorage.getItem('token') && <>
                                <Col span={2}>
                                    <Button size='large' type='primary' style={{ width: '100%' }} onClick={() => {
                                        setType('jobseeker')
                                        setOpenPreview(true)
                                    }}>登录</Button>
                                </Col>
                                <Col span={4}>
                                    <Button size='large' type='primary' style={{ width: '100%' }} onClick={() => {
                                        setType('company')
                                        setOpenPreview(true)
                                    }}>发布一个职位</Button>
                                </Col>
                            </>

                        }

                    </Row>
                </PageContainer>

                {/* 未登录的登录页 */}
                <Flex vertical justify='center' align='center' style={{ width: '100%', marginBottom: 40, position: 'relative' }}>
                    <Flex vertical justify='center' align='center' style={{ background: '#ffffff', padding: '0 314px 40px', width: '100%' }}>
                        <Flex justify='space-bewteen' style={{ width: '100%' }}>
                            <Row gutter={[16, 16]}>
                                <Col span={16}>
                                    <TalentHomeBanner getHeight={getHeight}></TalentHomeBanner>
                                </Col>
                                <Col span={8} style={{ height: loginHeight, width: '100%' }}>
                                    <Flex justify='flex-end' style={{ height: loginHeight, width: '100%' }}>
                                        <TalentHomeInformation height={loginHeight}></TalentHomeInformation>
                                    </Flex>
                                </Col>
                            </Row >
                        </Flex>
                    </Flex>
                    {/* <div style={{ position: 'absolute', bottom: -50 }}>
                        <Flex justify='center' align='center' style={{ background: '#19be6e', width: '100%', borderRadius: 8 }}>
                            <Flex justify='space-between' align='center' style={{ borderRadius: 8, padding: '30px 20px' }}>
                                <TalentHomeSearch></TalentHomeSearch>
                            </Flex>
                        </Flex>
                    </div> */}
                </Flex>



                <PageContainer
                    header={{ title: '', }}
                    style={{ paddingTop: 0 }}
                >
                    <Space direction='vertical' size={0} style={{ minHeight: 800 }}>
                        <Flex justify='center' align='center' id='fomaus' style={{ width: '100%' }}>
                            <HomeFamous></HomeFamous>
                        </Flex>
                        <Flex justify='center' align='center' id='company' style={{ width: '100%' }}>
                            <HomeCompany></HomeCompany>
                        </Flex>
                        <Divider orientation="left" orientationMargin="0"><Typography.Title level={2}>职位推荐</Typography.Title></Divider>
                        <Flex justify='center' align='center' style={{ width: '100%' }} id='newjob'>
                            <Flex justify='space-between' align='center' style={{ width: '100%' }}>
                                <Space direction='vertical' size='small' style={{ width: '100%' }} >
                                    <Segmented
                                        size='large'
                                        block
                                        value={positionType}
                                        options={['热门职位', '急招职位', '高薪职位']}
                                        onChange={(value) => {
                                            setPositionType(value)
                                        }}
                                    />
                                    <div style={{ paddingTop: 20 }}>
                                        {positionType == '热门职位' && <><HomeNewJob></HomeNewJob></>}
                                        {positionType == '急招职位' && <><HomeUrgentJob></HomeUrgentJob></>}
                                        {positionType == '高薪职位' && <><HomeHighJob></HomeHighJob></>}
                                    </div>

                                </Space>
                            </Flex>
                        </Flex>
                        <Flex justify='center' align='center' id='campusjob' style={{ width: '100%' }}>
                            <HomeCampusJob></HomeCampusJob>
                        </Flex>
                        <Flex justify='center' align='center' id='fair' style={{ width: '100%' }}>
                            <TalentHomeFair></TalentHomeFair>
                        </Flex>
                        <Flex justify='center' align='center' id='probation' style={{ width: '100%' }}>
                            <HomeProbation></HomeProbation>
                        </Flex>
                    </Space>
                    {/* <Space direction='vertical' size={60} style={{ marginTop: 40 }}>
                        <div style={{ position: 'relative', width: '100%', height: 480, borderRadius: 8, background: '#00574B', zIndex: '99', }}>
                            <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, clipPath: 'circle(50% at right bottom)', backgroundImage: `url(${require('../../../../public/images/kcy.png')})`, backgroundSize: '100% 480px' }}>
                            </div>
                            <div style={{ position: 'absolute', top: '20%', right: '50%', bottom: 0, left: '10%', zIndex: 99 }}>
                                <Space direction='vertical' style={{ width: '100%' }}>
                                    <Space>
                                        <Typography.Title level={5} style={{ color: '#ffffff' }}>关于</Typography.Title>
                                        <Typography.Title level={1} style={{ color: '#ffffff' }}>科创园</Typography.Title>
                                    </Space>
                                    <Typography.Paragraph ellipsis={{ rows: 5, expandable: true, symbol: '详情' }} style={{ color: '#ffffff' }}>
                                        致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
                                    </Typography.Paragraph>
                                    <Button size='large' icon={<ArrowRightOutlined />} iconPosition='end'>进入科创园</Button>
                                </Space>
                            </div>
                        </div>

                        <Space direction='vertical' size='small' style={{ width: '100%' }} id='campusjob'>
                            <Flex justify='space-between' align='center'>
                                <Typography.Title level={2}>校园招聘</Typography.Title>
                                <EllipsisOutlined style={{ color: '#19be6e', fontSize: '24px' }} />
                            </Flex>
                            <HomeCampusJob></HomeCampusJob>
                        </Space>
                        <Space direction='vertical' size='small' style={{ width: '100%' }} id='campusjob'>
                            <Flex justify='space-between' align='center'>
                                <Typography.Title level={2}>见习基地</Typography.Title>
                                <EllipsisOutlined style={{ color: '#19be6e', fontSize: '24px' }} />
                            </Flex>
                            <HomeProbation></HomeProbation>
                        </Space>
                    </Space> */}
                </PageContainer >

                {/* 登录 */}
                <Modal
                    open={openPreview}
                    centered
                    footer={null}
                    onCancel={() => setOpenPreview(false)}
                    destroyOnClose
                    maskClosable={false}
                    style={{ minWidth: 540 }}
                >
                    <LoginIndex type={type} loginChangeStatus={(isLogin: boolean) => {
                        console.log(isLogin)
                        setOpenPreview(isLogin)
                    }}></LoginIndex>
                </Modal>
            </ConfigProvider >
        </>
    );
};


export default connect(({ dictModel, openModel }: any) => ({
    dictModel
}))(HomePage);