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

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button, Input, Picker } from '@tarojs/components'
import { AtInput, AtTextarea, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtImagePicker } from 'taro-ui'

import InteractionComponent from '../../component/interactionComponent/interactionComponent'
import AliIndustryTypeInteraction from '../../component/aliIndustryTypeInteraction/aliIndustryTypeInteraction'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import AliPictureUploadComponent from '../../component/aliPictureUploadComponent/aliPictureUploadComponent'
import URL from '../../serviceAPI.config'
import './myNeedsEdit.scss'
import loginExpired from '../../util/loginExpired';
import { getGlobalStorage } from '../../util/getSetStoage';
import { showLoading } from '../../util/hideShowLoading';
import platformChecker from '../../util/plaformChecker';

class MyNeedsEdit extends Component {

  config = {
    navigationBarTitleText: '需求编辑'
  }
  constructor() {
    super(...arguments)
    this.state = {

      industryTypeSelected: '',
      needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
      needsTypeSelected: { name: '业主需求', id: '4' },
      needsState: [
        { name: '作废', id: '0' },
        { name: '在用', id: '1' },
      ],
      needsStateSelected: { name: '全部', id: '' },
      title: '',
      sd_id: '', //需求id
      contactName: '',
      contactNumber: '',
      contactAddress: '',
      content: '',//描述
      pickerImageUrl: [],
      ImagesInfo: [],// 图片详细信息
      initialImagesInfo: [],//初始化图片信息
      initialImageURL: [],//初始化图片url
      isDeleteModal: false,// 删除提示框
      isSaveAndNew: false,//是否点击保存新增按钮


    }
  }
  //获取需求信息api 
  getMyNeedEditInfo() {
    let id = decodeURIComponent(this.$router.params.id)
    Taro.request({
      url: URL.EditMyNeeds,
      method: 'GET',
      dataType: 'json',
      data: {
        demandId: id,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + getGlobalStorage('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]
        if (res.data.err_code === 0) {

          let industryType = {}
          const classId = res.data.sdInfo.class_id
          for (let outter of res.data.supplyTree) {
            if (outter.children) {
              for (let inner of outter.children) {
                if (inner.class_id === classId) {
                  industryType.name = inner.class_name
                  industryType.id = inner.class_id
                  break
                }
              }
            }
            if (outter.class_id === classId) {
              industryType.name = outter.class_name
              industryType.id = outter.class_id
              break
            }
          }
          if (!Object.keys(industryType).length) {
            industryType.name = '全部'
            industryType.id = '-1'
          }
          const needsType = this.state.needsType.filter(item => {
            return item.id === res.data.sdInfo.sd_type
          })[0]
          const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
          const needsState = this.state.needsState.filter(item => {
            return item.id === res.data.sdInfo.state
          })[0]
          this.setState({
            sd_id: res.data.sdInfo.sd_id,
            industryTypeSelected: industryType,
            needsTypeSelected: needsType,
            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: needsState,
            initialImageURL: imageFile,
            initialImagesInfo: res.data.sdInfo.file_path,
            ImageURL: imageFile,
            ImagesInfo: res.data.sdInfo.file_path,
          })

        } else if (JSON.parse(res.data).err_code === 88888) {
          loginExpired(res)
        } else {
          Taro.showToast({
            title: JSON.parse(res.data).err_msg,
            icon: 'none'
          })

        }
      }
      )
  }

  // uploadMyNeedsApi 上传需求 的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: 2,
        sdInfo: JSON.stringify({
          class_id: this.state.industryTypeSelected.id,
          sd_id: this.state.sd_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=' + getGlobalStorage('session_id'),
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        console.log('上传需求', res)
        Taro.hideLoading()

        if (res.data.err_code === 0) {
          Taro.showToast({
            title: res.data.err_msg === 'success' ? '保存成功' : res.data.err_msg,
            icon: res.data.err_msg === 'success' ? 'success' : 'none',
            duration: 1500
          }).then(() => {
            setTimeout(() => {
              console.log('this.state.isSaveAndNew', this.state.isSaveAndNew)
              if (this.state.isSaveAndNew) {
                // Taro.navigateTo({
                //   url: '/pages/myNeedsPublish/myNeedsPublish'
                // })
              } else {
                // Taro.navigateTo({
                //   url: '/pages/myNeedsEdit/myNeedsEdit?id=' + this.state.sd_id
                // })
                Taro.reLaunch({
                  url: '/pages/myNeeds/myNeeds'
                })
              }
            }, 1500);
          })
        } else if (res.data.err_code === 88888) {
          loginExpired(res)
        } else {
          Taro.showToast({
            title: '保存失败',
            icon: 'none',
            duration: 1500
          })
        }
      }
      )

  }

  //删除我的需求 api DeleteMyNeeds
  deleteMyNeeds({ demandId = 10 }) {
    Taro.request({
      url: URL.DeleteMyNeeds,
      method: 'POST',
      dataType: 'json',
      data: {

        demandId: demandId

      },
      header: {
        'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      console.log('删除我的列表', res)
      if (res.data.err_code === 0) {
        Taro.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1000
        })
        setTimeout(() => {
          Taro.switchTab({
            url: '/pages/myNeeds/myNeeds'
          })

        }, 1000);
      } else if (res.data.err_code === 88888) {
        loginExpired(res)
      } else {
        Taro.showToast({
          title: res.data.err_msg,
          icon: 'none',
          duration: 1500
        })
      }
    })

  }
  // 修改需求类型
  needsTypeChange = e => {
    this.setState({
      needsTypeSelected: this.state.needsType[e.detail.value]
    })
  }
  // 修改供求状态
  needsStateChange = 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 })
  }
  goToMyNeedsPage() {
    Taro.switchTab({
      url: '/pages/myNeeds/myNeeds'
    })
  }

  // 保存需求按钮
  saveButtonHandler() {
    if (this.state.title &&
      this.state.contactName
      && this.state.contactNumber
      && this.state.content && this.state.needsStateSelected) {
      showLoading({
        title: '保存中'
      })
      this.setState({ isSaveAndNew: false }, () => {
        this.uploadMyNeedsApi({})
      })
    } else {
      Taro.showToast({
        title: '请填写完表格',
        icon: 'none',
        duration: 1500
      })
    }
  }
  // 从图片子组件获取信息
  getImageDetails(value) {
    this.setState({
      ImagesInfo: value
    })
  }
  // 保存新增按钮
  saveAndNewButton() {
    if (this.state.title &&
      this.state.contactName
      && this.state.contactNumber
      && this.state.content && this.state.needsStateSelected) {
      showLoading({
        title: '保存中'
      })
      this.setState({ isSaveAndNew: true }, () => {
        this.uploadMyNeedsApi({})
      })
    } else {
      Taro.showToast({
        title: '请填写完表格',
        icon: 'none',
        duration: 1500
      })
    }

  }

  deleteButtonHandler() {
    this.setState({ isDeleteModal: true })
  }

  handleWindowModCancel() {
    this.setState({ isDeleteModal: false })
  }
  handleWindowConfirm() {
    this.setState({ isDeleteModal: false })
    this.deleteMyNeeds({ demandId: this.state.sd_id })
  }

  getDataFromChild(value) {
    console.log('从子组件传回来的值', value)
    this.setState({ industryTypeSelected: value })
  }


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

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    const deleteModalWindowElement = <AtModal isOpened={this.state.isDeleteModal}>
      <AtModalHeader>提示</AtModalHeader>
      <AtModalContent>
        确认删除{this.state.needsItem.sd_title}？
    </AtModalContent>
      <AtModalAction>  <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button>  </AtModalAction>
    </AtModal>

    return (
      <View className='supply-demand'>
        {deleteModalWindowElement}
        {/* 行业分类 */}
        {platformChecker() ? <View className='InteractionComponent-wrapper'>
         <InteractionComponent url={URL.GetIndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)} selectedValue={this.state.industryTypeSelected} ></InteractionComponent></View>
          : <AliIndustryTypeInteraction url={URL.GetIndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)} selectedValue={this.state.industryTypeSelected} />}

        {/* 需求类型 */}
        <View className='padding-wrapper'>
          <View className='page-section'>
            <View>
              <Picker mode='selector' rangeKey='name' range={this.state.needsType} onChange={this.needsTypeChange.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}
              border={false}
              onChange={this.titleChange.bind(this)}

            />

          </View>
          <View className='input-box'>
            <Text className='require'>*</Text>
            <AtInput
              name='value'
              title='联系人：'
              type='text'
              value={this.state.contactName}
              border={false}
              onChange={this.contactNameChange.bind(this)}
            />
          </View>
          <View className='input-box' style='padding:24rpx 0;font-size:32rpx'>
            <View className='title' style='font-weight:bold;'>
              <Text style='color:red'>*</Text>
              <Text>联系电话：</Text>
            </View>
            <View style='margin-left:5%;'>
              <Input name='value'
                maxLength='11'
                type='number'
                value={this.state.contactNumber}
                onInput={this.contactNumberChange.bind(this)}
              /></View>
          </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='140'
              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='140'
              placeholder=''
            />
          </View>
          <View className='img-box'>
            <View className='title-box'>
              <Text className='title'>需求图片:</Text>
              <View className='warn'>(最多4张)</View>
            </View>
            {platformChecker() ? <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> : <AliPictureUploadComponent
                maxLength={4}
                isReceiveImageUrl={true}
                initialImageURL={this.state.initialImageURL}
                initialImagesInfo={this.state.initialImagesInfo}
                url={URL.UploadDSPorductImage}
                onGetImageDetails={this.getImageDetails.bind(this)}
              />}



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

            <View>
              <Picker mode='selector' rangeKey='name' range={this.state.needsState} onChange={this.needsStateChange.bind(this)}>
                <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.saveButtonHandler.bind(this)}>
              <Button size='mini' className='button-orange'>保存</Button>
            </View>
            {/* <View className='button' onClick={this.saveAndNewButton.bind(this)}>
            <Button size='mini' className='button-green'>保存并新增</Button>
          </View> */}
            <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
              <Button className='button-green' size='mini'>我的需求</Button>
            </View>
            {/* <View className='button' onClick={this.deleteButtonHandler.bind(this)}>
            <Button className='button-dark-red' size='mini'>删除</Button>
          </View> */}
          </View>
          <CopyrightComponent></CopyrightComponent>

        </View>
      </View>
    )
  }
}

export default MyNeedsEdit