# SelectStadium 球馆选择组件

这是一个球馆选择和详情的复合组件，包含两个主要功能：
1. 球馆列表选择
2. 球馆详情配置

## 功能特性

- 🏟️ 球馆搜索和选择
- 📱 响应式设计，适配移动端
- 🔄 无缝切换球馆列表和详情页面
- 🎯 支持场地类型、地面材质等配置
- 📝 场地信息补充

## 使用方法

### 基础用法

```tsx
import React, { useState } from 'react'
import { SelectStadium, Stadium } from './components/SelectStadium'

const App: React.FC = () => {
  const [showSelector, setShowSelector] = useState(false)
  const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null)

  const handleStadiumSelect = (stadium: Stadium | null) => {
    setSelectedStadium(stadium)
    setShowSelector(false)
  }

  return (
    <div>
      <button onClick={() => setShowSelector(true)}>
        选择球馆
      </button>
      
      <SelectStadium
        visible={showSelector}
        onClose={() => setShowSelector(false)}
        onConfirm={handleStadiumSelect}
      />
    </div>
  )
}
```

## 组件结构

```
SelectStadium/
├── SelectStadium.tsx      # 主组件，管理状态和切换逻辑
├── StadiumDetail.tsx      # 球馆详情组件
├── SelectStadium.scss     # 球馆列表样式
├── StadiumDetail.scss     # 球馆详情样式
├── index.ts              # 导出文件
└── README.md             # 说明文档
```

## Props

### SelectStadium

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| visible | boolean | 是 | 控制弹窗显示/隐藏 |
| onClose | () => void | 是 | 关闭弹窗回调 |
| onConfirm | (stadium: Stadium \| null) => void | 是 | 确认选择回调 |

### StadiumDetail

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| stadium | Stadium | 是 | 选中的球馆信息 |
| onBack | () => void | 是 | 返回球馆列表回调 |
| onConfirm | (stadium, venueType, groundMaterial, additionalInfo) => void | 是 | 确认配置回调 |

## 数据接口

### Stadium

```typescript
interface Stadium {
  id: string
  name: string
  address?: string
}
```

## 配置选项

### 场地类型
- 室内
- 室外  
- 室外雨棚

### 地面材质
- 硬地
- 红土
- 草地

### 场地信息补充
- 文本输入框，支持用户自定义备注信息

## 样式定制

组件使用 SCSS 编写，可以通过修改以下文件来自定义样式：

- `SelectStadium.scss` - 球馆列表样式
- `StadiumDetail.scss` - 球馆详情样式

## 注意事项

1. 组件依赖 `@nutui/nutui-react-taro` 的 `Popup` 组件
2. 确保在 Taro 环境中使用
3. 组件内部管理状态，外部只需要控制 `visible` 属性
4. 球馆列表数据在组件内部硬编码，实际使用时可以通过 props 传入
5. StadiumDetail 组件现在只包含场地配置选项，去掉了头部、提醒和活动封面部分