修改地点选择

2025-08-21 23:00:21 +08:00
parent c32c86051c
commit e5176f4f5f
13 changed files with 406 additions and 223 deletions
--- a/src/components/CommonPopup/CommonPopup.tsx
+++ b/src/components/CommonPopup/CommonPopup.tsx
@@ -25,7 +25,7 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
  onClose,
  className,
  title,
-  showHeader = true,
+  showHeader = false,
  hideFooter = false,
  cancelText = '返回',
  confirmText = '完成',
--- a/src/components/CommonPopup/index.module.scss
+++ b/src/components/CommonPopup/index.module.scss
@@ -3,7 +3,7 @@
 .common-popup {
  padding: 0;
  box-sizing: border-box;
-  max-height: 80vh;
+  max-height: calc(100vh - 10px);
  display: flex;
  flex-direction: column;
  background-color: theme.$page-background-color;
@@ -20,17 +20,18 @@
  }

  .common-popup__body {
-    padding: 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }

  .common-popup__footer {
-    padding: 12px 16px;
+    padding: 8px 10px 0 10px;
    display: flex;
-    gap: 12px;
-    border-top: 1px solid #f0f1f5;
+    gap: 8px;
+    background: #FFF;
+    padding-bottom: env(safe-area-inset-bottom);
+
  }

  .common-popup__btn {
@@ -41,9 +42,21 @@
    background: #f5f6f7;
    color: #1f2329;
    border: none;
+    width: 154px;
+    height: 36px;
+    border-radius: 12px;
+    border: 0.5px solid rgba(0, 0, 0, 0.06);
+    background: #fff;
+    padding: 4px 10px;
  }

  .common-popup__btn-confirm {
    /* 使用按钮组件的 primary 样式 */
+    width: 154px;
+    height: 36px;
+    border: 0.5px solid rgba(0, 0, 0, 0.06);
+    background: #000;
+    border-radius: 12px;
+    padding: 4px 10px;
  }
 } 
--- a/src/components/FormSwitch/FormSwitch.tsx
+++ b/src/components/FormSwitch/FormSwitch.tsx
@@ -26,6 +26,11 @@ const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, info
      {showTip && <View className='info-popover-mask' onClick={() => setShowTip(false)} />}
      <View className='auto-degrade-section'>
        <View className='auto-degrade-item'>
+          <Checkbox 
+            className='auto-degrade-checkbox nut-checkbox-black'
+            checked={value}
+            onChange={onChange}
+          />
          <View className='auto-degrade-content'>
            <Text className='auto-degrade-text'>{subTitle}</Text>
            {
@@ -43,11 +48,6 @@ const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, info
              )
            }
          </View>
-          <Checkbox 
-            className='auto-degrade-checkbox nut-checkbox-black'
-            checked={value}
-            onChange={onChange}
-          />
        </View>
      </View>
    </>
--- a/src/components/FormSwitch/index.scss
+++ b/src/components/FormSwitch/index.scss
@@ -8,8 +8,8 @@
  .auto-degrade-item {
    display: flex;
    align-items: center;
-    justify-content: space-between;
    width: 100%;
+    gap: 8px;
    .auto-degrade-content {
      display: flex;
      align-items: center;
@@ -62,10 +62,8 @@
    }
    
    .auto-degrade-checkbox {
-      .nut-checkbox-icon {
-        width: 14px;
-        height: 14px;
-      }
+      width: 18px;
+      height: 18px;
    }
  }
 }
