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