hl-api-changelog/changelogs/2026-03/2026-03-20_accommodation_save_guide.md

住宿安排保存：前端实现指南（BUG修复）

日期: 2026-03-20 类型: 前端BUG修复指南 影响模块: 产品管理 → 住宿安排

---

问题描述

住宿安排页面：

1. 一个家庭保存多个房型保存不上（如：家庭1 → 大床房 + 普通标间）
2. 第二个家庭的房型也保存不上

原因：后端的住宿数据模型是 每条记录 = 一个酒店 + 一个房型，前端需要为每个房型单独调用接口保存。

---

后端数据模型

product_day_hotel 表结构（每条记录 = 一个房型分配）：

字段	说明
id	记录ID
productId	产品ID
dayNumber	第几天
hotelId	酒店ID
hotelName	酒店名称
roomTypeId	房型ID（每条记录一个房型）
roomTypeName	房型名称
roomCount	房间数量
familyIds	所属家庭ID数组 JSON

关键：同一天、同一家庭、同一酒店可以有多条记录（不同房型），每个房型是独立的一条记录。

数据示例

家庭1 住香格里拉（大床房1间 + 标间1间）= 2条记录：

记录1: hotelId=香格里拉, roomTypeId=大床房, roomCount=1, familyIds=["家庭1"]
记录2: hotelId=香格里拉, roomTypeId=标间,   roomCount=1, familyIds=["家庭1"]

家庭2 住海棠酒店（标间1间）= 1条记录：

记录3: hotelId=海棠酒店, roomTypeId=标间, roomCount=1, familyIds=["家庭2"]

---

后端接口清单

1. 添加住宿（每个房型调一次）

POST /admin/product/item/{productId}/day/{dayNumber}/hotel

请求体：

{
  "hotelId": "2023714929877450753",
  "hotelName": "呼伦贝尔香格里拉大酒店",
  "roomTypeId": "3002000000000000013",
  "roomTypeName": "大床房",
  "roomCount": 1,
  "familyIds": ["2034467435683393537"]
}

2. 更新住宿

PUT /admin/product/hotel/{id}

3. 删除住宿

DELETE /admin/product/hotel/{id}

4. 查询某天的住宿列表

GET /admin/product/item/{productId}/day/{dayNumber}/hotels

响应：

{
  "code": 200,
  "data": [
    {
      "id": "2034468900841975809",
      "dayNumber": 1,
      "hotelId": "2023714929877450753",
      "hotelName": "呼伦贝尔香格里拉大酒店",
      "roomTypeId": "3002000000000000013",
      "roomTypeName": "大床房",
      "roomCount": 1,
      "familyIds": ["2034467435683393537"],
      "familyRoomConfig": null
    },
    {
      "id": "2034817340914429954",
      "dayNumber": 1,
      "hotelId": "2023714929877450753",
      "hotelName": "呼伦贝尔香格里拉大酒店",
      "roomTypeId": "3002000000000000014",
      "roomTypeName": "普通标间",
      "roomCount": 1,
      "familyIds": ["2034467435683393537"],
      "familyRoomConfig": null
    }
  ]
}

---

前端实现方案

页面数据结构

前端页面按「家庭 → 酒店 → 房型列表」组织，但后端是扁平的（每个房型一条记录）。需要做转换：

// 前端UI数据结构（按家庭分组）
const uiData = {
  familyId: '2034467435683393537',
  hotelId: '2023714929877450753',
  hotelName: '呼伦贝尔香格里拉大酒店',
  roomTypes: [
    { roomTypeId: '3002000000000000013', roomTypeName: '大床房', roomCount: 1 },
    { roomTypeId: '3002000000000000014', roomTypeName: '普通标间', roomCount: 1 }
  ]
}

