63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
import React , { useEffect , useState } from 'react';
|
|
import Slider from 'react-slick';
|
|
import axios from 'axios';
|
|
import { getImageUrl } from 'educoder';
|
|
|
|
let setting={
|
|
dots:true,
|
|
infinite: true,
|
|
speed: 2000,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
pauseOnDotsHover:true,
|
|
autoplaySpeed:5000,
|
|
pauseOnFocus:true,
|
|
autoplay:true,
|
|
arrows:true,
|
|
prevArrow:<button type='button' class='slick-prev slick-arrow'><i className="iconfont icon-xiangzuojiantou"></i></button>,
|
|
nextArrow:<button type='button' class='slick-prev slick-arrow'><i className="iconfont icon-xiangyoujiantou"></i></button>
|
|
}
|
|
function TopEdition({register,current_user}) {
|
|
|
|
const [ bannerList , setBannerList ] = useState(undefined);
|
|
|
|
useEffect(()=>{
|
|
getBanner();
|
|
},[])
|
|
|
|
function getBanner() {
|
|
const url = `/topics.json?topic_type=banner`;
|
|
axios.get(url,{
|
|
params:{
|
|
limit:4
|
|
}
|
|
}).then(result=>{
|
|
if(result){
|
|
setBannerList(result.data.topics);
|
|
}
|
|
}).catch(error=>{})
|
|
}
|
|
return(
|
|
<Slider {...setting}>
|
|
{
|
|
bannerList && bannerList.length > 0 ?
|
|
bannerList.map((i,k)=>{
|
|
return(
|
|
<div className={`regform`}>
|
|
<div style={{backgroundImage:`url(${getImageUrl(i.image)})`}}>
|
|
{
|
|
k +1 === bannerList.length && (!(current_user && current_user.login)) ?
|
|
<p className="regPrg"><a href={register}>注册</a></p>
|
|
:""
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
:
|
|
""
|
|
}
|
|
</Slider>
|
|
)
|
|
}
|
|
export default TopEdition; |