发布页开发

src/components/SelectStadium/StadiumDetail.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { View, Text, Input } from '@tarojs/components'
+import './StadiumDetail.scss'
+
+export interface Stadium {
+  id: string
+  name: string
+  address?: string
+}
+
+interface StadiumDetailProps {
+  stadium: Stadium
+  onBack: () => void
+  onConfirm: (stadium: Stadium, venueType: string, groundMaterial: string, additionalInfo: string) => void
+}
+
+const StadiumDetail: React.FC<StadiumDetailProps> = ({
+  stadium,
+  onBack,
+  onConfirm
+}) => {
+  const [venueType, setVenueType] = useState('室内')
+  const [groundMaterial, setGroundMaterial] = useState('硬地')
+  const [additionalInfo, setAdditionalInfo] = useState('')
+
+  const venueTypes = ['室内', '室外', '室外雨棚']
+  const groundMaterials = ['硬地', '红土', '草地']
+
+  const handleConfirm = () => {
+    onConfirm(stadium, venueType, groundMaterial, additionalInfo)
+  }
+
+  return (
+    <View className='stadium-detail'>
+      {/* 已选球场 */}
+      <View className='selected-venue-section'>
+        <Text className='section-title'>已选球场</Text>
+        <View className='venue-button'>
+          <Text className='venue-name'>{stadium.name}</Text>
+        </View>
+      </View>
+
+      {/* 场地类型 */}
+      <View className='venue-type-section'>
+        <Text className='section-title'>场地类型</Text>
+        <View className='option-buttons'>
+          {venueTypes.map((type) => (
+            <View
+              key={type}
+              className={`option-btn ${venueType === type ? 'selected' : ''}`}
+              onClick={() => setVenueType(type)}
+            >
+              <Text className='option-text'>{type}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      {/* 地面材质 */}
+      <View className='ground-material-section'>
+        <Text className='section-title'>地面材质</Text>
+        <View className='option-buttons'>
+          {groundMaterials.map((material) => (
+            <View
+              key={material}
+              className={`option-btn ${groundMaterial === material ? 'selected' : ''}`}
+              onClick={() => setGroundMaterial(material)}
+            >
+              <Text className='option-text'>{material}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      {/* 场地信息补充 */}
+      <View className='additional-info-section'>
+        <Text className='section-title'>场地信息补充</Text>
+        <Input
+          className='additional-input'
+          placeholder='有其他场地信息可备注'
+          value={additionalInfo}
+          onInput={(e) => setAdditionalInfo(e.detail.value)}
+        />
+      </View>
+
+      {/* 底部按钮 */}
+      <View className='bottom-actions'>
+        <View className='action-buttons'>
+          <View className='cancel-btn' onClick={onBack}>
+            <Text className='cancel-text'>取消</Text>
+          </View>
+          <View className='confirm-btn' onClick={handleConfirm}>
+            <Text className='confirm-text'>完成</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default StadiumDetail