发布球局

src/components/SelectStadium/StadiumDetail.tsx

@@ -1,14 +1,18 @@
 import React, { useState, useCallback } from 'react'
+import Taro from '@tarojs/taro'
 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'
+import CoverImageUpload, { type CoverImage } from '@/components/ImageUpload'
 
 export interface Stadium {
   id?: string
   name: string
   address?: string
+  longitude?: number
+  latitude?: number
+  istance?: string
 }
 
 interface StadiumDetailProps {
@@ -21,57 +25,109 @@ const  stadiumInfo = [
   {
     label: '场地类型',
     options: ['室内', '室外', '室外雨棚'],
+    prop: 'venueType',
     type: 'tags'
   },
   {
     label: '地面材质',
     options: ['硬地', '红土', '草地'],
+    prop: 'groundMaterial',
     type: 'tags'
   },
   {
     label: '场地信息补充',
-    options: ['1号场', '2号场', '3号场', '4号场', '有空调', '6号场'],
+    options: ['1号场', '2号场', '3号场', '4号场', '有空调', '6号场','6号场'],
+    prop: 'additionalInfo',
     type: 'textareaTag'
   },
   {
     label: '场地预定截图',
     options: ['有其他场地信息可备注'],
+    prop: 'imagesList',
     type: 'image'
   }
 ]
 
+// 公共的标题组件
+const SectionTitle: React.FC<{ title: string,prop: string }> = ({ title, prop }) => {
+  console.log(prop,'propprop');
+  if (prop === 'imagesList') {
+    return (
+      <View className='section-title'>
+        <Text>{title}</Text>
+        <View className='heart-wrapper'>
+          <Image src={images.ICON_HEART_CIRCLE} className='heart-icon' />
+          <View className='icon-bg'></View>
+          <Text className='heart-text'>添加截图，平台会优先推荐</Text>
+        </View>
+      </View>
+    )
+  }
+  return (
+    <Text className='section-title'>{title}</Text>
+  )
+}
+
+// 公共的容器组件
+const SectionContainer: React.FC<{ title: string; children: React.ReactNode, prop: string }> = ({ title, children, prop }) => (
+  <View className='venue-type-section'>
+    <SectionTitle title={title} prop={prop}/>
+    <View className='option-buttons'>
+      {children}
+    </View>
+  </View>
+)
+
 const StadiumDetail: React.FC<StadiumDetailProps> = ({
   stadium,
-  onBack,
-  onConfirm
 }) => {
-  const [venueType, setVenueType] = useState('室内')
-  const [groundMaterial, setGroundMaterial] = useState('硬地')
-  const [additionalInfo, setAdditionalInfo] = useState('')
-  const [imagesList, setImagesList] = useState<CoverImage[]>([])
+  const [formData, setFormData] = useState({
+    stadiumName: stadium.name,
+    stadiumAddress: stadium.address,
+    stadiumLongitude: stadium.longitude,
+    stadiumLatitude: stadium.latitude,
+    istance: stadium.istance,
+    venueType: '室内',
+    groundMaterial: '硬地',
+    additionalInfo: '',
+    imagesList: [] as CoverImage[]
+  })
+
 
-  const handleConfirm = () => {
-    onConfirm(stadium, venueType, groundMaterial, additionalInfo)
-  }
 
   const handleMapLocation = () => {
-
+    Taro.chooseLocation({
+      success: (res) => {
+        console.log(res,'resres');
+        setFormData({
+          ...formData,
+          stadiumName: res.name,
+          stadiumAddress: res.address,
+          stadiumLongitude: res.longitude,
+          stadiumLatitude: res.latitude
+        })
+      },
+      fail: (err) => {
+        console.error('选择位置失败:', err)
+        Taro.showToast({
+          title: '位置选择失败',
+          icon: 'error'
+        })
+      }
+    })
   }
 
-  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)
-    }
+  const updateFormData = useCallback((prop: string, value: any) => {
+    setFormData(prev => ({ ...prev, [prop]: value }))
   }, [])
 
+  const getSelectedByLabel = useCallback((label: string) => {
+    if (label === '场地类型') return formData.venueType
+    if (label === '地面材质') return formData.groundMaterial
+    return ''
+  }, [formData.venueType, formData.groundMaterial])
+
+
   console.log(stadium,'stadiumstadium');
   return (
     <View className='stadium-detail'>
@@ -84,9 +140,10 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
           <Image src={images.ICON_STADIUM} className='stadium-icon' />
         </View>
         <View className='stadium-item-right'>
-          <View className='stadium-name'>{stadium.name}</View>
+          <View className='stadium-name'>{formData.stadiumName}</View>
           <View className='stadium-address'>
-            <Text>{stadium.address}</Text>
+            <Text>{formData.istance} · </Text>
+            <Text>{formData.stadiumAddress}</Text>
             <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
           </View>
         </View>
@@ -96,54 +153,43 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
         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>
+            <SectionContainer key={item.label} title={item.label} prop={item.prop}>
+              {item.options.map((opt) => (
+                <View
+                  key={opt}
+                  className={`option-btn ${selected === opt ? 'selected' : ''}`}
+                  onClick={() => updateFormData(item.prop, opt)}
+                >
+                  <Text className='option-text'>{opt}</Text>
+                </View>
+              ))}
+            </SectionContainer>
           )
         }
 
         if (item.type === 'textareaTag') {
           return (
-          <View className='venue-type-section' key={item.label}>
-              <Text className='section-title'>{item.label}</Text>
-              <View className='option-buttons'>
+            <SectionContainer key={item.label} title={item.label} prop={item.prop}>
+              <View className='textarea-tag-container'>
                 <TextareaTag
-                  key={item.label}
-                  value={additionalInfo}
-                  onChange={setAdditionalInfo}
+                  value={formData.additionalInfo}
+                  onChange={(value) => updateFormData(item.prop, value)}
                   placeholder='有其他场地信息可备注'
                   options={(item.options || []).map((o) => ({ label: o, value: o }))}
                 />
               </View>
-            </View>
-            
+            </SectionContainer>
           )
         }
 
         if (item.type === 'image') {
           return (
-            <View className='venue-type-section' key={item.label}>
-              <Text className='section-title'>{item.label}</Text>
-              <View className='option-buttons'>
+            <SectionContainer key={item.label} title={item.label} prop={item.prop}>
               <CoverImageUpload
-                key={item.label}
-                images={imagesList}
-                onChange={setImagesList}
+                images={formData.imagesList}
+                onChange={(images) => updateFormData(item.prop, images)}
               />
-              </View>
-            </View>
-           
+            </SectionContainer>
           )
         }