75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
import React from 'react'
|
|
import { Swiper, Grid } from 'antd-mobile'
|
|
import axios from 'axios';
|
|
import WidthUseNavigate from '../WidthUseNavigate';
|
|
import './index.css'
|
|
import ImgZZ from './../../assets/images/nav-1.png'
|
|
import ImgHZ from './../../assets/images/nav-2.png'
|
|
import ImgDTZF from './../../assets/images/nav-3.png'
|
|
import ImgQCZ from './../../assets/images/nav-4.png'
|
|
|
|
const localCatalog = [
|
|
{ "imgSrc": ImgZZ, "title": "整租", "path": "/todo" },
|
|
{ "imgSrc": ImgHZ, "title": "合租", "path": "/todo" },
|
|
{ "imgSrc": ImgDTZF, "title": "地图找房", "path": "/message" },
|
|
{ "imgSrc": ImgQCZ, "title": "去出租", "path": "/me" }
|
|
]
|
|
class HomeInner extends React.Component {
|
|
state = {
|
|
swipers: [],
|
|
isSwiperLoaded: false
|
|
}
|
|
async getSwitpers() {
|
|
const res = await axios.get('http://localhost:8080/home/swiper')
|
|
this.setState(
|
|
{
|
|
swipers: res.data.body,
|
|
isSwiperLoaded: true
|
|
},
|
|
|
|
// ()=>{
|
|
// return{swipers:res.data.body}
|
|
// }
|
|
)
|
|
}
|
|
componentDidMount() {
|
|
this.getSwitpers()
|
|
}
|
|
|
|
renderSwipers() {
|
|
return this.state.swipers.map(item => (<Swiper.Item key={item.id}>
|
|
<img height='212'
|
|
src={'http://localhost:8080' + item.imgSrc}
|
|
style={{ width: '100%', verticalAlign: 'top' }}
|
|
/>
|
|
</Swiper.Item>))
|
|
}
|
|
|
|
render() {
|
|
return <div className='context'>
|
|
<div className='context-swapper'>
|
|
{
|
|
this.state.isSwiperLoaded ? <Swiper autoplay loop autoplayInterval='1500'>{this.renderSwipers()}</Swiper> : ""
|
|
}
|
|
</div>
|
|
|
|
|
|
<Grid columns={4}>
|
|
{
|
|
localCatalog.map((item, index) => (
|
|
<Grid.Item key={index} onClick={() => {
|
|
console.log("点击跳转")
|
|
this.props.to(item.path)
|
|
}}>
|
|
<div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
|
|
</Grid.Item>
|
|
))
|
|
}
|
|
</Grid>
|
|
</div>
|
|
};
|
|
}
|
|
// 使用高阶组件包裹当前类组件
|
|
const Home = WidthUseNavigate(HomeInner);
|
|
// 导出包裹后的类组件
|
|
export default Home; |