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

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtButton, Picker,AtIcon } from 'taro-ui'
import URL from '../../serviceAPI.config'

import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import searchBarComponent from '../../component/searchBarComponent/searchBarComponent'


import './mySupplyDemand.scss'


console.log('hi')
class MySupplyDemand extends Component {

    config = {
        navigationBarTitleText: '我的供求'
    }
    constructor() {
        super(...arguments)
        this.state = {
            demandSupplyCate: ['全部','需求', '供应', '人才'],
            demandSupplyCateSelected: '全部',
            demandSupplyState: ['全部','上架', '下架'],
            demandSupplyStatesSelected: '全部',
            title:'',
            startDateSel: '2018-04-22',
            endDateSel: '2018-04-22',

        }
    }
    //MySupplyDemand
    getMySupplyDemand({ curr_page=1, page_count=20}) {
        Taro.request({
            url: URL.MySupplyDemand,
            method: 'POST',
            dataType: 'json',
            data: {
                curr_page: curr_page, 
                page_count: page_count 
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).then(res => {
            console.log(res) //  ------------------------------------------- to be continue----
            console.log('个人供求=》暂时无数据， 后台需要权限验证')
        })

    }

    //修改供求类型
    demSupplyCateChange = e => {
        this.setState({
            demandSupplyCateSelected: this.state.demandSupplyCate[e.detail.value]
        })
    }
    // 修改供求状态
    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
        })
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentDidMount () { 
        this.getMySupplyDemand({})
    }
    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='mySupplyDemand'>
                <searchBarComponent></searchBarComponent>
                {/* 供求类型 */}
                <View className='page-section'>
                    <View>
                        <Picker mode='selector' 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}</Text>
                                </View>
                            </View>
                        </Picker>
                    </View>
                </View>
                {/* 供求状态 */}
                <View className='page-section'>

                    <View>
                        <Picker mode='selector' 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}</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)}
                    />
                </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='button-box'>
                    <View className='button'>
                        <AtButton type='primary' size='small'>
                            <AtIcon value='search' size='12' color='white'></AtIcon>
                        搜索</AtButton>
                    </View>
                    <View className='button'>
                        <AtButton type='primary' className='button-a' size='small'>
                            <AtIcon value='add' size='12' color='white'></AtIcon>
                        新增</AtButton>
                    </View>
                </View>
                <View className='total-count'>一共<Text className='number'>20</Text> 条记录</View>
                {/* 我的供求信息 */}
                <View className='info-box'>
                    <View className='info-container'>
                     
                        <View className='type'>
                            <Text className='title'>需求类型：</Text>
                            <Text className='info'>1</Text>
                        </View>
                        <View className='demand-title'>
                            <Text className='title'>需求标题：</Text>
                            <Text className='info'>1</Text>
                        </View>
                        <View className='contact-name'>
                            <Text className='title'>联系人：</Text>
                            <Text className='info'>1</Text>
                        </View>
                        <View className='contact-number'>
                            <Text className='title'>电话号码：</Text>
                            <Text className='info'>1</Text>
                        </View>
                        <View className='demand-status'>
                            <Text className='title'>需求状态：</Text>
                            <Text className='info'></Text>
                        </View>
                        <View className='update-time'>
                            <Text className='title'>更新时间：</Text>
                            <Text className='info'>1</Text>
                        </View>
                        <View className='info-button-box'>
                            <View className='button'>
                                <AtButton type='primary' size='small'>查看</AtButton>
                            </View>
                            <View className='button'>
                                <AtButton type='primary' size='small'>编辑</AtButton>
                            </View>
                            <View className='button'>
                                <AtButton type='primary' className='button-a' size='small'>删除</AtButton>
                            </View>
                        </View>
                        

                    </View>


                </View>
         


                <copyrightComponent></copyrightComponent>

            </View>
        )
    }
}

export default MySupplyDemand