59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
|
import React from 'react'
|
||
|
|
import { Swiper, CapsuleTabs, Grid } from 'antd-mobile'
|
||
|
|
import axios from 'axios';
|
||
|
|
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'
|
||
|
|
import { redirect, useNavigate } from 'react-router-dom';
|
||
|
|
const localCatalog = [
|
||
|
|
{ "imgSrc": ImgZZ, "title": "整租" ,"path":"/todo"},
|
||
|
|
{ "imgSrc": ImgHZ, "title": "合租" ,"path":"/todo"},
|
||
|
|
{ "imgSrc": ImgDTZF, "title": "地图找房" ,"path":"/message"},
|
||
|
|
{ "imgSrc": ImgQCZ, "title": "去出租" ,"path":"/me"}
|
||
|
|
]
|
||
|
|
export class Home extends React.Component {
|
||
|
|
state = {
|
||
|
|
swipers: []
|
||
|
|
}
|
||
|
|
async getSwitpers() {
|
||
|
|
const res = await axios.get('http://localhost:8080/home/swiper')
|
||
|
|
console.log('轮播图信息' + res.data.body)
|
||
|
|
this.setState(
|
||
|
|
{ swipers: res.data.body }
|
||
|
|
// ()=>{
|
||
|
|
// return{swipers:res.data.body}
|
||
|
|
// }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
componentDidMount() {
|
||
|
|
this.getSwitpers()
|
||
|
|
}
|
||
|
|
|
||
|
|
renderSwipers() {
|
||
|
|
return this.state.swipers.map(item => (<Swiper.Item key={item.id}>
|
||
|
|
<img
|
||
|
|
src={'http://localhost:8080' + item.imgSrc}
|
||
|
|
style={{ width: '100%', verticalAlign: 'top' }}
|
||
|
|
/>
|
||
|
|
</Swiper.Item>))
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return <div className='context'>
|
||
|
|
<Swiper autoplay loop>{this.renderSwipers()}</Swiper>
|
||
|
|
<Grid columns={4}>
|
||
|
|
{
|
||
|
|
localCatalog.map((item,index) => (
|
||
|
|
<Grid.Item key={index} onClick={()=>{
|
||
|
|
console.log("点击跳转")
|
||
|
|
this.props.navigate=item.path}}>
|
||
|
|
<div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
|
||
|
|
</Grid.Item>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</Grid>
|
||
|
|
</div>
|
||
|
|
};
|
||
|
|
}
|