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

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

import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import LoginService from '../../LoginService'


import './mySupplyDemand.scss'


class MySupplyDemand extends Component {

    config = {
        navigationBarTitleText: '我的供求'
    }
    constructor() {
        super(...arguments)
        this.state = {
            demandSupplyCate: [{ name: '全部', id: '' }, { name: '需求', id: '1' }, { name: '供应', id: '2' }, { name: '人才', id: '3' },],
            demandSupplyCateSelected: { name: '全部', id: '' },
            demandSupplyState: [{ name: '全部', id: '' }, { name: '上架', id: '1' }, { name: '下架', id: '0' }],
            demandSupplyStatesSelected: { name: '全部', id: '' },
            title: '',
            startDateSel: '',
            endDateSel: '',
            allDemandSupply: [],
            isConfirmWindow: false, // 是否显示确认弹窗
            demandSupplyItemName: '',// 确认框提示时 使用的供求名
            demandSupplyId: '',// 删除我的供求时的供求id
            totalDemandSupply: 0,//所有供求
            currentPage: 1,//当前页数
            isShowTopNav: false,// 是否显示返回顶部按钮
            loadMorePageIndex: 1,//上拉加载页面数
        }
    }
    //获取我的供求列表API
    getMySupplyDemand({
        curr_page = 1, page_count = 10,
        sd_type = this.state.demandSupplyCateSelected.id,
        state = this.state.demandSupplyStatesSelected.id,
        sd_title = this.state.title,
        update_dateL = this.state.startDateSel,
        update_dateU = this.state.endDateSel
    }) {
        Taro.request({
            url: URL.MySupplyDemand,
            method: 'POST',
            dataType: 'json',

            data: {
                param: JSON.stringify({
                    curr_page: curr_page,
                    page_count: page_count,
                    sd_type: sd_type,
                    state: state,
                    sd_title: sd_title,
                    update_dateL: update_dateL,
                    update_dateU: update_dateU
                })
            },
            header: {
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).then(res => {
            Taro.hideLoading()
            console.log('我的供求列表', res)
            if (res.data.err_msg === "success") {
                if (this.state.isAddToList) {
                    if (res.data.supplys.length && res.data.count !== '0') {
                        this.setState({ allDemandSupply: this.state.allDemandSupply.concat(res.data.supplys) }, () => {
                            this.setState({ isAddToList: false })
                        })
                    } else {
                        this.setState({ isAddToList: false })
                        Taro.showToast({
                            title: '没有更多了',
                            icon: 'none'
                        })
                    }
                } else {
                    if (res.data.count !== '0') {
                        this.setState({ allDemandSupply: res.data.supplys, totalDemandSupply: res.data.count })
                    } else {
                        this.setState({ allDemandSupply: [], totalDemandSupply: res.data.count })
                        Taro.showToast({
                            title: '没有找到相关信息',
                            icon: 'none'
                        })
                    }
                }

            } else {
                Taro.showToast({
                    title: res.data.err_msg,
                    icon: 'none',
                    duration: 1500
                })
            }
        })

    }

    onSearchButtonHandler() {
        Taro.showLoading({ title: '加载中' })

        this.setState({ loadMorePageIndex: 1 }, () => {
            this.getMySupplyDemand({ curr_page: this.state.loadMorePageIndex })
        })

    }

    // 删除我的供求api
    onDelete({ sdID = 0 }) {
        Taro.request({
            url: URL.DeleteDemandSupply,
            method: 'POST',
            dataType: 'json',
            data: {
                sdID: sdID
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                if (res.data.err_msg == 'success') {
                    console.log('删除成功')
                    Taro.showToast({
                        title: '删除成功'
                    }).then(() => {
                        this.getMySupplyDemand({})
                    })

                } else {

                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none'
                    })

                }

            }
            )
            .catch(error => {

                Taro.showToast({
                    title: '删除失败',
                    icon: 'none'
                })
            })
    }

    // 新增我的供求
    addDemandSupply() {
        Taro.reLaunch({
            url: '/pages/supplyDemandPublish/supplyDemandPublish'
        })
    }
    //清空筛选项
    emptyFilter() {

        this.setState({
            title: '',
            endDateSel: '',
            startDateSel: '',
            demandSupplyCateSelected: { name: '全部', id: '' },
            demandSupplyStatesSelected: { name: '全部', id: '' },
        }, () => {
            this.getMySupplyDemand({})
        })
        Taro.showToast({
            title: '已清空',
            icon: 'success',
            duration: 1000
        })
    }


    //修改供求类型
    demSupplyCateChange = e => {
        this.setState({
            demandSupplyCateSelected: this.state.demandSupplyCate[e.detail.value]
        }, () => {
            console.log(this.state.demandSupplyCateSelected)
        })
    }
    // 修改供求状态
    demSupplyStateChange = e => {
        this.setState({
            demandSupplyStatesSelected: this.state.demandSupplyState[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
        })
    }
    handleWindowModClose() {
        this.setState({ isConfirmWindow: false })
    }
    handleWindowModCancel() {
        this.setState({ isConfirmWindow: false })
    }
    handleWindowConfirm() {
        this.setState({ isConfirmWindow: false })
        this.onDelete({ sdID: this.state.demandSupplyId })

    }

    // 删除我的供求
    handleOnDelete(id, itemName) {
        this.setState({ isConfirmWindow: true, demandSupplyItemName: itemName, demandSupplyId: id })
    }


    // 编辑我的供求

    // 跳转到我的供求编辑页面
    goToMyDSEditPage(sdId) {
        Taro.navigateTo({
            url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit?sdId=' + sdId
        })

    }
    // 转到供求查看页面
    goSupplyDemandView(sdId) {
        Taro.navigateTo({
            url: '/pages/supplyDemandView/supplyDemandView?sdId=' + sdId
        })
    }


    componentWillMount() {
        
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentDidMount() {
        Taro.showLoading({ title: '加载中' }).then(() => {
            this.getMySupplyDemand({})
        })
    }
    componentWillUnmount() { }

    componentDidShow() { 
        if (!Taro.getStorageSync('userInfo').user_id) {
            LoginService()
            return
        }
        if(!Taro.getStorageSync('shopInfo').shop_id&&Taro.getStorageSync('userInfo').user_id){
            Taro.showToast({
                title:'您还没有店铺，不能使用该功能，快去申请吧',
                icon:'none'
            })
        }
    }

    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.getMySupplyDemand({ curr_page: this.state.loadMorePageIndex })
        })

    }

