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, AtModal, AtToast   } 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',
            startValidDate:'',
            isOpenedGrabModal: false,
            grabOrderId: '',//抢到订单的id
            isGrabOrderSuccess: false,// 是否显示轻提示
            grabOrderSuccess: '无法显示绑定后的字段',// 抢单成功返回字段

        }
    }
    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
        })
    }
    // 抢单接口
    GrabDemand({ demandId = 218 }) {
        Taro.request({
            url: URL.GrabDemand,
            method: 'POST',
            dataType: 'json',
            data: {
                demandId: demandId
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                let textTip = res.data.err_msg
                this.setState({ grabOrderSuccess: textTip, isGrabOrderSuccess: true }, () => {
                    setTimeout(() => {

                        this.setState({ isGrabOrderSuccess: false })

                    }, 2000)
                })
                console.log('抢单请求：', res)
            })

    }
    grabOrder(Id) {
        this.setState({ isOpenedGrabModal: true, grabOrderId: Id })
    }
    handleGrabModalClose() {
        this.setState({ isOpenedGrabModal: false })
    }
    handleGrabModalCancel() {
        this.setState({ isOpenedGrabModal: false })
    }
    handleGrabConfirm() {
        this.setState({ isOpenedGrabModal: false })

        this.GrabDemand({ demandId: this.state.grabOrderId })
    }

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

    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        // 提示模态弹窗element
        const modalMessageGrabElement = <AtModal className='modal'
            isOpened={this.state.isOpenedGrabModal}
            title='提示'
            cancelText='取消'
            confirmText='确认'
            onClose={this.handleGrabModalClose}
            onCancel={this.handleGrabModalCancel}
            onConfirm={this.handleGrabConfirm.bind(this)}
            content='确认抢单？\n'
        />
        // 抢单返回轻提示
        const grabOrderSuccessElement = <AtToast
            isOpened={this.state.isGrabOrderSuccess}
            text={this.state.grabOrderSuccess} 
            duration={2000}
        ></AtToast>
        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' onClick={this.grabOrder.bind(this, item.sd_id)}>
                            <AtButton type='primary' size='small'> {item.state_name === '在用' ? '抢单' : '已抢单'}</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'>
                {/* 模态框 */}
                {modalMessageGrabElement}
                {/* 轻提示 */}
                {grabOrderSuccessElement}
                <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' start={this.state.startDateSel} 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}
                    loadingText='加载中'
                    noMoreText='没有更多了'
                />
                <copyrightComponent></copyrightComponent>
            </View>
        )
    }
}

export default AllDemanding