# 球馆选择流程说明

## 🎯 完整流程

### 1. 初始状态 - 球馆列表
用户看到球馆选择弹窗，显示：
- 搜索框（可点击）
- 热门球场标题
- 球馆列表
- 底部取消/完成按钮

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

### 3. 地图选择页面
用户在地图页面可以：
- 查看地图，选择位置
- 在搜索框输入关键词搜索地点
- 从搜索结果中选择地点
- 点击"确定"按钮确认选择

### 4. 返回球馆详情
选择地点后：
- 自动跳转回球馆选择页面
- 显示球馆详情配置页面
- 新选择的球馆名称会显示在"已选球场"部分

### 5. 配置球馆详情
用户可以配置：
- 场地类型（室内/室外/室外雨棚）
- 地面材质（硬地/红土/草地）
- 场地信息补充（文本输入）

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

## 🔄 状态管理

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

## 📱 组件切换逻辑

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

## 🗺️ 地图集成

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

## 📋 数据传递

```typescript
// 从地图选择器传递到球馆详情
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. **数据同步**：地图选择的球场会自动添加到球馆列表