    render() {


        // 提示模态弹窗element
        const modalMessageConfirmElement = <AtModal isOpened={this.state.isConfirmWindow}>
            <AtModalHeader>提示</AtModalHeader>
            <AtModalContent>
                确认删除{this.state.demandSupplyItemName}？
            </AtModalContent>
            <AtModalAction> <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button> </AtModalAction>
        </AtModal>


        const demandSupplyElementArray = this.state.allDemandSupply.length ? this.state.allDemandSupply.map((item, index) => {
            const SDState = this.state.demandSupplyState.filter(stateItem => {
                return stateItem.id == item.state
            })[0].name

            return <View key={index} className='info-container'>
                <View className='type'>
                    <Text className='title'>需求类型：</Text>
                    <Text className='info'>{item.type_name}</Text>
                </View>
                <View className='demand-title'>
                    <Text className='title'>需求标题：</Text>
                    <Text className='info' onClick={this.goSupplyDemandView.bind(this, item.sd_id)}>{item.sd_title}</Text>
                </View>
                <View className='contact-name'>
                    <Text className='title'>联系人：</Text>
                    <Text className='info'>{item.user_name}</Text>
                </View>
                <View className='contact-number'>
                    <Text className='title'>电话号码：</Text>
                    <Text className='info'>{item.user_phone}</Text>
                </View>
                <View className='demand-status'>
                    <Text className='title'>需求状态：</Text>
                    <Text className='info'>{SDState}</Text>
                </View>
                <View className='update-time'>
                    <Text className='title'>更新时间：</Text>
                    <Text className='info'>{item.update_date}</Text>
                </View>
                <View className='info-button-box'>

                    {item.state === '0' ? null : <View className='button' onClick={this.goSupplyDemandView.bind(this, item.sd_id)}>
                        <Button size='mini' className='button-orange button-no-margin'>查看</Button>
                    </View>}
                    <View className='button' onClick={this.goToMyDSEditPage.bind(this, item.sd_id)} >
                        <Button size='mini' className='button-orange button-no-margin'>编辑</Button>
                    </View>
                    <View className='button' onClick={this.handleOnDelete.bind(this, item.sd_id, item.sd_title)}>
                        <Button size='mini' className='button-dark-red button-no-margin'>删除</Button>
                    </View>
                </View>


            </View>
        }) : <View className='no-more-title' >
                没有更多了....
    </View >
        return (
            <View className='mySupplyDemand'>
                {/* 是否删除供求确认框 */}
                {modalMessageConfirmElement}


                {/* 供求类型 */}
                <View className='page-section'>
                    <View>
                        <Picker mode='selector' rangeKey='name' range={this.state.demandSupplyCate} onChange={this.demSupplyCateChange.bind(this)}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'><Text className='require'>*</Text>供求类型:</Text> <Text className='selected'>{this.state.demandSupplyCateSelected.name}</Text>
                                </View>
                            </View>
                        </Picker>
                    </View>
                </View>
                {/* 供求状态 */}
                <View className='page-section'>

                    <View>
                        <Picker mode='selector' rangeKey='name' range={this.state.demandSupplyState} onChange={this.demSupplyStateChange.bind(this)}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> <Text className='require'>*</Text>供求状态:</Text> <Text className='selected'>{this.state.demandSupplyStatesSelected.name}</Text>
                                </View>

                            </View>
                        </Picker>
                    </View>
                </View>
                {/* 供求标题 */}
                <View className='input-box'>
                    <Text className='require'>*</Text>
                    <AtInput
                        name='value'
                        title='供求标题：'
                        placeholder='供求标题·'
                        type='text'
                        value={this.state.title}
                        onChange={this.titleChange.bind(this)}
                        border={false}
                    />
                </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='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 className='require'>*</Text>结束日期:</Text> <Text className='date'>{this.state.endDateSel}</Text>
                                </View>
                            </View>
                        </Picker>

                    </View>
                </View>

                <View className='button-box'>
                    <View className='button' onClick={this.onSearchButtonHandler.bind(this)}>
                        <Button size='mini' className='button-orange' >
                            <AtIcon value='search' size='12' color='white'></AtIcon>
                            搜索</Button>
                    </View>
                    <View className='button' onClick={this.addDemandSupply.bind(this)}>
                        <Button className=' button-green' size='mini'>
                            <AtIcon value='add' size='12' color='white'></AtIcon>
                            新增</Button>
                    </View>
                    <View className='button' onClick={this.emptyFilter.bind(this)}>
                        <Button size='mini' className='button-dark-red'>
                            <AtIcon value='trash' size='12' color='white'></AtIcon>
                            清空</Button>
                    </View>
                </View>
                <View className='total-count'>一共<Text className='number'>{this.state.totalDemandSupply}</Text> 条记录</View>
                {/* 我的供求信息 */}
                <View className='info-box'>
                    {demandSupplyElementArray}
                </View>

                {this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
                <CopyrightComponent></CopyrightComponent>

            </View>
        )
    }
}

export default MySupplyDemand