React+AntdUi实现《好客租房系统》房屋详情页面05

展示房屋详情
在找房页面中，给每一个房源列表添加点击事件，在点击时跳转到房屋详情页面
在单击事件中，获取到当前房屋id
根据房屋详情的路由地址，调用history.push() 实现路由跳转

<HouseItem
key={key}
onClick={() => this.props.history.push(`/detail/${house.houseCode}`)}
// 注意：该组件中应该接收 style，然后给组件元素设置样式！！！
style={style}
src={BASE_URL + house.houseImg}
title={house.title}
desc={house.desc}
tags={house.tags}
price={house.price}
/>

封装getHouseDetail方法，在componentDidMount中调用该方法
componentDidMount() {
// 获取房屋数据
this.getHouseDetail()
}
在方法中，通过路由参数获取到当前房屋id
使用API发送请求，获取房屋数据，保存到state中

async getHouseDetail() {
const { id } = this.props.match.params

// 开启loading
this.setState({
isLoading: true
})

const res = await API.get(`/houses/${id}`)

this.setState({
houseInfo: res.data.body,
isLoading: false
})

const { community, coord } = res.data.body

// 渲染地图
this.renderMap(community, coord)
}

使用房屋数据，渲染页面

解构出需要的数据

const {
isLoading,
houseInfo: {
community,
title,
price,
roomType,
size,
floor,
oriented,
supporting,
description
}
} = this.state

渲染小区名称

{/* 导航栏 */}
<NavHeader
className={styles.navHeader}
rightContent={[<i key="share" className="iconfont icon-share" />]}
>
{community}
</NavHeader>

渲染轮播图

// 渲染轮播图结构
renderSwipers() {
const {
houseInfo: { houseImg }
} = this.state

return houseImg.map(item => (
<a key={item} href="http://itcast.cn">
<img src={BASE_URL + item} alt="" />
</a>
))
}

渲染标签

// 渲染标签
renderTags() {
const {
houseInfo: { tags }
} = this.state

return tags.map((item, index) => {
// 如果标签数量超过3个，后面的标签就都展示位第三个标签的样式
let tagClass = ''
if (index > 2) {
tagClass = 'tag3'
} else {
tagClass = 'tag' + (index + 1)
}

return (
<span key={item} className={[styles.tag, styles[tagClass]].join(' ')}>
{item}
</span>
)
})
}

渲染价格，房型，面积等

<Flex className={styles.infoPrice}>
<Flex.Item className={styles.infoPriceItem}>
<div>
{price}
<span className={styles.month}>/月</span>
</div>
<div>租金</div>
</Flex.Item>
<Flex.Item className={styles.infoPriceItem}>
<div>{roomType}</div>
<div>房型</div>
</Flex.Item>
<Flex.Item className={styles.infoPriceItem}>
<div>{size}平米</div>
<div>面积</div>
</Flex.Item>
</Flex>

渲染装修，楼层，朝向等

<Flex className={styles.infoBasic} align="start">
<Flex.Item>
<div>
<span className={styles.title}>装修：</span>
精装
</div>
<div>
<span className={styles.title}>楼层：</span>
{floor}
</div>
</Flex.Item>
<Flex.Item>
<div>
<span className={styles.title}>朝向：</span>
{oriented.join('、')}
</div>
<div>
<span className={styles.title}>类型：</span>普通住宅
</div>
</Flex.Item>
</Flex>

渲染地图

// 渲染地图
renderMap(community, coord) {
const { latitude, longitude } = coord

const map = new BMap.Map('map')
const point = new BMap.Point(longitude, latitude)
map.centerAndZoom(point, 17)

const label = new BMap.Label('', {
position: point,
offset: new BMap.Size(0, -36)
})

label.setStyle(labelStyle)
label.setContent(`
<span>${community}</span>
<div class="${styles.mapArrow}"></div>
`)
map.addOverlay(label)
}

　　

渲染房屋配套

{/* 房屋配套 */}
<div className={styles.about}>
<div className={styles.houseTitle}>房屋配套</div>
{/* 判断是否有数据 */}
{supporting.length === 0 ? (
<div className={styles.titleEmpty}>暂无数据</div>
) : (
<HousePackage list={supporting} />
)}
</div>

渲染房屋概况

<div className={styles.set}>
<div className={styles.houseTitle}>房源概况</div>
<div>
<div className={styles.contact}>
<div className={styles.user}>
<img src={BASE_URL + '/img/avatar.png'} alt="头像" />
<div className={styles.useInfo}>
<div>王女士</div>
<div className={styles.userAuth}>
<i className="iconfont icon-auth" />
已认证房主
</div>
</div>
</div>
<span className={styles.userMsg}>发消息</span>
</div>

<div className={styles.descText}>
{description || '暂无房屋描述'}
</div>
</div>
</div>

　　

渲染推荐，可以复用 HouseItem组件

<div className={styles.recommend}>
<div className={styles.houseTitle}>猜你喜欢</div>
<div className={styles.items}>
{recommendHouses.map(item => (
<HouseItem {...item} key={item.id} />
))}
</div>
</div>

　本文参考博客react好租客项目Day09-房屋详情&路由配置&登录功能&formik表单校验_码化疼-CSDN博客