// 需要转换为后端的扁平结构（每个房型一条记录）
const apiRequests = uiData.roomTypes.map(rt => ({
  hotelId: uiData.hotelId,
  hotelName: uiData.hotelName,
  roomTypeId: rt.roomTypeId,
  roomTypeName: rt.roomTypeName,
  roomCount: rt.roomCount,
  familyIds: [uiData.familyId]
}))

保存逻辑（推荐：增量模式）

async function saveAccommodation(productId, dayNumber, familyId, hotelId, hotelName, roomTypes) {
  // 1. 查询当前该天已有的住宿记录
  const { data: existing } = await request.get(
    `/admin/product/item/${productId}/day/${dayNumber}/hotels`
  )

  // 2. 筛选出属于当前家庭的已有记录
  const familyExisting = existing.filter(h =>
    h.familyIds && h.familyIds.includes(familyId)
  )

  // 3. 对比：哪些要删、哪些要更新、哪些要新增
  const existingMap = new Map(familyExisting.map(h => [h.roomTypeId, h]))

  for (const rt of roomTypes) {
    const old = existingMap.get(rt.roomTypeId)
    if (old) {
      // 已存在 → 更新
      await request.put(`/admin/product/hotel/${old.id}`, {
        hotelId, hotelName,
        roomTypeId: rt.roomTypeId,
        roomTypeName: rt.roomTypeName,
        roomCount: rt.roomCount,
        familyIds: [familyId]
      })
      existingMap.delete(rt.roomTypeId)
    } else {
      // 不存在 → 新增
      await request.post(
        `/admin/product/item/${productId}/day/${dayNumber}/hotel`,
        {
          hotelId, hotelName,
          roomTypeId: rt.roomTypeId,
          roomTypeName: rt.roomTypeName,
          roomCount: rt.roomCount,
          familyIds: [familyId]
        }
      )
    }
  }

  // 4. 剩余的旧记录 → 删除（用户已移除的房型）
  for (const [, old] of existingMap) {
    await request.delete(`/admin/product/hotel/${old.id}`)
  }
}

加载回显逻辑

async function loadAccommodation(productId, dayNumber, families) {
  // 1. 查询该天所有住宿记录（扁平）
  const { data: hotels } = await request.get(
    `/admin/product/item/${productId}/day/${dayNumber}/hotels`
  )

  // 2. 按家庭ID分组
  const familyHotelMap = {}
  for (const family of families) {
    familyHotelMap[family.familyId] = []
  }

  for (const hotel of hotels) {
    const fids = hotel.familyIds || []
    for (const fid of fids) {
      if (!familyHotelMap[fid]) familyHotelMap[fid] = []
      familyHotelMap[fid].push(hotel)
    }
  }

  // 3. 按家庭+酒店分组，合并同酒店的多个房型
  for (const [familyId, hotelRecords] of Object.entries(familyHotelMap)) {
    const hotelGrouped = {}
    for (const h of hotelRecords) {
      if (!hotelGrouped[h.hotelId]) {
        hotelGrouped[h.hotelId] = {
          hotelId: h.hotelId,
          hotelName: h.hotelName,
          roomTypes: []
        }
      }
      hotelGrouped[h.hotelId].roomTypes.push({
        id: h.id,  // 后端记录ID，更新/删除时需要
        roomTypeId: h.roomTypeId,
        roomTypeName: h.roomTypeName,
        roomCount: h.roomCount
      })
    }
    // hotelGrouped 就是该家庭的UI展示数据
  }
}

---

总结

操作	接口	说明
添加房型	POST .../day/{dayNumber}/hotel	每个房型调一次，同一酒店不同房型 = 多次调用
更新房型	PUT .../hotel/{id}	按记录ID更新
删除房型	DELETE .../hotel/{id}	用户移除某个房型时调用
查询回显	GET .../day/{dayNumber}/hotels	返回扁平列表，前端按 familyIds + hotelId 分组展示

核心要点：后端是扁平的（每个房型一条记录），前端需要做 UI分组结构 ↔ 扁平记录 的转换。