hlplus/src/pagesSchool/area.jsx

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Footer from '@/c/footer'
import hlSign from '@/c/hlSign'
import './area.scss'
import { arrToObj } from '@utils'

class Index extends Component {
  onShareAppMessage() {
    return {
      title: `来看看南昌各个区域有哪些学校`,
    }
  }
  onShareTimeline () {
    return {
      title: `来看看南昌各个区域有哪些学校，洪楼告诉你哪些楼盘可以读`,
    }
  }

  constructor (props) {
    super(props)
    const {id: curId} = this.$router.params
    this.state = {
      curId,
      curObj: {},
      cateArr: []
    }
  }

  config = {
    navigationBarTitleText: '选择区域',
  }

  componentWillMount () {
    Taro.$AHU(this)
    Taro.api.house.schoolareacount().then(res => {
      this.setState({
        cateArr: res || []
      })
    })
  }
  

  renderOp () {
    const bg1 = require('./img/area/xq01.png')
    const bg2 = require('./img/area/xq02.png')
    const bg3 = require('./img/area/xq03.png')
    const bg4 = require('./img/area/xq04.png')
    const bg5 = require('./img/area/xq05.png')
    const bg6 = require('./img/area/xq06.png')
    const { cateArr } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const atObj = arrToObj(dictData.area_type)
    let total = 0
    const cArr = cateArr.map((item, i) => {
      total += item.total
      let bg = bg1
      if (i % 6 === 0) bg = bg2
      if (i % 6 === 1) bg = bg3
      if (i % 6 === 2) bg = bg4
      if (i % 6 === 3) bg = bg5
      if (i % 6 === 4) bg = bg6
      if (i % 6 === 5) bg = bg1
      return {
        bg,
        ...item,
        key: atObj[item.area_type]
      }
    })
    const curItems = cArr.map((item, index) => {
      return (
        <View className="sb-item" key={index} onClick={this.listLink.bind(this, item)}>
          <View className="t">{item.key}({item.total || 0})</View>
          <Image src={item.bg} className="bg"/>
        </View>
      )
    })
    return (
      <View className="scoped-box">
        <View className="sb-item" key={index} onClick={this.listLink.bind(this, 'all')}>
          <View className="t">全部区域({total || 0})</View>
          <Image src={bg1} className="bg"/>
        </View>
        {curItems}
      </View>
    )    
  }
  listLink (item) {
    if (item === 'all') {
      Taro.navigateTo({
        url: `/pagesSchool/index`
      })
    } else {
      Taro.navigateTo({
        url: `/pagesSchool/index?areaType=${item.area_type}&areaName=${item.key}`
      })
    }
  }

  componentDidShow () { }

  componentDidHide () { }

  renderShare () {
    const iconShare = require('@img/images/icon_g_share6.png')
    return (
      <Button className="g-icon-share btn-to-div" openType="share">
        <Image className="img" src={iconShare} />
      </Button>
    )
  }

  render () {
    const xqbanner = require('./img/xqbanner2.jpg')
    return (
      <View className="l-box has-footer">
        <Navigator url={'/pagesOther/map/dtl'} className="scoped-top">
          <Image src={xqbanner} className="bg" />
        </Navigator>
        <hlSign />
        {this.renderOp()}
        {this.renderShare()}
        <Footer current={1} />
      </View>
    )
  }
}

export default Index