Detail 页面

DetailPictures 设置相对定位，显示照片按钮设置绝对定位。

第一章：图片展示

一、把 Detail 存到 store

1. 创建 detail reducer

@\store\features\detail.js

import { createSlice } from "@reduxjs/toolkit";


const detailSlice = createSlice({
  name: "detail",
  initialState: {
    detailInfo: {}
  },
  reducers: {
    changeDetailInfoAction(state, action) {
      state.detailInfo = action.payload
    }
  }
})

export const { changeDetailInfoAction } = detailSlice.actions
export default detailSlice.reducer

2. 加入到项目 store 对象中

@\store\index.js

import { configureStore } from "@reduxjs/toolkit"
import detailReducer from "./features/detail"

const store = configureStore({
  reducer: {
    detail: detailReducer,
  },
})

export default store

一步到位 ✌️

二、绑定单击事件

考虑到 RoomItem 组件首页与 entire 页都要用，且只有点击 entire 页的房屋 item 才跳转到 Detail。所以 RoomItem 的单击事件不在 RoomItem 组件中实现，谁用谁通过 props 传过来单击事件的实现。

@\components\room-item\index.jsx

const { itemData, itemClick } = props

function itemClickHandle() {
    if (itemClick) itemClick(itemData)
}

<ItemWrapper
  verifyColor={itemData?.verify_info?.text_color || '#39576a'}
  itemWidth={itemWidth}
  onClick={itemClickHandle}
>
  {/* ...... */}
</ItemWrapper>

在跳转到详情页之前，entire 页要把详情页用到的信息存到 store 中。

@\views\entire\c-cpns\entire-rooms\index.jsx

/* 事件处理 */
const navigate = useNavigate()
const dispatch = useDispatch()

const itemClickHandle = useCallback((item) => {
  dispatch(changeDetailInfoAction(item))
  navigate("/detail")
}, [navigate, dispatch])

/* 在遍历每一个房屋时，就添加单击事件 */
<div className='list'>
  {
    roomList.map((item) => {
      return (
        <RoomItem
          itemData={item}
          itemWidth="20%"
          key={item._id}
          itemClick={itemClickHandle}
        />
      )
    })
  }
</div>

写完一个功能，就测试下。看到 detail store 成功存入了 detailInfo 信息。

三、详情页展示

从 store 中获取到 detailInfo，拿着 detailInfo 在页面展示即可。在使用 CSS 美化。

/* redux获取数据 */
const { detailInfo } = useSelector((state) => ({
  detailInfo: state.detail.detailInfo
}))

第二章：图片浏览器

一、封装 PictureBrowser 组件

@\base-ui\picture-browser

1）图片浏览器组件固定定位，占满视口，设置背景颜色。

2）父组件通过 props 传过来图片 URL 地址的数组。左右箭头就是控制图片 URL 地址的数组索引。

二、使用图片浏览器组件

1）直接在 @\views\detail\c-cpns\detail-pictures\index.jsx 引入，传入组件需要的数据即可。

2）控制图片浏览显示与隐藏

/* 定义组件内部的状态 */
const [showBrowser, setShowBrowser] = useState(false)

<div className='show-btn' onClick={e => setShowBrowser(true)}>显示照片</div>
{ showBrowser && (
  <PictureBrowser
    pictureUrls={detailInfo.picture_urls} 
    closeClick={e => setShowBrowser(false)}
  /> 
)}

三、Bug 解决

查看 @\components\room-item\index.jsx 代码，发现执行 controlClickHandle 事件时，会冒泡到 itemClickHandle 上，所以 itemClickHandle 事件执行，就来到详情页了。

解决办法是调用 itemClickHandle 事件的时候，传入 event 对象来阻止事件冒泡。