修改地点选择

src/components/SelectStadium/StadiumDetail.tsx

@@ -1,9 +1,12 @@
-import React, { useState } from 'react'
-import { View, Text, Input } from '@tarojs/components'
+import React, { useState, useCallback } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import images from '@/config/images'
 import './StadiumDetail.scss'
+import TextareaTag from '@/components/TextareaTag'
+import CoverImageUpload, { type CoverImage } from '@/components/CoverImageUpload'
 
 export interface Stadium {
-  id: string
+  id?: string
   name: string
   address?: string
 }
@@ -14,6 +17,29 @@ interface StadiumDetailProps {
   onConfirm: (stadium: Stadium, venueType: string, groundMaterial: string, additionalInfo: string) => void
 }
 
+const  stadiumInfo = [
+  {
+    label: '场地类型',
+    options: ['室内', '室外', '室外雨棚'],
+    type: 'tags'
+  },
+  {
+    label: '地面材质',
+    options: ['硬地', '红土', '草地'],
+    type: 'tags'
+  },
+  {
+    label: '场地信息补充',
+    options: ['1号场', '2号场', '3号场', '4号场', '有空调', '6号场'],
+    type: 'textareaTag'
+  },
+  {
+    label: '场地预定截图',
+    options: ['有其他场地信息可备注'],
+    type: 'image'
+  }
+]
+
 const StadiumDetail: React.FC<StadiumDetailProps> = ({
   stadium,
   onBack,
@@ -22,78 +48,107 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
   const [venueType, setVenueType] = useState('室内')
   const [groundMaterial, setGroundMaterial] = useState('硬地')
   const [additionalInfo, setAdditionalInfo] = useState('')
-
-  const venueTypes = ['室内', '室外', '室外雨棚']
-  const groundMaterials = ['硬地', '红土', '草地']
+  const [imagesList, setImagesList] = useState<CoverImage[]>([])
 
   const handleConfirm = () => {
     onConfirm(stadium, venueType, groundMaterial, additionalInfo)
   }
 
+  const handleMapLocation = () => {
+
+  }
+
+  const getSelectedByLabel = useCallback((label: string) => {
+    if (label === '场地类型') return venueType
+    if (label === '地面材质') return groundMaterial
+    return ''
+  }, [venueType, groundMaterial])
+
+  const setSelectedByLabel = useCallback((label: string, value: string) => {
+    if (label === '场地类型') {
+      setVenueType(value)
+    } else if (label === '地面材质') {
+      setGroundMaterial(value)
+    }
+  }, [])
+
+  console.log(stadium,'stadiumstadium');
   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
+        className={`stadium-item`}
+        onClick={() => handleMapLocation()}
+      >
+        <View className='stadium-item-left'>
+          <Image src={images.ICON_STADIUM} className='stadium-icon' />
         </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 className='stadium-item-right'>
+          <View className='stadium-name'>{stadium.name}</View>
+          <View className='stadium-address'>
+            <Text>{stadium.address}</Text>
+            <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
           </View>
         </View>
       </View>
+
+      {stadiumInfo.map((item) => {
+        if (item.type === 'tags') {
+          const selected = getSelectedByLabel(item.label)
+          return (
+            <View className='venue-type-section' key={item.label}>
+              <Text className='section-title'>{item.label}</Text>
+              <View className='option-buttons'>
+                {item.options.map((opt) => (
+                  <View
+                    key={opt}
+                    className={`option-btn ${selected === opt ? 'selected' : ''}`}
+                    onClick={() => setSelectedByLabel(item.label, opt)}
+                  >
+                    <Text className='option-text'>{opt}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          )
+        }
+
+        if (item.type === 'textareaTag') {
+          return (
+          <View className='venue-type-section' key={item.label}>
+              <Text className='section-title'>{item.label}</Text>
+              <View className='option-buttons'>
+                <TextareaTag
+                  key={item.label}
+                  value={additionalInfo}
+                  onChange={setAdditionalInfo}
+                  placeholder='有其他场地信息可备注'
+                  options={(item.options || []).map((o) => ({ label: o, value: o }))}
+                />
+              </View>
+            </View>
+            
+          )
+        }
+
+        if (item.type === 'image') {
+          return (
+            <View className='venue-type-section' key={item.label}>
+              <Text className='section-title'>{item.label}</Text>
+              <View className='option-buttons'>
+              <CoverImageUpload
+                key={item.label}
+                images={imagesList}
+                onChange={setImagesList}
+              />
+              </View>
+            </View>
+           
+          )
+        }
+
+        return null
+      })}
     </View>
   )
 }