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

import React,{ useState, useEffect } from 'react';
import img1 from '../img/img1.png';
import { httpUrl } from '../fetch';
import guideArrow from '../img/guideArrow.png';
import { Link } from 'react-router-dom';
import shijian from '../img/shijian.png';
import { getHomePageList , gethomePageDocList , getAllList } from '../api';
import axios from 'axios';
import Partner from '../Component/partner';

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

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

  function getPersonList(){
    getHomePageList(id).then(result=>{
      if(result){
        setPersonList(result.data.rows);
      }
    }).catch(error=>{})
  }

  function getNewsList(){
    gethomePageDocList(id).then(result=>{
      if(result){
        setNewsList(result.data.rows);
      }
    }).catch(error=>{})
  }

  function getProjectList(){
    getAllList(id,{isHomepage:1}).then(result=>{
      if(result){
        setProjectList(result.data.rows);
      }
    }).catch(console.error())
  }
  
  function getPartnerList(){
    const url = `${httpUrl}/zone/open/${id}/partners/list`;
    axios.get(url).then(result=>{
      if(result){
        const array = result.data.rows;
        const newArray = [];
        for(let i in array) {
          let e = array[i]
          if (e.zonePartnersList && e.zonePartnersList.length > 0) {
            e.zonePartnersList[0].typeName = e.typeName;
          }
          if ( e.zonePartnersList.length > 0 ) {
            newArray.push(e.zonePartnersList);
          }
        }
        setParterList(newArray);
      }
    }).catch(error=>{})
  }
  return(
    <div className="zone_box">
      {data && <p className="in_title">{data.firstTitle}</p> }
      {
        // 专区简介
        data && (data.introductionTitle || data.introductionContent ||  data.introductionImage) &&
        <div className="boxmain zone_infos">
            <div className="zone_infos_desc">
              {data.introductionTitle && <p className="z_name">{data.introductionTitle}</p>}
              <p className="z_desc task-hide-2" style={{WebkitLineClamp:data.introductionTitle?"4":"7"}} dangerouslySetInnerHTML={{ __html: data.introductionContent }} ></p>
            </div>
          {
            data.introductionImage &&
            <img src={data.introductionImage} alt="" height="277px"/>
          }
        </div>
      }
      {
        // 新闻动态
        data && data.cmsShow === 1 && newsList && newsList.length>0 &&
        <div className="zone_news">
          <p className="in_title mb40">{ data.homepageCmsTitle }</p>
          <div className="boxmain" style={{display:"flex"}}>
            <div className="zone_new_first">
              <img src={newsList[0].headImg || img1} alt="" height="302px" style={{width:"100%",objectFit:"cover"}} className="mb30"/>
              <Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="zone_n_title task-hide">{newsList[0].name}</Link>
              <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={`/zone/${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 key={ k }>
                      <Link className="zone_n_title task-hide" to={`/zone/${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={`/zone/${deptId}/newdetail/${i.id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></Link>
                      </p>
                    </li>
                  )
                })
              }
            </ul>
          </div>
        </div>
      }
      {
        // 精选项目
        data && data.projectShow === 1 && projectList && projectList.length>0 &&
        <div className="zone_projects">
          <p className="in_title mb40">{ data.homepageProjectTitle }</p>
          {
            <div className="boxmain zone_p_lists">
              {
                projectList.map((i,k)=>{
                  return(
                    <li key={ k }>
                      <div className="imgBox">{i.projectProperties && i.projectProperties.authorImageUrl && <img src={i.projectProperties.authorImageUrl} alt="" /> }</div>
                      <div className="infosBox">
                        <a  onClick={()=>window.open(i.projectURL)} className="z_p_title task-hide">{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>
      }
      {
        // 核心贡献者
        data && data.memberShow === 1 && personList && personList.length > 0 &&
        <div className="zone_contributor">
          <p className="in_title">{ data.homepageMemberTitle }</p>
          {
            <ul className="boxmain zone_c_lists">
              {
                personList.map((i,k)=>{
                  return(
                  <li key={ k }>
                    <Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
                    <span>{i.name}</span>
                    <p className="task-hide-2" style={{display:i.introduction?"":"flex"}}>{i.introduction || "暂无~"}</p>
                  </li>
                  )
                })
              }
            </ul>
          }
        </div>
      }
      

      {
        // 合作伙伴
        data && data.partnersShow === 1 && partnerList && partnerList.length > 0 &&
        <div className="zone_parter">
          <p className="in_title">{ data.homepagePartnersTitle }</p>
          <Partner id={ id } partnerList={ partnerList }></Partner>
        </div>
      }
    </div>
  )
}
export default HeaderPage;