123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728 |
- 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
|