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

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

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


import './myNeedsEdit.scss'



class MyNeedsEdit extends Component {

  config = {
    navigationBarTitleText: '需求编辑'
  }
  constructor() {
    super(...arguments)
    this.state = {
      needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],// 需要从后台api 获取
      needsTypeSelected: { name: '业主需求', id: '4' },
      needsState: [
        { name: '全部', id: '' },
        { name: '作废', id: '0' }
        , { name: '在用', id: '1' },
        { name: '设计中', id: '2' },
        { name: '已设计', id: '3' }],// 需要从后台api 获取
      title: '',
      industryTypeSelected:'',
      contactName: '',
      contactNumber: '',
      contactAddress: '',
      content: '',
      pickerImageUrl: [], // 上传的图片
      ImagesInfo: [],// 后台传回来的图片信息
      isFormCompleted: false,
    }
  }
  //获取商品信息api GetProductInfo
  getSupplyDemandInfo() {
    Taro.request({
      url: URL.GetSupplyDemandInfo,
      method: 'GET',
      dataType: 'json',
      data: {
        sdID: this.$router.params.sdId,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        console.log('供求详情获取成功', res)
        const selectedType = this.state.demandingSupplyCate.filter(item => item.id == res.data.sdInfo.sd_type)[0]
        const selectedState = this.state.needsState.filter(item => item.id == res.data.sdInfo.state)[0]
        const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
        this.setState({
          demandingSupplyCateSelected: selectedType,
          title: res.data.sdInfo.sd_title,
          contactName: res.data.sdInfo.user_name,
          contactNumber: res.data.sdInfo.user_phone,
          contactAddress: res.data.sdInfo.user_address,
          content: res.data.sdInfo.sd_desc,
          needsStateSelected: selectedState,
          pickerImageUrl: imageFile,
          ImagesInfo: res.data.sdInfo.file_path,
        })
        Taro.hideLoading()
      }

      )
      .catch(error => {
        console.log('供求详情获取失败', error)
      })
  }

  // 上传供求api
  uploadSupplyDemand() {
    if (this.state.demandingSupplyCateSelected && this.state.title && this.state.contactName && this.state.contactNumber && this.state.content && this.state.needsStateSelected) {
      this.uploadDemSup({})
    } else {
      this.setState({ uploadDemSupTextTip: '请填写完表格', isUploadDemSupSuccess: true }, () => {
        setTimeout(() => {
          this.setState({ isUploadDemSupSuccess: false })
        }, 2000)
      })
    }

    // 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)
    //     }
    //     )
  }

  // uploadDemSup 上传供求 的api
  uploadDemSup({ sd_type = this.state.demandingSupplyCateSelected.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 }) {

    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.UploadSupplyDemand,
      method: 'POST',
      dataType: 'json',
      data: {
        action: 2,
        sdInfo: JSON.stringify({
          sd_id: this.$router.params.sdId,
          sd_type: sd_type,
          sd_title: sd_title,
          user_name: user_name,
          user_phone: user_phone,
          user_address: user_address,
          sd_desc: sd_desc,
          state: state,
          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/mySupplyDemand/mySupplyDemand'
              })
            }, 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.UploadDSPorductImage,
        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
      })
    }
  }
  // 修改供求类型
  demandingSupplyCate = e => {
    this.setState({
      demandingSupplyCateSelected: this.state.demandingSupplyCate[e.detail.value]
    })
  }
  // 修改供求状态
  demSupplyStateChange = e => {
    this.setState({
      needsStateSelected: this.state.needsState[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 })
  }
  goToMyDemSupPage() {
    Taro.navigateTo({
      url: '/pages/mySupplyDemand/mySupplyDemand'
    })
  }

  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)}></InteractionComponent>
        {/* <View className='page-section'>
          <View>
            <Picker mode='selector' rangeKey='name' 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.name}</Text>
                </View>

              </View>
            </Picker>
          </View>
        </View> */}
        {/* 需求类型 */}
        <View className='page-section'>
          <View>
            <Picker mode='selector' rangeKey='name' range={this.state.needsType} 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.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.demSupplyStateChange}>
              <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.uploadSupplyDemand.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.goToMyDemSupPage.bind(this)}>
            <AtButton type='primary' className='button-a' size='small'>我的需求</AtButton>
          </View>
        </View>
        <CopyrightComponent></CopyrightComponent>


      </View>
    )
  }
}

export default MyNeedsEdit