hlplus/src/pagesHouse/price.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Image, ScrollView } from '@tarojs/components'

import { AtNoticebar } from 'taro-ui'
import ListMore from '@/c/pageDataList/listMore'
import EchartLine from './components/price/EchartLine'
import Chat from '@/c/chat/com'
import LoginJudge from '@/c/login/Judge'
import './price.scss'

class Index extends Component {
  onShareAppMessage() {
    const {id, name} = this.$router.params
    return {
      title: `${name}的历史成交价`,
      path: `/pagesHouse/price?id=${id}&name=${name}`,
    }
  }
  onShareTimeline () {
    const {id, name} = this.$router.params
    return {
      title: `${name}的历史成交价`,
      path: `/pagesHouse/price?id=${id}&name=${name}`,
    }
  }

  constructor (props) {
    super(props)
    this.state = {      
      page_size: 20,
      page: 1,
      isListEnd: false,
      isListLoading: false,
      isListEmpty: false,
      dataList: [],
      isLock: true,
    }
  }

  config = {
    navigationBarTitleText: '楼盘成交价',
  }

  componentWillMount () {
    Taro.$AHU(this)
    const {id, name } = this.$router.params
    Taro.setNavigationBarTitle({
      title: `${name}的历史成交价`
    })
    
  }

  refChat = (ref) => {
    this.subChat = ref
  }

  componentDidShow () { 
    let isLock = true
    const edClick = Taro.getStorageSync('APP_edChat')
    const currentTime = Date.now()
    const sixHoursAgo = currentTime - (6 * 60 * 1000)
    if (edClick) {
      if (edClick <= sixHoursAgo) { // 超过时间，锁定
        isLock = true
        Taro.removeStorageSync('APP_edClick')
      } else {
        isLock = false
      }
    } else { // 锁定
      isLock = true
    }
    this.setState({
      isLock,
    }, () => {
      const {id, name } = this.$router.params
      this.getDataList(() => {
        if (this.subChat) this.subChat.getData({name, id}, 'pt')
      })
    })
    
  }

  componentDidHide () { }


  getDataList (bc) {
    const {id: estate_id} = this.$router.params
    let { page_size, page, dataList, isListEmpty, isLock } = this.state
    Taro.api.house.apiestatepricelist({
      page,
      page_size,
      estate_id
    }).then(res => {
      let lineData = []
      const curData = res.list || []
      let isListEnd = false
      if (curData.length > 0) {
        if (page === 1) {
          // dataList = curData
          dataList = isLock ? curData.splice(3) : curData
          lineData = JSON.parse(JSON.stringify(curData))
        } else {
          dataList = dataList.concat(curData)
        }
        if (curData.length === page_size && res.total !== curData.length) {
          isListEnd = false
        } else {
          isListEnd = true
        }
      }
      if (curData.length === 0 && page === 1) {
        isListEmpty = true
        dataList = []
      } else {
        isListEmpty = false
      }
      this.setState({
        dataList,
        isListEnd,
        isListEmpty,
        isListLoading: false
      })
      if (lineData.length > 0) {
        if (this.subLine) this.subLine.getData(lineData.reverse() || [])
      }
      if (bc) bc()
    })
  }
  onScrollToLower (e) {
    let { isListEnd, isListLoading, page } = this.state
    if (!isListEnd && !isListLoading) {
      page++
      this.setState({
        page,
        isListLoading: true
      }, () => {
        this.getDataList()
      })
    }
  }

