fpapp/src/pagesMore/qa/list.jsx

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

import { AtSearchBar } from 'taro-ui'
import ListMore from '@/c/pageDataList/listMore'
import Footer from '@/c/footer'
import './list.scss'
import { arrToObj } from '@utils'

class Index extends Component {
  onShareAppMessage() {
    return {
      title: '常见答疑',
    }
  }
  onShareTimeline () {
    return {
      title: '常见答疑-洪楼解惑',
    }
  }

  constructor (props) {
    super(props)
    this.state = {
      searchKey: '',          
      page_size: 10,
      page: 1,
      isListEnd: false,
      isListLoading: false,
      isListEmpty: false,
      dataList: [],
      curNav: 1,
      isDShow: false,
      curObj: {},
    }
  }

  config = {
    navigationBarTitleText: '常见答疑',
  }

  componentWillMount () {
    this.getDataList()
  }

  componentDidShow () { }

  componentDidHide () { }

  renderSearch () {
    const { searchKey } = this.state
    return (
      <AtSearchBar
        value={searchKey}
        fixed={true}
        placeholder="请输入问题名称搜索"
        onChange={this.onSeachChange.bind(this)}
        onActionClick={this.onSelectActionClick.bind(this)}
        onClear={this.onClearHandle.bind(this)}
      />
    )
  }
  onSeachChange (value) {
    this.setState({
      searchKey: value
    })
  }
  onClearHandle () {
    this.setState({
      searchKey: '',
      page: 1
    }, () => {
      this.getDataList()
    })
  }
  onSelectActionClick () {
    this.setState({
      page: 1,
    }, () => {
      this.getDataList()
    })
  }


  getDataList () {
    let { page_size, page, dataList, isListEmpty } = this.state
    const { 
      searchKey
    } = this.state
    Taro.api.news.qalist({
      page,
      page_size,
      question_cont: searchKey,
    }).then(res => {
      const curData = res.list || []
      let isListEnd = false
      if (curData.length > 0) {
        if (page === 1) {
          dataList = 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
      })
    })
  }
  onScrollToLower (e) {
    let { isListEnd, isListLoading, page } = this.state
    if (!isListEnd && !isListLoading) {
      page++
      this.setState({
        page,
        isListLoading: true
      }, () => {
        this.getDataList()
      })
    }
  }


  renderList () {
    const { dataList, isListEnd, isListLoading, isListEmpty } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const qtObj = arrToObj(dictData.question_tag)
    const iconQ = require('@img/qa_q.png')
    const iconA = require('@img/qa_a2.png')
    const itemsList = dataList.map((item, index) => {
      let curStr2 = item.answer_cont || ''
      if (curStr2) {
        item.titleStr2 = curStr2.length > 36 ? `${curStr2.substring(0, 36)}...` : curStr2
      }
      const qt = item.question_tag || ''
      const signItems = qt.split(',').map((tag, tIndex) => {
        return (
          <View className="sign" key={tIndex}>{qtObj[tag] || '提问'}</View>
        )
      })
      return (
        <View className="ql-item" key={index}>
          <View className="ql-header">
            {signItems}
          </View>
          <View className="ql-info">
            <View  className="ql-p1">
              <Image className="img" src={iconQ} />
              <View className="t">{item.question_cont}</View>
            </View>
            {
              item.isMoreAllShow
              ?
              <View className="ql-p1">
                <Image className="img" src={iconA} />
                <View className="t">{item.answer_cont}
                  <View className="ql-more t2" onClick={this.changeMoreHandle.bind(this, index)}>收起
                    <View className="sign"></View>
                  </View>
                </View>
              </View>
              :
              <View className="ql-p2">
                <Image className="img" src={iconA} />
                <View className="t">{item.titleStr2}
                  <View className="ql-more" onClick={this.changeMoreHandle.bind(this, index)}>展开
                    <View className="sign"></View>
                  </View>
                </View>
              </View>
            }
          </View>
          {/* <View className="ql-footer">
            <View className="s">{item.create_at.substring(0, 10)}</View>
          </View> */}
        </View>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="q-list">
          {itemsList}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
      </ScrollView>
    )
  }

  changeMoreHandle (index) {
    const { dataList } = this.state
    let mList = dataList || []
    mList.map((item, i) => {
      if (index === i) item.isMoreAllShow = !item.isMoreAllShow
    })
    this.setState({
      dataList: [...mList]
    })
  }

  renderQaAdd () {
    const iconGif = require('@img/icon_g_qa.gif')
    return (
      <Navigator url={'/pagesQa/add'} className="scoped-fix-q2 t2">
        <Image className="img" src={iconGif} />
      </Navigator>
    )
  }
  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 () {
    return (
      <View className="l-box has-footer">
        {this.renderQaAdd()}
        {this.renderShare()}
        {this.renderSearch()}
        {this.renderList()}
        <Footer current={4} />
      </View>
    )
  }
}

export default Index