--- a/src/components/SelectStadium/SelectStadium.scss
+++ b/src/components/SelectStadium/SelectStadium.scss
@@ -1,17 +1,8 @@
-.select-stadium-popup {
-  .nut-popup {
-    max-height: 85vh;
-    overflow: hidden;
-    
-    .nut-popup__content {
-      overflow: hidden;
-    }
-  }
-}
+

 .select-stadium {
  width: 100%;
-  height: 85vh;
+  height: calc(100vh - 10px);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
@@ -21,19 +12,46 @@
  // 搜索区域
  .search-section {
    background: #f5f5f5;
-    padding: 16px;
+    padding: 26px 15px 0px 15px;

    .search-wrapper {
-      background: white;
-      border-radius: 12px;
-      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;

-      .search-icon {
+      .search-bar {
        font-size: 16px;
-        color: #999;
+        display: flex;
+        height: 44px;
+        padding: 0 12px;
+        align-items: center;
+        gap: 10px;
+        flex: 1;
+        border-radius: 999px;
+        border: 0.5px solid rgba(0, 0, 0, 0.06);
+        background: #FFF;
+        box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+        .search-icon {
+          width: 20px;
+          height: 20px;
+        }
+
+        .clear-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+          cursor: pointer;
+          &:active {
+            background: rgba(0, 0, 0, 0.04);
+          }
+          .clear-icon {
+            width: 20px;
+            height: 20px;
+          }
+        }
      }

      .search-input {
@@ -43,26 +61,32 @@
        border: none;
        outline: none;
        background: transparent;
+        .search-placeholder{
+          color: rgba(60, 60, 67, 0.60);
+        }
      }

      .map-btn {
-        width: 32px;
-        height: 32px;
-        border-radius: 16px;
-        background: #f0f8ff;
        display: flex;
+        height: 44px;
+        padding: 0 12px;
        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: background-color 0.2s;
-
+        gap: 2px;
+        border-radius: 999px;
+        border: 0.5px solid rgba(0, 0, 0, 0.06);
+        background: #FFF;
+        box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+        box-sizing: border-box;
        &:active {
          background: #e0f0ff;
        }
-
        .map-icon {
+          width: 20px;
+          height: 20px;
+        }
+        .map-text {
          font-size: 16px;
-          color: #007AFF;
+          color: #000;
        }
      }
    }
@@ -70,34 +94,42 @@

  // 热门球场区域
  .hot-section {
-    background: #f5f5f5;
-    padding: 0 16px 16px 16px;
+    padding: 23px 20px 10px 20px;

    .hot-header {
      display: flex;
      align-items: center;
-      gap: 30px;

      .hot-title {
        font-size: 16px;
        font-weight: 600;
-        color: #333;
+        color: #000;
+      }
+      .hot-stadium-line{
+        height: 6px;
+        width: 1px;
+        background: rgba(22, 24, 35, 0.12);
+        margin: 0 12px;;
      }

      .booking-section {
        display: flex;
        align-items: center;
-        gap: 8px;
+        color: rgba(0, 0, 0, 0.50);
+        gap: 4px;

        .booking-title {
-          font-size: 16px;
-          font-weight: 600;
-          color: #333;
+          font-size: 15px;
        }

        .booking-status {
-          font-size: 12px;
-          color: #999;
+          display: flex;
+          padding: 2px 5px;
+          align-items: center;
+          gap: 4px;
+          border-radius: 999px;
+          border: 0.5px solid rgba(0, 0, 0, 0.16);
+          background: #FFF;
        }
      }
    }
@@ -107,44 +139,51 @@
  .stadium-list {
    flex: 1;
    width: auto;
-    padding: 0 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    .stadium-item {
-      border-radius: 20px;
-      height: 40px;
-      margin-bottom: 6px;
+      padding: 16px 20px;
      display: flex;
      align-items: center;
-      justify-content: center;
-      color: #000;
      position: relative;
-      border: 1px solid rgba(0, 0, 0, 0.12);
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &.selected {
-        background: #f0f8ff;
-        
-        &::after {
-          content: '✓';
-          position: absolute;
-          right: 16px;
-          top: 50%;
-          transform: translateY(-50%);
-          color: #007AFF;
-          font-size: 16px;
-          font-weight: bold;
+      gap: 12px;
+      .stadium-item-left{
+        display: flex;
+        padding: 14px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 12px;
+        border: 0.5px solid rgba(0, 0, 0, 0.08);
+        background: rgba(0, 0, 0, 0.06);
+        .stadium-icon{
+          width: 20px;
+          height: 20px;
        }
      }
-
-      .stadium-name {
-        font-size: 16px;
-        color: #333;
-        line-height: 1.4;
-        padding-right: 30px;
+      .stadium-item-right{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        .stadium-name{
+          font-size: 16px;
+          color: #000;
+          font-weight: 600;
+          line-height: 24px;
+          display: flex;
+        }
+        .stadium-address{
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: rgba(0, 0, 0, 0.80);
+          font-size: 12px;
+        }
+        .stadium-map-icon{
+          width: 10px;
+          height: 10px;
+        }
      }
    }
  }
--- a/src/components/SelectStadium/SelectStadium.tsx
+++ b/src/components/SelectStadium/SelectStadium.tsx
@@ -1,15 +1,19 @@
 import React, { useState } from 'react'
-import { View, Text, Input, ScrollView } from '@tarojs/components'
+import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
 import { Popup } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import StadiumDetail from './StadiumDetail'
 import CommonPopup from '../CommonPopup'
 import './SelectStadium.scss'
+import images from '@/config/images'

 export interface Stadium {
-  id: string
+  id?: string
  name: string
  address?: string
+  istance?: string
+  longitude?: number
+  latitude?: number
 }

 interface SelectStadiumProps {
@@ -19,15 +23,15 @@ interface SelectStadiumProps {
 }

 const stadiumList: Stadium[] = [
-  { id: '1', name: '静安网球馆', address: '静安区' },
-  { id: '2', name: '芦湾体育馆', address: '芦湾区' },
-  { id: '3', name: '静安网球馆', address: '静安区' },
-  { id: '4', name: '徐汇游泳中心', address: '徐汇区' },
-  { id: '5', name: '汇龙新城小区', address: '新城区' },
-  { id: '6', name: '翠湖御苑小区', address: '翠湖区' },
-  { id: '7', name: '仁恒河滨花园网球场', address: '浦东新区' },
-  { id: '8', name: 'Our Tennis 东江球场', address: '浦东新区' },
-  { id: '9', name: '上海琦梦网球俱乐部', address: '浦东新区' }
+  { id: '1', name: '静安网球馆', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304},
+  { id: '2', name: '芦湾体育馆', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
+  { id: '3', name: '静安网球馆', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
+  { id: '4', name: '徐汇游泳中心', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
+  { id: '5', name: '汇龙新城小区', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
+  { id: '6', name: '翠湖御苑小区', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
+  { id: '7', name: '仁恒河滨花园网球场', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
+  { id: '8', name: 'Our Tennis 东江球场', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
+  { id: '9', name: '上海琦梦网球俱乐部', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 }
 ]

 const SelectStadium: React.FC<SelectStadiumProps> = ({
@@ -68,12 +72,13 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
    Taro.chooseLocation({
      success: (res) => {
        console.log('选择位置成功:', res)
-        // 可以根据位置信息搜索附近的场馆
-        // 这里可以调用相关API获取附近场馆信息
-        Taro.showToast({
-          title: '位置选择成功',
-          icon: 'success'
+        setSelectedStadium({
+          name: res.name,
+          address: res.address,
+          longitude: res.longitude,
+          latitude: res.latitude
        })
+        setShowDetail(true)
      },
      fail: (err) => {
        console.error('选择位置失败:', err)
@@ -112,23 +117,31 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
    setSearchValue('')
  }

+
+  const markSearchText = (text: string) => {
+    return text.replace(searchValue, `<span style="color: #007AFF;">${searchValue}</span>`)
+  }
+
  // 如果显示详情页面
  if (showDetail && selectedStadium) {
    return (
-      <Popup
+      <CommonPopup
        visible={visible}
+        onClose={handleCancel}
+        cancelText="返回"
+        confirmText="确认"
+        className="select-stadium-popup"
+        onCancel={handleCancel}
+        onConfirm={handleListConfirm}
        position="bottom"
        round
-        closeable={false}
-        onClose={handleCancel}
-        className="select-stadium-popup"
      >
        <StadiumDetail
          stadium={selectedStadium}
          onBack={handleBackToList}
          onConfirm={handleConfirm}
        />
-      </Popup>
+      </CommonPopup>
    )
  }

@@ -136,6 +149,7 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
  return (
      <CommonPopup
        visible={visible}
+        hideFooter
        onClose={handleCancel}
        cancelText="返回"
        confirmText="完成"
@@ -150,16 +164,29 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
        {/* 搜索框 */}
        <View className='search-section'>
          <View className='search-wrapper'>
-            <View className='search-icon'>🔍</View>
-            <Input
-              className='search-input'
-              placeholder='搜索'
-              value={searchValue}
-              onInput={handleSearchInput}
-            />
-            <View className='map-btn' onClick={handleMapLocation}>
-              <Text className='map-icon'>📍</Text>
+            <View className='search-bar'>
+              <Image src={images.ICON_SEARCH} className='search-icon' />
+              <Input
+                className='search-input'
+                placeholder='搜索'
+                placeholderClass='search-placeholder'
+                value={searchValue}
+                onInput={handleSearchInput}
+              />
+              {searchValue && (
+                <View className='clear-btn' onClick={() => setSearchValue('')}>
+                  <Image src={images.ICON_REMOVE} className='clear-icon' />
+                </View>
+              )}
            </View>
+            {
+              !searchValue && (
+                <View className='map-btn' onClick={handleMapLocation}>
+                  <Image src={images.ICON_MAP} className='map-icon' />
+                  <Text className='map-text'>地图</Text>
+                </View>
+              )
+            }
          </View>
        </View>

@@ -167,6 +194,7 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
        <View className='hot-section'>
          <View className='hot-header'>
            <Text className='hot-title'>热门球场</Text>
+            <View className='hot-stadium-line'></View>
            <View className='booking-section'>
              <Text className='booking-title'>预定球场</Text>
              <Text className='booking-status'>敬请期待</Text>
@@ -182,9 +210,37 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
              className={`stadium-item ${selectedStadium?.id === stadium.id ? 'selected' : ''}`}
              onClick={() => handleStadiumSelect(stadium)}
            >
-              <Text className='stadium-name'>{stadium.name}</Text>
+              <View className='stadium-item-left'>
+                <Image src={images.ICON_STADIUM} className='stadium-icon' />
+              </View>
+              <View className='stadium-item-right'>
+                <View className='stadium-name' dangerouslySetInnerHTML={{ __html: markSearchText(stadium.name) }}></View>
+                <View className='stadium-address'>
+                  <Text>{stadium.istance} · </Text>
+                  <Text>{stadium.address}</Text>
+                  <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
+                </View>
+              </View>
+              
            </View>
          ))}
+          {
+            searchValue && (<View
+              className={`stadium-item`}
+              onClick={() => handleMapLocation()}
+            >
+              <View className='stadium-item-left'>
+                <Image src={images.ICON_MAP_SEARCH} className='stadium-icon' />
+              </View>
+              <View className='stadium-item-right'>
+                <View className='stadium-name'>没有找到球场？去地图定位</View>
+                <View className='stadium-address'>
+                  <Text>腾讯地图</Text>
+                  <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
+                </View>
+              </View>
+            </View>)
+          }
        </ScrollView>
      </View>
    </CommonPopup>
--- a/src/components/SelectStadium/StadiumDetail.scss
+++ b/src/components/SelectStadium/StadiumDetail.scss
@@ -9,40 +9,59 @@
  padding-bottom: env(safe-area-inset-bottom);

  // 已选球场
-  .selected-venue-section {
-    padding: 20px 16px 16px 16px;
-    border-bottom: 1px solid #e5e5e5;
-    flex-shrink: 0;
-
-    .section-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 12px;
-      display: block;
-    }
-
-    .venue-button {
-      background: #333;
-      border-radius: 24px;
-      padding: 12px 24px;
-      display: inline-block;
-
-      .venue-name {
-        color: white;
-        font-size: 16px;
-        font-weight: 500;
+    // 场馆列表
+    .stadium-item {
+      padding: 32px 20px 16px 20px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      gap: 12px;
+      .stadium-item-left{
+        display: flex;
+        padding: 14px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 12px;
+        border: 0.5px solid rgba(0, 0, 0, 0.08);
+        background: rgba(0, 0, 0, 0.06);
+        .stadium-icon{
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .stadium-item-right{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        .stadium-name{
+          font-size: 16px;
+          color: #000;
+          font-weight: 600;
+          line-height: 24px;
+          display: flex;
+        }
+        .stadium-address{
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: rgba(0, 0, 0, 0.80);
+          font-size: 12px;
+        }
+        .stadium-map-icon{
+          width: 10px;
+          height: 10px;
+        }
      }
    }
-  }

  // 场地类型
  .venue-type-section {
-    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;

    .section-title {
+      padding: 18px 20px 10px 20px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
@@ -53,7 +72,7 @@
    .option-buttons {
      display: flex;
      gap: 12px;
-
+      padding: 0 15px;
      .option-btn {
        padding: 8px 16px;
        border-radius: 20px;
--- a/src/components/SelectStadium/StadiumDetail.tsx
+++ b/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>
  )
 }
--- a/src/components/TextareaTag/TextareaTag.scss
+++ b/src/components/TextareaTag/TextareaTag.scss
@@ -2,11 +2,10 @@
 .textarea-tag {
  background: white;
  border-radius: 16px;
-  padding: 10px 16px 5px 10px;
+  padding: 10px 16px;
  width: 100%;
  .input-wrapper {
-    padding-bottom: 10px;
-
+    margin-top: 8px;
    .additional-input {
      width: 100%;
      height: 46px;
@@ -37,7 +36,6 @@
      gap: 6px;
      .nut-checkbox{
        margin-right: 0;
-        margin-bottom: 5px;
        .nut-checkbox-button{
          border: 1px solid theme.$primary-border-color;
          color: theme.$primary-color;
--- a/src/components/TextareaTag/TextareaTag.tsx
+++ b/src/components/TextareaTag/TextareaTag.tsx
@@ -45,19 +45,6 @@ const TextareaTag: React.FC<TextareaTagProps> = ({

  return (
    <View className='textarea-tag'>
-        {/* 输入框 */}
-        <View className='input-wrapper'>
-          <Textarea
-            className='additional-input'
-            placeholder={placeholder}
-            value={value}
-            placeholderClass='textarea-placeholder'
-            onInput={handleInputChange}
-            maxlength={maxLength}
-            autoHeight={false}
-          />
-        </View>
-        
        {/* 选择选项 */}
        <View className='options-wrapper'>
          <View className='options-list'>
@@ -82,6 +69,20 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
            }
          </View>
        </View>
+        {/* 输入框 */}
+        <View className='input-wrapper'>
+          <Textarea
+            className='additional-input'
+            placeholder={placeholder}
+            value={value}
+            placeholderClass='textarea-placeholder'
+            onInput={handleInputChange}
+            maxlength={maxLength}
+            autoHeight={false}
+          />
+        </View>
+        
+        
      </View>
  )
 }