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

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { AtInput, AtForm, AtImagePicker, AtTextarea, AtRadio, AtButton, Picker} from 'taro-ui'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import './supplyDemandPubish.scss'



class SupplyDemand extends Component {

    config = {
        navigationBarTitleText: '供求发布'
    }
    constructor() {
        super(...arguments)
        this.state = {
            selector: ['需求', '供应', '人才'],
            selectorChecked: '需求',
            selector1: ['上架', '下架'],
            selectorChecked1: '上架',
           
        }
    }
    onChange = e => {
        this.setState({
            selectorChecked: this.state.selector[e.detail.value]
        })
    }
    onChange1 = e => {
        this.setState({
            selectorChecked1: this.state.selector1[e.detail.value]
        })
    }

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

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='supply-demand'>
                <View className='page-section'>
                    
                    <View>
                        <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
                            <View className='picker'>
                             <View className='title-box'>
                                    <Text className='title'><Text className='require'>*</Text>供求类型:</Text> <Text className='selected'>{this.state.selectorChecked}</Text> 
                             </View>
                                
                            </View>
                        </Picker>
                    </View>
                </View>


                <View className='border-box'>
                    <Text className='require'>*</Text><AtInput
                      name='value'
                      title='需求标题：'
                      type='text'
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                    />
                </View>
                <View className='input-box'>
                    <Text className='require'>*</Text>
                    <AtInput
                      name='value'
                      title='联系人：'
                      type='text'
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                    />
                </View>
                <View className='input-box'>
                    <Text className='require'>*</Text>
                    <AtInput
                      name='value'
                      title='联系电话：'
                      type='number'
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                    />
                </View>
                <View className='address-box'>
                    <View className='title-box'>
                        <Text className='title'>联系地址:</Text>
                    </View>

                    <AtTextarea
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                      maxlength='200'
                      placeholder='你的产品简介'
                    />

                </View>
                <View className='demanding-box'>
                    <View className='title-box'>
                        <Text className='title'><Text className='require'>*</Text>需求内容:</Text>
                    </View>

                    <AtTextarea
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                      maxlength='200'
                      placeholder='你的产品简介'
                    />

                </View>
                <View className='img-box'>
                    <View className='title-box'>
                        <Text className='title'>需求图片:</Text>
                        <View className='warn'>(最多4张)</View>
                    </View>

                    <View className='img-container'>

                        <AtImagePicker
                          multiple
                          files={this.state.files}
                          onChange={this.onChange.bind(this)}
                          onFail={this.onFail.bind(this)}
                          onImageClick={this.onImageClick.bind(this)}
                        />

                    </View>
                
                </View>
                <View className='page-section'>

                    <View>
                        <Picker mode='selector' range={this.state.selector1} onChange={this.onChange1}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> <Text className='require'>*</Text>状态:</Text> <Text className='selected'>{this.state.selectorChecked1}</Text>
                                </View>

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

                <View className='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' size='small'>商品列表</AtButton>
                    </View>



                </View>
                <copyrightComponent></copyrightComponent>

               
            </View>
        )
    }
}

export default SupplyDemand