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

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

import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'


import './supplyDemandPublish.scss'



class SupplyDemand extends Component {

    config = {
        navigationBarTitleText: '供求发布'
    }
    constructor() {
        super(...arguments)
        this.state = {
            demandingSupplyCate: ['需求', '供应', '人才'], //供求类型选择
            demandingSupplyCateSelected: '需求',// 当前供求类型
            demandingSupplyState: ['上架', '下架'], // 状态选择
            demandingSupplyStateSelected: '上架',// 当前状态
            title: '',
            contactName: '',
            contactNumber: '',
            contactAddress: '',
            content: '',
            addImg: true, // 是否支持添加图片
            files: [{
                url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
            },
            {
                url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
            },
            {
                url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
            }]

        }
    }

    // 上传供求api
    uploadSupplyDemand() {
        Taro.request({
            url: URL.UploadSupplyDemand,
            method: 'POST',
            dataType: 'json',
            data: {
                action: 1,
                sdInfo: JSON.stringify({ "sd_type": "2", "sd_title": "534523", "user_name": "杨夕兵", "user_phone": "18950295811", "user_address": "2342", "sd_desc": "42342", "state": "1", "file_path": [{ "file_name": "bg3.jpg", "file_size": "212678", "file_path": "Uploads/supply/user_27/201812/38bf91f30d215bbefb2686f2401217a6.jpg", "thumb_path": "Uploads/supply/user_27/201812/thumb/38bf91f30d215bbefb2686f2401217a6_200X200.jpg" }] })
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
            }
        })
            .then(res => {
                console.log('上传供求', res)
            }
            )
    }

    // 上传商品图片api
      uploadGoodsImage() {
        Taro.request({
            url: URL.UploadPorductImage,
            method: 'POST',
            dataType: 'json',
            data: {
                file: 1,
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
            }
        })
            .then(res => {
                console.log('上传商品图片', res)  
            }
            )
    }
    // 修改供求类型
    demandingSupplyCate = e => {
        this.setState({
            demandingSupplyCateSelected: this.state.demandingSupplyCate[e.detail.value]
        })
    }
    // 修改供求状态
    demSupplyStateChange = e => {
        this.setState({
            demandingSupplyStateSelected: this.state.demandingSupplyState[e.detail.value]
        })
    }
    //改标题
    titleChange(event) {
        this.setState({ title: event })
    }
    contactNameChange(event) {
        this.setState({ contactName: event })
    }
    contactNumberChange(event) {
        this.setState({ contactNumber: event })
    }
    contactAddressChange(event) {
        this.setState({ contactAddress: event.target.value })
    }
    contentChange(event) {
        this.setState({ content: event.target.value })
    }
    // 添加图片
    onChange(files, operationType, index) {
        console.log(files[0].url)
        Taro.uploadFile(files[0].url).then((res)=>{
            console.log(res)
        })
        if (operationType === 'add') {
            this.setState({
                files
            }, () => {
                if (this.state.files.length === 4) {
                    this.setState({ addImg: false })
                }
            })
        }
        if (operationType === 'remove') {
            this.state.files.splice(index, 1);
            this.setState({ files: this.state.files });
        }
    }
    onFail(mes) {
        console.log(mes)
    }
    onImageClick(index, file) {
        console.log(index, file)
    }
    componentDidMount(){
        this.uploadSupplyDemand()
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='supply-demand'>
                <SearchBarComponent></SearchBarComponent>
                <View className='page-section'>

                    <View>
                        <Picker mode='selector' range={this.state.demandingSupplyCate} onChange={this.demandingSupplyCate.bind(this)}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'><Text className='require'>*</Text>供求类型:</Text> <Text className='selected'>{this.state.demandingSupplyCateSelected}</Text>
                                </View>

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

                    <AtTextarea
                        value={this.state.contactAddress}
                        onChange={this.contactAddressChange.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.content}
                        onChange={this.contentChange.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
                            showAddBtn={this.state.addImg}
                            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.demandingSupplyState} onChange={this.demSupplyStateChange}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> <Text className='require'>*</Text>状态:</Text> <Text className='selected'>{this.state.demandingSupplyStateSelected}</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' className='button-a' size='small'>发布并新增</AtButton>
                    </View>
                    <View className='button'>
                        <AtButton type='primary' className='button-a' size='small'>商品列表</AtButton>
                    </View>



                </View>
                <copyrightComponent></copyrightComponent>


            </View>
        )
    }
}

export default SupplyDemand