React+AntdUi实现《好客租房系统》发布房源08

本文主要是介绍React+AntdUi实现《好客租房系统》发布房源08，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

export default class Rent extends Component {
  state = {
    // 出租房屋列表
    list: []
  }

  // 获取已发布房源的列表数据
  async getHouseList() {
    const res = await getUserHouses()

    const { status, data } = res
    if (status === 200) {
      this.setState({
        list: data
      })
    } else {
      const { history } = this.props
      history.replace('/login')
    }
  }

  componentDidMount() {
    this.getHouseList()
  }

  renderHouseItem() {
    const { list } = this.state
    const { history } = this.props

    // console.log(list, history)

    return list.map(item => {
      return (
        <HouseItem
          key={item.houseCode}
          onClick={() => {
            history.push(`/detail/${item.houseCode}`)
          }}
          src={BASE_URL + item.houseImg}
          title={item.title}
          desc={item.desc}
          tags={item.tags}
          price={item.price}
        />
      )
    })
  }

  renderRentList() {
    const { list } = this.state
    const hasHouses = list.length > 0

    if (!hasHouses) {
      return (
        <NoHouse>
          您还没有房源，
          <Link to="/rent/add" className={styles.link}>
            去发布房源
          </Link>
          吧~
        </NoHouse>
      )
    }

    return <div className={styles.houses}>{this.renderHouseItem()}</div>
  }

  render() {
    const { history } = this.props

    return (
      <div className={styles.root}>
        <NavBar
          className={styles.navHeader}
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={() => history.go(-1)}
        >
          房屋管理
        </NavBar>
        {this.renderRentList()}
      </div>
    )
  }
}

　搜索组件

 state = {
    // 搜索框的值
    searchTxt: '',
    tipsList: []
  }

  async componentDidMount () {
    // 获取城市ID
    const { value } = await getCurrCity()
    this.cityId = value
  }

  // 搜索小区
  handlerSearch = (v) => {
    v = v.trim()
    if (v.length === 0) {
      return this.setState({
        searchTxt: '',
        tipsList: []
      })
    }
    this.setState({
      searchTxt: v
    }, () => {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        // 获取小区列表
        const res = await getCommunity(v, this.cityId)
        if (res.status === 200) {
          this.setState({
            tipsList: res.data
          })
        }
      }, 600)
    })

  }

  // 选择小区回传
  selectCom = (item) => {
    this.props.history.replace({ pathname: '/rent/add', state: { id: item.community, name: item.communityName } })
  }

  // 渲染搜索结果列表
  renderTips = () => {
    const { tipsList } = this.state

    return tipsList.map(item => (
      <li onClick={() => this.selectCom(item)} key={item.community} className={styles.tip}>
        {item.communityName}
      </li>
    ))
  }

  render () {
    const { history } = this.props
    const { searchTxt } = this.state

    return (
      <div className={styles.root}>
        {/* 搜索框 */}
        <SearchBar
          placeholder="请输入小区或地址"
          value={searchTxt}
          onChange={this.handlerSearch}
          showCancelButton={true}
          onCancel={() => history.replace('/rent/add')}
        />

        {/* 搜索提示列表 */}
        <ul className={styles.tips}>{this.renderTips()}</ul>
      </div>
    )
  }
}

