cf-wx-app/src/pages/home/home.js

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'
import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
import bottomNav from '../../component/bottomNav/bottomNav'
import URL from '../../serviceAPI.config'
import './home.scss'

class Home extends Component {

  config = {
    navigationBarTitleText: '首页'
  }
  constructor() {
    super(...arguments);

    this.state = {
      shopsDetails: '',
      ads: '',
      categories: '',
      demanding: '',
      otherData:''
    }
  }
  componentWillMount(){
 

 }
  componentDidMount() {
    
    this.getShops()
    this.getHomeCategoriesInfo()
  }
  componentWillReceiveProps(nextProps) {
    //console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

// 得到首页的信息
  getHomeCategoriesInfo() {
    Taro.request({
      url: URL.ShopWxStore,
    })
      .then(res => {
        console.log(res)
        this.setState({
          ads: res.data.data.adsLb,
          categories: res.data.data.supplyClass,
          demanding: res.data.data.demand.supplys,
          otherData:res.data.otherData
        }, () => {
          //console.log(this.state.demanding)
        })
      })
  }
  // 得到所有商店的信息 
  getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) {
    Taro.request({
      url: URL.ShopSupplyShops,
      method: 'POST',
      dataType: 'json',
      data: {
        param: JSON.stringify({
          curr_page: 1,
          page_count: 20,
          parent_supply_class: parent_supply_class, //父级class id
          supply_class: supply_class,// 子级class id
          supply_level: supply_level,// 层级
          action: "2"
        })
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
       
      }
    })
      .then(res => {
        this.setState({ shopsDetails: res.data.shops }, () => {
          // console.log('-----',res)
        })
      }
      )
  }
  onClickParentCate(item) {
    this.setState({ subCate: item.children })
    this.getShops(item.parent_class_id, item.class_id)
  }
  onClickChildCate(item) {
    this.getShops(item.parent_class_id, item.class_id, 2)
  }
  goToAllDemandingPage(){
    Taro.navigateTo({
      url: '/pages/allDemanding/allDemanding'
    })
  }

  render() {
    const demandingElemensArray = this.state.demanding?this.state.demanding.map((item, index) => {
      return < SwiperItem key={index} >
        <View className='demanding-item'>
          <View className='item-tag'>
            <Text className='item-tag-text'> {item.class_name}</Text>
          </View>
          <View className='item-title'>
            {item.sd_title}
          </View>
          <View className='item-address'>
            {item.user_address}
          </View>
          <View className='item-name'>
            业主：{item.user_name}
          </View>
          <View className='item-button-box'>
            <Button className='item-button'  >{item.state_name}</Button>
          </View>
        </View>
      </SwiperItem >
    }) :null

    const adsImgElementsArray = this.state.ads?this.state.ads.map((item, index) => {
      return <SwiperItem key={index}>
        <Image className='banner-img' src={URL.Base + item.ads_pic} />
      </SwiperItem>
    }):null

    // 这里应该代码可以优化-----
    const categoriesElementsArray1 = this.state.categories?this.state.categories[0].map((item, index) => {
      return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
        <View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
        <View>{item.class_name}</View>
      </View>
    }):null
    const categoriesElementsArray2 = this.state.categories?this.state.categories[1].map((item, index) => {
      return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
        <View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
        <View>{item.class_name}</View>
      </View>
    }):null
    const shopCollectionElementsArray = this.state.shopsDetails?this.state.shopsDetails.map((item, index) => {
      return <filteredShopComponent shop={item} key={index}></filteredShopComponent>
    }):null
    
    const subCateElementsArray = this.state.subCate?this.state.subCate.map((item, index) => {
      return <SwiperItem key={index} onClick={this.onClickChildCate.bind(this, item)}>
        <View className='text'>{item.class_name}</View>
      </SwiperItem>
    }):null
   

     
    return (
      
      <View className='home'>
        {/* 第一行图片滚动条 */}

        <View className='first-banner'>
          <Swiper
            className='swipper'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            hotizontal
            circular
            indicatorDots
            autoplay>
            {adsImgElementsArray}

          </Swiper>
        </View>
        {/* 第二行图片滚动条 */}
        <View className='second-banner'>
          <Swiper
            className='swipper'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            hotizontal
            circular
            indicatorDots
            autoplay>
            <SwiperItem>
              <View className='categories'>
                {categoriesElementsArray1}
              </View>
            </SwiperItem>
            <SwiperItem>
              <View className='categories'>
                {categoriesElementsArray2}
              </View>
            </SwiperItem>
          </Swiper>
        </View>
        {/* 第三行图片滚动条 */}
        <View className='third-banner'>
          <Swiper
            className='swipper'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            horizontal
            circular
            indicatorDots
            autoplay>
            <SwiperItem>
              <Image className='banner-img' src='http://192.168.1.230/Public/images/xgt.png' />
            </SwiperItem>

          </Swiper>
        </View>
       
        {/* 业主需求和行业推荐 */}
        <View className='container'>
          <View className='title'>

            <Text className='title-block'></Text>
            <Text className='title-text'>业主需求</Text>

            <Text className='more-link' onClick={this.goToAllDemandingPage.bind(this)}>
              更多>>
                </Text>
          </View>
          <View className='customer-demanding'>
            <Swiper
              className='swipper swiper-sub'
              indicatorColor='#999'
              indicatorActiveColor='#333'
              horizontal
              circular
              displayMultipleItems='2.5'
            >
              {demandingElemensArray}
            </Swiper>
          </View>
          <View className='sub-cate'>

          </View>
          <View className='second-banner-level2'>
            <Swiper
              className='swipper swiper-sub'
              indicatorColor='#999'
              indicatorActiveColor='#333'
              horizontal
              displayMultipleItems='4.5'
            >
              {subCateElementsArray}
            </Swiper>
          </View>
          <View className='title'>
            <Text className='title-block'></Text>
            <Text className='title-text'>行业推荐</Text>

          </View>
          
          
          <View className='shop-box'>
            {shopCollectionElementsArray}
            {this.state.shopsDetails.length !== 0 ? <View className='title'>
              沒有更多了...
            </View>: < View className='title' >
              没有找到...
            </View > }
          </View>
          <View className='gap'>

          </View>
         
        </View>
        
        

        <View className='bottom-nav-box'>
          <bottomNav otherData={this.state.otherData}/>
        </View>
       

      </View>
    )
  }
}

export default Home