mini-programs/src/pages/publishBall/components/SelectStadium/FLOW.md

球馆选择流程说明

🎯 完整流程

1. 初始状态 - 球馆列表

用户看到球馆选择弹窗，显示：

• 搜索框（可点击）
• 热门球场标题
• 球馆列表
• 底部取消/完成按钮

2. 点击搜索框

• 搜索框变为可点击状态
• 点击后跳转到地图选择页面

3. 地图选择页面

用户在地图页面可以：

• 查看地图，选择位置
• 在搜索框输入关键词搜索地点
• 从搜索结果中选择地点
• 点击"确定"按钮确认选择

4. 返回球馆详情

选择地点后：

• 自动跳转回球馆选择页面
• 显示球馆详情配置页面
• 新选择的球馆名称会显示在"已选球场"部分

5. 配置球馆详情

用户可以配置：

• 场地类型（室内/室外/室外雨棚）
• 地面材质（硬地/红土/草地）
• 场地信息补充（文本输入）

6. 完成选择

• 点击"完成"按钮
• 关闭弹窗，返回主页面
• 选中的球馆信息传递给父组件

🔄 状态管理

// 主要状态
const [showDetail, setShowDetail] = useState(false)        // 是否显示详情页
const [showMapSelector, setShowMapSelector] = useState(false) // 是否显示地图选择器
const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null) // 选中的球馆

📱 组件切换逻辑

// 组件渲染优先级
if (showMapSelector) {
  return <MapSelector />           // 1. 地图选择器
} else if (showDetail && selectedStadium) {
  return <StadiumDetail />         // 2. 球馆详情
} else {
  return <SelectStadium />         // 3. 球馆列表
}

🗺️ 地图集成

• 使用 Taro 的 Map 组件
• 支持地图标记和位置选择
• 集成搜索功能，支持关键词搜索
• 搜索结果包含地点名称、地址和距离信息

📋 数据传递

// 从地图选择器传递到球馆详情
const handleMapLocationSelect = (location: Location) => {
  const newStadium: Stadium = {
    id: `map_${location.id}`,
    name: location.name,        // 地图选择的球场名称
    address: location.address   // 地图选择的球场地址
  }
  
  // 添加到球馆列表并选择
  stadiumList.unshift(newStadium)
  setSelectedStadium(newStadium)
  setShowMapSelector(false)
  setShowDetail(true)
}

🎨 用户体验

1. 无缝切换：三个页面共享同一个弹窗容器
2. 状态保持：选择的地点信息会正确传递
3. 视觉反馈：选中状态有明确的视觉指示
4. 操作简单：点击搜索即可进入地图选择
5. 数据同步：地图选择的球场会自动添加到球馆列表