  renderList () {
    const iconLock = require('@img/icon_g_lock.png')
    const { dataList, isListEnd, isListLoading, isListEmpty, isLock } = this.state
    const {id, name} = this.$router.params
    const itemsList = dataList.map((item, index) => {
      const FH = Number(item.cur_layer) || 1
      const H = Number(item.layer) || 1
      let FHstr = FH
      if (item.company === '贝壳') {
        if (FH > H * 0.6666) {
          FHstr = '中高层'
        } else if (FH > H * 0.33333) {
          FHstr = '中楼层'
        } else {
          FHstr = '中低层'
        }
        if (FH === 1) FHstr = '低层'
        if (FH === H) FHstr = '高层'
      }
      return (
        <View className="sl-item" key={index}>
          {
            item.cur_layer > 0 && item.layer > 0
            ?
            <View className="sl-p1">{FHstr}/{H}层<View className="s">{item.estate_name}</View></View>
            : 
            <View className="sl-p1"><View className="s">{item.estate_name}</View></View>
          }
          <View className="sl-p2">
            <View className="op">
              <View className="k">总面积</View>
              <View className="v">{item.area}㎡</View>
            </View>
            <View className="op t2">
              <View className="k">单价</View>
              <View className="v">{item.unit_price}元/㎡</View>
            </View>
          </View>
          <View className="sl-p3">签约中介：{item.company}</View>
          <View className="sl-p3">签约日期：{item.sign_at}</View>
          <View className="sl-r1"><View className="n">{item.price}</View>万</View>
        </View>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="scoped-list">
          <Navigator url={`/pagesHouse/priceChart?id=${id}&name=${name}`} className="sl-top-tips">查看图表分析{'>>'}</Navigator>
          <AtNoticebar icon='volume-plus'>查询结果仅供参考</AtNoticebar>
          {
            isLock
            ? 
            <View className="sl-item dis">
              <View className="slid-tips" onClick={this.unlockHandle.bind(this)}>
                <Image className="icon" src={iconLock}></Image>
                <View className="t">最新成交价，点击咨询解锁</View>
              </View>
              <View className="slid-main">
                <View className="sl-p1">**/**层<View className="s">******</View></View>
                <View className="sl-p2">
                  <View className="op">
                    <View className="k">总面积</View>
                    <View className="v">*****㎡</View>
                  </View>
                  <View className="op t2">
                    <View className="k">单价</View>
                    <View className="v">******元/㎡</View>
                  </View>
                </View>
                <View className="sl-p3">签约中介：**********</View>
                <View className="sl-p3">签约日期：**********</View>
                <View className="sl-r1"><View className="n">***</View>万</View>
              </View>
            </View>
            : ''
          }
          {itemsList}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
        {/* {this.renderLine()} */}
      </ScrollView>
    )
  }


  unlockHandle () {
    const currentTime = Date.now()
    Taro.setStorageSync('APP_edChat', currentTime)
    this.subChat.countHandle('chat')
  }


  renderTop () {
    const { name } = this.$router.params
    const bg = require('./img/bg_house.jpg')
    return (
      <View className="scoped-bg-top">
        <View className="sbt-wrap" onClick={this.urlDtlLink.bind(this)}>
          <View className="t">{name}</View>
          <Image src={bg} className="bg"></Image>
        </View>
      </View>
    )
  }
  urlDtlLink () {
    const { id } = this.$router.params
    Taro.navigateTo({url: '/pagesHouse/indexDtl?id=' + id})
  }


  renderLine () {
    const { dataList } = this.state
    const {id, name} = this.$router.params
    return (
      <Navigator url={`/pagesHouse/priceChart?id=${id}&name=${name}`} className="l-area-box">
        <View className="lab-title">近20次成交单价
          <View className="lab-title-right t2">更多图表分析{'>'}</View>
        </View>
        <View className="lab-chart">
          <EchartLine curData={dataList}  onRef={this.refLine} />
        </View>
      </Navigator>
    )
  }
  refLine = (ref) => {
    this.subLine = ref
  }



  renderFooter () {
    const bg = require('./img/price/bg_more.png')
    return (
      <Navigator url="/pagesHouse/list?type=成交价&name=选择楼盘查成交价" className="scoped-footer">
        <Image src={bg} className='bg' />
      </Navigator>
    )
  }

  render () {
    return (
      <View className="l-box">
        <LoginJudge />
        {this.renderTop()}
        {this.renderList()}
        <Chat onRef={this.refChat} />
        {/* {this.renderFooter()} */}
      </View>
    )
  }
}

export default Index