房源详情——基本结构 & 地图上面添加覆盖物-CSDN博客

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117267099

房源详情——基本结构 & 地图上面添加覆盖物

业务分析

详情页面基本业务功能分析

基本布局

在找房列表页面中,点击每条房源,进入到房源详情页面
- 02-其他资源/find和/HousePackage
  - detail 房源详情
  - HpusePackage详情中的房屋配套(冰箱,电视,沙发等
把房屋详情中的HousePackage组件进行解释

HousePackage/ -> HOUSE_PACKAGE -> 所有配套的内容
<HousePackage list={supporting} /> -> list是当前房屋存在的配套内容
// 从所有配套内容数组中 过滤存在的内容, 同时添加logo类名
data = HOUSE_PACKAGE.filter(v => list.includes(v.name))

详情页面路由跳转与接口数据获取

路由控制

<HouseItem onClick={() => {this.toDetail(item.houseCode)}} key={key} style={style} {...item} />

toDetail = (id) => {
  // 跳转到房源详情页面
  this.props.history.push('/detail/' + id)
}

componentDidMount() {
  // 获取房源唯一编号
  let { id } = this.props.match.params
  // 获取房屋数据
  this.getHouseDetail(id)
}

async getHouseDetail(id) {
  // 开启loading
  this.setState({
    isLoading: true
  })
  const res = await axios.get(`houses/${id}`)
  this.setState({
    houseInfo: res.data.body,
    isLoading: false
  })
  const { community, coord } = res.data.body
  // 渲染地图
  this.renderMap(community, coord)
}