forked from Gitlink/forgeplus-react
云际专区修改
This commit is contained in:
parent
d84e8aa424
commit
492100f768
|
|
@ -16,6 +16,8 @@ import '../../indexZone1.scss'
|
|||
import './index.scss'
|
||||
import { Popover, Tabs } from 'antd';
|
||||
|
||||
let tabTimer = undefined;
|
||||
|
||||
function HeaderPageJCC(props){
|
||||
const [ projectList , setProjectList ] = useState(undefined);
|
||||
const [ personList , setPersonList ] = useState(undefined);
|
||||
|
|
@ -25,7 +27,6 @@ function HeaderPageJCC(props){
|
|||
const { data, id, history } = props;
|
||||
const [ activeKey, setActiveKey ] = useState(undefined);
|
||||
|
||||
let tabTimer = undefined;
|
||||
const vision = [
|
||||
{imageUrl: visionFw, title: '服务无边界'},
|
||||
{imageUrl: visionYj, title: '云间有协作'},
|
||||
|
|
@ -40,8 +41,12 @@ function HeaderPageJCC(props){
|
|||
getPersonList();
|
||||
getPartnerList();
|
||||
}
|
||||
return componentWillUnmount;
|
||||
},[id])
|
||||
|
||||
function componentWillUnmount() {
|
||||
clearInterval(tabTimer)
|
||||
}
|
||||
function getPersonList(){
|
||||
const url = `${httpUrl}/zone/open/${id}/member/homePageList`;
|
||||
axios.get(url).then(result=>{
|
||||
|
|
@ -59,7 +64,7 @@ function HeaderPageJCC(props){
|
|||
clearInterval(tabTimer)
|
||||
tabTimer = setInterval(() => {
|
||||
handle(result.data.rows && result.data.rows[0].id, result.data.rows)
|
||||
}, 5000)
|
||||
}, 4000)
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
|
@ -100,16 +105,11 @@ function HeaderPageJCC(props){
|
|||
}
|
||||
|
||||
function handle(value, rows){
|
||||
console.log("value",value)
|
||||
console.log('newsList',rows)
|
||||
// 获取新闻id的数组
|
||||
let idList = rows ? rows.map(obj => obj.id) : []
|
||||
console.log('idList',idList)
|
||||
|
||||
|
||||
// 获取所有 tab节点
|
||||
let tabs = document.querySelectorAll('.zone_news .ant-tabs-tab')
|
||||
const tabIndex = idList.indexOf(value)
|
||||
const tabIndex = idList.indexOf(Number(value))
|
||||
console.log('tabIndex',tabIndex)
|
||||
if(tabIndex !== -1 ){
|
||||
if(tabIndex !== idList.length -1){
|
||||
|
|
@ -118,20 +118,6 @@ function HeaderPageJCC(props){
|
|||
tabs[0].click()
|
||||
}
|
||||
}
|
||||
|
||||
// switch (value) {
|
||||
// case "tabOne":
|
||||
// this.tabs[1].click()
|
||||
// break
|
||||
// case "tabTwo":
|
||||
// this.tabs[2].click()
|
||||
// break
|
||||
// case "tabThree":
|
||||
// this.tabs[0].click()
|
||||
// break
|
||||
// default:
|
||||
// break
|
||||
// }
|
||||
}
|
||||
function handleTabChange(key) {
|
||||
console.log('key',key)
|
||||
|
|
@ -141,7 +127,7 @@ function HeaderPageJCC(props){
|
|||
clearInterval(tabTimer)
|
||||
tabTimer = setInterval(() => {
|
||||
handle(key, newsList)
|
||||
}, 5000)
|
||||
}, 4000)
|
||||
}
|
||||
|
||||
return(
|
||||
|
|
|
|||
|
|
@ -1,96 +1,187 @@
|
|||
import React , { Component } from 'react'
|
||||
import "antd/dist/antd.css";
|
||||
import { Tabs , Carousel } from 'antd'
|
||||
const contentStyle = {
|
||||
height: '160px',
|
||||
color: '#fff',
|
||||
lineHeight: '160px',
|
||||
textAlign: 'center',
|
||||
background: '#364d79',
|
||||
};
|
||||
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';
|
||||
|
||||
class App extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
activeKey:"tabOne"
|
||||
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=>{})
|
||||
}
|
||||
componentDidMount(){
|
||||
this.tabs = document.querySelectorAll('.work-order .ant-tabs-tab')
|
||||
this.tabTimer = setInterval(() => {
|
||||
this.handle(this.state.activeKey)
|
||||
}, 3000)
|
||||
|
||||
function getNewsList(){
|
||||
gethomePageDocList(id).then(result=>{
|
||||
if(result){
|
||||
setNewsList(result.data.rows);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
handle(value){
|
||||
console.log("value",value)
|
||||
console.log('tab',this)
|
||||
switch (value) {
|
||||
case "tabOne":
|
||||
this.tabs[1].click()
|
||||
break
|
||||
case "tabTwo":
|
||||
this.tabs[2].click()
|
||||
break
|
||||
case "tabThree":
|
||||
this.tabs[0].click()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
function getProjectList(){
|
||||
getAllList(id,{isHomepage:1}).then(result=>{
|
||||
if(result){
|
||||
setProjectList(result.data.rows);
|
||||
}
|
||||
}).catch(console.error())
|
||||
}
|
||||
handleTabChange = key => {
|
||||
clearInterval(this.tabTimer)
|
||||
console.log("key",key)
|
||||
setTimeout(()=>{
|
||||
if (key === 'tabOne') {
|
||||
this.setState({activeKey:"tabOne"})
|
||||
|
||||
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;
|
||||
}
|
||||
else if (key === 'tabTwo') {
|
||||
this.setState({activeKey:"tabTwo"})
|
||||
if ( e.zonePartnersList.length > 0 ) {
|
||||
newArray.push(e.zonePartnersList);
|
||||
}
|
||||
else if (key === 'tabThree') {
|
||||
this.setState({activeKey:"tabThree"})
|
||||
}
|
||||
},100)
|
||||
this.tabTimer = setInterval(() => {
|
||||
this.handle(this.state.activeKey)
|
||||
}, 3000)
|
||||
}
|
||||
render() {
|
||||
const {TabPane} = Tabs
|
||||
return(
|
||||
<div className="work-order">
|
||||
{/* 通过Carousel组件实现自动轮播 */}
|
||||
<Carousel autoplay autoplaySpeed={3000}>
|
||||
<div>
|
||||
<h3 style={contentStyle}>1</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={contentStyle}>2</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={contentStyle}>3</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={contentStyle}>4</h3>
|
||||
</div>
|
||||
</Carousel>
|
||||
{/* 通过定时器实现自动轮播 */}
|
||||
<Tabs onChange={this.handleTabChange} >
|
||||
<TabPane tab="Tab 1" key="tabOne">
|
||||
Content of Tab Pane 1
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 2" key="tabTwo">
|
||||
Content of Tab Pane 2
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 3" key="tabThree">
|
||||
Content of Tab Pane 3
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
}
|
||||
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>
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
{
|
||||
// 合作伙伴
|
||||
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;
|
||||
Loading…
Reference in New Issue