　添加房源模块

  // 获取输入的值
  getInputVal = (name, val) => {
    console.log(name, val)
    this.setState({
      [name]: val
    })
  }

  // 选择配套
  selPack = (selNames) => {
    console.log(selNames);
    this.setState({
      supporting: selNames.join('|')
    })
  }

  // 获取房屋图片
  // files: Object, operationType: string, index: number
  getImg = (files, operationType, index) => {
    console.log(files, operationType, index)
    this.setState({
      tempSlides: files
    })
  }

  // 取消编辑，返回上一页
  onCancel = () => {
    alert('提示', '放弃发布房源?', [
      {
        text: '放弃',
        onPress: async () => this.props.history.go(-1)
      },
      {
        text: '继续编辑'
      }
    ])
  }

  // 发布房源
  addHouse = async () => {
    const {
      tempSlides,
      title,
      description,
      oriented,
      supporting,
      price,
      roomType,
      size,
      floor,
      community
    } = this.state;
    // 处理边界
    if (!title || !size || !price) {
      return Toast.info('请输入房源基本信息！', 1)
    }
    // 上传图片，获取上传位置
    let houseImg;
    if (tempSlides.length) {
      let fm = new FormData();
      tempSlides.forEach((item) => fm.append('file', item.file));
      let res = await uploadHouseImgs(fm);
      console.log(res)
      if (res.status === 200) {
        houseImg = res.data.join('|')
      } else {
        Toast.fail(res.description, 2)
      }
    }
    // 处理其它数据
    const otd = {
      title,
      description,
      houseImg,
      oriented,
      supporting,
      price,
      roomType,
      size,
      floor,
      community: community.id
    };
    let ores = await pubHouse(otd)
    console.log('form all data:', otd)
    if (ores.status === 200) {
      Toast.success('发布成功！', 1, () => {
        this.props.history.push('/rent')
      })
    } else {
      if (ores.status === 400) {
        Toast.info('请重新登录！', 1, () => {
          // 传入回跳地址
          this.props.history.push('/login', { backUrl: this.props.location.pathname })
        })
      }
    }

  }

  render() {
    const Item = List.Item
    const { history } = this.props
    const {
      community,
      price,
      size,
      roomType,
      floor,
      oriented,
      description,
      tempSlides,
      title
    } = this.state

    return (
      <div className={styles.root}>
        <NavBar
          className={styles.navHeader}
          icon={<Icon type="left" />}
          mode="dark"
          onLeftClick={this.onCancel}
        >
          发布房源
        </NavBar>
        <List
          className={styles.header}
          renderHeader={() => '基本信息'}
          data-role="rent-list"
        >
          {/* 选择所在小区 */}
          <Item
            extra={community.name || '请选择小区名称'}
            arrow="horizontal"
            onClick={() => history.replace('/rent/search')}
          >
            小区名称
          </Item>
          <InputItem placeholder="请输入租金/月" extra="￥/月" type="number" value={price}
            onChange={(v) => {
              this.getInputVal('price', v)
            }}>
            租       金
          </InputItem>
          <InputItem placeholder="请输入建筑面积" extra="㎡" type="number" value={size}
            onChange={(v) => {
              this.getInputVal('size', v)
            }}
          >
            建筑面积
          </InputItem>
          <Picker data={roomTypeData} value={[roomType]} cols={1}
            onChange={(v) => {
              this.getInputVal('roomType', v[0])
            }}
          >
            <Item arrow="horizontal">
              户       型
            </Item>
          </Picker>

          <Picker data={floorData} value={[floor]} cols={1}
            onChange={(v) => {
              this.getInputVal('floor', v[0])
            }}
          >
            <Item arrow="horizontal">所在楼层</Item>
          </Picker>
          <Picker data={orientedData} value={[oriented]} cols={1}
            onChange={(v) => {
              this.getInputVal('oriented', v[0])
            }}
          >
            <Item arrow="horizontal">
              朝       向
            </Item>
          </Picker>
        </List>

        <List
          className={styles.title}
          renderHeader={() => '房屋标题'}
          data-role="rent-list"
        >
          <InputItem
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
            value={title}
            onChange={(v) => {
              this.getInputVal('title', v)
            }}
          />
        </List>

        <List
          className={styles.pics}
          renderHeader={() => '房屋图像'}
          data-role="rent-list"
        >
          <ImagePicker
            files={tempSlides}
            onChange={this.getImg}
            multiple={true}
            className={styles.imgpicker}
          />
        </List>

        <List
          className={styles.supporting}
          renderHeader={() => '房屋配置'}
          data-role="rent-list"
        >
          <HousePackage select onSelect={this.selPack} />
        </List>

        <List
          className={styles.desc}
          renderHeader={() => '房屋描述'}
          data-role="rent-list"
        >
          <TextareaItem
            rows={5}
            placeholder="请输入房屋描述信息"
            autoHeight
            value={description}
            onChange={(v) => {
              this.getInputVal('description', v)
            }}
          />
        </List>

        <Flex className={styles.bottom}>
          <Flex.Item className={styles.cancel} onClick={this.onCancel}>
            取消
          </Flex.Item>
          <Flex.Item className={styles.confirm} onClick={this.addHouse}>
            提交
          </Flex.Item>
        </Flex>
      </div>
    )
  }
}

这篇关于React+AntdUi实现《好客租房系统》发布房源08的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！