Merge remote-tracking branch 'origin' into feat/liujie

2025-08-24 15:55:13 +08:00
parent d84a67726f dec7530b1b
commit 97e4bb89d7
98 changed files with 10184 additions and 83 deletions
--- a/src/components/ActivityTypeSwitch/index.module.scss
+++ b/src/components/ActivityTypeSwitch/index.module.scss
@@ -0,0 +1,49 @@
+.activity-type-switch {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 0 4px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  height: 40px;
+  border-radius: 12px;
+  padding: 4px;
+  overflow: hidden;
+}
+
+.switch-tab {
+  flex: 1;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  border: 1px solid #e5e5e5;
+  color: #1890ff;
+  opacity: 0.3;
+  box-shadow: none;
+  border: none;
+}
+
+.switch-tab.active {
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
+  opacity: 1;
+}
+
+.icon-style {
+  width: 20px;
+  height: 20px;
+}
+
+.tab-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.tab-text {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
--- a/src/components/ActivityTypeSwitch/index.tsx
+++ b/src/components/ActivityTypeSwitch/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import images from '@/config/images'
+import styles from './index.module.scss'
+
+export type ActivityType = 'individual' | 'group'
+
+interface ActivityTypeSwitchProps {
+  value: ActivityType
+  onChange: (type: ActivityType) => void
+}
+
+const ActivityTypeSwitch: React.FC<ActivityTypeSwitchProps> = ({ value, onChange }) => {
+  return (
+    <View className={styles['activity-type-switch']}>
+      <View 
+        className={`${styles['switch-tab']} ${value === 'individual' ? styles.active : ''}`}
+        onClick={() => onChange('individual')}
+      >
+        <View className={styles['tab-icon']}>
+          <Image src={images.ICON_PERSONAL} className={styles['icon-style']} />
+        </View>
+        <Text className={styles['tab-text']}>个人约球</Text>
+      </View>
+      <View 
+        className={`${styles['switch-tab']} ${value === 'group' ? styles.active : ''}`}
+        onClick={() => onChange('group')}
+      >
+        <Image src={images.ICON_CHANGDA} className={styles['icon-style']} />
+        <Text className={styles['tab-text']}>畅打活动</Text>
+      </View>
+    </View>
+  )
+}
+
+export default ActivityTypeSwitch
--- a/src/components/CommonPopup/CommonPopup.tsx
+++ b/src/components/CommonPopup/CommonPopup.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { Popup, Button } from '@nutui/nutui-react-taro'
+import styles from './index.module.scss'
+
+export interface CommonPopupProps {
+  visible: boolean
+  onClose: () => void
+  title?: React.ReactNode
+  showHeader?: boolean
+  hideFooter?: boolean
+  cancelText?: string
+  confirmText?: string
+  onCancel?: () => void
+  onConfirm?: () => void
+  position?: 'center' | 'bottom' | 'top' | 'left' | 'right'
+  round?: boolean
+  zIndex?: number
+  children?: React.ReactNode
+  className?: string
+}
+
+const CommonPopup: React.FC<CommonPopupProps> = ({
+  visible,
+  onClose,
+  className,
+  title,
+  showHeader = false,
+  hideFooter = false,
+  cancelText = '返回',
+  confirmText = '完成',
+  onCancel,
+  onConfirm,
+  position = 'bottom',
+  round = true,
+  zIndex,
+  children
+}) => {
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel()
+    } else {
+      onClose()
+    }
+  }
+
+  return (
+    <Popup
+      visible={visible}
+      position={position}
+      round={round}
+      closeable={false}
+      onClose={onClose}
+      className={`${styles['common-popup']} ${className ? className : ''}`}
+      style={zIndex ? { zIndex } : undefined}
+    >
+      {showHeader && (
+        <View className={styles['common-popup__header']}>
+          {typeof title === 'string' ? <Text className={styles['common-popup__title']}>{title}</Text> : title}
+        </View>
+      )}
+
+      <View className={styles['common-popup__body']}>
+        {children}
+      </View>
+
+      {!hideFooter && (
+        <View className={styles['common-popup__footer']}>
+          <Button className={`${styles['common-popup__btn']} ${styles['common-popup__btn-cancel']}`} type='default' size='small' onClick={handleCancel}>
+            {cancelText}
+          </Button>
+          <Button className={`${styles['common-popup__btn']} ${styles['common-popup__btn-confirm']}`} type='primary' size='small' onClick={onConfirm}>
+            {confirmText}
+          </Button>
+        </View>
+      )}
+    </Popup>
+  )
+}
+
+export default CommonPopup 
--- a/src/components/CommonPopup/index.module.scss
+++ b/src/components/CommonPopup/index.module.scss
@@ -0,0 +1,62 @@
+@use '~@/scss/themeColor.scss' as theme;
+
+.common-popup {
+  padding: 0;
+  box-sizing: border-box;
+  max-height: calc(100vh - 10px);
+  display: flex;
+  flex-direction: column;
+  background-color: theme.$page-background-color;
+  .common-popup__header {
+    padding: 12px 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2329;
+    border-bottom: 1px solid #f0f1f5;
+  }
+
+  .common-popup__title {
+    display: inline-block;
+  }
+
+  .common-popup__body {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    flex: 1 1 auto;
+  }
+
+  .common-popup__footer {
+    padding: 8px 10px 0 10px;
+    display: flex;
+    gap: 8px;
+    background: #FFF;
+    padding-bottom: env(safe-area-inset-bottom);
+
+  }
+
+  .common-popup__btn {
+    flex: 1;
+  }
+
+  .common-popup__btn-cancel {
+    background: #f5f6f7;
+    color: #1f2329;
+    border: none;
+    width: 154px;
+    height: 44px;
+    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: 44px;
+    border: 0.5px solid rgba(0, 0, 0, 0.06);
+    background: #000;
+    border-radius: 12px;
+    padding: 4px 10px;
+  }
+} 
--- a/src/components/CommonPopup/index.ts
+++ b/src/components/CommonPopup/index.ts
@@ -0,0 +1,3 @@
+import CommonPopup from './CommonPopup'
+export default CommonPopup
+export * from './CommonPopup' 
--- a/src/components/FormBasicInfo/FormBasicInfo.scss
+++ b/src/components/FormBasicInfo/FormBasicInfo.scss
@@ -0,0 +1,89 @@
+@use '~@/scss/images.scss' as img;
+@use '~@/scss/themeColor.scss' as theme;
+// FormBasicInfo 组件样式
+.form-basic-info{
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+
+  
+    // 费用项目
+    .form-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 44px;
+      padding-left: 12px;
+      &:last-child{
+        .form-wrapper{
+          border-bottom: none;
+        }
+      }
+      .form-label {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        padding-right: 14px;
+        .lable-icon {
+          width: 16px;
+          height: 16px;
+        }
+        text {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+      .form-wrapper{
+        display: flex;
+        justify-content: space-between;
+        flex: 1;
+        border-bottom: 1px solid  rgba(0, 0, 0, 0.06);
+        align-items: center;
+        .form-item-label{
+          display: flex;
+        }
+        .form-right-wrapper{
+          display: flex;
+          padding-right: 12px;
+          height: 44px;
+          line-height: 44px;
+          align-items: center;
+          .title-placeholder{
+            font-size: 14px;
+            color: theme.$textarea-placeholder-color;
+            font-weight: 400;
+          }
+          .h5-input{
+            font-size: 14px;
+            color: #333;
+            font-weight: 500;
+            width: 50px;
+            text-align: right;
+            margin-right: 8px;
+          }
+          .unit{
+            font-size: 14px;
+            color: theme.$primary-color;
+          }
+          .right-text{
+            color: theme.$textarea-placeholder-color;
+            font-size: 14px;
+            padding-right: 8px;
+            width: 200px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            text-align: right;
+          }
+          .arrow{
+            width: 16px;
+            height: 16px;
+            margin-left: 4px;
+            
+          }
+        }
+      }
+    }
+  
+}
--- a/src/components/FormBasicInfo/FormBasicInfo.tsx
+++ b/src/components/FormBasicInfo/FormBasicInfo.tsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import { View, Text, Input, Image, Picker } from '@tarojs/components'
+import { Stadium } from '../SelectStadium'
+import img from '@/config/images';
+import './FormBasicInfo.scss'
+import { FormFieldConfig } from '@/config/formSchema/publishBallFormSchema';
+
+interface FormBasicInfoProps {
+  fee: string
+  location: string
+  gameplay: string
+  selectedStadium: Stadium | null
+  onFeeChange: (value: string) => void
+  onLocationChange: (value: string) => void
+  onGameplayChange: (value: string) => void
+  onStadiumSelect: () => void
+  children: FormFieldConfig[]
+}
+
+const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
+  fee,
+  location,
+  gameplay,
+  selectedStadium,
+  onFeeChange,
+  onLocationChange,
+  onGameplayChange,
+  onStadiumSelect,
+  children
+}) => {
+  const renderChildren = () => {
+    return children.map((child: any, index: number) => {
+      return <View className='form-item'>
+      <View className='form-label'>
+        <Image className='lable-icon' src={img[child.iconType]} />
+      </View>
+      {
+        index === 0 && (<View className='form-wrapper'>
+          <Text className='form-item-label'>{child.label}</Text>
+          <View className='form-right-wrapper'>
+            <Input
+              className='fee-input'
+              placeholder='请输入'
+              placeholderClass='title-placeholder'
+              type='digit'
+              value={fee}
+              onInput={(e) => onFeeChange(e.detail.value)}
+            />
+            <Text className='unit'>元/每人</Text>
+          </View>
+      </View>)
+      }
+      {
+        index === 1 && (<View className='form-wrapper'>
+          <Text className='form-item-label'>{child.label}</Text>
+          <View className='form-right-wrapper' onClick={onStadiumSelect}>
+            <Text className={`right-text ${selectedStadium ? 'selected' : ''}`}>
+              {selectedStadium ? selectedStadium.name : '请选择'}
+            </Text>
+            <Image src={img.ICON_ARROW_RIGHT}  className='arrow'/>
+          </View>
+        </View>)
+      }
+      {
+        index === 2 && ( <View className='form-wrapper'>
+          <Text className='form-item-label'>{child.label}</Text>
+          <View className='form-right-wrapper'>
+            <Text className={`right-text ${gameplay ? 'selected' : ''}`}>
+              {gameplay ? gameplay : '请选择'}
+            </Text>
+            <Image src={img.ICON_ARROW_RIGHT}  className='arrow'/>
+          </View>
+        </View>)
+      }
+    </View>
+    })
+  }
+  return (
+    <View className='form-basic-info'>
+      {/* 费用 */}
+      {renderChildren()}
+    </View>
+  )
+}
+
+export default FormBasicInfo 
--- a/src/components/FormBasicInfo/index.ts
+++ b/src/components/FormBasicInfo/index.ts
@@ -0,0 +1,2 @@
+export { default } from './FormBasicInfo'
+export type { FormBasicInfoProps } from './FormBasicInfo' 
--- a/src/components/FormSwitch/FormSwitch.tsx
+++ b/src/components/FormSwitch/FormSwitch.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { View, Text } from '@tarojs/components'
+import { Checkbox } from '@nutui/nutui-react-taro'
+import { Image } from '@tarojs/components'
+import images from '@/config/images'
+import './index.scss'
+
+interface FormSwitchProps {
+  value: boolean
+  onChange: (checked: boolean) => void
+  subTitle: string
+  infoIcon?: string
+  showToast?: boolean
+  description?: string
+}
+
+const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, infoIcon, showToast = false, description}) => {
+  const [showTip, setShowTip] = useState(false)
+
+  const toggleTip = () => {
+    setShowTip((prev) => !prev)
+  }
+
+  return (
+    <>
+      {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>
+            {
+              showToast && (
+                <View className='info-icon' onClick={toggleTip}>
+                  <Image src={infoIcon || images.ICON_TIPS} className='info-img' />
+                  {
+                    showTip && (
+                      <View className='info-popover'>
+                        <Text>{description || ''}</Text>
+                      </View>
+                    )
+                  }
+                </View>
+              )
+            }
+          </View>
+        </View>
+      </View>
+    </>
+  )
+}
+
+export default FormSwitch 
--- a/src/components/FormSwitch/index.scss
+++ b/src/components/FormSwitch/index.scss
@@ -0,0 +1,79 @@
+.auto-degrade-section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 10px 12px;
+  height: 44px;
+  width: 100%;
+  box-sizing: border-box;
+  .auto-degrade-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 8px;
+    .auto-degrade-content {
+      display: flex;
+      align-items: center;
+      
+      .auto-degrade-text {
+        font-size: 14px;
+        color: #333;
+        font-weight: 500;
+      }
+      
+      .info-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-left: 4px;
+        position: relative;
+        .info-img{
+          width: 12px;
+          height: 12px;
+        }
+        .info-popover {
+          position: absolute;
+          bottom: 22px;
+          left: -65px;
+          width: 130px;
+          padding:12px;
+          background: rgba(57, 59, 68, 0.90);
+          color: #fff;
+          border-radius: 8px;
+          font-size: 12px;
+          line-height: 1.6;
+          z-index: 1001;
+          white-space: normal;
+          word-break: normal;
+          overflow-wrap: break-word;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        }
+        .info-popover::before {
+          content: '';
+          position: absolute;
+          bottom: -6px;
+          left: 68px; /* 对齐图标（宽12px），可按需微调 */
+          width: 0;
+          height: 0;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 6px solid rgba(57, 59, 68, 0.90);
+        }
+      }
+    }
+    
+    .auto-degrade-checkbox {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.info-popover-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 1000;
+} 
--- a/src/components/FormSwitch/index.ts
+++ b/src/components/FormSwitch/index.ts
@@ -0,0 +1 @@
+export { default } from './FormSwitch' 
--- a/src/components/ImageUpload/ImageUpload.scss
+++ b/src/components/ImageUpload/ImageUpload.scss
@@ -0,0 +1,110 @@
+// 在组件SCSS文件中
+@use '~@/scss/images.scss' as img;
+.cover-image-upload {
+  margin-bottom: 8px;
+
+  .cover-scroll {
+    white-space: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .cover-list {
+    display: inline-flex;
+    padding: 0 4px;
+    min-width: 100%;
+    transition: justify-content 0.3s ease;
+    
+    &.center {
+      justify-content: center;
+    }
+  }
+
+  .cover-item {
+    flex-shrink: 0;
+    width: 108px;
+    height: 108px;
+    border-radius: 12px;
+    margin-right: 6px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    animation: slideIn 0.3s ease-out;
+    
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: scale(0.8);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    &.add-btn {
+      border: 2px dashed #d9d9d9;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      
+      .add-icon {
+        font-size: 32px;
+        color: #999;
+        margin-bottom: 8px;
+      }
+
+      .add-text {
+        font-size: 12px;
+        color: #999;
+        text-align: center;
+        line-height: 1.2;
+      }
+    }
+
+    &.image-item {
+      .cover-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 12px;
+        transition: opacity 0.3s ease;
+        
+        &:not([src]) {
+          opacity: 0;
+        }
+      }
+
+      .delete-btn {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 20px;
+        height: 20px;
+        background: rgba(0, 0, 0, 0.6);
+        color: white;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// 暗色模式适配
+@media (prefers-color-scheme: dark) {
+  .cover-image-upload {
+    .cover-item.add-btn {
+      background: #2d2d2d;
+      border-color: #555;
+      
+      .add-icon,
+      .add-text {
+        color: #999;
+      }
+    }
+  }
+} 
--- a/src/components/ImageUpload/ImageUpload.tsx
+++ b/src/components/ImageUpload/ImageUpload.tsx
@@ -0,0 +1,91 @@
+import React, { useMemo, useCallback } from 'react'
+import { View, Text, Image, ScrollView } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import './ImageUpload.scss'
+
+export interface CoverImage {
+  id: string
+  url: string
+  tempFilePath?: string
+}
+
+interface ImageUploadProps {
+  images: CoverImage[]
+  onChange: (images: CoverImage[]) => void
+  maxCount?: number
+}
+
+const ImageUpload: React.FC<ImageUploadProps> = ({ 
+  images, 
+  onChange, 
+  maxCount = 9 
+}) => {
+  // 添加封面图片
+  const handleAddCoverImage = useCallback(() => {
+    if (images.length >= maxCount) {
+      Taro.showToast({
+        title: `最多只能上传${maxCount}张图片`,
+        icon: 'none'
+      })
+      return
+    }
+
+    Taro.chooseImage({
+      count: maxCount - images.length,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        const newImages = res.tempFilePaths.map((path, index) => ({
+          id: Date.now() + index + '',
+          url: path,
+          tempFilePath: path
+        }))
+        onChange([...images, ...newImages])
+      },
+      fail: (err) => {
+        console.error('选择图片失败:', err)
+      }
+    })
+  }, [images.length, maxCount, onChange])
+
+  // 删除封面图片
+  const handleDeleteCoverImage = useCallback((id: string) => {
+    onChange(images.filter(img => img.id !== id))
+  }, [images, onChange])
+
+  // 判断是否需要居中显示（总项目数不超过3个时居中）
+  const shouldCenter = useMemo(() => (images.length + 1) <= 3, [images.length])
+
+  return (
+    <View className='cover-image-upload'>
+      <ScrollView className='cover-scroll' scrollX>
+        <View className={`cover-list ${shouldCenter ? 'center' : ''}`}>
+          {/* 添加按钮 */}
+          <View className='cover-item add-btn' onClick={handleAddCoverImage}>
+            <View className='add-icon'>+</View>
+            <Text className='add-text'>添加活动封面</Text>
+          </View>
+          
+          {/* 已选择的图片 */}
+          {images.map((image) => (
+            <View key={image.id} className='cover-item image-item'>
+              <Image 
+                className='cover-image' 
+                src={image.url} 
+                mode='aspectFill'
+              />
+              <View 
+                className='delete-btn'
+                onClick={() => handleDeleteCoverImage(image.id)}
+              >
+                ×
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+export default ImageUpload 
--- a/src/components/ImageUpload/index.ts
+++ b/src/components/ImageUpload/index.ts
@@ -0,0 +1 @@
+export { default, type CoverImage } from './ImageUpload' 
--- a/src/components/MapDisplay/README.md
+++ b/src/components/MapDisplay/README.md
@@ -0,0 +1,215 @@
+# 腾讯地图SDK使用说明
+
+## 概述
+
+本项目已集成腾讯地图SDK (`qqmap-wx-jssdk`)，可以在小程序中使用腾讯地图的各种功能，包括地点搜索、地理编码等。现在已添加真实的腾讯地图组件，支持显示当前位置和交互功能。
+
+## 安装依赖
+
+项目已安装 `qqmap-wx-jssdk` 依赖：
+
+```bash
+npm install qqmap-wx-jssdk
+# 或
+yarn add qqmap-wx-jssdk
+```
+
+## 基本使用
+
+### 1. 引入SDK
+
+```typescript
+import QQMapWX from "qqmap-wx-jssdk";
+```
+
+### 2. 初始化SDK
+
+```typescript
+const qqmapsdk = new QQMapWX({
+  key: 'YOUR_API_KEY' // 替换为你的腾讯地图API密钥
+});
+```
+
+### 3. 使用search方法搜索地点
+
+```typescript
+// 搜索地点
+qqmapsdk.search({
+  keyword: '关键词',           // 搜索关键词
+  location: '39.908802,116.397502', // 搜索中心点（可选）
+  page_size: 20,              // 每页结果数量（可选）
+  page_index: 1,              // 页码（可选）
+  success: (res) => {
+    console.log('搜索成功:', res.data);
+    // 处理搜索结果
+  },
+  fail: (err) => {
+    console.error('搜索失败:', err);
+  }
+});
+```
+
+## 在组件中使用
+
+### MapDisplay组件
+
+`MapDisplay` 组件已经封装了腾讯地图SDK的使用，包括：
+
+- **自动初始化SDK**
+- **真实地图显示**: 使用Taro的Map组件显示腾讯地图
+- **当前位置显示**: 自动获取并显示用户当前位置
+- **地点搜索功能**: 支持关键词搜索地点
+- **搜索结果展示**: 在地图上标记搜索结果
+- **交互功能**: 支持地图缩放、拖动、标记点击等
+- **错误处理**: 完善的错误处理和用户提示
+
+### 主要功能特性
+
+#### 1. 地图显示
+- 使用真实的腾讯地图组件
+- 默认显示当前位置
+- 支持地图缩放、拖动、旋转
+- 响应式设计，适配不同屏幕尺寸
+
+#### 2. 位置服务
+- 自动获取用户当前位置
+- 支持位置刷新
+- 逆地理编码获取地址信息
+- 位置信息悬浮显示
+
+#### 3. 搜索功能
+- 实时搜索地点
+- 防抖优化（500ms）
+- 搜索结果在地图上标记
+- 点击结果可移动地图中心
+
+#### 4. 地图标记
+- 当前位置标记（蓝色）
+- 搜索结果标记
+- 标记点击交互
+- 动态添加/移除标记
+
+### 使用示例
+
+```typescript
+import { mapService } from './mapService';
+
+// 搜索地点
+const results = await mapService.search({
+  keyword: '体育馆',
+  location: '39.908802,116.397502'
+});
+
+console.log('搜索结果:', results);
+```
+
+## API密钥配置
+
+在 `mapService.ts` 中配置你的腾讯地图API密钥：
+
+```typescript
+this.qqmapsdk = new QQMapWX({
+  key: 'YOUR_API_KEY' // 替换为你的实际API密钥
+});
+```
+
+## 组件属性
+
+### Map组件属性
+- `longitude`: 地图中心经度
+- `latitude`: 地图中心纬度
+- `scale`: 地图缩放级别（1-20）
+- `markers`: 地图标记数组
+- `show-location`: 是否显示用户位置
+- `enable-zoom`: 是否支持缩放
+- `enable-scroll`: 是否支持拖动
+- `enable-rotate`: 是否支持旋转
+
+### 标记属性
+```typescript
+interface Marker {
+  id: string;           // 标记唯一标识
+  latitude: number;     // 纬度
+  longitude: number;    // 经度
+  title: string;        // 标记标题
+  iconPath?: string;    // 图标路径
+  width: number;        // 图标宽度
+  height: number;       // 图标高度
+}
+```
+
+## 主要功能
+
+### 1. 地点搜索
+- 支持关键词搜索
+- 支持按位置范围搜索
+- 分页显示结果
+- 搜索结果地图标记
+
+### 2. 位置服务
+- 获取当前位置
+- 地理编码
+- 逆地理编码
+- 位置刷新
+
+### 3. 地图交互
+- 地图缩放
+- 地图拖动
+- 地图旋转
+- 标记点击
+- 地图点击
+
+### 4. 错误处理
+- SDK初始化失败处理
+- 搜索失败处理
+- 网络异常处理
+- 位置获取失败处理
+
+## 注意事项
+
+1. **API密钥**: 确保使用有效的腾讯地图API密钥
+2. **网络权限**: 小程序需要网络访问权限
+3. **位置权限**: 需要申请位置权限 (`scope.userLocation`)
+4. **错误处理**: 建议添加适当的错误处理和用户提示
+5. **地图组件**: 使用Taro的Map组件，确保兼容性
+
+## 权限配置
+
+在 `app.config.ts` 中添加位置权限：
+
+```typescript
+export default defineAppConfig({
+  // ... 其他配置
+  permission: {
+    'scope.userLocation': {
+      desc: '你的位置信息将用于小程序位置接口的效果展示'
+    }
+  },
+  requiredPrivateInfos: [
+    'getLocation'
+  ]
+})
+```
+
+## 常见问题
+
+### Q: SDK初始化失败怎么办？
+A: 检查API密钥是否正确，网络连接是否正常
+
+### Q: 搜索没有结果？
+A: 检查搜索关键词是否正确，API密钥是否有效
+
+### Q: 如何获取用户当前位置？
+A: 使用小程序的 `wx.getLocation` API，已集成到地图服务中
+
+### Q: 地图不显示怎么办？
+A: 检查网络连接，确保腾讯地图服务正常
+
+### Q: 位置权限被拒绝？
+A: 引导用户手动开启位置权限，或使用默认位置
+
+## 更多信息
+
+- [腾讯地图小程序SDK官方文档](https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview)
+- [API密钥申请](https://lbs.qq.com/dev/console/application/mine)
+- [Taro Map组件文档](https://taro-docs.jd.com/docs/components/map) 
--- a/src/components/MapDisplay/index.scss
+++ b/src/components/MapDisplay/index.scss
@@ -0,0 +1,382 @@
+.map-display {
+  height: 100vh;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+
+  .map-section {
+    flex: 1;
+    position: relative;
+    background-color: #e8f4fd;
+    
+    .map-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      
+      .map-component {
+        width: 100%;
+        height: calc(100vh - 50%);
+        border-radius: 0;
+      }
+      
+      .map-loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        
+        .map-loading-text {
+          font-size: 16px;
+          color: #666;
+          text-align: center;
+          padding: 20px;
+        }
+      }
+      
+      .map-placeholder {
+        font-size: 16px;
+        color: #666;
+        text-align: center;
+        padding: 20px;
+      }
+      
+      .location-info-overlay {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        z-index: 10;
+        
+        .location-info {
+          background-color: rgba(255, 255, 255, 0.95);
+          padding: 12px 16px;
+          border-radius: 24px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          backdrop-filter: blur(10px);
+          
+          .location-text {
+            font-size: 13px;
+            color: #333;
+            flex: 1;
+            margin-right: 12px;
+            line-height: 1.4;
+          }
+          
+          .refresh-btn {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f0f0f0;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 12px;
+            
+            &:hover {
+              background-color: #e0e0e0;
+              transform: scale(1.1);
+            }
+            
+            &:active {
+              transform: scale(0.95);
+            }
+          }
+        }
+      }
+      
+      .center-info-overlay {
+        position: absolute;
+        bottom: 20px;
+        left: 20px;
+        right: 20px;
+        z-index: 10;
+        
+        .center-info {
+          background-color: rgba(255, 255, 255, 0.95);
+          padding: 12px 16px;
+          border-radius: 24px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          backdrop-filter: blur(10px);
+          
+          .center-text {
+            font-size: 13px;
+            color: #333;
+            text-align: center;
+            line-height: 1.4;
+            margin-bottom: 4px;
+          }
+          
+          .moving-indicator {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 4px 8px;
+            background-color: rgba(255, 193, 7, 0.9);
+            border-radius: 12px;
+            animation: pulse 1.5s ease-in-out infinite;
+            
+            .moving-text {
+              font-size: 11px;
+              color: #333;
+              font-weight: 500;
+            }
+          }
+          
+          @keyframes pulse {
+            0%, 100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+            50% {
+              opacity: 0.8;
+              transform: scale(1.05);
+            }
+          }
+        }
+      }
+      
+      .fixed-center-indicator {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 15;
+        pointer-events: none;
+        
+        .center-dot {
+          width: 20px;
+          height: 20px;
+          background-color: #ff4757;
+          border: 3px solid #fff;
+          border-radius: 50%;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+          animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+          0% {
+            transform: scale(1);
+            opacity: 1;
+          }
+          50% {
+            transform: scale(1.2);
+            opacity: 0.8;
+          }
+          100% {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      }
+      
+      .location-info {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        background-color: rgba(255, 255, 255, 0.9);
+        padding: 8px 12px;
+        border-radius: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        
+        .location-text {
+          font-size: 12px;
+          color: #333;
+        }
+      }
+      
+      .sdk-status {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 12px 20px;
+        border-radius: 20px;
+        font-size: 14px;
+        z-index: 20;
+        
+        .sdk-status-text {
+          color: white;
+        }
+      }
+    }
+  }
+
+  .search-section {
+    background-color: #fff;
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+    
+    .search-wrapper {
+      display: flex;
+      align-items: center;
+      background-color: #f8f8f8;
+      border-radius: 24px;
+      padding: 0 16px;
+      position: relative;
+      
+      .search-icon {
+        font-size: 16px;
+        color: #999;
+        margin-right: 8px;
+      }
+      
+      .search-input {
+        flex: 1;
+        height: 40px;
+        font-size: 14px;
+        color: #333;
+        background: transparent;
+        border: none;
+        outline: none;
+        
+        &::placeholder {
+          color: #999;
+        }
+        
+        &:disabled {
+          color: #ccc;
+        }
+      }
+      
+      .clear-btn {
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #e0e0e0;
+        border-radius: 50%;
+        cursor: pointer;
+        font-size: 12px;
+        color: #666;
+        transition: all 0.2s;
+        
+        &:hover {
+          background-color: #d0d0d0;
+          color: #333;
+        }
+      }
+    }
+  }
+
+  .search-results {
+    background-color: #fff;
+    flex: 1;
+    overflow: hidden;
+    
+    .results-header {
+      padding: 16px;
+      border-bottom: 1px solid #eee;
+      display: flex;
+      align-items: center;
+      
+      .results-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+      }
+      
+      .results-count {
+        font-size: 14px;
+        color: #999;
+        margin-left: 8px;
+      }
+    }
+    
+    .results-list {
+      max-height: 300px;
+      
+      .result-item {
+        display: flex;
+        align-items: center;
+        padding: 16px;
+        border-bottom: 1px solid #f5f5f5;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        
+        &:hover {
+          background-color: #f8f8f8;
+        }
+        
+        .result-content {
+          flex: 1;
+          
+          .result-title {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333;
+            margin-bottom: 4px;
+            display: block;
+          }
+          
+          .result-address {
+            font-size: 12px;
+            color: #999;
+            display: block;
+          }
+        }
+        
+        .result-arrow {
+          font-size: 16px;
+          color: #ccc;
+          margin-left: 12px;
+        }
+      }
+    }
+  }
+
+  .searching-indicator {
+    padding: 20px;
+    text-align: center;
+    background-color: #fff;
+    
+    .searching-text {
+      font-size: 14px;
+      color: #999;
+    }
+  }
+
+  .no-results {
+    padding: 40px 20px;
+    text-align: center;
+    background-color: #fff;
+    
+    .no-results-text {
+      font-size: 14px;
+      color: #999;
+    }
+  }
+  
+  .sdk-status-full {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 20px 30px;
+    border-radius: 12px;
+    font-size: 16px;
+    z-index: 1000;
+    
+    .sdk-status-text {
+      color: white;
+    }
+  }
+} 
--- a/src/components/MapDisplay/index.tsx
+++ b/src/components/MapDisplay/index.tsx
@@ -0,0 +1,505 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { View, Text, Input, ScrollView, Map } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { mapService, SearchResult, LocationInfo } from './mapService'
+import './index.scss'
+
+const MapDisplay: React.FC = () => {
+  const [currentLocation, setCurrentLocation] = useState<LocationInfo | null>(null)
+  const [searchValue, setSearchValue] = useState('')
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+  const [mapContext, setMapContext] = useState<any>(null)
+  const [isSDKReady, setIsSDKReady] = useState(false)
+  const [mapMarkers, setMapMarkers] = useState<any[]>([])
+  // 地图中心点状态
+  const [mapCenter, setMapCenter] = useState<{lat: number, lng: number} | null>(null)
+  // 用户点击的中心点标记
+  const [centerMarker, setCenterMarker] = useState<any>(null)
+  // 是否正在移动地图
+  const [isMapMoving, setIsMapMoving] = useState(false)
+  // 地图移动的动画帧ID
+  const animationFrameRef = useRef<number | null>(null)
+  // 地图移动的目标位置
+  const [targetCenter, setTargetCenter] = useState<{lat: number, lng: number} | null>(null)
+  // 实时移动的定时器
+  const moveTimerRef = useRef<NodeJS.Timeout | null>(null)
+  // 地图移动状态
+  const [mapMoveState, setMapMoveState] = useState({
+    isMoving: false,
+    startTime: 0,
+    startCenter: null as {lat: number, lng: number} | null,
+    lastUpdateTime: 0
+  })
+
+  useEffect(() => {
+    initializeMapService()
+    return () => {
+      // 清理动画帧和定时器
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+      if (moveTimerRef.current) {
+        clearInterval(moveTimerRef.current)
+      }
+    }
+  }, [])
+
+  // 初始化地图服务
+  const initializeMapService = async () => {
+    try {
+      const success = await mapService.initSDK()
+      if (success) {
+        setIsSDKReady(true)
+        console.log('地图服务初始化成功')
+        getCurrentLocation()
+      } else {
+        console.error('地图服务初始化失败')
+        Taro.showToast({
+          title: '地图服务初始化失败',
+          icon: 'none'
+        })
+      }
+    } catch (error) {
+      console.error('初始化地图服务异常:', error)
+      Taro.showToast({
+        title: '地图服务初始化异常',
+        icon: 'none'
+      })
+    }
+  }
+
+  // 获取当前位置
+  const getCurrentLocation = async () => {
+    try {
+      const location = await mapService.getLocation()
+      if (location) {
+        setCurrentLocation(location)
+        // 设置地图中心为当前位置，但不显示标记
+        setMapCenter({ lat: location.lat, lng: location.lng })
+        // 清空所有标记
+        setMapMarkers([])
+        console.log('当前位置:', location)
+      }
+    } catch (error) {
+      console.error('获取位置失败:', error)
+      Taro.showToast({
+        title: '获取位置失败',
+        icon: 'none'
+      })
+    }
+  }
+
+  // 地图加载完成
+  const handleMapLoad = (e: any) => {
+    console.log('地图加载完成:', e)
+    setMapContext(e.detail)
+  }
+
+  // 地图标记点击
+  const handleMarkerTap = (e: any) => {
+    const markerId = e.detail.markerId
+    console.log('点击标记:', markerId)
+    
+    if (markerId === 'center') {
+      Taro.showToast({
+        title: '中心点标记',
+        icon: 'success'
+      })
+    }
+  }
+
+  // 地图区域点击 - 设置中心点和标记
+  const handleMapTap = (e: any) => {
+    const { latitude, longitude } = e.detail
+    console.log('地图点击:', { latitude, longitude })
+    
+    // 设置新的地图中心点
+    setMapCenter({ lat: latitude, lng: longitude })
+    
+    // 设置中心点标记
+    const newCenterMarker = {
+      id: 'center',
+      latitude: latitude,
+      longitude: longitude,
+      title: '中心点',
+      iconPath: '/assets/center-marker.png', // 可以添加自定义中心点图标
+      width: 40,
+      height: 40
+    }
+    setCenterMarker(newCenterMarker)
+    
+    // 更新地图标记，只显示中心点标记
+    setMapMarkers([newCenterMarker])
+    
+    Taro.showToast({
+      title: '已设置中心点',
+      icon: 'success'
+    })
+  }
+
+  // 地图开始移动
+  const handleMapMoveStart = () => {
+    console.log('地图开始移动')
+    setIsMapMoving(true)
+    setMapMoveState(prev => ({
+      ...prev,
+      isMoving: true,
+      startTime: Date.now(),
+      startCenter: mapCenter,
+      lastUpdateTime: Date.now()
+    }))
+    
+    // 启动实时移动更新
+    startRealTimeMoveUpdate()
+  }
+
+  // 启动实时移动更新
+  const startRealTimeMoveUpdate = () => {
+    if (moveTimerRef.current) {
+      clearInterval(moveTimerRef.current)
+    }
+    
+    // 每16ms更新一次（约60fps）
+    moveTimerRef.current = setInterval(() => {
+      if (mapMoveState.isMoving && centerMarker) {
+        // 模拟地图移动过程中的位置更新
+        // 这里我们基于时间计算一个平滑的移动轨迹
+        const currentTime = Date.now()
+        const elapsed = currentTime - mapMoveState.startTime
+        const moveDuration = 300 // 假设移动持续300ms
+        
+        if (elapsed < moveDuration) {
+          // 计算移动进度
+          const progress = elapsed / moveDuration
+          const easeProgress = 1 - Math.pow(1 - progress, 3) // 缓动函数
+          
+          // 如果有目标位置，进行插值计算
+          if (targetCenter && mapMoveState.startCenter) {
+            const newLat = mapMoveState.startCenter.lat + (targetCenter.lat - mapMoveState.startCenter.lat) * easeProgress
+            const newLng = mapMoveState.startCenter.lng + (targetCenter.lng - mapMoveState.startCenter.lng) * easeProgress
+            
+            // 更新中心点标记位置
+            const updatedCenterMarker = {
+              ...centerMarker,
+              latitude: newLat,
+              longitude: newLng
+            }
+            setCenterMarker(updatedCenterMarker)
+            
+            // 更新地图标记
+            const searchMarkers = mapMarkers.filter(marker => marker.id.startsWith('search_'))
+            setMapMarkers([updatedCenterMarker, ...searchMarkers])
+          }
+        }
+      }
+    }, 16)
+  }
+
+  // 地图区域变化 - 更新目标位置
+  const handleRegionChange = (e: any) => {
+    console.log('地图区域变化:', e.detail)
+    
+    // 获取地图当前的中心点坐标
+    if (e.detail && e.detail.centerLocation) {
+      const { latitude, longitude } = e.detail.centerLocation
+      const newCenter = { lat: latitude, lng: longitude }
+      
+      // 设置目标位置
+      setTargetCenter(newCenter)
+      
+      // 更新地图中心点状态
+      setMapCenter(newCenter)
+      
+      // 如果有中心点标记，立即更新标记位置到新的地图中心
+      if (centerMarker) {
+        const updatedCenterMarker = {
+          ...centerMarker,
+          latitude: latitude,
+          longitude: longitude
+        }
+        setCenterMarker(updatedCenterMarker)
+        
+        // 更新地图标记，保持搜索结果标记
+        const searchMarkers = mapMarkers.filter(marker => marker.id.startsWith('search_'))
+        setMapMarkers([updatedCenterMarker, ...searchMarkers])
+      }
+    }
+  }
+
+  // 地图移动结束
+  const handleMapMoveEnd = () => {
+    console.log('地图移动结束')
+    setIsMapMoving(false)
+    setMapMoveState(prev => ({
+      ...prev,
+      isMoving: false
+    }))
+    
+    // 停止实时移动更新
+    if (moveTimerRef.current) {
+      clearInterval(moveTimerRef.current)
+      moveTimerRef.current = null
+    }
+    
+    // 清理动画帧
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current)
+      animationFrameRef.current = null
+    }
+  }
+
+  // 处理搜索输入
+  const handleSearchInput = (e: any) => {
+    const value = e.detail.value
+    setSearchValue(value)
+    
+    // 如果输入内容为空，清空搜索结果
+    if (!value.trim()) {
+      setSearchResults([])
+      return
+    }
+
+    // 防抖搜索
+    clearTimeout((window as any).searchTimer)
+    ;(window as any).searchTimer = setTimeout(() => {
+      performSearch(value)
+    }, 500)
+  }
+
+  // 执行搜索
+  const performSearch = async (keyword: string) => {
+    if (!keyword.trim() || !isSDKReady) return
+
+    setIsSearching(true)
+    
+    try {
+      const results = await mapService.search({
+        keyword,
+        location: currentLocation ? `${currentLocation.lat},${currentLocation.lng}` : undefined
+      })
+      setSearchResults(results)
+      
+      // 在地图上添加搜索结果标记
+      if (results.length > 0) {
+        const newMarkers = results.map((result, index) => ({
+          id: `search_${index}`,
+          latitude: result.location.lat,
+          longitude: result.location.lng,
+          title: result.title,
+          iconPath: '/assets/search-marker.png', // 可以添加自定义图标
+          width: 24,
+          height: 24
+        }))
+        
+        // 合并中心点标记和搜索结果标记
+        const allMarkers = centerMarker ? [centerMarker, ...newMarkers] : newMarkers
+        setMapMarkers(allMarkers)
+      }
+      
+      console.log('搜索结果:', results)
+    } catch (error) {
+      console.error('搜索异常:', error)
+      Taro.showToast({
+        title: '搜索失败',
+        icon: 'none'
+      })
+      setSearchResults([])
+    } finally {
+      setIsSearching(false)
+    }
+  }
+
+  // 处理搜索结果点击 - 切换地图中心到对应地点
+  const handleResultClick = (result: SearchResult) => {
+    console.log('选择地点:', result)
+    Taro.showToast({
+      title: `已切换到: ${result.title}`,
+      icon: 'success'
+    })
+    
+    // 点击搜索结果时，将地图中心移动到该位置
+    const newCenter = { lat: result.location.lat, lng: result.location.lng }
+    setMapCenter(newCenter)
+    
+    // 更新中心点标记
+    const newCenterMarker = {
+      id: 'center',
+      latitude: result.location.lat,
+      longitude: result.location.lng,
+      title: '中心点',
+      iconPath: '/assets/center-marker.png',
+      width: 40,
+      height: 40
+    }
+    setCenterMarker(newCenterMarker)
+    
+    // 更新地图标记，保留搜索结果标记
+    const searchMarkers = mapMarkers.filter(marker => marker.id.startsWith('search_'))
+    setMapMarkers([newCenterMarker, ...searchMarkers])
+    
+    // 如果地图上下文可用，也可以调用地图API移动
+    if (mapContext && mapContext.moveToLocation) {
+      mapContext.moveToLocation({
+        latitude: result.location.lat,
+        longitude: result.location.lng,
+        success: () => {
+          console.log('地图移动到搜索结果位置')
+        },
+        fail: (err: any) => {
+          console.error('地图移动失败:', err)
+        }
+      })
+    }
+  }
+
+  // 处理搜索框清空
+  const handleSearchClear = () => {
+    setSearchValue('')
+    setSearchResults([])
+    // 清空搜索结果标记，只保留中心点标记
+    setMapMarkers(centerMarker ? [centerMarker] : [])
+  }
+
+  // 刷新位置
+  const handleRefreshLocation = () => {
+    getCurrentLocation()
+    Taro.showToast({
+      title: '正在刷新位置...',
+      icon: 'loading'
+    })
+  }
+
+  return (
+    <View className='map-display'>
+      {/* 地图区域 */}
+      <View className='map-section'>
+        <View className='map-container'>
+          {currentLocation ? (
+            <Map
+              className='map-component'
+              longitude={mapCenter?.lng || currentLocation.lng}
+              latitude={mapCenter?.lat || currentLocation.lat}
+              scale={16}
+              markers={mapMarkers}
+              show-location={true}
+              onTap={handleMapTap}
+              theme="dark"
+              onRegionChange={handleRegionChange}
+              onTouchStart={handleMapMoveStart}
+              onTouchEnd={handleMapMoveEnd}
+              onError={(e) => console.error('地图加载错误:', e)}
+            />
+          ) : (
+            <View className='map-loading'>
+              <Text className='map-loading-text'>地图加载中...</Text>
+            </View>
+          )}
+          
+          {/* 位置信息悬浮层 */}
+          {currentLocation && (
+            <View className='location-info-overlay'>
+              <View className='location-info'>
+                <Text className='location-text'>
+                  {currentLocation.address || `当前位置: ${currentLocation.lat.toFixed(6)}, ${currentLocation.lng.toFixed(6)}`}
+                </Text>
+                <View className='refresh-btn' onClick={handleRefreshLocation}>
+                  🔄
+                </View>
+              </View>
+            </View>
+          )}
+          
+          {/* 中心点信息悬浮层 */}
+          {centerMarker && (
+            <View className='center-info-overlay'>
+              <View className='center-info'>
+                <Text className='center-text'>
+                  中心点: {centerMarker.latitude.toFixed(6)}, {centerMarker.longitude.toFixed(6)}
+                </Text>
+                {isMapMoving && (
+                  <View className='moving-indicator'>
+                    <Text className='moving-text'>移动中...</Text>
+                  </View>
+                )}
+              </View>
+            </View>
+          )}
+          
+          {!isSDKReady && (
+            <View className='sdk-status'>
+              <Text className='sdk-status-text'>地图服务初始化中...</Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* 搜索区域 */}
+      <View className='search-section'>
+        <View className='search-wrapper'>
+          <View className='search-icon'>🔍</View>
+          <Input
+            className='search-input'
+            placeholder={isSDKReady ? '搜索地点' : '地图服务初始化中...'}
+            value={searchValue}
+            onInput={handleSearchInput}
+            disabled={!isSDKReady}
+          />
+          {searchValue && (
+            <View className='clear-btn' onClick={handleSearchClear}>
+              ✕
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* 搜索结果列表 */}
+      {searchResults.length > 0 && (
+        <View className='search-results'>
+          <View className='results-header'>
+            <Text className='results-title'>搜索结果</Text>
+            <Text className='results-count'>({searchResults.length})</Text>
+          </View>
+          <ScrollView className='results-list' scrollY>
+            {searchResults.map((result) => (
+              <View
+                key={result.id}
+                className='result-item'
+                onClick={() => handleResultClick(result)}
+              >
+                <View className='result-content'>
+                  <Text className='result-title'>{result.title}</Text>
+                  <Text className='result-address'>{result.address}</Text>
+                </View>
+                <View className='result-arrow'>›</View>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+
+      {/* 搜索状态提示 */}
+      {isSearching && (
+        <View className='searching-indicator'>
+          <Text className='searching-text'>搜索中...</Text>
+        </View>
+      )}
+
+      {/* 无搜索结果提示 */}
+      {searchValue && !isSearching && searchResults.length === 0 && isSDKReady && (
+        <View className='no-results'>
+          <Text className='no-results-text'>未找到相关地点</Text>
+        </View>
+      )}
+
+      {/* SDK状态提示 */}
+      {!isSDKReady && (
+        <View className='sdk-status-full'>
+          <Text className='sdk-status-text'>正在初始化地图服务，请稍候...</Text>
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default MapDisplay 
--- a/src/components/MapDisplay/mapPlugin.tsx
+++ b/src/components/MapDisplay/mapPlugin.tsx
@@ -0,0 +1,63 @@
+import Taro from '@tarojs/taro';
+import { Button } from '@tarojs/components';
+import { mapService, SearchResult, LocationInfo } from './mapService'
+import { useEffect, useState } from 'react';
+
+export default function MapPlugin() {
+    const key = 'AZNBZ-VCSC4-MLVUF-KBASD-6GZ6H-KBFTX'; //使用在腾讯位置服务申请的key
+const referer = '八瓜一月'; //调用插件的app的名称
+const [currentLocation, setCurrentLocation] = useState<LocationInfo | null>(null)
+
+const category = '';
+ 
+const chooseLocation = () => {
+    Taro.navigateTo({
+        url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&latitude=' + currentLocation?.lat + '&longitude=' + currentLocation?.lng
+    });
+}
+useEffect(() => {
+    initializeMapService()
+  }, [])
+
+  // 初始化地图服务
+  const initializeMapService = async () => {
+    try {
+      const success = await mapService.initSDK()
+      if (success) {
+        console.log('地图服务初始化成功')
+        getCurrentLocation()
+      } else {
+        console.error('地图服务初始化失败')
+        Taro.showToast({
+          title: '地图服务初始化失败',
+          icon: 'none'
+        })
+      }
+    } catch (error) {
+      console.error('初始化地图服务异常:', error)
+      Taro.showToast({
+        title: '地图服务初始化异常',
+        icon: 'none'
+      })
+    }
+  }
+  // 获取当前位置
+  const getCurrentLocation = async () => {
+    try {
+      const location = await mapService.getLocation()
+      if (location) {
+        setCurrentLocation(location)
+        console.log('当前位置:', location)
+      }
+    } catch (error) {
+      console.error('获取位置失败:', error)
+      Taro.showToast({
+        title: '获取位置失败',
+        icon: 'none'
+      })
+    }
+  }
+    return (
+        <Button onClick={chooseLocation}>选择位置</Button>
+    )
+}
--- a/src/components/MapDisplay/mapService.ts
+++ b/src/components/MapDisplay/mapService.ts
@@ -0,0 +1,190 @@
+// 腾讯地图SDK服务
+import QQMapWX from "qqmap-wx-jssdk";
+import Taro from '@tarojs/taro';
+
+// 扩展Window接口，添加qqmapsdk属性
+declare global {
+  interface Window {
+    qqmapsdk?: any;
+  }
+}
+
+export interface LocationInfo {
+  lat: number
+  lng: number
+  address?: string
+}
+
+export interface SearchResult {
+  id: string
+  title: string
+  address: string
+  location: {
+    lat: number
+    lng: number
+  }
+}
+
+export interface SearchOptions {
+  keyword: string
+  location?: string
+  page_size?: number
+  page_index?: number
+}
+
+class MapService {
+  private qqmapsdk: any = null
+  private isInitialized = false
+
+  // 初始化腾讯地图SDK
+  async initSDK(): Promise<boolean> {
+    if (this.isInitialized) {
+      return true
+    }
+
+    try {
+      // 直接使用QQMapWX，不需要通过window对象
+      this.qqmapsdk = new QQMapWX({
+        key: 'AZNBZ-VCSC4-MLVUF-KBASD-6GZ6H-KBFTX'
+      });
+      
+      this.isInitialized = true
+      console.log('腾讯地图SDK初始化成功')
+      return true
+    } catch (error) {
+      console.error('初始化腾讯地图SDK失败:', error)
+      return false
+    }
+  }
+
+  // 搜索地点
+  async search(options: SearchOptions): Promise<SearchResult[]> {
+    if (!this.isInitialized) {
+      await this.initSDK()
+    }
+
+    try {
+        console.log(this.qqmapsdk,11)
+      if (this.qqmapsdk && this.qqmapsdk.search) {
+        return new Promise((resolve, reject) => {
+          this.qqmapsdk.getSuggestion({
+            keyword: options.keyword,
+            location: options.location || '39.908802,116.397502', // 默认北京
+            page_size: options.page_size || 20,
+            page_index: options.page_index || 1,
+            success: (res: any) => {
+              console.log('搜索成功:', res)
+              if (res.data && res.data.length > 0) {
+                const results: SearchResult[] = res.data.map((item: any, index: number) => ({
+                  id: `search_${index}`,
+                  title: item.title || item.name || '未知地点',
+                  address: item.address || item.location || '地址未知',
+                  location: {
+                    lat: item.location?.lat || 0,
+                    lng: item.location?.lng || 0
+                  }
+                }))
+                resolve(results)
+              } else {
+                resolve([])
+              }
+            },
+            fail: (err: any) => {
+              console.error('搜索失败:', err)
+              reject(err)
+            }
+          })
+        })
+      } else {
+        // 使用模拟数据
+        console.log('使用模拟搜索数据')
+        return this.getMockSearchResults(options.keyword)
+      }
+    } catch (error) {
+      console.error('搜索异常:', error)
+      return this.getMockSearchResults(options.keyword)
+    }
+  }
+
+  // 获取模拟搜索结果
+  private getMockSearchResults(keyword: string): SearchResult[] {
+    const mockResults: SearchResult[] = [
+      {
+        id: 'mock_1',
+        title: `${keyword}相关地点1`,
+        address: '模拟地址1 - 这是一个示例地址',
+        location: { lat: 39.908802, lng: 116.397502 }
+      },
+      {
+        id: 'mock_2',
+        title: `${keyword}相关地点2`,
+        address: '模拟地址2 - 这是另一个示例地址',
+        location: { lat: 39.918802, lng: 116.407502 }
+      },
+      {
+        id: 'mock_3',
+        title: `${keyword}相关地点3`,
+        address: '模拟地址3 - 第三个示例地址',
+        location: { lat: 39.898802, lng: 116.387502 }
+      }
+    ]
+    return mockResults
+  }
+
+  // 获取当前位置
+  async getCurrentLocation(): Promise<{ lat: number; lng: number } | null> {
+    try {
+      // 这里可以集成实际的定位服务
+      // 暂时返回模拟位置
+      const res = await Taro.getLocation({
+        type: 'gcj02',
+        isHighAccuracy: true
+      })
+      return {
+        lat: res.latitude,
+        lng: res.longitude
+      }
+    } catch (error) {
+      console.error('获取位置失败:', error)
+      return null
+    }
+  }
+  async getAddress(lat: number, lng: number): Promise<string | null | undefined> {
+    try {
+        const addressRes: any = await new Promise((resolve, reject) => {
+            this.qqmapsdk.reverseGeocoder({
+                location: {
+                latitude: lat,
+                longitude: lng
+                },
+                success: resolve,
+                fail: reject
+            })
+        })
+        return addressRes?.results?.address
+    } catch (error) {
+        console.error('获取地址失败:', error)
+    }
+  }
+  async getLocation(): Promise<{ lat: number; lng: number; address: string } | null | undefined> {
+    try {
+        const currentInfo: any = {};
+        const location = await this.getCurrentLocation();
+        const { lat, lng } =  location || {};
+
+        if (lat && lng) {
+            currentInfo.lat = lat;
+            currentInfo.lng = lng;
+            const addressRes = await this.getAddress(lat, lng)
+            if (addressRes) {
+                currentInfo.address = addressRes;
+            }
+        }
+        return currentInfo;
+    } catch (error) {
+        console.error('获取位置失败:', error)
+    }
+  }
+}
+
+export const mapService = new MapService() 
--- a/src/components/NumberInterval/NumberInterval.scss
+++ b/src/components/NumberInterval/NumberInterval.scss
@@ -0,0 +1,111 @@
+@use '~@/scss/themeColor.scss' as theme;
+// 人数控制区域 - 白色块
+.participants-control-section {
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+  padding: 9px 12px;
+  display: flex;
+  justify-content: space-between;
+  height: 48px;
+  box-sizing: border-box;
+    .participant-control {
+      display: flex;
+      align-items: center;
+      position: relative;
+      &:first-child{
+        width: 50%;
+        &::after{
+          content: '';
+          display: block;
+          width: 1px;
+          height: 16px;
+          background: #E5E5E5;
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+      .control-label {
+        font-size: 13px;
+        color: theme.$primary-color;
+        white-space: nowrap;
+        padding-right: 10px;
+      }
+
+      .control-buttons {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        background-color: theme.$primary-background-color;
+        border-radius: 6px;
+        .format-width{
+          .nut-input-minus{
+            width: 33px;
+            position: relative;
+            &::after{
+              content: '';
+              width: 1px;
+              height: 16px;
+              background-color: theme.$primary-background-color;
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+          .nut-number-input{
+            min-width: 33px;
+            background-color: transparent;
+            font-size: 12px;
+            
+          }
+          .nut-input-add{
+            width: 33px;
+            position: relative;
+            &::before{
+              content: '';
+              width: 1px;
+              height: 16px;
+              background-color: theme.$primary-background-color;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+        }
+        .control-btn {
+          width: 32px;
+          height: 32px;
+          border: 1px solid #ddd;
+          background: white;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 18px;
+          color: #333;
+          margin: 0;
+          padding: 0;
+
+          &.minus {
+            margin-right: 12px;
+          }
+
+          &.plus {
+            margin-left: 12px;
+          }
+        }
+
+        .control-value {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+          min-width: 36px;
+          text-align: center;
+        }
+      }
+    }
+} 
--- a/src/components/NumberInterval/NumberInterval.tsx
+++ b/src/components/NumberInterval/NumberInterval.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { View, Text, Button } from '@tarojs/components'
+import './NumberInterval.scss'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+interface NumberIntervalProps {
+  minParticipants: number
+  maxParticipants: number
+  onMinParticipantsChange: (value: number) => void
+  onMaxParticipantsChange: (value: number) => void
+}
+
+const NumberInterval: React.FC<NumberIntervalProps> = ({
+  minParticipants,
+  maxParticipants,
+  onMinParticipantsChange,
+  onMaxParticipantsChange
+}) => {
+  return (
+    <View className='participants-control-section'>
+      <View className='participant-control'>
+        <Text className='control-label'>最少</Text>
+        <View className='control-buttons'>
+          <InputNumber
+            className="format-width"
+            defaultValue={4}
+            min={0}
+            max={4}
+            formatter={(value) => `${value}人`}
+          />
+        </View>
+      </View>
+      <View className='participant-control'>
+        <Text className='control-label'>最多</Text>
+        <View className='control-buttons'>
+          <InputNumber
+            className="format-width"
+            defaultValue={4}
+            min={0}
+            max={4}
+            formatter={(value) => `${value}人`}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default NumberInterval 
--- a/src/components/NumberInterval/index.ts
+++ b/src/components/NumberInterval/index.ts
@@ -0,0 +1 @@
+export { default } from './NumberInterval'
--- a/src/components/Range/index.module.scss
+++ b/src/components/Range/index.module.scss
@@ -62,10 +62,13 @@
    }

    :global(.nut-range-tick) {
-      background: #3c3c3c;
+      background: rgba(60, 60, 67, 0.18);
      height: 4px !important;
      width: 4px !important;
    }
+    :global(.nut-range) {
+      background-color: rgba(120, 120, 120, 0.20) !important;
+    }
  }

  span {
--- a/src/components/Range/index.tsx
+++ b/src/components/Range/index.tsx
@@ -11,6 +11,7 @@ interface RangeProps {
  onChange?: (value: [number, number]) => void;
  disabled?: boolean;
  className?: string;
+  showTitle?: boolean;
 }

 const NtrpRange: React.FC<RangeProps> = ({
@@ -21,6 +22,7 @@ const NtrpRange: React.FC<RangeProps> = ({
  onChange,
  disabled = false,
  className,
+  showTitle = true,
 }) => {
  const [currentValue, setCurrentValue] = useState<[number, number]>(value);

@@ -51,17 +53,20 @@ const NtrpRange: React.FC<RangeProps> = ({

  return (
    <div className={`${styles.nutRange} ${className ? className : ''} `}>
-      <div className={styles.nutRangeHeader}>
-        {/* <div className={styles.nutRangeHeaderLeft}>
-          <div className="ntrp-range__icon">icon</div>
-          <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
-        </div> */}
-        <TitleComponent title='NTRP水平区间'/>
-        <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
-      </div>
+      { showTitle && (
+        <div className={styles.nutRangeHeader}>
+          {/* <div className={styles.nutRangeHeaderLeft}>
+            <div className="ntrp-range__icon">icon</div>
+            <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
+          </div> */}
+          <TitleComponent title='NTRP水平区间'/>
+          <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
+        </div>
+      )}
+      

      <div>
-        <div className={styles.rangeWrapper}>
+        <div className={`${styles.rangeWrapper} rangeContent`}>
          <span className={styles.rangeWrapperMin}>{min.toFixed(1)}</span>
          <Range
            range
--- a/src/components/SelectStadium/FLOW.md
+++ b/src/components/SelectStadium/FLOW.md
@@ -0,0 +1,94 @@
+# 球馆选择流程说明
+
+## 🎯 完整流程
+
+### 1. 初始状态 - 球馆列表
+用户看到球馆选择弹窗，显示：
+- 搜索框（可点击）
+- 热门球场标题
+- 球馆列表
+- 底部取消/完成按钮
+
+### 2. 点击搜索框
+- 搜索框变为可点击状态
+- 点击后跳转到地图选择页面
+
+### 3. 地图选择页面
+用户在地图页面可以：
+- 查看地图，选择位置
+- 在搜索框输入关键词搜索地点
+- 从搜索结果中选择地点
+- 点击"确定"按钮确认选择
+
+### 4. 返回球馆详情
+选择地点后：
+- 自动跳转回球馆选择页面
+- 显示球馆详情配置页面
+- 新选择的球馆名称会显示在"已选球场"部分
+
+### 5. 配置球馆详情
+用户可以配置：
+- 场地类型（室内/室外/室外雨棚）
+- 地面材质（硬地/红土/草地）
+- 场地信息补充（文本输入）
+
+### 6. 完成选择
+- 点击"完成"按钮
+- 关闭弹窗，返回主页面
+- 选中的球馆信息传递给父组件
+
+## 🔄 状态管理
+
+```typescript
+// 主要状态
+const [showDetail, setShowDetail] = useState(false)        // 是否显示详情页
+const [showMapSelector, setShowMapSelector] = useState(false) // 是否显示地图选择器
+const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null) // 选中的球馆
+```
+
+## 📱 组件切换逻辑
+
+```typescript
+// 组件渲染优先级
+if (showMapSelector) {
+  return <MapSelector />           // 1. 地图选择器
+} else if (showDetail && selectedStadium) {
+  return <StadiumDetail />         // 2. 球馆详情
+} else {
+  return <SelectStadium />         // 3. 球馆列表
+}
+```
+
+## 🗺️ 地图集成
+
+- 使用 Taro 的 `Map` 组件
+- 支持地图标记和位置选择
+- 集成搜索功能，支持关键词搜索
+- 搜索结果包含地点名称、地址和距离信息
+
+## 📋 数据传递
+
+```typescript
+// 从地图选择器传递到球馆详情
+const handleMapLocationSelect = (location: Location) => {
+  const newStadium: Stadium = {
+    id: `map_${location.id}`,
+    name: location.name,        // 地图选择的球场名称
+    address: location.address   // 地图选择的球场地址
+  }
+  
+  // 添加到球馆列表并选择
+  stadiumList.unshift(newStadium)
+  setSelectedStadium(newStadium)
+  setShowMapSelector(false)
+  setShowDetail(true)
+}
+```
+
+## 🎨 用户体验
+
+1. **无缝切换**：三个页面共享同一个弹窗容器
+2. **状态保持**：选择的地点信息会正确传递
+3. **视觉反馈**：选中状态有明确的视觉指示
+4. **操作简单**：点击搜索即可进入地图选择
+5. **数据同步**：地图选择的球场会自动添加到球馆列表 
--- a/src/components/SelectStadium/README.md
+++ b/src/components/SelectStadium/README.md
@@ -0,0 +1,118 @@
+# SelectStadium 球馆选择组件
+
+这是一个球馆选择和详情的复合组件，包含两个主要功能：
+1. 球馆列表选择
+2. 球馆详情配置
+
+## 功能特性
+
+- 🏟️ 球馆搜索和选择
+- 📱 响应式设计，适配移动端
+- 🔄 无缝切换球馆列表和详情页面
+- 🎯 支持场地类型、地面材质等配置
+- 📝 场地信息补充
+
+## 使用方法
+
+### 基础用法
+
+```tsx
+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
+
+```typescript
+interface Stadium {
+  id: string
+  name: string
+  address?: string
+}
+```
+
+## 配置选项
+
+### 场地类型
+- 室内
+- 室外  
+- 室外雨棚
+
+### 地面材质
+- 硬地
+- 红土
+- 草地
+
+### 场地信息补充
+- 文本输入框，支持用户自定义备注信息
+
+## 样式定制
+
+组件使用 SCSS 编写，可以通过修改以下文件来自定义样式：
+
+- `SelectStadium.scss` - 球馆列表样式
+- `StadiumDetail.scss` - 球馆详情样式
+
+## 注意事项
+
+1. 组件依赖 `@nutui/nutui-react-taro` 的 `Popup` 组件
+2. 确保在 Taro 环境中使用
+3. 组件内部管理状态，外部只需要控制 `visible` 属性
+4. 球馆列表数据在组件内部硬编码，实际使用时可以通过 props 传入
+5. StadiumDetail 组件现在只包含场地配置选项，去掉了头部、提醒和活动封面部分 
--- a/src/components/SelectStadium/SelectStadium.scss
+++ b/src/components/SelectStadium/SelectStadium.scss
@@ -0,0 +1,240 @@
+
+
+.select-stadium {
+  width: 100%;
+  height: calc(100vh - 10px);
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  // 搜索区域
+  .search-section {
+    background: #f5f5f5;
+    padding: 26px 15px 0px 15px;
+
+    .search-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .search-bar {
+        font-size: 16px;
+        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 {
+        flex: 1;
+        font-size: 16px;
+        color: #333;
+        border: none;
+        outline: none;
+        background: transparent;
+        .search-placeholder{
+          color: rgba(60, 60, 67, 0.60);
+        }
+      }
+
+      .map-btn {
+        display: flex;
+        height: 44px;
+        padding: 0 12px;
+        align-items: center;
+        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: #000;
+        }
+      }
+    }
+  }
+
+  // 热门球场区域
+  .hot-section {
+    padding: 23px 20px 10px 20px;
+
+    .hot-header {
+      display: flex;
+      align-items: center;
+
+      .hot-title {
+        font-size: 16px;
+        font-weight: 600;
+        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;
+        color: rgba(0, 0, 0, 0.50);
+        gap: 4px;
+
+        .booking-title {
+          font-size: 15px;
+        }
+
+        .booking-status {
+          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;
+        }
+      }
+    }
+  }
+
+  // 场馆列表
+  .stadium-list {
+    flex: 1;
+    width: auto;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .stadium-item {
+      padding: 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;
+        }
+      }
+    }
+  }
+
+  // 底部按钮区域
+  .bottom-actions {
+    background: white;
+    padding: 16px;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    border-top: 1px solid #e5e5e5;
+    flex-shrink: 0;
+
+    .action-buttons {
+      display: flex;
+      gap: 12px;
+
+      .cancel-btn,
+      .confirm-btn {
+        flex: 1;
+        height: 48px;
+        border-radius: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .cancel-btn {
+        background: #f5f5f5;
+        border: 1px solid #e0e0e0;
+
+        .cancel-text {
+          font-size: 16px;
+          color: #666;
+          font-weight: 500;
+        }
+      }
+
+      .confirm-btn {
+        background: #333;
+
+        .confirm-text {
+          font-size: 16px;
+          color: white;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+// 搜索框占位符样式
+.search-input::placeholder {
+  color: #999;
+} 
--- a/src/components/SelectStadium/SelectStadium.tsx
+++ b/src/components/SelectStadium/SelectStadium.tsx
@@ -0,0 +1,265 @@
+import React, { useState } from 'react'
+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
+  name: string
+  address?: string
+  istance?: string
+  longitude?: number
+  latitude?: number
+}
+
+interface SelectStadiumProps {
+  visible: boolean
+  onClose: () => void
+  onConfirm: (stadium: Stadium | null) => void
+}
+
+const stadiumList: Stadium[] = [
+  { 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> = ({
+  visible,
+  onClose,
+  onConfirm
+}) => {
+  const [searchValue, setSearchValue] = useState('')
+  const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null)
+  const [showDetail, setShowDetail] = useState(false)
+
+  if (!visible) return null
+
+  // 过滤场馆列表
+  const filteredStadiums = stadiumList.filter(stadium =>
+    stadium.name.toLowerCase().includes(searchValue.toLowerCase())
+  )
+
+  // 处理场馆选择
+  const handleStadiumSelect = (stadium: Stadium) => {
+    setSelectedStadium(stadium)
+    setShowDetail(true)
+  }
+
+  // 处理返回球馆列表
+  const handleBackToList = () => {
+    setShowDetail(false)
+    setSelectedStadium(null)
+  }
+
+  // 处理搜索框输入
+  const handleSearchInput = (e: any) => {
+    setSearchValue(e.detail.value)
+  }
+
+  // 处理地图选择位置
+  const handleMapLocation = () => {
+    Taro.chooseLocation({
+      success: (res) => {
+        console.log('选择位置成功:', res)
+        setSelectedStadium({
+          name: res.name,
+          address: res.address,
+          longitude: res.longitude,
+          latitude: res.latitude
+        })
+        setShowDetail(true)
+      },
+      fail: (err) => {
+        console.error('选择位置失败:', err)
+        Taro.showToast({
+          title: '位置选择失败',
+          icon: 'error'
+        })
+      }
+    })
+  }
+
+  // 处理确认
+  const handleConfirm = (stadium: Stadium, venueType: string, groundMaterial: string, additionalInfo: string) => {
+    // 这里可以处理球馆详情的信息
+    console.log('球馆详情:', { stadium, venueType, groundMaterial, additionalInfo })
+    onConfirm(stadium)
+    setShowDetail(false)
+    setSelectedStadium(null)
+    setSearchValue('')
+  }
+
+  // 处理球馆列表确认
+  const handleListConfirm = () => {
+    if (selectedStadium) {
+      onConfirm(selectedStadium)
+      setSelectedStadium(null)
+      setSearchValue('')
+    }
+  }
+
+  // 处理取消
+  const handleCancel = () => {
+    onClose()
+    setShowDetail(false)
+    setSelectedStadium(null)
+    setSearchValue('')
+  }
+
+  const handleItemLocation = (stadium: Stadium) => {
+    console.log(stadium,'stadiumstadium');
+    if(stadium.latitude && stadium.longitude){
+      Taro.openLocation({
+        latitude: stadium.latitude,
+        longitude: stadium.longitude,
+        name: stadium.name,
+        address: stadium.address,
+        success: (res) => {
+          console.log(res,'resres');
+        }
+      })
+    }
+    
+  }
+
+  const markSearchText = (text: string) => {
+    return text.replace(searchValue, `<span style="color: #007AFF;">${searchValue}</span>`)
+  }
+
+  // 如果显示详情页面
+  if (showDetail && selectedStadium) {
+    return (
+      <CommonPopup
+        visible={visible}
+        onClose={handleCancel}
+        cancelText="返回"
+        confirmText="确认"
+        className="select-stadium-popup"
+        onCancel={handleCancel}
+        onConfirm={handleListConfirm}
+        position="bottom"
+        round
+      >
+        <StadiumDetail
+          stadium={selectedStadium}
+          onBack={handleBackToList}
+          onConfirm={handleConfirm}
+        />
+      </CommonPopup>
+    )
+  }
+
+  // 显示球馆列表
+  return (
+      <CommonPopup
+        visible={visible}
+        hideFooter
+        onClose={handleCancel}
+        cancelText="返回"
+        confirmText="完成"
+        className="select-stadium-popup"
+        onCancel={handleCancel}
+        onConfirm={handleListConfirm}
+        position="bottom"
+        round
+      >
+       
+      <View className='select-stadium'>
+        {/* 搜索框 */}
+        <View className='search-section'>
+          <View className='search-wrapper'>
+            <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>
+
+        {/* 热门球场标题 */}
+        <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>
+            </View>
+          </View>
+        </View>
+
+        {/* 场馆列表 */}
+        <ScrollView className='stadium-list' scrollY>
+          {filteredStadiums.map((stadium) => (
+            <View
+              key={stadium.id}
+              className={`stadium-item ${selectedStadium?.id === stadium.id ? 'selected' : ''}`}
+              onClick={() => handleStadiumSelect(stadium)}
+            >
+              <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 onClick={(e) => { e.stopPropagation(); handleItemLocation(stadium); }}>{stadium.istance} · </Text>
+                  <Text onClick={(e) => { e.stopPropagation(); handleItemLocation(stadium); }}>{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>
+  )
+}
+
+export default SelectStadium 
--- a/src/components/SelectStadium/StadiumDetail.scss
+++ b/src/components/SelectStadium/StadiumDetail.scss
@@ -0,0 +1,193 @@
+.stadium-detail {
+  width: 100%;
+  height: auto;
+  min-height: 60vh;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  // 已选球场
+    // 场馆列表
+    .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 {
+    flex-shrink: 0;
+
+    .section-title {
+      padding: 18px 20px 10px 20px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      display: block;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      .heart-wrapper{
+        position: relative;
+        display: flex;
+        align-items: center;
+        .heart-icon{
+          width: 22px;
+          height: 22px;
+          z-index: 1;
+        }
+        .icon-bg{
+          border-radius: 1.6px;
+          width: 165px;
+          height: 17px;
+          flex-shrink: 0;
+          border: 0.5px solid rgba(238, 255, 135, 0.00);
+          opacity: 0.4;
+          background: linear-gradient(258deg, rgba(220, 250, 97, 0.00) 6.85%, rgba(228, 255, 59, 0.82) 91.69%);
+          backdrop-filter: blur(1.25px);
+          position: absolute;
+          top: 2px;
+          left: 4px;
+        }
+        .heart-text{
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.90);
+          z-index: 2;
+          font-weight: normal;
+        }
+      }
+    }
+
+    .option-buttons {
+      display: flex;
+      gap: 16px;
+      padding: 0 15px;
+      .textarea-tag-container{
+        border-radius: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        background: #FFF;
+        box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
+      }
+      .option-btn {
+        border-radius: 20px;
+        border: 1px solid #e0e0e0;
+        background: white;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        border-radius: 999px;
+        border: 0.5px solid rgba(0, 0, 0, 0.12);
+        background: #FFF;
+        font-weight: 500;
+        &.selected {
+          background: #000;
+          border-color: #fff;
+          border-radius: 999px;
+          font-weight: 600;
+          border: 0.5px solid rgba(0, 0, 0, 0.06);
+          .option-text {
+            color: white;
+          }
+        }
+
+        .option-text {
+          font-size: 14px;
+          color: #333;
+        }
+      }
+    }
+  }
+
+
+  // 底部按钮
+  .bottom-actions {
+    background: white;
+    padding: 16px;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    border-top: 1px solid #e5e5e5;
+    flex-shrink: 0;
+    margin-top: auto;
+
+    .action-buttons {
+      display: flex;
+      gap: 12px;
+
+      .cancel-btn,
+      .confirm-btn {
+        flex: 1;
+        height: 48px;
+        border-radius: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      .cancel-btn {
+        background: white;
+        border: 1px solid #e0e0e0;
+
+        .cancel-text {
+          font-size: 16px;
+          color: #666;
+          font-weight: 500;
+        }
+      }
+
+      .confirm-btn {
+        background: #333;
+
+        .confirm-text {
+          font-size: 16px;
+          color: white;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+} 
--- a/src/components/SelectStadium/StadiumDetail.tsx
+++ b/src/components/SelectStadium/StadiumDetail.tsx
@@ -0,0 +1,202 @@
+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/ImageUpload'
+
+export interface Stadium {
+  id?: string
+  name: string
+  address?: string
+  longitude?: number
+  latitude?: number
+  istance?: string
+}
+
+interface StadiumDetailProps {
+  stadium: Stadium
+  onBack: () => void
+  onConfirm: (stadium: Stadium, venueType: string, groundMaterial: string, additionalInfo: string) => void
+}
+
+const  stadiumInfo = [
+  {
+    label: '场地类型',
+    options: ['室内', '室外', '室外雨棚'],
+    prop: 'venueType',
+    type: 'tags'
+  },
+  {
+    label: '地面材质',
+    options: ['硬地', '红土', '草地'],
+    prop: 'groundMaterial',
+    type: 'tags'
+  },
+  {
+    label: '场地信息补充',
+    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,
+}) => {
+  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 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 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'>
+      {/* 已选球场 */}
+      <View
+        className={`stadium-item`}
+        onClick={() => handleMapLocation()}
+      >
+        <View className='stadium-item-left'>
+          <Image src={images.ICON_STADIUM} className='stadium-icon' />
+        </View>
+        <View className='stadium-item-right'>
+          <View className='stadium-name'>{formData.stadiumName}</View>
+          <View className='stadium-address'>
+            <Text>{formData.istance} · </Text>
+            <Text>{formData.stadiumAddress}</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 (
+            <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 (
+            <SectionContainer key={item.label} title={item.label} prop={item.prop}>
+              <View className='textarea-tag-container'>
+                <TextareaTag
+                  value={formData.additionalInfo}
+                  onChange={(value) => updateFormData(item.prop, value)}
+                  placeholder='有其他场地信息可备注'
+                  options={(item.options || []).map((o) => ({ label: o, value: o }))}
+                />
+              </View>
+            </SectionContainer>
+          )
+        }
+
+        if (item.type === 'image') {
+          return (
+            <SectionContainer key={item.label} title={item.label} prop={item.prop}>
+              <CoverImageUpload
+                images={formData.imagesList}
+                onChange={(images) => updateFormData(item.prop, images)}
+              />
+            </SectionContainer>
+          )
+        }
+
+        return null
+      })}
+    </View>
+  )
+}
+
+export default StadiumDetail 
--- a/src/components/SelectStadium/index.ts
+++ b/src/components/SelectStadium/index.ts
@@ -0,0 +1,3 @@
+export { default as SelectStadium } from './SelectStadium'
+export { default as StadiumDetail } from './StadiumDetail'
+export type { Stadium } from './SelectStadium'
--- a/src/components/TextareaTag/TextareaTag.scss
+++ b/src/components/TextareaTag/TextareaTag.scss
@@ -0,0 +1,53 @@
+  @use '~@/scss/themeColor.scss' as theme;
+.textarea-tag {
+  background: white;
+  border-radius: 16px;
+  padding: 10px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  .input-wrapper {
+    margin-top: 8px;
+    .additional-input {
+      width: 100%;
+      height: 46px;
+      font-size: 14px;
+      color: #333;
+      background: transparent;
+      border: none;
+      outline: none;
+      line-height: 1.4;
+      resize: none;
+      .textarea-placeholder{
+        color: theme.$textarea-placeholder-color;
+      }
+    }
+  }
+
+  .options-wrapper {
+    .options-label {
+      font-size: 12px;
+      color: #666;
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    .options-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      .nut-checkbox{
+        margin-right: 0;
+
+        .nut-checkbox-button{
+          border: 1px solid theme.$primary-border-color;
+          color: theme.$primary-color;
+          background: transparent;
+          font-size: 12px;
+          padding: 2px 6px;
+          margin-right: 6px;
+          margin-bottom: 6px;
+        }
+      }
+    }
+  }
+}
--- a/src/components/TextareaTag/TextareaTag.tsx
+++ b/src/components/TextareaTag/TextareaTag.tsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useState } from 'react'
+import { View,  Textarea } from '@tarojs/components'
+
+import { Checkbox } from '@nutui/nutui-react-taro'
+
+import './TextareaTag.scss'
+
+interface TextareaTagProps {
+  value: string
+  onChange: (value: string) => void
+  title?: string
+  showTitle?: boolean
+  placeholder?: string
+  maxLength?: number
+  options?: { label: string; value: any }[] |  null
+}
+
+const TextareaTag: React.FC<TextareaTagProps> = ({ 
+  value, 
+  onChange, 
+  placeholder = '请输入',
+  maxLength = 500,
+  options = []
+}) => {
+  // 处理输入框变化
+  const [tags, setTags] = useState<string[]>([])
+  const handleInputChange = useCallback((e: any) => {
+    onChange(e.detail.value)
+  }, [onChange])
+
+  // 选择预设选项
+  const handleSelectOption = useCallback((option: string) => {
+    let newValue = ''
+    
+    if (value) {
+      // 如果已有内容，用分号分隔添加
+      newValue = value + '；' + option
+    } else {
+      // 如果没有内容，直接添加
+      newValue = option
+    }
+    
+    onChange(newValue)
+  }, [value, onChange])
+
+  return (
+    <View className='textarea-tag'>
+        {/* 选择选项 */}
+        <View className='options-wrapper'>
+          <View className='options-list'>
+            {
+              <Checkbox.Group
+              labelPosition="left"
+              direction="horizontal"
+              value={tags}
+              onChange={(value) => setTags(value)}
+            >
+              {
+                options?.map((option, index) => (
+                  <Checkbox
+                    key={index}
+                    shape="button"
+                    value={option.value}
+                    label={option.label}
+                  />
+                ))
+              }
+            </Checkbox.Group>
+            }
+          </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>
+  )
+}
+
+export default TextareaTag
--- a/src/components/TextareaTag/index.ts
+++ b/src/components/TextareaTag/index.ts
@@ -0,0 +1 @@
+export { default } from './TextareaTag'
--- a/src/components/TimeSelector/TimeSelector.scss
+++ b/src/components/TimeSelector/TimeSelector.scss
@@ -0,0 +1,73 @@
+@use '~@/scss/themeColor.scss' as theme;
+.time-selector {
+  // 区域标题 - 灰色背景
+  width: 100%;
+  // 时间区域 - 合并的白色块
+  .time-section {
+    background: white;
+    border-radius: 16px;
+    width: 100%;
+    .time-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 44px;
+      padding-left: 12px;
+      &:last-child {
+        margin-bottom: 0;
+        .time-content {
+          border-bottom: none;
+        }
+      }
+
+      .time-label {
+        display: flex;
+        align-items: center;
+        padding: 0 3px;
+        font-size: 14px;
+        color: theme.$primary-color;
+        .dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: theme.$primary-color;
+          border: 1.5px solid theme.$primary-color;
+          margin-right: 12px;
+          &.hollow {
+            background: transparent;
+            width: 8px;
+            height: 8px;
+          }
+        }
+      }
+
+      .time-content {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid  rgba(0, 0, 0, 0.06);
+        line-height: 44px;
+        justify-content: space-between;
+        flex: 1;
+        padding-right: 12px;
+        .time-text-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          gap: 4px;
+        }
+        .time-text {
+          font-size: 13px;
+          color: theme.$primary-color;
+          padding: 0 12px;
+          background: theme.$primary-shallow-bg;
+          height: 28px;
+          line-height: 28px;
+          border-radius: 14px;
+          &.time-am {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/components/TimeSelector/TimeSelector.tsx
+++ b/src/components/TimeSelector/TimeSelector.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import { View, Text, Picker } from '@tarojs/components'
+import './TimeSelector.scss'
+
+export interface TimeRange {
+  startDate: string
+  startTime: string
+  endTime: string
+}
+
+interface TimeSelectorProps {
+  value: TimeRange
+  onChange: (timeRange: TimeRange) => void
+}
+
+const TimeSelector: React.FC<TimeSelectorProps> = ({ 
+  value = {
+    startDate: '',
+    startTime: '',
+    endTime: ''
+  }, 
+  onChange
+}) => {
+  // 格式化日期显示
+  const formatDate = (dateStr: string) => {
+    return dateStr.replace(/-/g, '年').replace(/-/g, '月') + '日'
+  }
+
+  // 处理开始日期变化
+  const handleStartDateChange = (e: any) => {
+    onChange({
+      ...value,
+      startDate: e.detail.value
+    })
+  }
+
+  // 处理开始时间变化
+  const handleStartTimeChange = (e: any) => {
+    onChange({
+      ...value,
+      startTime: e.detail.value
+    })
+  }
+
+  // 处理结束时间变化
+  const handleEndTimeChange = (e: any) => {
+    onChange({
+      ...value,
+      endTime: e.detail.value
+    })
+  }
+
+  return (
+    <View className='time-selector'>
+      <View className='time-section'>
+        {/* 开始时间 */}
+        <View className='time-item'>
+          <View className='time-label'>
+            <View className='dot'></View>
+          </View>
+          <View className='time-content'>
+            <Text className='time-label'>开始时间</Text>
+            <view className='time-text-wrapper'>
+              <Text className='time-text'>2025年11月23日</Text>
+              <Text className='time-text time-am'>8:00 AM</Text>
+            </view>
+          </View>
+        </View>
+
+        {/* 结束时间 */}
+        <View className='time-item'>
+          <View className='time-label'>
+            <View className='dot hollow'></View>
+          </View>
+          <View className='time-content'>
+            <Text className='time-label'>结束时间</Text>
+            <view className='time-text-wrapper'>
+              <Text className='time-text'>2025年11月23日</Text>
+              <Text className='time-text time-am'>8:00 AM</Text>
+            </view>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default TimeSelector
--- a/src/components/TimeSelector/index.ts
+++ b/src/components/TimeSelector/index.ts
@@ -0,0 +1 @@
+export { default, type TimeRange } from './TimeSelector'
--- a/src/components/TitleInput/TitleInput.tsx
+++ b/src/components/TitleInput/TitleInput.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import { TextArea } from '@nutui/nutui-react-taro'
+import './index.scss'
+
+interface TitleInputProps {
+  value: string
+  onChange: (value: string) => void
+  maxLength?: number
+  placeholder?: string
+}
+
+const TitleInput: React.FC<TitleInputProps> = ({ 
+  value, 
+  onChange, 
+  maxLength = 20, 
+  placeholder = '好的标题更吸引人哦' 
+}) => {
+  return (
+    <View className='title-input-wrapper'>
+      <TextArea
+        className='title-input'
+        placeholder={placeholder}
+        value={value}
+        onInput={(e) => onChange(e.detail.value)}
+        maxlength={maxLength}
+        autoSize={true}
+        placeholderClass='title-input-placeholder'
+      />
+      <View className='char-count'>{value.length}/{maxLength}</View>
+    </View>
+  )
+}
+
+export default TitleInput 
--- a/src/components/TitleInput/index.scss
+++ b/src/components/TitleInput/index.scss
@@ -0,0 +1,34 @@
+.title-input-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  .title-input {
+    width: 83%;
+    min-height: 44px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    font-size: 16px;
+    line-height: 1.4;
+    background: #fff;
+    box-sizing: border-box;
+    resize: none;
+  }
+  
+  // 使用 placeholderClass 来控制 placeholder 样式
+  .title-input-placeholder {
+    color: rgba(60, 60, 67, 0.60) !important;
+    font-size: 16px !important;
+    font-weight: normal !important;
+  }
+  
+  
+  
+  .char-count {
+    font-size: 12px;
+    color: #999;
+    pointer-events: none;
+    padding-top: 12px;
+  }
+} 
--- a/src/components/TitleInput/index.ts
+++ b/src/components/TitleInput/index.ts
@@ -0,0 +1 @@
+export { default } from './TitleInput' 
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -0,0 +1,27 @@
+import ActivityTypeSwitch from './ActivityTypeSwitch'
+import TextareaTag from './TextareaTag'
+import FormSwitch from './FormSwitch'
+import ImageUpload from './ImageUpload'
+import FormBasicInfo from './FormBasicInfo'
+import Range from './Range'
+import NumberInterval from './NumberInterval'
+import { SelectStadium, StadiumDetail } from './SelectStadium'
+import TimeSelector from './TimeSelector'
+import TitleInput from './TitleInput'
+import CommonPopup from './CommonPopup'
+
+export { 
+    ActivityTypeSwitch, 
+    TextareaTag, 
+    FormSwitch,
+    ImageUpload, 
+    FormBasicInfo,
+    Range, 
+    NumberInterval, 
+    SelectStadium, 
+    TimeSelector, 
+    TitleInput,
+    StadiumDetail,
+    CommonPopup
+}
+
--- a/src/components/index.types.ts
+++ b/src/components/index.types.ts
@@ -0,0 +1,5 @@
+import { type TimeRange } from './TimeSelector'
+import { type Stadium } from './SelectStadium'
+import { type ActivityType } from './ActivityTypeSwitch'
+import { type CoverImage } from './ImageUpload'
+export type { TimeRange, Stadium, ActivityType, CoverImage }
				`@@ -0,0 +1 @@`
				`export { default, type CoverImage } from './ImageUpload'`
				`@@ -0,0 +1 @@`
				`export { default, type TimeRange } from './TimeSelector'`