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

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Button } from '@tarojs/components'
import { AtInput, Picker, AtIcon, AtModal, AtToast, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'

import InteractionComponent from '../../component/interactionComponent/interactionComponent'

import URL from '../../serviceAPI.config'
import './allDemanding.scss'
import eyeIcon from '../../icons/eye.png'




class AllDemanding extends Component {
    config = {
        navigationBarTitleText: '全部业主需求'
    }
    constructor() {
        super(...arguments)
        this.state = {
            supplys: [], // 需求列表
            demandingState: [{ name: '全部', id: '' }, { name: '在用', id: '1' }, { name: '已抢单', id: '2' }, { name: '已抢光', id: '3' },], // 供求状态选择
            demandingStateSelected: { name: '全部', id: '' }, // 当前供求状态
            industryTypeSelected: { name: '全部', id: '' },// 当前行业分类
            title: '',
            startDateSel: '',
            endDateSel: '',
            isOpenedGrabModal: false,
            grabOrderId: '',//抢到订单的id
            isGrabOrderSuccess: false,// 是否显示轻提示
            grabOrderSuccess: '无法显示绑定后的字段',// 抢单成功返回字段
            currentPage: 1,
            isAddToList: false,// / 请求业主需求的时候是否添加到旧列表里
            isShowTopNav: false,// 是否显示返回顶部按钮
            loadMorePageIndex: 1

        }
    }

    // 搜索业主需求函数
    searchDemanding({
        curr_page = 1,
        page_count = 10,
        sd_title = this.state.title,
        state = this.state.demandingStateSelected.id,
        update_dateL = this.state.startDateSel,
        update_dateU = this.state.endDateSel,
        class_id = this.state.industryTypeSelected.id
    }) {
        Taro.request({
            url: URL.GetAllDemanding,
            method: 'POST',
            dataType: 'json',
            data: {
                param: JSON.stringify({
                    curr_page: curr_page,
                    page_count: page_count,
                    sd_title: sd_title,
                    state: state,
                    update_dateL: update_dateL,
                    update_dateU: update_dateU,
                    class_id: class_id

                }),
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                Taro.hideLoading()
                if (res.data.err_msg === 'success') {
                    if (res.data.supplys) {
                        if (this.state.isAddToList) {
                            this.setState({ supplys: this.state.supplys.concat(res.data.supplys), isAddToList: false })
                        } else {
                            this.setState({ supplys: res.data.supplys })
                        }
                    } else {
                        if (this.state.isAddToList) {
                            Taro.showToast({
                                title: '没有更多了',
                                icon: 'none'
                            })
                        }else{
                            this.setState({ supplys:[]})
                        }
                        
                    }
                } else {
                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none',
                        duration: 1500
                    })
                }
                this.setState({  isAddToList: false })
            })
    }

    // 改变需求选项
    changeDemandingState = e => {
        this.setState({
            demandingStateSelected: this.state.demandingState[e.detail.value]
        })
    }
    titleChange(event) {
        this.setState({ title: event })
    }

    //改变开始日期
    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 })
    }
    searchHanlder() {
        Taro.showLoading({ title: '加载中' })
        this.searchDemanding({})
    }
    //清空筛选项
    emptyFilter() {
        this.setState({
            title: '',
            endDateSel: '',
            startDateSel: '',
            demandingStateSelected: { name: '全部', id: '' },
            industryTypeSelected: { name: '全部', id: '' },
        })
        Taro.showToast({
            title: '已清空',
            icon: 'success',
            duration: 1000
        })
    }

    getDataFromChild(value) {
        console.log('从子组件传回来的值', value)
        this.setState({ industryTypeSelected: value })
    }

    // 翻页导航
    paginationNav(type) {
        Taro.showLoading({
            title: '加载中'
        })
        this.setState({ currentPage: type.current, }, () => {
            this.searchDemanding({
                curr_page: this.state.currentPage,
                page_count: 10,
                sd_title: this.state.title,
                state: this.state.demandingStateSelected.id,
                update_dateL: this.state.startDateSel,
                update_dateU: this.state.endDateSel,
                class_id: this.state.industryTypeSelected.id
            })
        })
    }

    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }
    componentDidMount() {
        // 得到第一页需求数据
        Taro.showLoading({ title: '加载中' }).then(() => {
            this.searchDemanding({})
        })


    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }
    // 页面位置
    onPageScroll(location) {
        if (location.scrollTop <= 300 && this.state.isShowTopNav) {
            this.setState({ isShowTopNav: false })
        } else if (location.scrollTop > 300 && !this.state.isShowTopNav) {
            this.setState({ isShowTopNav: true })
        }
    }

    // 底部加载
    onReachBottom() {
        Taro.showLoading({
            title: '加载中'
        })

        this.setState({ isAddToList: true, loadMorePageIndex: this.state.loadMorePageIndex + 1 }, () => {
            this.searchDemanding({ curr_page: this.state.loadMorePageIndex })
        })

    }

    render() {
        // 提示模态弹窗element


        const modalMessageGrabElement = <AtModal isOpened={this.state.isOpenedGrabModal}>
            <AtModalHeader>提示</AtModalHeader>
            <AtModalContent>
                确认抢单？
        </AtModalContent>
            <AtModalAction> <Button onClick={this.handleGrabModalCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleGrabConfirm.bind(this)}>确定</Button> </AtModalAction>
        </AtModal>
        // 抢单返回轻提示
        const grabOrderSuccessElement = <AtToast
            isOpened={this.state.isGrabOrderSuccess}
            text={this.state.grabOrderSuccess}
            duration={2000}
        ></AtToast>
        const allDemandingElementArray = this.state.supplys.length ? 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:110px;height:80px' 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>
                        {item.state === '1' ? <View className='button' onClick={this.grabOrder.bind(this, item.sd_id)}>
                            <Button size='mini' className='button-orange'>抢单</Button>
                        </View> : null || item.state === '2' ? <View className='button'>
                            <Button size='mini' className='button-orange blur'>{item.state_name}</Button>
                        </View> : null || item.state === '3' ? <View className='button'>
                            <Button size='mini' className='button-orange blur'>{item.state_name}</Button>
                        </View> : null}
                    </View>
                </View>
                <View className='footer'>
                    <View className='location'><AtIcon value='map-pin' size='12' color='black'></AtIcon>{item.user_address}</View>
                    <View className='time'>更新日期:{item.update_date}</View>
                </View>

            </View>
        }) : <View className='no_more_title'>没有更多了</View>
        return (
            <View className='allDemanding'>
                {/* 模态框 */}
                {modalMessageGrabElement}
                {/* 轻提示 */}
                {grabOrderSuccessElement}
                <View className='page-section'>
                    {/* 供求状态选择 */}
                    <View>
                        <Picker mode='selector' rangeKey='name' range={this.state.demandingState} onChange={this.changeDemandingState}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> 供求状态:</Text> <Text className='selected'>{this.state.demandingStateSelected.name}</Text>
                                </View>

                            </View>
                        </Picker>
                    </View>
                </View>

                <View className='input-box'>

                    <AtInput
                        name='value'
                        title='需求标题：'
                        type='text'
                        placeholder='需求标题'
                        value={this.state.title}
                        onChange={this.titleChange.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> <Text className='date'>{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> <Text className='date'>{this.state.endDateSel}</Text>
                                </View>
                            </View>
                        </Picker>
                    </View>
                </View>
                {/* 行业分类选择 */}
                <InteractionComponent url={URL.GetIndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)} selectedValue={this.state.industryTypeSelected}></InteractionComponent>


                <View className='button-box'>
                    <View className='button' onClick={this.searchHanlder.bind(this)}>
                        <Button type='primary' size='mini' className='button-orange' >
                            <AtIcon value='search' size='12' color='white'></AtIcon>
                            搜索</Button>
                    </View>

                    <View className='button' onClick={this.emptyFilter.bind(this)}>
                        <Button type='primary' size='mini' className='button-dark-red' >
                            <AtIcon value='trash' size='12' color='white'></AtIcon>
                            清空</Button>
                    </View>
                </View>
                {/* 供求页面的数据加载 */}
                <View className='demanding-box'>
                    {allDemandingElementArray}
                </View>
                {this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
                <CopyrightComponent></CopyrightComponent>
            </View>
        )
    }
}

export default AllDemanding