好客租房121-租房小组分业务和数据处理

import React from 'react'
 import axios from 'axios'
 //留白
 import { Carousel, Flex } from 'antd-mobile'
 import Nav1 from '../../assets/images/nav-1.png'
 import Nav2 from '../../assets/images/nav-2.png'
 import Nav3 from '../../assets/images/nav-3.png'
 import Nav4 from '../../assets/images/nav-4.png'
 //导入样式
 import './index.scss'
 const navs = [
     {
         id: 1,
         img: Nav1,
         title: '整租',
         path: '/home/list',
     },
     {
         id: 2,
         img: Nav2,
         title: '合租',
         path: '/home/list',
     },
     {
         id: 3,
         img: Nav3,
         title: '地图找房',
         path: '/home/list',
     },
     {
         id: 4,
         img: Nav4,
         title: '去出租',
         path: '/home/list',
     },
 ]
 // 轮播图不会自动播放  数据返回过来的时候高度不够 数据加载前后数据的问题
 class Index extends React.Component {
     state = {
         data: ['1', '2', '3'],
         imgHeight: 212,
         isSwiperLoding: false,
         groups: [],
     }
     componentDidMount() {
         // simulate img loading
         this.getGroups()
         setTimeout(() => {
             this.setState({
                 data: [
                     'AiyWuByWklrrUDlFignR',
                     'TekJlZRVCjLFexlOCuWn',
                     'IJOtIlfsYdTyaDTRVrLI',
                 ],
                 isSwiperLoding: true,
             })
         }, 100)
     }
     async getSwipers() {
         const res = await axios.get('http://localhost:8080/home/swiper')
         console.log('轮播如数据为:', res)
         //   this.setState({
         //       swiper:res.data.body
         //   })
     }
     async getGroups() {
         const res = await axios.get('http://localhost:8080/home/groups', {
             params: {
                 area: 'AREA%7C88cff55c-aaa4-e2e0',
             },
         })
         console.log('轮播如数据为:', res)
         this.setState({
             groups: res.data.body,
         })
     }
     //渲染轮播图的方法
     renderSwipers() {
         return this.state.data.map((val) => (
             <a
                 key={val}
                 href="http://www.alipay.com"
                 style={{
                     display: 'inline-block',
                     width: '100%',
                     height: this.state.imgHeight,
                 }}
             >
                 <img
                     src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                     alt=""
                     style={{ width: '100%', verticalAlign: 'top' }}
                     onLoad={() => {
                         // fire window resize event to change height
                         window.dispatchEvent(new Event('resize'))
                         this.setState({ imgHeight: 'auto' })
                     }}
                 />
             a>
         ))
     }
     //渲染导航菜单
     renderNavs() {
         return navs.map((item) => (
             <Flex.Item
                 key={item.id}
                 onClick={() => {
                     this.props.history.push(item.path)
                 }}
             >
                 <img src={item.img} alt="" />
                 <h2>{item.title}h2>
             Flex.Item>
         ))
     }
     render() {
         return (
             //留白 WingBlank
             <div className="index">
                 <div className="swiper">
                     {this.state.isSwiperLoding === true ? (
                         <Carousel
                             //自动播放
                             autoplay={true}
                             infinite
                             //   beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                             //   afterChange={index => console.log('slide to', index)}
                         >
                             {this.renderSwipers()}
                         Carousel>
                     ) : (
                         ''
                     )}
                 div>
                 <Flex className="nav">{this.renderNavs()}Flex>
             div>
         )
     }
 }
 export default Index