hlplus/src/pagesMore/center/uploadRoom2.jsx

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTextarea }  from 'taro-ui'
import LFormGroup from '@/c/lform/formGroup'
const HLKEY = '654mca0l38b489d9'
const CJ = require('crypto-js')
import './uploadRoom2.scss'


import { TaroCropper } from 'taro-cropper'

class Index extends Component {

  onShareAppMessage() {
    return {
      title: `自助上传房源`,
    }
  }
  onShareTimeline () {
    return {
      title: `自助上传房源`,
    }
  }


  constructor (props) {
    super(props)
    this.state = {
      addr1: '',
      addr2: '',
      addr3: '',
      hType1: '',
      hType2: '',
      hType3: '',
      sRate1: '',
      sRate2: '',
      formObj: {
        hide_status: '1',
      },
      imgArr: [],
      cutImgTempUrl: '',
      cutImgShow: false,
    }
  }
  config = {
    navigationBarTitleText: '上传房源',
  }

  componentWillMount () {
    Taro.$AHU(this)
  }

  componentDidMount() {
    const {id} = this.$router.params
    if (id) {
      Taro.api.room.apieshousedetail({id}).then(res => {
        let cObj = res || {}
        // console.log(cObj)
        const addr = cObj.house_no ? cObj.house_no.split('-') : []
        const hType = cObj.house_type ? cObj.house_type.split('-') : []
        const sRate = cObj.stairs_rate ? cObj.stairs_rate.split('-') : []
        Taro.setNavigationBarTitle({
          title: cObj.sale_user.sale_name + '-编辑房源'
        })
        this.setState({
          formObj: {
            id: cObj.id,
            hide_status: cObj.hide_status || '1',
            estate_id: cObj.estate_id || '',
            estate_name: cObj.estate_name || '',
            title: cObj.title || '',
            house_no: cObj.house_no || '',
            delivery_at: cObj.delivery_at || '',
            price: cObj.price || '',
            area: cObj.area || '',
            full_year: cObj.full_year || '',
            floor: cObj.floor || '',
            storeys: cObj.storeys || '',
            is_dec: cObj.is_dec || '',
            is_elevator: cObj.is_elevator || '',
            owner: cObj.owner || '',
            custom_tag: cObj.custom_tag || '',
            owner_phone: cObj.owner_phone || '',
            introduce: cObj.introduce || '',
            remarked: cObj.remarked || '',
            pri_image: cObj.pri_image || '',
            house_img: cObj.house_img || '',
            position: cObj.position || '',
            floor_price: cObj.floor_price || '',
          },
          imgArr: (cObj.images && cObj.images.length > 0) ? cObj.images.split(',') : [],
          addr1: addr[0],
          addr2: addr[1],
          addr3: addr[2],
          hType1: hType[0],
          hType2: hType[1],
          hType3: hType[2],
          sRate1: sRate[0],
          sRate2: sRate[1],
        })
      })
    }
  }



  saveHandle () {
    const { formObj, imgArr, addr1, addr2, addr3, hType1, hType2, hType3, sRate1, sRate2 } = this.state
    let house_no = ''
    if (addr1 && addr2 && addr3) {
      house_no = `${addr1}-${addr2}-${addr3}`
    } else {
      Taro.$msg('请输入楼栋单号房间号')
      return
    }
    let house_type = ''
    if (hType1 && hType2 && hType3) {
      house_type = `${hType1}-${hType2}-${hType3}`
    }
    let stairs_rate = ''
    if (sRate1 && sRate2) {
      stairs_rate = `${sRate1}-${sRate1}`
    }
    
    // console.log(formObj.estate_id, formObj.title, formObj.pri_image)
    let apiStr = 'apieshouseadd'
    let params = {
      estate_id: formObj.estate_id,
      title: formObj.title,
      house_no,
      delivery_at: formObj.delivery_at,
      house_type,
      stairs_rate,
      price: formObj.price,
      area: formObj.area,
      full_year: formObj.full_year,
      floor: formObj.floor,
      storeys: formObj.storeys,
      is_dec: formObj.is_dec,
      is_elevator: formObj.is_elevator,
      owner: formObj.owner,
      custom_tag: formObj.custom_tag,
      owner_phone: formObj.owner_phone,
      introduce: formObj.introduce,
      remarked: formObj.remarked,
      hide_status: formObj.hide_status,
      pri_image: formObj.pri_image,
      house_img: formObj.house_img,
      position: formObj.position,
      floor_price: formObj.floor_price,
      images: imgArr.join(','),
    }
    if (formObj.id) {
      apiStr = 'apieshouseedit'
      params.id = formObj.id
    }
    if (formObj.estate_id && formObj.title && formObj.pri_image) {
      Taro.api.room[apiStr](params).then(res => {
        Taro.$msgConfirm('操作成功', () => {
          Taro.navigateBack({
            delta: 1
          })
        }, () => {
          Taro.navigateBack({
            delta: 1
          })
        })
      })
    } else {
      if (!formObj.estate_id) Taro.$msg('楼盘必填')
      if (!formObj.title) Taro.$msg('标题必填')
      if (!formObj.pri_image) Taro.$msg('封面图必填')
    }
  }

