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

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtInput, AtButton, Picker, AtIcon, AtLoadMore } from 'taro-ui'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'

import URL from '../../serviceAPI.config'
import './allDemanding.scss'

import eyeIcon from '../../icons/eye.png'


let currentPage=1
class AllDemanding extends Component {
    config = {
        navigationBarTitleText: '全部业主需求'
    }
    constructor() {
        super(...arguments)
        this.state = {
            supplys:[], // 需求列表
            isMore:'more', // 上拉加载状态
            demandingState: [ '需求', '供应', '人才'], // 供求状态选择
            demandingStateSelected:'全部', // 当前供求状态
            industryCate: ['制定家具', '成品家具', '办公家具','设计'], // 行业分类状态选择
            industryCateSelected: '全部', // 当前行业分类状态
            startDateSel: '2018-04-22',
            endDateSel: '2018-04-22',
        }
    }
    GetAllDemanding({ curr_page=1, page_count=20}) {
        Taro.request({
            url: URL.GetAllDemanding,
            method: 'POST',
            dataType: 'json',
            data: {
                param: JSON.stringify({
                    curr_page: curr_page,
                    page_count: page_count
                }),
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                if (res.data.supplys.length){
                const newSupplys=this.state.supplys.concat(res.data.supplys)
                    this.setState({ supplys: newSupplys, isMore: 'more'})
            }else{
                    this.setState({ isMore:'noMore'})
            }
            })
    }

    // 向上拉升延迟一秒加载数据
    handleLoadMore(){
        this.setState({isMore:'loading'})
        setTimeout(() => {
            currentPage += 1
            this.GetAllDemanding({ curr_page: currentPage })
            
        }, 1000);
    }
    // 改变需求选项
    changeDemandingState = e => {
        this.setState({
            demandingStateSelected: this.state.demandingState[e.detail.value]
        })
    }
    // 改变行业类别选项
    changeIndustryCate = e => {
        this.setState({
            industryCateSelected: this.state.industryCate[e.detail.value]
        })
    }
  //改变开始日期
    onStartDateChange = e => {
        this.setState({
            startDateSel: e.detail.value
        })
    }
// 改变结束日期
    onEndDateChange = e => {
        this.setState({
            endDateSel: e.detail.value
        })
    }


    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }
    componentDidMount(){
        // 得到第一页需求数据
        this.GetAllDemanding({})
        
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        const allDemandingElementArray=this.state.supplys?this.state.supplys.map((item,index)=>{

            return <View className='demanding-info' key={index}>
                    <View className='header'>
                    <AtIcon value='user' size='12' color='#2196F3'></AtIcon>
                    <View className='name'> 业主:{item.user_name}</View>
                    <View className='others'>
                        <Text className='cate'>{item.class_name+' '} </Text>
                        | 
                        <Image src={eyeIcon} style='width:12px; height:12px;  vertical-align:middle;' />
                        <Text className='watch'>{item.browse_times}</Text>
                     </View>
                    </View>
                    <View className='body'>
                        <View className='image-container'>
                        <Image style='width:90px;height:60px' src={URL.Base + item.file_path[0].thumb_path} />
                        </View>
                        <View className='detail'>
                        <View className='title'>{item.sd_title}</View>
                        <View className='para'>{item.sd_desc}</View>
                            <View className='button'>
                                <AtButton type='primary' size='small'>
                                    抢单</AtButton>
                            </View>
                        </View>
                    </View>
                    <View className='footer'>
                        <View className='location'><AtIcon value='map-pin' size='12' color='black'></AtIcon>没有数据</View>
                    <View className='time'>更新日期:{item.update_date}</View>
                    </View>

                </View>
        }):null
        return (
            <View className='allDemanding'>
                <View className='page-section'>
                    {/* 供求状态选择 */}
                    <View>
                        <Picker mode='selector' range={this.state.demandingState} onChange={this.changeDemandingState}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> <Text className='require'>*</Text>供求状态:</Text> <Text className='selected'>{this.state.demandingStateSelected}</Text>
                                </View>

                            </View>
                        </Picker>
                    </View>
                </View>
                <View className='input-box'>
                    <Text className='require'>*</Text>
                    <AtInput
                      name='value'
                      title='需求标题：'
                      type='text'
                      placeholder='需求标题'
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                    />
                </View>
                {/* 开始和结束日期选择 */}
                <View className='page-section'>
                    <View className='picker-box'>
                        <Picker mode='date' className='picker-container' onChange={this.onStartDateChange}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'><Text className='require'>*</Text>开始日期:</Text> <Text className='selected'>{this.state.startDateSel}</Text>
                                </View>
                            </View>
                        </Picker>
                        <Picker className='picker-container' mode='date' onChange={this.onEndDateChange}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'><Text className='require'>*</Text>结束日期:</Text> <Text className='selected'>{this.state.endDateSel}</Text>
                                </View>
                            </View>
                        </Picker>
                    </View>
                </View>
                {/* 行业分类选择 */}
                <View className='page-section'>
                    <View>
                        <Picker mode='selector' range={this.state.industryCate} onChange={this.changeIndustryCate}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> <Text className='require'>*</Text>行业分类:</Text> <Text className='selected'>{this.state.industryCateSelected}</Text>
                                </View>
                            </View>
                        </Picker>
                    </View>
                </View>
                <View className='button-box'>
                    <View className='button'>
                        <AtButton type='primary' size='small'>
                            <AtIcon value='search' size='12' color='white'></AtIcon>
                            搜索</AtButton>
                    </View>
                </View>
                 {/* 供求页面的数据加载 */}
                <View className='demanding-box'>
                    {allDemandingElementArray}
                </View>
                <AtLoadMore
                  onClick={this.handleLoadMore.bind(this)}
                  status={this.state.isMore}
                />
                <copyrightComponent></copyrightComponent>
            </View>
        )
    }
}

export default AllDemanding