SelectStadium 球馆选择组件

这是一个球馆选择和详情的复合组件，包含两个主要功能：

球馆列表选择
球馆详情配置

功能特性

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

使用方法

基础用法

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

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

配置选项

场地类型

室内
室外
室外雨棚

地面材质

硬地
红土
草地

场地信息补充

文本输入框，支持用户自定义备注信息

样式定制

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

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

注意事项

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