  baseFormChange (key, val) {
    let { formObj } = this.state
    formObj[key] = val
    this.setState({
      formObj
    })
  }

  dealImgHandle (key, moreStr) {
    this.uploadComImg((val) => {
      let { formObj } = this.state
      formObj[key] = val
      this.setState({
        formObj
      })
    }, 1, moreStr)
  }

  addImg () {
    this.uploadComImg((arr) => {
      let { imgArr } = this.state
      imgArr = [...imgArr, ...arr]
      this.setState({
        imgArr
      })
    }, 9)
  }
  uploadComImg (bc, count, moreStr) {
    const that = this
    Taro.chooseImage({
      count: count ? count : 1, // 默认9
      sizeType: ['compressed'],  // original
      sourceType: ['album', 'camera'],
      success: function (res) {
        const tempFilePaths = res.tempFilePaths
        if (tempFilePaths.length > 0) {
          let imgBcArr = []
          tempFilePaths.forEach((p, i) => {
            that.diyUploadFile(p, moreStr).then(url => {
              imgBcArr.push(url)
              if (bc && imgBcArr.length === tempFilePaths.length) {
                bc(imgBcArr)
              }
            })
          })
        }
      }
    })
  }
  diyUploadFile (filePath, moreStr) {
    return new Promise((resolve, reject) => {
      let token = Taro.getStorageSync('APP_token')
      let url = `https://api.honglouplus.com/api/upload/cloudpir`
      if (moreStr === 'noSign') url = `https://api.honglouplus.com/api/upload/cloud`
      Taro.uploadFile({
        url,
        filePath,
        name: 'upload',
        formData: {
          'token': token
        },
        success (res){
          const msg = res.data || ''
          const key = CJ.enc.Utf8.parse(HLKEY)
          const bytes = CJ.AES.decrypt(msg, key, {
            mode: CJ.mode.ECB,
            padding: CJ.pad.Pkcs7
          })
          const originalText = bytes.toString(CJ.enc.Utf8)
          const cData = JSON.parse(originalText)
          const curImg =  cData.data.url || ''
          resolve(curImg)
        }
      })
    })
  }
  delImg (index) {
    let { imgArr } = this.state
    imgArr.splice(index, 1)
    this.setState({
      imgArr
    })
  }
  previewImageHandle (current, arr) {
    const { imgArr } = this.state
    let nArr = imgArr.map(item => {
      return item + '_plus'
    })
    Taro.previewImage({
      current,
      urls: nArr
    })
  }




  renderAddr () {
    const { addr1, addr2, addr3 } = this.state
    return (
      <View className="scoped-addr-box">
        <Input type="number" value={addr1} onInput={this.changeAddrInput.bind(this, 'addr1')}  className="i" placeholder="__" />
        <View className='t'>栋座</View>
        <Input type="number" value={addr2} onInput={this.changeAddrInput.bind(this, 'addr2')}  className="i" placeholder="__" />
        <View className='t'>单元</View>
        <Input type="number" value={addr3} onInput={this.changeAddrInput.bind(this, 'addr3')}  className="i" placeholder="__" />
        <View className='t'>室号</View>
      </View>
    )
  }
  renderHouseType () {
    const { hType1, hType2, hType3 } = this.state
    return (
      <View className="scoped-addr-box">
        <Input type="number" value={hType1} onInput={this.changeAddrInput.bind(this, 'hType1')}  className="i" placeholder="__" />
        <View className='t'>室</View>
        <Input type="number" value={hType2} onInput={this.changeAddrInput.bind(this, 'hType2')}  className="i" placeholder="__" />
        <View className='t'>厅</View>
        <Input type="number" value={hType3} onInput={this.changeAddrInput.bind(this, 'hType3')}  className="i" placeholder="__" />
        <View className='t'>卫</View>
      </View>
    )
  }
  changeAddrInput (str, e) {
    this.setState({
      [str]: e.detail.value
    })
  }
  

