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

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

import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'
import InteractionComponent from '../../component/interactionComponent/interactionComponent'


import './myNeedsPublish.scss'



class MyNeedsPublish extends Component {

    config = {
        navigationBarTitleText: '需求发布'
    }
    constructor() {
        super(...arguments)
        this.state = {
            industryTypeSelected: { name: '全部', id: '-1' },// 当前行业分类
            needsState: [{ name: '在用', id: '1' }, { name: '作废', id: '0' }], // 状态选择
            needsStateSelected: { name: '在用', id: '1' },// 当前状态
            needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
            needsTypeSelected: { name: '业主需求', id: '4' },
            title: '',
            contactName: Taro.getStorageSync('user_identity').username,
            contactNumber: Taro.getStorageSync('user_identity').userphone,
            contactAddress: '',
            content: '',
            pickerImageUrl: [], // 上传的图片
            ImagesInfo: [],// 后台传回来的图片信息
          


        }
    }


    // 上传需求api
    uploadMyNeedsButton() {
        if (this.state.title &&
            this.state.contactName
            && this.state.contactNumber
            && this.state.content && this.state.needsStateSelected) {
            this.uploadMyNeedsApi({})
        } else {
            Taro.showToast({
                title: '请填写完表格',
                icon: 'none',
                duration: 1500
            })

        }


    }


    // uploadMyNeeds 上传供求 的api
    uploadMyNeedsApi() {

        const file_path = [];
        this.state.ImagesInfo.forEach((item) => {
            file_path.push({
                file_name: item.file_name,
                file_size: item.file_size,
                file_path: item.file_path,
                thumb_path: item.thumb_path
            })
        })
        Taro.request({
            url: URL.PublishMyNeed,
            method: 'POST',
            dataType: 'json',
            data: {
                action: 1,
                sdInfo: JSON.stringify({
                    class_id: this.state.industryTypeSelected.id,

                    sd_type: this.state.needsTypeSelected.id,
                    sd_title: this.state.title,
                    user_name: this.state.contactName,
                    user_phone: this.state.contactNumber,
                    user_address: this.state.contactAddress,
                    sd_desc: this.state.content,
                    state: this.state.needsStateSelected.id,
                    file_path: file_path,

                })
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                console.log('上传需求', res)
                if (res.data.err_msg === 'success') {
                    Taro.showToast({
                        title: '上传成功',
                        icon: 'success',
                        duration: 1500
                    }).then(() => {
                        setTimeout(() => {
                            Taro.navigateTo({
                                url: '/pages/myNeeds/myNeeds'
                            })
                        }, 1500);
                    })

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

            }
            )

    }

    // 上传图片
    onChangeImg(files, operationType, index) {
        const that = this
        if (operationType === 'add') {
            Taro.uploadFile({
                url: URL.MyNeedUploadImage,
                filePath: files[files.length - 1].url,
                name: 'file',
                header: {
                    'content-type': 'multipart/form-data',
                    'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success(response) {
                    const data = JSON.parse(response.data)
                    const imagePath = URL.Base + data.file_path
                    const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
                    const newImageInfo = that.state.ImagesInfo.concat(data)
                    that.setState({
                        pickerImageUrl: newPickerImageUrl,
                        ImagesInfo: newImageInfo
                    })
                    Taro.showToast({
                        title: '上传成功',
                        icon: 'success',
                        duration: 1500
                    })
                }
            })
        }
        if (operationType === 'remove') {
            this.state.ImagesInfo.splice(index, 1) // 删除显示的图片
            this.state.pickerImageUrl.splice(index, 1)// 删除图片param
            that.setState({
                pockerImageUrl: this.state.pickerImageUrl,
                ImagesInfo: this.state.ImagesInfo,
            })
            Taro.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1500
            })
        }
    }
    // 修改需求类型
    needsTypeHandler = e => {
        this.setState({
            needsTypeSelected: this.state.needsType[e.detail.value]
        }, () => {
            console.log(this.state.needsTypeSelected)
        })
    }
    // 修改供求状态
    needsStateHandler = e => {
        this.setState({
            needsStateSelected: this.state.needsState[e.detail.value]
        }, () => {
            console.log(this.state.needsStateSelected)
        })
    }
    //改标题
    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 })
    }
    goToMyNeedsPage() {
        Taro.navigateTo({
            url: '/pages/myNeeds/myNeeds'
        })
    }
    getDataFromChild(value) {
        console.log('从子组件传回来的值', value)
        this.setState({ industryTypeSelected: value })
    }


    componentDidMount() {
        // console.log('this.$router.params.sdId',this.$router.params.sdId)
        // Taro.showLoading({title:'加载中'})
        // this.getSupplyDemandInfo()
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='supply-demand'>

                {/* 行业分类 */}
                <InteractionComponent url={URL.GetIndustryTypeList}
                    onPassDataToChild={this.getDataFromChild.bind(this)}
                    selectedValue={this.state.industryTypeSelected}
                ></InteractionComponent>
                {/* 需求类型 */}
                <View className='page-section'>
                    <View>
                        <Picker mode='selector' rangeKey='name' range={this.state.needsType} onChange={this.needsTypeHandler.bind(this)}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'>需求类型:</Text> <Text className='selected'>{this.state.needsTypeSelected.name}</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>
                    </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
                            multiple
                            showAddBtn={this.state.pickerImageUrl.length < 4}
                            files={this.state.pickerImageUrl}
                            onChange={this.onChangeImg.bind(this)}
                            onFail={this.onFail.bind(this)}
                            onImageClick={this.onImageClick.bind(this)}
                        />
                    </View>

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

                    <View>
                        <Picker mode='selector' rangeKey='name' range={this.state.needsState} onChange={this.needsStateHandler}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> <Text className='require'>*</Text>状态:</Text> <Text className='selected'>{this.state.needsStateSelected.name}</Text>
                                </View>

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

                <View className='button-box'>
                    <View className='button' onClick={this.uploadMyNeedsButton.bind(this)}>
                        <AtButton type='primary' size='small'>发布</AtButton>
                    </View>
                    {/* <View className='button'>

                        <AtButton type='primary' className='button-a' size='small'>保存并新增</AtButton>
                    </View> */}
                    <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
                        <AtButton type='primary' className='button-a' size='small'>我的需求</AtButton>
                    </View>
                </View>
                <CopyrightComponent></CopyrightComponent>


            </View>
        )
    }
}

export default MyNeedsPublish