fe_portal_frontend/src/pages/index/index.tsx

import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Tabs, Table, Button, Space } from 'antd';
import { useIntl, Link, history, connect } from 'umi';
import './index.less';
import IconFont from '@/components/IconFont/IconFont';
import Search from '../announce/Search';
import type { SearchFormData } from '../announce/Search';
// 获取友情链接
import { getCoscoPortalsLinksFriendshipConnections } from '@/servers/api';
// 获取关于我们
import { getAboutUs } from '@/servers/api/about';
// 获取通知公告
import { getNoticeList } from '@/servers/api/notice';
import { filterHtmlTag } from '@/utils/utils';
const IndexPage: React.FC<any> = ({ user }) => {
  const token = user.token;
  const intl = useIntl();
  const [noticeLoading, setNoticeLoading] = useState(false);
  // 友情链接
  const [friendshipConnections, setFriendshipConnections] = useState<API.CoscoPortalsLinks[]>([]);
  // 关于我们
  const [aboutUs, setAboutUs] = useState<API.AboutUsData>({});
  // 通知公告
  const [noticeList, setNoticeList] = useState<API.NoticeRecord[]>([]);
  const typeList = [
    {
      key: '1',
      label: intl.formatMessage({ id: '采购需求公示' }),
    },
    {
      key: '2',
      label: intl.formatMessage({ id: '招标采购公告' }),
    },
    {
      key: '3',
      label: intl.formatMessage({ id: '非招标采购公告' }),
    },
    {
      key: '4',
      label: intl.formatMessage({ id: '资格预审公告' }),
    },
    {
      key: '5',
      label: intl.formatMessage({ id: '招募公告' }),
    },
    {
      key: '6',
      label: intl.formatMessage({ id: '变更公告' }),
    },
    {
      key: '7',
      label: intl.formatMessage({ id: '中标(中选)候选人公示' }),
    },
    {
      key: '8',
      label: intl.formatMessage({ id: '中标(中选)结果公示' }),
    },
    {
      key: '9',
      label: intl.formatMessage({ id: '采购失败(流标)公告' }),
    },
  ];
  //tab 切换事件
  const tabChange = (item: any) => {
    console.log(item);
  };
  const [tableLoading, setTableLoading] = useState(false);
  const dataSource = [
    {
      key: '1',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '2',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '3',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
    {
      key: '4',
      title: '中远海运空运北方物流基地标识制作及安装服务',
      address: '西湖区湖底公园1号',
      date: '2025年01月23日',
      lastDate: '剩余3天4小时',
    },
  ];

  const columns = [
    {
      title: '项目所在地',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '公告标题',
      dataIndex: 'title',
      key: 'title',
      render: (text: string, record) => (
        <Link
          to={{
            pathname: '/announce/announceInfo',
            search: '?id=' + record.id,
          }}
        >
          {text}
        </Link>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '文件购买截止时间',
      dataIndex: 'lastDate',
      key: 'lastDate',
      render: (text: string) => <span className="lastDate">{text}</span>,
    },
  ];

  useEffect(() => {
    // 友情链接
    getCoscoPortalsLinksFriendshipConnections().then((res) => {
      setFriendshipConnections(res.data);
    });
    // 关于我们
    getAboutUs().then((res) => {
      setAboutUs(res.data);
    });
    // 通知公告
    getNoticeList({
      pageNo: '1',
      pageSize: '4',
    }).then((res) => {
      setNoticeList(res.data.records);
    });
  }, []);

  const toSystem = (type: string) => {
    console.log(type);
    history.push({
      pathname: '/login',
      query: {
        type: type,
      },
    });
  };

  const toRegister = (type: string) => {
    window.location.href = `${REGISTER_URL}/${type}?redirect=${encodeURIComponent(window.location.href)}`;
    // history.push({
    //   pathname: '/register/supplier',
    //   query: {
    //     type: type,
    //   },
    // });
    console.log(type);
  };

  const [searchFormData, setSearchFormData] = useState<SearchFormData>({
    searchKeyword: '',
    announceType: '全部',
    projectUnit: '',
    projectLocation: '中国',
    publishTime: '不限',
    projectType: '全部',
    currentProvince: '全部',
  });
  const handleFormChange = (formData: SearchFormData) => {
    setSearchFormData(formData);
  };
  const handleSearch = (formData: SearchFormData) => {
    console.log(formData);
  };

  return (
    <div>
      <img className="banner" src={require('@/assets/img/banner.jpg')} alt="" />
      {/* 通知列表 */}
      <div className="noticeList layout-content-main">
        <div className="noticeName">通知公告</div>
        {noticeList.map((item) => (
          <div className="noticeItem" key={item.id}>
            <div className="cardTitle">
              <span
                className="cardTitleText"
                onClick={() => {
                  history.push({
                    pathname: '/announce/announceInfo',
                    search: '?id=' + item.id,
                  });
                }}
              >
                {item.title}
              </span>
              <span className="cardTitleTime">{item.publishTime}</span>
            </div>
            <p className="cardContent" dangerouslySetInnerHTML={{ __html: item.content }} />
          </div>
        ))}
      </div>
      <div className="loginType">
        <div className="layout-content-main">
          <Row gutter={20}>
            <Col span={8}>
              <div className="loginTypeItem">
                <img src={require('@/assets/img/loginType1.png')} alt="" />
                <div className="loginTypeItemTitle">供应商入口</div>
                <div className="loginTypeItemContent">
                  供应商注册、投标、合同管理、结算等全流程服务
                </div>
                <div className="btns">
                  <Button type="primary" onClick={() => toSystem('supplier')}>
                    立即进入
                  </Button>
                  <Button type="primary" ghost onClick={() => toRegister('supplier')}>
                    立即注册
                  </Button>
                </div>
              </div>
            </Col>
            <Col span={8}>
              <div className="loginTypeItem">
                <img src={require('@/assets/img/loginType2.png')} alt="" />
                <div className="loginTypeItemTitle">采购专家入口</div>
                <div className="loginTypeItemContent">
                  采购需求发布、评审、合同签订、供应商管理等服务
                </div>
                <div className="btns">
                  <Button type="primary" ghost onClick={() => toSystem('expert')}>
                    立即进入
                  </Button>
                  <Button type="primary" ghost onClick={() => toRegister('expert')}>
                    立即注册
                  </Button>
                </div>
              </div>
            </Col>
            <Col span={8}>
              <div className="loginTypeItem">
                <img src={require('@/assets/img/loginType3.png')} alt="" />
                <div className="loginTypeItemTitle">招标代理入口</div>
                <div className="loginTypeItemContent">
                  招标文件编制、公告发布、开标评标等专业服务
                </div>
                <div className="btns">
                  <Button type="primary" ghost onClick={() => toSystem('agent')}>
                    立即进入
                  </Button>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>

      <div className="layout-content-main announce">
        <Row gutter={40}>
          <Col span={5}>
            <div className="types bg">
              <div className="announceTitle">采购类型</div>
              {typeList.map((item) => (
                <div
                  className={`typeItem ${item.key === '1' ? 'active' : ''}`}
                  key={item.key}
                  onClick={() => {
                    tabChange(item);
                  }}
                >
                  {item.label}
                </div>
              ))}
            </div>
          </Col>
          <Col span={19}>
            <div className="search bg">
              <Search
                isShowAnnounceType={false}
                isShowSearch={false}
                isShowProjectUnit={false}
                initialValues={searchFormData}
                onChange={handleFormChange}
                onSearch={handleSearch}
              />
              <Table
                loading={tableLoading}
                dataSource={dataSource}
                columns={columns}
                pagination={{
                  pageSize: 10,
                  total: 100,
                }}
              />
            </div>
          </Col>
        </Row>
      </div>
      <div className="about">
        <div className="layout-content-main">
          <Row gutter={40}>
            <Col span={16}>
              <div className="blockTitle">问题咨询方式</div>
              <div className="borderBox">
                {/* addressImg */}
                <img src={aboutUs.addressImg} alt="" />
                <div className="questionItem">
                  <IconFont type="icon-dizhi" className="icon" />
                  <span dangerouslySetInnerHTML={{ __html: aboutUs[intl.formatMessage({ id: 'home.data.address' })] }} />
                </div>
                <div className="questionItem">
                  <IconFont type="icon-dianhua" className="icon" />
                  <span dangerouslySetInnerHTML={{ __html: aboutUs[intl.formatMessage({ id: 'home.data.contactsConsult' })] }} />
                </div>
                <div className="questionItem">
                  <IconFont type="icon-youxiang" className="icon" />
                  <span dangerouslySetInnerHTML={{ __html: aboutUs[intl.formatMessage({ id: 'home.data.contactsEmail' })] }} />
                </div>
              </div>
            </Col>
            <Col span={8} className="caBox">
              <div>
                <div className="blockTitle">CA服务</div>
                <Row className="caRow">
                  <Col span={6} offset={6} className="caItem">
                    <img src={require('@/assets/img/ca1.png')} alt="" />
                    <span>CA办理</span>
                  </Col>
                  <Col span={6} className="caItem">
                    <img src={require('@/assets/img/ca2.png')} alt="" />
                    <span>CA客服</span>
                  </Col>
                </Row>
              </div>

              <div className="contactBox">
                <div className="blockTitle mt20">联系方式</div>
                <div className="contact">
                  <span dangerouslySetInnerHTML={{ __html: aboutUs[intl.formatMessage({ id: 'home.data.contactsPhone' })] }} />
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>

      <div className="firendLink">
        <div className="layout-content-main">
          <div className="linkTitle">友情链接</div>
          <Card>
            {friendshipConnections.map((item, index) => (
              <Card.Grid key={item.id} style={{ width: '16.6667%', height: '130px' }}>
                <img src={item.thumbnail} alt="" />
              </Card.Grid>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
};

export default connect(({ user }: any) => ({
  user,
}))(IndexPage);