  renderStairsRate () {
    const { sRate1, sRate2 } = this.state
    return (
      <View className='scoped-floor-height-box'>
        <Input type="number" value={sRate1} onInput={this.changeAddrInput.bind(this, 'sRate1')}  className="i" placeholder="__" />
        <View className='t'>梯</View>
        <Input type="number" value={sRate2} onInput={this.changeAddrInput.bind(this, 'sRate2')}  className="i" placeholder="__" />
        <View className='t'>户</View>
      </View>
    )
  }
  renderFloorHeight () {
    const { formObj } = this.state
    return (
      <View className='scoped-floor-height-box'>
        <Input type="number" value={formObj.floor} onInput={this.changeFormObjInput.bind(this, 'floor')}  className="i" placeholder="所在楼层" />
        <View className='t'>/</View>
        <Input type="number" value={formObj.storeys} onInput={this.changeFormObjInput.bind(this, 'storeys')}  className="i" placeholder="总楼层" />
        <View className='t'>层</View>
      </View>
    )
  }
  changeFormObjInput (str, e) {
    let { formObj } = this.state
    formObj[str] = e.detail.value
    this.setState({
      formObj
    })
  }











  renderCutImg () {
    const { cutImgTempUrl } = this.state
    const { cutImgShow } = this.state
    return (
      <View className={cutImgShow ? 'scoped-ci-popup show' : 'scoped-ci-popup'}>
        <TaroCropper
          src={cutImgTempUrl}
          cropperWidth={375}
          cropperHeight={250}
          fullScreen
          onCut={this.cutHandle.bind(this)}
        />
      </View>
    )
  }
  cutHandle (filePath) {
    let { formObj } = this.state
    let token = Taro.getStorageSync('APP_token')
    const that = this
    Taro.uploadFile({
      url: `https://api.honglouplus.com/api/upload/cloudpir`,
      filePath,
      name: 'upload',
      formData: {
        'token': token
      },
      success (res){
        const msg = res.data || ''
        const key = CJ.enc.Utf8.parse(HLKEY)
        const bytes = CJ.AES.decrypt(msg, key, {
          mode: CJ.mode.ECB,
          padding: CJ.pad.Pkcs7
        })
        const originalText = bytes.toString(CJ.enc.Utf8)
        const cData = JSON.parse(originalText)
        formObj.pri_image = cData.data.url || ''
        that.setState({
          cutImgShow: false,
          formObj,
        })
      }
    })
  }
  openCutImg () {
    Taro.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
    }).then(res => {
      this.setState({
        cutImgTempUrl: res.tempFilePaths[0],
        cutImgShow: true,
      })
    })
  }


  render () {
    const { formObj, imgArr } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const roomDecMoreOptions = {arr: dictData.room_dec}
    const houseRoomYearMoreOptions = {arr: dictData.house_room_year}
    const yesnoMoreOptions = {arr: [...dictData.sys_yesno]}
    const hideStatusoMoreOptions = {arr: [...dictData.hide_status]}
    const roomPositionMoreOptions = {arr: [...dictData.room_position]}
    const addIcon = require('@img/icon_upload_img.png')
    const closeIcon = require('@img/icon_g_close.png')
    const imgItems = imgArr.map((src, index) => {
      return (
        <View className="si-op" key={index}>
          <Image src={src + '_plus'} className="img" onClick={this.previewImageHandle.bind(this, src + '_plus')} />
          <Image src={closeIcon} className="i" onClick={this.delImg.bind(this, index)}/>
        </View>
      )
    })
    let moreEstateOptions = {
      api: 'house.admestatelist',
      opKey: 'estate_name',
      opVal: 'id',
      skey: 'estate_name',
    }
    
    return (
      <View className="l-box">
        {/* {this.renderCutImg()} */}
        {
          formObj.estate_name
          ?
          <View className="l-floor-pos2">
            <Navigator url={`/pagesHouse/indexDtl?id=${formObj.estate_id}`} className='scoped-estate-name'>{formObj.estate_name}{'>'}</Navigator>
            <LFormGroup
              val={formObj.estate_id}
              valStr="estate_id"
              keyStr="当前楼盘"
            />
          </View>
          :
          <LFormGroup
            val={formObj.estate_id}
            valStr="estate_id"
            keyStr="选楼盘(必填)"
            keyStr2="请选择"
            typeStr="radio"
            moreOptions={moreEstateOptions}
            bc={this.baseFormChange.bind(this)}
          />
        }
        {/* <View className="l-floor-pos2">
          {
            formObj.estate_name
            ?
            <View className='scoped-estate-name'>{formObj.estate_name}[{formObj.estate_id}]</View>
            : ''
          }
          <LFormGroup
            val={formObj.estate_id}
            valStr="estate_id"
            keyStr="选楼盘(必填)"
            keyStr2="请选择"
            typeStr="radio"
            moreOptions={moreEstateOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View> */}
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.title}
            valStr="title"
            keyStr="标题(必填)"
            keyStr2="请总结概括该房源特色"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.house_no}
            valStr="house_no"
            keyStr="地址(必填)"
          />
          {this.renderAddr()}
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.house_type}
            valStr="house_type"
            keyStr="户型"
          />
          {this.renderHouseType()}
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.floor}
            valStr="floor"
            keyStr="楼层"
          />
          {this.renderFloorHeight()}
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.stairs_rate}
            valStr="stairs_rate"
            keyStr="梯户比"
          />
          {this.renderStairsRate()}
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.area}
            valStr="area"
            keyStr="房屋面积"
            keyStr2="请输入"
            typeStr="inputFont"
            inputFont="㎡"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.price}
            valStr="price"
            keyStr="房屋总价"
            keyStr2="请输入"
            typeStr="inputFont"
            inputFont="万"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.floor_price}
            valStr="floor_price"
            keyStr="实际底价"
            keyStr2="请输入"
            typeStr="inputFont"
            inputFont="万"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.owner}
            valStr="owner"
            keyStr="业主姓名"
            keyStr2="请输入"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.owner_phone}
            valStr="owner_phone"
            keyStr="业主电话"
            keyStr2="请输入"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.is_dec}
            valStr="is_dec"
            keyStr="装修情况"
            keyStr2="请选择"
            typeStr="select"
            moreOptions={roomDecMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.full_year}
            valStr="full_year"
            keyStr="满几年"
            keyStr2="请选择"
            typeStr="select"
            moreOptions={houseRoomYearMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.is_elevator}
            valStr="is_elevator"
            keyStr="有电梯"
            keyStr2="请选择"
            typeStr="select"
            moreOptions={yesnoMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.delivery_at}
            valStr="delivery_at"
            keyStr="交房时间"
            keyStr2="请选择"
            dateFields="month"
            typeStr="date"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.hide_status}
            valStr="hide_status"
            keyStr="显示隐藏"
            keyStr2="请选择"
            typeStr="select"
            moreOptions={hideStatusoMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.position}
            valStr="position"
            keyStr="户型方位"
            keyStr2="请选择"
            typeStr="select"
            moreOptions={roomPositionMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.custom_tag}
            valStr="custom_tag"
            keyStr="定义标签"
            keyStr2="请输入"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className='scoped-has-right'>
          <View className="scoped-box">
            <View className="sb-title">封面主图片(必填)</View>
            <View className="scoped-img">
              {
                formObj.pri_image
                ?
                <View className="si-op" onClick={this.dealImgHandle.bind(this, 'pri_image')}>
                  <Image src={formObj.pri_image + '_plus'} className="img"/>
                </View>
                :
                <View className="si-op" onClick={this.dealImgHandle.bind(this, 'pri_image')}>
                  <Image src={addIcon} className="img"/>
                </View>
              }
              {/* {
                formObj.pri_image
                ?
                <View className="si-op" onClick={this.openCutImg.bind(this)}>
                  <Image src={formObj.pri_image + '_plus'} className="img"/>
                </View>
                :
                <View className="si-op" onClick={this.openCutImg.bind(this)}>
                  <Image src={addIcon} className="img"/>
                </View>
              } */}
            </View>
          </View>
          <View className="scoped-box shr-r">
            <View className="sb-title">户型图</View>
            <View className="scoped-img">
              {
                formObj.house_img
                ?
                <View className="si-op" onClick={this.dealImgHandle.bind(this, 'house_img', 'noSign')}>
                  <Image src={formObj.house_img} className="img"/>
                </View>
                :
                <View className="si-op" onClick={this.dealImgHandle.bind(this, 'house_img', 'noSign')}>
                  <Image src={addIcon} className="img"/>
                </View>
              }
            </View>
          </View>
        </View>
        <View className="scoped-box">
          <View className="sb-title">房源图片
            <View className="s">（最多9张）</View>
          </View>
          <View className="scoped-img">
            {imgItems}
            {
              imgArr.length < 9
              &&
              <View className="si-op" onClick={this.addImg.bind(this)}>
                <Image src={addIcon} className="img"/>
              </View>
            }
          </View>
        </View>
        <View className="scoped-box">
          <View className="sb-title">更多对外描述</View>
          <AtTextarea
            value={formObj.introduce}
            onChange={this.baseFormChange.bind(this, 'introduce')}
            maxLength={300}
            height={200}
            placeholder='更多需要补充的描述，对外公开(300字以内)'
          />
        </View>
        <View className="scoped-box">
          <View className="sb-title">内部备注</View>
          <AtTextarea
            value={formObj.remarked}
            onChange={this.baseFormChange.bind(this, 'remarked')}
            maxLength={300}
            height={200}
            placeholder='仅编辑查看，房源内部备注信息(300字以内)'
          />
        </View>
        <View className="l-floor-footer t2">
          <View className="lff-flex">
            <View className="lff-btn full" onClick={this.saveHandle.bind(this)}>提交</View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index