forgeplus-react/src/forge/Information/Pages/headerPage.jsx

import React,{ useState, useEffect } from 'react';
import img1 from '../img/img1.png';
import img2 from '../img/img2.png';
import guideArrow from '../img/guideArrow.png';
import { Link } from 'react-router-dom';
import shijian from '../img/shijian.png';
import axios from 'axios';

function HeaderPage(props){
  const [ projectList , setProjectList ] = useState(undefined);
  const [ personList , setPersonList ] = useState(undefined);
  const [ newsList, setNewsList ] = useState(undefined);
  const { deptId } = props.match.params;
  const { data } = props;

  useEffect(()=>{
    getProjectList();
    getNewsList();
    getPersonList();
  },[])

  function getPersonList(){
    const url = `/zone/open/${deptId}/member/homePageList`;
    axios.get(url).then(result=>{
      if(result){
        setPersonList(result.data.rows);
      }
    }).catch(error=>{})
  }

  function getNewsList(){
    const url = `/cms/doc/open/zone/${deptId}/homePageDocList`;
    axios.get(url).then(result=>{
      if(result){
        setNewsList(result.data.rows);
      }
    }).catch(error=>{})
  }

  function getProjectList(){
    const url = `/zone/open/${deptId}/project/list`;
    axios.get(url,{params:{
      isHomepage:1
    }}).then(result=>{
      if(result){
        setProjectList(result.data.rows);
      }
    }).catch(console.error())
  }
  return(
    <div className="zone_box">
      <p className="in_title">{data && data.firstTitle}</p>
      <div className="boxmain zone_infos">
        {
          data &&
          <div className="zone_infos_desc">
            <p className="z_name">{data.introductionTitle}</p>
            <p className="z_desc task-hide-2">{data.introductionContent}</p>
          </div>
        }
        {
          data && data.introductionImage &&
          <img src={data.introductionImage} alt="" width="474px" height="277px"/>
        }
      </div>
      <div className="zone_news">
        <p className="in_title mb40">新闻动态</p>
        {
          newsList && newsList.length>0 &&
          <div className="boxmain" style={{display:"flex"}}>
            <div className="zone_new_first">
              <img src={newsList[0].headImg || img1} alt="" height="302px" className="mb30"/>
              <p className="zone_n_title task-hide">{newsList[0].name}</p>
              <p className="zone_n_desc task-hide-2">{newsList[0].summary}</p>
              <p className="font-13 mt10 flexCenter" style={{color:"#8d95a3"}}>
                <img src={shijian} alt="" className="mr3" />
                {newsList[0].publishTime}
              </p>
              <p className="mt15">
                <Link to={`/information/${deptId}/newdetail/${newsList[0].id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
              </p>
            </div>
            <ul className={`zone_new_three ${newsList.length <4 ? "flexStart" : "spaceeTween"}`}>
              {
                newsList.map((i,k)=>{
                  return(
                    k > 0 && <li>
                      <Link className="zone_n_title task-hide" to={`/information/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
                      <p className="zone_n_desc task-hide-2 mt10">{i.summary}</p>
                      <p className="zone_n_value">
                        <span className="font-13" style={{color:"#8d95a3"}}>
                          <img src={shijian} alt="" className="mr3" />
                          {i.publishTime}
                        </span>
                        <Link  to={`/information/${deptId}/newdetail/${i.id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></Link>
                      </p>
                    </li>
                  )
                })
              }
            </ul>
          </div>
        }
      </div>
      <div className="zone_projects">
        <p className="in_title mb40">精选项目</p>
        {
          projectList && projectList.length>0&&
          <div className="boxmain zone_p_lists">
            {
              projectList.map((i,k)=>{
                return(
                  <li>
                    <div className="imgBox">{i.projectProperties && i.projectProperties.authorImageUrl && <img src={i.projectProperties.authorImageUrl} alt="" /> }</div>
                    <div className="infoBox">
                      <a  onClick={()=>window.open(i.projectURL)} className="z_p_title">{i.projectProperties && i.projectProperties.name}</a>
                       <p className="z_p_desc task-hide-2">{i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}</p>
                    </div>
                  </li>
                )
              })
            }
          </div>
        }
      </div>
      <div className="zone_contributor">
        <p className="in_title">核心贡献者</p>
        {
          personList && personList.length > 0 &&
          <ul className="boxmain zone_c_lists">
            {
              personList.map((i,k)=>{
                return(
                <li>
                  <img src={i.imageUrl} alt="" />
                  <span>{i.name}</span>
                  <p className="task-hide-2">{i.introduction}</p>
                </li>
                )
              })
            }
          </ul>
        }
      </div>

      {/* <div className="zone_parter">
        <p className="in_title">合作伙伴</p>
        <ul className="boxmain zone_part_lists">
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
          <li>合作伙伴一</li>
        </ul>
      </div> */}
    </div>
  )
}
export default HeaderPage;