Merge branch 'master' of https://gitee.com/ballminiprogramwe/mini-programs

analyze.js

@@ -0,0 +1,50 @@
+const fs = require('fs');
+const path = require('path');
+
+// dist 目录路径，根据你项目实际情况修改
+const DIST_DIR = path.join(__dirname, 'dist');
+
+// 递归统计文件大小
+function getFiles(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  list.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(getFiles(filePath));
+    } else {
+      results.push({ path: filePath, size: stat.size });
+    }
+  });
+  return results;
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+}
+
+function analyze() {
+  if (!fs.existsSync(DIST_DIR)) {
+    console.error('dist 目录不存在，请先执行 taro build --type weapp');
+    return;
+  }
+
+  const files = getFiles(DIST_DIR);
+  const total = files.reduce((sum, f) => sum + f.size, 0);
+
+  console.log('文件大小分析（按从大到小排序）:');
+  files
+    .sort((a, b) => b.size - a.size)
+    .forEach(f => {
+      console.log(
+        `${formatSize(f.size)} | ${(f.size / total * 100).toFixed(2)}% | ${path.relative(DIST_DIR, f.path)}`
+      );
+    });
+
+  console.log(`\n总大小: ${formatSize(total)}`);
+}
+
+analyze();

config/index.ts

@@ -66,9 +66,16 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
           }
         }
       },
+      miniCssExtractPluginOption: {
+        ignoreOrder: true,
+        // filename: 'css/[name].[hash].css',
+        // chunkFilename: 'css/[name].[chunkhash].css'
+      },
       webpackChain(chain) {
         chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
-      }
+      },
+      // @ts-expect-error: Taro 类型定义缺少 mini.hot
+      hot: true,
     },
     h5: {
       publicPath: '/',

package.json

@@ -54,7 +54,6 @@
     "@tarojs/shared": "4.1.5",
     "@tarojs/taro": "4.1.5",
     "dayjs": "^1.11.13",
-    "qqmap-wx-jssdk": "^1.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "zustand": "^4.4.7"

src/app.config.ts

@@ -1,14 +1,18 @@
 export default defineAppConfig({
   pages: [
-     'pages/list/index',
+    //  'pages/publishBall/index',
-    // 'pages/userInfo/myself/index',
+    'pages/list/index', // 列表页
+    'pages/search/index', // 搜索页
+    'pages/searchResult/index', // 搜索结果页面
+    'pages/userInfo/myself/index',
     'pages/login/index/index',
     'pages/login/verification/index',
     'pages/login/terms/index',
-    'pages/publishBall/index',
     // 'pages/mapDisplay/index',
-    'pages/index/index',
     'pages/detail/index',
+    'pages/message/index',
+    'pages/personal/index',
+    'pages/orderCheck/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'PoetsenOne';
+  src: url('./static/asserts/fonts/PoetsenOne-Regular.ttf') format('truetype');
+}

src/app.ts

@@ -1,7 +1,10 @@
 import { Component, ReactNode } from 'react'
-import './app.scss'
 import './nutui-theme.scss'
+import './app.scss'
 import { useDictionaryStore } from './store/dictionaryStore'
+import { useGlobalStore } from './store/global'
+
+// import { getNavbarHeight } from "@/utils/getNavbarHeight";
 
 interface AppProps {
   children: ReactNode
@@ -11,11 +14,12 @@ class App extends Component<AppProps> {
   componentDidMount() {
     // 初始化字典数据
     this.initDictionaryData()
+    this.getNavBarHeight()
   }
 
-  componentDidShow() {}
+  componentDidShow() { }
 
-  componentDidHide() {}
+  componentDidHide() { }
 
   // 初始化字典数据
   private async initDictionaryData() {
@@ -27,6 +31,13 @@ class App extends Component<AppProps> {
     }
   }
 
+  // 获取导航高度
+  getNavBarHeight = () => {
+    const { getNavbarHeightInfo } = useGlobalStore.getState()
+    getNavbarHeightInfo()
+
+  }
+
   render() {
     // this.props.children 是将要会渲染的页面
     return this.props.children

src/components/CalendarCard/CalendarCard.tsx

@@ -0,0 +1,117 @@
+import React, { useMemo, useState } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import styles from './index.module.scss'
+import images from '@/config/images'
+interface CalendarCardProps {
+  value?: Date
+  minDate?: Date
+  maxDate?: Date
+  onChange?: (date: Date) => void
+  onNext?: (date: Date) => void
+  onHeaderClick?: (date: Date) => void
+}
+
+const startOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1)
+const endOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth() + 1, 0)
+const addMonths = (date: Date, delta: number) => new Date(date.getFullYear(), date.getMonth() + delta, 1)
+
+const formatHeader = (date: Date) => `${date.getMonth() + 1}月 ${date.getFullYear()}`
+
+const CalendarCard: React.FC<CalendarCardProps> = ({
+  value,
+  minDate,
+  maxDate,
+  onChange,
+  onHeaderClick
+}) => {
+  const today = new Date()
+  const [current, setCurrent] = useState<Date>(value || startOfMonth(today))
+  const [selected, setSelected] = useState<Date>(value || today)
+
+
+  const firstDay = useMemo(() => startOfMonth(current), [current])
+  const lastDay = useMemo(() => endOfMonth(current), [current])
+
+  const days = useMemo(() => {
+    const startWeekday = firstDay.getDay() // 0 周日
+    const prevPadding = startWeekday // 周日为第一列
+    const total = prevPadding + lastDay.getDate()
+    const rows = Math.ceil(total / 7)
+    const grid: (Date | null)[] = []
+    for (let i = 0; i < rows * 7; i++) {
+      const day = i - prevPadding + 1
+      if (day < 1 || day > lastDay.getDate()) {
+        grid.push(null)
+      } else {
+        grid.push(new Date(current.getFullYear(), current.getMonth(), day))
+      }
+    }
+    return grid
+  }, [firstDay, lastDay, current])
+
+  const isDisabled = (d: Date) => {
+    if (minDate && d < minDate) return true
+    if (maxDate && d > maxDate) return true
+    return false
+  }
+
+  const gotoMonth = (delta: number) => setCurrent(prev => addMonths(prev, delta))
+
+  const handleHeaderClick = () => {
+    onHeaderClick && onHeaderClick(current)
+  }
+
+  const handleSelectDay = (d: Date | null) => {
+    if (!d || isDisabled(d)) return
+    setSelected(d)
+    onChange && onChange(d)
+  }
+
+
+
+
+
+
+
+  return (
+    <View className={styles['calendar-card']}>
+      <View className={styles['header']}>
+        <View className={styles['header-left']} onClick={handleHeaderClick}>
+          <Text className={styles['header-text']}>{formatHeader(current)}</Text>
+          <Image src={images.ICON_RIGHT_MAX} className={`${styles['month-arrow']}}`} onClick={() => gotoMonth(1)} />
+        </View>
+        <View className={styles['header-actions']}>
+          <Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']} ${styles['left']}`} onClick={() => gotoMonth(-1)} />
+          <Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']}}`} onClick={() => gotoMonth(1)} />
+        </View>
+      </View>
+
+      <View className={styles['week-row']}>
+        {['周日','周一','周二','周三','周四','周五','周六'].map((w) => (
+          <Text key={w} className={styles['week-item']}>{w}</Text>
+        ))}
+      </View>
+
+      <View className={styles['grid']}>
+        {days.map((d, idx) => {
+          const isSelected = !!(d && selected && d.toDateString() === new Date(selected.getFullYear(), selected.getMonth(), selected.getDate()).toDateString())
+          return (
+            <View
+              key={idx}
+              className={`${styles['cell']} ${!d ? styles['empty'] : ''} ${d && isDisabled(d) ? styles['disabled'] : ''} `}
+              onClick={() => handleSelectDay(d)}
+            >
+              {d ? <Text className={`${styles['cell-text']} ${isSelected ? styles['selected'] : ''}`}>{d.getDate()}</Text> : null}
+            </View>
+          )
+        })}
+      </View>
+
+
+
+
+    </View>
+  )
+}
+
+export default CalendarCard

src/components/CalendarCard/DialogCalendarCard.tsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react'
+import CommonPopup from '@/components/CommonPopup'
+import CalendarCard from './CalendarCard'
+import DateTimePicker from '@/components/DateTimePicker'
+import HourMinutePicker from '@/components/HourMinutePicker'
+export interface DialogCalendarCardProps {
+  value?: Date
+  minDate?: Date
+  maxDate?: Date
+  onChange?: (date: Date) => void
+  onNext?: (date: Date) => void
+  visible: boolean
+  onClose: () => void
+  title?: React.ReactNode
+}
+
+const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
+  visible,
+  onClose,
+  title,
+  value,
+  minDate,
+  maxDate,
+  onChange,
+  onNext
+}) => {
+  const [selected, setSelected] = useState<Date>(value || new Date())
+  const [type, setType] = useState<'year' | 'month' | 'time'>('year');
+  const [selectedHour, setSelectedHour] = useState(8)
+  const [selectedMinute, setSelectedMinute] = useState(0)
+  
+  const handleConfirm = () => {
+    if (type === 'year') {
+      // 年份选择完成后，进入月份选择
+      setType('time')
+    } else if (type === 'month') {
+      // 月份选择完成后，进入时间选择
+      setType('year')
+    } else if (type === 'time') {
+      // 时间选择完成后，调用onNext回调
+      const finalDate = new Date(selected.getFullYear(), selected.getMonth(), selected.getDate(), selectedHour, selectedMinute)
+        console.log('finalDate', finalDate)
+        if (onChange) onChange(finalDate)
+      onClose()
+    }
+  }
+
+  const handleChange = (d: Date) => {
+    console.log('handleChange', d)
+    setSelected(d)
+   // if (onChange) onChange(d)
+  }
+  const onHeaderClick = (date: Date) => {
+    console.log('onHeaderClick', date)
+    setSelected(date)
+    setType('month')
+  }
+  const getConfirmText = () => {
+    if (type === 'time' || type === 'month') return '完成'
+    return '下一步'
+  }
+  const handleDateTimePickerChange = (year: number, month: number) => {
+    console.log('year', year)
+    console.log('month', month)
+    setSelected(new Date(year, month - 1, 1))
+  }
+  const dialogClose = () => {
+    if (type === 'month') {
+      setType('year')
+    } else if (type === 'time') {
+      setType('year')
+    } else {
+      onClose()
+    }
+  }
+  useEffect(() => {
+    setSelected(value || new Date())
+    if (visible) {
+      setType('year')
+      setSelectedHour(8)
+      setSelectedMinute(0)
+    }
+  }, [value, visible])
+
+
+  return (
+    <CommonPopup
+      visible={visible}
+      onClose={dialogClose}
+      showHeader={!!title}
+      title={title}
+      hideFooter={false}
+      cancelText='取消'
+      confirmText={getConfirmText()}
+      onConfirm={handleConfirm}
+      position='bottom'
+      round
+      zIndex={1000}
+    >
+      {
+        type === 'year' && <CalendarCard
+        value={selected}
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={handleChange}
+        onHeaderClick={onHeaderClick}
+      />
+      }
+    {
+        type === 'month' && <DateTimePicker 
+        onChange={handleDateTimePickerChange}
+        defaultYear={selected.getFullYear()}
+        defaultMonth={selected.getMonth() + 1}
+        />
+    }
+    {
+        type === 'time' && <HourMinutePicker 
+        onChange={(hour, minute) => {
+          setSelectedHour(hour)
+          setSelectedMinute(minute)
+        }}
+        defaultHour={selectedHour}
+        defaultMinute={selectedMinute}
+        />
+    }
+    </CommonPopup>
+  )
+}
+
+export default DialogCalendarCard

src/components/CalendarCard/index.module.scss

@@ -0,0 +1,105 @@
+.calendar-card {
+    background: #fff;
+    border-radius: 16px;
+    padding: 12px 12px 8px;
+  }
+  
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 9px 16px 11px 16px;
+    height: 24px;
+  }
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .header-text {
+    font-size: 17px;
+    font-weight: 600;
+    color: #000;
+  }
+  .header-actions {
+    display: flex;
+    gap: 30px;
+  }
+  .month-arrow{
+    width: 8px
+  }
+  .arrow {
+    width: 10px;
+    position: relative;
+  }
+  .arrow.left {
+    left: 9px;
+    transform: rotate(-180deg);
+  }
+  
+  .week-row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    padding: 0 0 4px 0;
+  }
+  .week-item {
+    text-align: center;
+    color: rgba(60, 60, 67, 0.30);
+    font-size: 13px;
+  }
+  
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 8px 0;
+    padding: 4px 0 16px;
+  }
+  .cell {
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+  }
+  .cell.empty {
+    opacity: 0;
+  }
+  .cell.disabled {
+    color: rgba(0,0,0,0.2);
+  }
+  .cell-text.selected {
+    width: 44px;
+    height: 44px;
+    border-radius: 22px;
+    background: rgba(0,0,0,0.9);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .footer {
+    display: flex;
+    gap: 12px;
+  }
+  .btn {
+    flex: 1;
+    height: 44px;
+    border-radius: 22px;
+    background: rgba(0,0,0,0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn.primary {
+    background: #000;
+    color: #fff;
+  }
+  
+  .hm-placeholder {
+    height: 240px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  

src/components/CalendarCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CalendarCard'
+export { default as DialogCalendarCard } from './DialogCalendarCard'

src/components/CityFilter/index.tsx

@@ -9,7 +9,7 @@ import {DistanceFilterProps} from '../../../types/list/types'
 
 
 const MenuComponent = (props: DistanceFilterProps) => {
-  const { value, onChange, wrapperClassName, itemClassName, options, name } =
+  const { value, onChange, wrapperClassName, itemClassName, options, name, onOpen, onClose } =
     props;
   const [isChange, setIsChange] = useState(false);
   const [iOpen, setIsOpen] = useState(false);
@@ -23,10 +23,12 @@ const MenuComponent = (props: DistanceFilterProps) => {
 
   const handleOpen = () => {
     setIsOpen(true);
+    onOpen && typeof onOpen === "function" && onOpen();
   };
 
   const handleClose = () => {
     setIsOpen(false);
+    onClose && typeof onClose === "function" && onClose();
   };
 
   return (

src/components/CommonDialog/CommonDialog.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Dialog } from '@nutui/nutui-react-taro'
+import { View, Text } from '@tarojs/components'
+import styles from './index.module.scss'
+
+export interface CommonDialogProps {
+  visible: boolean
+  title?: string
+  content?: React.ReactNode
+  cancelText?: string
+  confirmText?: string
+  onCancel?: () => void
+  onConfirm?: () => void
+  showCancel?: boolean
+  showConfirm?: boolean
+  children?: React.ReactNode
+  contentTitle?: string
+  contentDesc?: string
+}
+
+const CommonDialog: React.FC<CommonDialogProps> = ({
+  visible,
+  title,
+  content,
+  cancelText = '取消',
+  confirmText = '确认',
+  onCancel,
+  onConfirm,
+  children,
+  contentTitle,
+  contentDesc
+}) => {
+
+  const getContent = () => {
+    if (content) {
+      return content
+    }
+    if (children) {
+      return children
+    }
+    return (
+      <View className={styles['confirm-content']}>
+          <Text className={styles['confirm-content-title']}>{contentTitle}</Text>
+          <Text className={styles['confirm-content-desc']}>{contentDesc}</Text>
+      </View>
+    )
+  }
+  return (
+    <Dialog
+      visible={visible}
+      title={title}
+      content={getContent()}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      cancelText={cancelText}
+      confirmText={confirmText}
+      className={styles['custom-dialog']}
+    />
+  )
+}
+
+export default CommonDialog

src/components/CommonDialog/index.module.scss

@@ -0,0 +1,86 @@
+@use '~@/scss/themeColor.scss' as theme;
+
+.custom-dialog {
+  :global(.nut-dialog) {
+    border-radius: 12px !important;
+    padding: 0 !important;
+    max-width: 320px !important;
+    width: 100% !important;
+    text-align: center !important;
+  }
+  :global(.nut-dialog-content) {
+    margin:0 !important;
+  }
+
+  :global(.nut-dialog-header) {
+    margin-bottom: 8px !important;
+  }
+
+  :global(.nut-dialog-title) {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    color: #000000 !important;
+  }
+
+  :global(.nut-dialog-content) {
+    min-width: 280px !important;
+  }
+
+  :global(.nut-dialog-footer) {
+    display: flex !important;
+    padding: 0 !important;
+    height: 47.5px;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid theme.$primary-border-light-color;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    overflow: hidden;
+  }
+
+  :global(.nut-dialog-footer .nut-button) {
+    flex: 1 !important;
+    font-size: 15px !important;
+    border-radius: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: #fff;
+    border-right: 1px solid theme.$primary-border-light-color !important;
+    height: 100%;
+    &:last-child {
+      border-right: none !important;
+    }
+  }
+
+  :global(.nut-dialog-footer .nut-button-default) {
+    color: rgba(22, 24, 35, 0.75) !important;
+  }
+
+  :global(.nut-dialog-footer .nut-button-primary) {
+    color: #161823 !important;
+
+  }
+
+  :global(.nut-dialog-footer .nut-button:hover) {
+    opacity: 0.8 !important;
+  }
+  .confirm-content{
+    padding: 24px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    .confirm-content-title{
+      font-size: 17px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #161823;
+    }
+    .confirm-content-desc{
+      font-size: 14px;
+      color: rgba(22, 24, 35, 0.75)
+    }
+  }
+}

src/components/CommonDialog/index.ts

@@ -0,0 +1,2 @@
+import CommonDialog from './CommonDialog.tsx'
+export default CommonDialog

src/components/CommonPopup/CommonPopup.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import { View, Text } from '@tarojs/components'
 import { Popup, Button } from '@nutui/nutui-react-taro'
 import styles from './index.module.scss'
@@ -18,6 +18,8 @@ export interface CommonPopupProps {
   zIndex?: number
   children?: React.ReactNode
   className?: string
+  style?: React.CSSProperties
+  enableDragToClose?: boolean
 }
 
 const CommonPopup: React.FC<CommonPopupProps> = ({
@@ -34,8 +36,15 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
   position = 'bottom',
   round = true,
   zIndex,
-  children
+  style,
+  children,
+  enableDragToClose = true
 }) => {
+  const [dragOffset, setDragOffset] = useState(0)
+  const [isDragging, setIsDragging] = useState(false)
+  const touchStartY = useRef(0)
+  const popupRef = useRef<HTMLDivElement>(null)
+
   const handleCancel = () => {
     if (onCancel) {
       onCancel()
@@ -44,6 +53,39 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
     }
   }
 
+  const handleTouchStart = (e: any) => {
+    if (!enableDragToClose) return
+    
+    touchStartY.current = e.touches[0].clientY
+    setIsDragging(true)
+  }
+
+  const handleTouchMove = (e: any) => {
+    if (!enableDragToClose || !isDragging) return
+    
+    const currentY = e.touches[0].clientY
+    const deltaY = currentY - touchStartY.current
+    
+    // 只允许向下拖动，限制最大拖动距离
+    if (deltaY > 0) {
+      setDragOffset(Math.min(deltaY, 200))
+    }
+  }
+
+  const handleTouchEnd = () => {
+    if (!enableDragToClose || !isDragging) return
+    
+    setIsDragging(false)
+    
+    // 如果拖动距离超过阈值，关闭弹窗
+    if (dragOffset > 100) {
+      onClose()
+    }
+    
+    // 重置拖动偏移
+    setDragOffset(0)
+  }
+
   return (
     <Popup
       visible={visible}
@@ -52,8 +94,27 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
       closeable={false}
       onClose={onClose}
       className={`${styles['common-popup']} ${className ? className : ''}`}
-      style={zIndex ? { zIndex } : undefined}
+      style={{ 
+        zIndex: zIndex ? zIndex : undefined, 
+        ...style 
+      }}
     >
+      {enableDragToClose && (
+        <View className={styles['common-popup__drag-handle-container']}>
+          <View 
+            className={styles['common-popup__drag-handle']}
+            style={{
+              transform: `translateX(-50%) translateY(${dragOffset * 0.3}px)`,
+              opacity: isDragging ? 0.8 : 1,
+              transition: isDragging ? 'none' : 'all 0.3s ease-out'
+            }}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+          />
+        </View>
+      )}
+
       {showHeader && (
         <View className={styles['common-popup__header']}>
           {typeof title === 'string' ? <Text className={styles['common-popup__title']}>{title}</Text> : title}

src/components/CommonPopup/index.module.scss

@@ -1,6 +1,25 @@
 @use '~@/scss/themeColor.scss' as theme;
 
 .common-popup {
+  .common-popup__drag-handle-container {
+    position: position;
+  }
+  .common-popup__drag-handle {
+    position: absolute;
+    top: 6px;
+    left: 50%;
+    width: 32px;
+    height: 4px;
+    background-color: rgba(22, 24, 35, 0.20);
+    border-radius: 2px;
+    z-index: 10;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    
+    &:active {
+      background-color: #9ca3af;
+    }
+  }
   padding: 0;
   box-sizing: border-box;
   max-height: calc(100vh - 10px);

src/components/CustomNavbar/index.module.scss

@@ -1,47 +1,6 @@
 .customerNavbar {
-  // background-color: red;
+  position: sticky;
-
+  top: 0;
-  .container {
+  z-index: 999;
-    padding-left: 17px;
+  background-color: #ffffff;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .line {
-    width: 1px;
-    height: 25px;
-    background-color: #0000000F;
-  }
-
-  .logo {
-    width: 60px;
-    height: 34px;
-  }
-
-  .change {
-    width: 12px;
-    height: 12px;
-  }
-
-  .cityWrapper {
-    line-height: 20px;
-  }
-
-  .city {
-    font-weight: 600;
-    font-size: 13px;
-    line-height: 20px;
-  }
-
-  .infoWrapper {
-    line-height: 12px;
-  }
-
-  .info {
-    font-weight: 400;
-    font-size: 10px;
-    line-height: 12px;
-    color: #3C3C4399;
-  }
 }

src/components/CustomNavbar/index.tsx

@@ -1,73 +1,23 @@
-import { View, Text, Image } from "@tarojs/components";
+import { View } from "@tarojs/components";
-import img from "@/config/images";
-import { getCurrentLocation } from "@/utils/locationUtils";
-import { getNavbarHeight } from "@/utils/getNavbarHeight";
 import styles from "./index.module.scss";
-import { useEffect } from "react";
 import { useGlobalState } from "@/store/global";
-import { useListState } from "@/store/listStore";
 
-const ListHeader = () => {
+interface IProps {
-  const { statusBarHeight, navbarHeight, totalHeight } = getNavbarHeight();
+  children: any;
-  const {
+}
-    updateState,
-    location,
-    getLocationText,
-    getLocationLoading,
-    getNavbarHeightInfo,
-  } = useGlobalState();
-  const { gamesNum } = useListState();
 
-  // 获取位置信息
+const CustomNavbar = (props: IProps) => {
-  const getCurrentLocal = () => {
+  const { children } = props;
-    updateState({
+  const { statusNavbarHeightInfo } = useGlobalState();
-      getLocationLoading: true,
+  const { totalHeight } = statusNavbarHeightInfo;
-    });
-    getCurrentLocation().then((res) => {
-      updateState({
-        getLocationLoading: false,
-        location: res || {},
-      });
-    });
-  };
-  useEffect(() => {
-    getNavbarHeightInfo();
-    getCurrentLocal();
-  }, []);
-
-  const currentAddress = getLocationLoading
-    ? getLocationText
-    : location?.address;
 
   return (
     <View
       className={styles.customerNavbar}
       style={{ height: `${totalHeight}px` }}
     >
-      <View
+      {children}
-        className={styles.container}
-        style={{
-          height: `${navbarHeight}px`,
-          paddingTop: `${statusBarHeight}px`,
-        }}
-      >
-        {/* logo */}
-        <Image src={img.ICON_LOGO} className={styles.logo} />
-        <View className={styles.line} />
-        <View className={styles.content}>
-          <View className={styles.cityWrapper}>
-            {/* 位置 */}
-            <Text className={styles.city}>{currentAddress}</Text>
-            {!getLocationLoading && (
-              <Image src={img.ICON_CHANGE} className={styles.change} />
-            )}
-          </View>
-          <View className={styles.infoWrapper}>
-            <Text className={styles.info}>附近${gamesNum}场球局</Text>
-          </View>
-        </View>
-      </View>
     </View>
   );
 };
-export default ListHeader;
+export default CustomNavbar;

src/components/CustomerNavbarBack/index.module.scss

@@ -0,0 +1,50 @@
+.customerNavbarBack {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background-color: #ffffff;
+
+  .container {
+    padding-left: 17px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .line {
+    width: 1px;
+    height: 25px;
+    background-color: #0000000F;
+  }
+
+  .back {
+    width: 32px;
+    height: 32px;
+  }
+
+  .change {
+    width: 12px;
+    height: 12px;
+  }
+
+  .cityWrapper {
+    line-height: 20px;
+  }
+
+  .city {
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .infoWrapper {
+    line-height: 12px;
+  }
+
+  .info {
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    color: #3C3C4399;
+  }
+}

src/components/CustomerNavbarBack/index.tsx

@@ -0,0 +1,32 @@
+import { View, Image } from "@tarojs/components";
+import img from "@/config/images";
+import styles from "./index.module.scss";
+import { useGlobalState } from "@/store/global";
+import Taro from "@tarojs/taro";
+
+const ListHeader = () => {
+  const { statusNavbarHeightInfo } = useGlobalState();
+  const { statusBarHeight, navbarHeight, totalHeight } = statusNavbarHeightInfo;
+  const handleBack = () => {
+    Taro.navigateBack();
+  }
+
+  return (
+    <View
+      className={styles.customerNavbarBack}
+      style={{ height: `${totalHeight}px` }}
+    >
+      <View
+        className={styles.container}
+        style={{
+          height: `${navbarHeight}px`,
+          paddingTop: `${statusBarHeight}px`,
+        }}
+      >
+        {/* back */}
+        <Image src={img.ICON_LIST_SEARCH_BACK} className={styles.back} onClick={handleBack} />
+      </View>
+    </View>
+  );
+};
+export default ListHeader;

src/components/DateTimePicker/DateTimePicker.tsx

@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react'
-import { View, Text } from '@tarojs/components'
+import { View, Text, PickerView, PickerViewColumn } from '@tarojs/components'
-import { Picker, Popup } from '@nutui/nutui-react-taro'
 import styles from './index.module.scss'
 
+
+
 export interface DateTimePickerProps {
-  visible: boolean
+  onChange: (year: number, month: number) => void
-  onClose: () => void
-  onConfirm: (year: number, month: number) => void
   defaultYear?: number
   defaultMonth?: number
   minYear?: number
@@ -14,101 +13,91 @@ export interface DateTimePickerProps {
 }
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
-  visible,
+ 
-  onClose,
+  onChange,
-  onConfirm,
   defaultYear = new Date().getFullYear(),
   defaultMonth = new Date().getMonth() + 1,
   minYear = 2020,
   maxYear = 2030
 }) => {
+  console.log('defaultYear', defaultYear)
+  console.log('defaultMonth', defaultMonth)
   const [selectedYear, setSelectedYear] = useState(defaultYear)
   const [selectedMonth, setSelectedMonth] = useState(defaultMonth)
   
-  // 生成年份选项
+  // 计算当前选项在数组中的索引
-  const yearOptions = Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
+  const getYearIndex = (year: number) => year - minYear
-    text: `${minYear + index}年`,
+  const getMonthIndex = (month: number) => month - 1
-    value: minYear + index
+
-  }))
+  // 生成多列选择器的选项数据
+  const pickerOptions = [
+    // 年份列
+    Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
+      text: `${minYear + index}年`,
+      value: minYear + index
+    })),
+    // 月份列
+    Array.from({ length: 12 }, (_, index) => ({
+      text: `${index + 1}月`,
+      value: index + 1
+    }))
+  ]
+  
 
-  // 生成月份选项
-  const monthOptions = Array.from({ length: 12 }, (_, index) => ({
-    text: `${index + 1}月`,
-    value: index + 1
-  }))
 
   useEffect(() => {
-    if (visible) {
+    setSelectedYear(defaultYear)
-      setSelectedYear(defaultYear)
+    setSelectedMonth(defaultMonth)
-      setSelectedMonth(defaultMonth)
+  }, [ defaultYear, defaultMonth])
+
+  const handlePickerChange = (event: any) => {
+    const values = event.detail.value
+    if (values && values.length >= 2) {
+      // 根据索引获取实际值
+      const yearIndex = values[0]
+      const monthIndex = values[1]
+      const year = minYear + yearIndex
+      const month = monthIndex + 1
+      setSelectedYear(year)
+      setSelectedMonth(month)
+      onChange(year, month)
     }
-  }, [visible, defaultYear, defaultMonth])
-
-  const handleYearChange = (value: any) => {
-    setSelectedYear(value[0])
-  }
-
-  const handleMonthChange = (value: any) => {
-    setSelectedMonth(value[0])
-  }
-
-  const handleConfirm = () => {
-    onConfirm(selectedYear, selectedMonth)
-    onClose()
-  }
-
-  const handleCancel = () => {
-    onClose()
   }
 
   return (
-    <Popup
+    <View className={styles['date-time-picker-overlay']} >
-      visible={visible}
+      <View className={styles['date-time-picker-popup']} onClick={(e) => e.stopPropagation()}>
-      position="bottom"
+        {/* 拖拽手柄 */}
-      round
+        <View className={styles['drag-handle']} />
-      onClose={onClose}
-      className={styles['date-time-picker-popup']}
-    >
-      {/* 拖拽手柄 */}
-      <View className={styles['popup-handle']} />
         
-      {/* 时间选择器 */}
+        {/* 时间选择器 */}
-      <View className={styles['picker-container']}>
+        <View className={styles['picker-container']}>
-        <View className={styles['picker-columns']}>
+          {/* 多列选择器 */}
-          {/* 年份选择 */}
+          <View className={styles['picker-wrapper']}>
-          <View className={styles['picker-column']}>
+            <PickerView
-            <Text className={styles['picker-label']}>年</Text>
+              value={[getYearIndex(selectedYear), getMonthIndex(selectedMonth)]}
-            <Picker
+              onChange={handlePickerChange}
-              value={[selectedYear]}
+              className={styles['multi-column-picker']}
-              options={yearOptions}
+            >
-              onChange={handleYearChange}
+              <PickerViewColumn className={styles['picker-column']}>
-              className={styles['year-picker']}
+                {pickerOptions[0].map((option, index) => (
-            />
+                  <View key={option.value} className={styles['picker-item']}>
-          </View>
+                    <Text className={styles['picker-item-text']}>{option.text}</Text>
-          
+                  </View>
-          {/* 月份选择 */}
+                ))}
-          <View className={styles['picker-column']}>
+              </PickerViewColumn>
-            <Text className={styles['picker-label']}>月</Text>
+              <PickerViewColumn className={styles['picker-column']}>
-            <Picker
+                {pickerOptions[1].map((option, index) => (
-              value={[selectedMonth]}
+                  <View key={option.value} className={styles['picker-item']}>
-              options={monthOptions}
+                    <Text className={styles['picker-item-text']}>{option.text}</Text>
-              onChange={handleMonthChange}
+                  </View>
-              className={styles['month-picker']}
+                ))}
-            />
+              </PickerViewColumn>
+            </PickerView>
           </View>
         </View>
       </View>
-
+    </View>
-      {/* 操作按钮 */}
-      <View className={styles['action-buttons']}>
-        <View className={styles['cancel-btn']} onClick={handleCancel}>
-          <Text className={styles['cancel-text']}>取消</Text>
-        </View>
-        <View className={styles['confirm-btn']} onClick={handleConfirm}>
-          <Text className={styles['confirm-text']}>完成</Text>
-        </View>
-        </View>
-    </Popup>
   )
 }
 

src/components/DateTimePicker/README.md

@@ -1,67 +0,0 @@
-# DateTimePicker 年月选择器
-
-一个基于 NutUI 的年月切换弹窗组件，支持自定义年份范围和默认值。
-
-## 功能特性
-
-- 🎯 年月分别选择，操作简单直观
-- 🎨 遵循设计稿样式，美观易用
-- 📱 支持移动端手势操作
-- ⚙️ 可自定义年份范围
-- <20><> 基于 NutUI 组件库，稳定可靠
-
-## 使用方法
-
-```tsx
-import { DateTimePicker } from '@/components'
-
-const MyComponent = () => {
-  const [visible, setVisible] = useState(false)
-
-  const handleConfirm = (year: number, month: number) => {
-    console.log('选择的年月:', year, month)
-    setVisible(false)
-  }
-
-  return (
-    <DateTimePicker
-      visible={visible}
-      onClose={() => setVisible(false)}
-      onConfirm={handleConfirm}
-      defaultYear={2025}
-      defaultMonth={11}
-      minYear={2020}
-      maxYear={2030}
-    />
-  )
-}
-```
-
-## API 参数
-
-| 参数 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| visible | boolean | - | 是否显示弹窗 |
-| onClose | () => void | - | 关闭弹窗的回调 |
-| onConfirm | (year: number, month: number) => void | - | 确认选择的回调 |
-| defaultYear | number | 当前年份 | 默认选中的年份 |
-| defaultMonth | number | 当前月份 | 默认选中的月份 |
-| minYear | number | 2020 | 可选择的最小年份 |
-| maxYear | number | 2030 | 可选择的最大年份 |
-
-## 样式定制
-
-组件使用 CSS Modules，可以通过修改 `index.module.scss` 文件来自定义样式。
-
-主要样式类：
-- `.date-time-picker-popup` - 弹窗容器
-- `.picker-columns` - 选择器列容器
-- `.picker-column` - 单列选择器
-- `.action-buttons` - 操作按钮区域
-
-## 注意事项
-
-1. 组件基于 NutUI 的 Picker 和 Popup 组件
-2. 年份范围建议不要设置过大，以免影响性能
-3. 月份固定为 1-12 月
-4. 组件会自动处理边界情况

src/components/DateTimePicker/example.tsx

@@ -1,45 +0,0 @@
-import React, { useState } from 'react'
-import { View, Button } from '@tarojs/components'
-import DateTimePicker from './DateTimePicker'
-
-const DateTimePickerExample: React.FC = () => {
-  const [visible, setVisible] = useState(false)
-  const [selectedDate, setSelectedDate] = useState('')
-
-  const handleOpen = () => {
-    setVisible(true)
-  }
-
-  const handleClose = () => {
-    setVisible(false)
-  }
-
-  const handleConfirm = (year: number, month: number) => {
-    setSelectedDate(`${year}年${month}月`)
-    console.log('选择的日期:', year, month)
-  }
-
-  return (
-    <View style={{ padding: '20px' }}>
-      <Button onClick={handleOpen}>选择年月</Button>
-      
-      {selectedDate && (
-        <View style={{ marginTop: '20px', fontSize: '16px' }}>
-          已选择: {selectedDate}
-        </View>
-      )}
-
-      <DateTimePicker
-        visible={visible}
-        onClose={handleClose}
-        onConfirm={handleConfirm}
-        defaultYear={2025}
-        defaultMonth={11}
-        minYear={2020}
-        maxYear={2030}
-      />
-    </View>
-  )
-}
-
-export default DateTimePickerExample

src/components/DateTimePicker/index.module.scss

@@ -1,102 +1,89 @@
+/* 日期选择器弹出层样式 */
 .date-time-picker-popup {
-  :global(.nut-popup) {
+  .common-popup-content {
-    border-radius: 16px 16px 0 0;
+    padding: 0;
-    background: #fff;
   }
 }
 
 .popup-handle {
-  width: 40px;
+  width: 32px;
   height: 4px;
-  background: #e5e5e5;
+  background: #e0e0e0;
   border-radius: 2px;
-  margin: 12px auto 0;
+  margin: 12px auto;
 }
 
 .picker-container {
-  padding: 20px 0;
+  padding: 26px 16px 0 16px;
+  background: #fff;
 }
 
-.picker-columns {
+.picker-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.picker-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.picker-wrapper {
+  position: relative;
+}
+
+.multi-column-picker {
+  width: 100%;
+  height: 216px;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: none;
+  /* 自定义选择器样式 */
+  ::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+  
+  /* 选中项指示器 */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 48px;
+    background: rgba(22, 24, 35, 0.05);
+    transform: translateY(-50%);
+    pointer-events: none;
+    z-index: 1;
+    border-radius: 4px;
+  }
+}
+
+.picker-item {
   display: flex;
-  justify-content: center;
   align-items: center;
-  gap: 60px;
+  justify-content: center;
+  font-size: 20px;
+  color: #161823;
+  transition: all 0.3s ease;
+  &.picker-item-active {
+    color: rgba(22, 24, 35, 0.05);
+    font-weight: 600;
+    transform: scale(1.05);
+  }
 }
 
 .picker-column {
-  display: flex;
+  border: none;
-  flex-direction: column;
+  outline: none;
-  align-items: center;
-  gap: 16px;
 }
 
-.picker-label {
+.picker-item-text {
-  font-size: 14px;
-  color: #999;
-  font-weight: 400;
-}
-
-.year-picker,
-.month-picker {
-  :global(.nut-picker) {
-    width: 80px;
-  }
-  
-  :global(.nut-picker__content) {
-    height: 200px;
-  }
-  
-  :global(.nut-picker-item) {
-    height: 40px;
-    line-height: 40px;
-    font-size: 16px;
-    color: #333;
-  }
-  
-  :global(.nut-picker-item--selected) {
-    color: #000;
-    font-weight: 500;
-  }
-  
-  :global(.nut-picker-item--disabled) {
-    color: #ccc;
-  }
-}
-
-.action-buttons {
-  display: flex;
-  padding: 0 20px 20px;
-  gap: 12px;
-}
-
-.cancel-btn,
-.confirm-btn {
-  flex: 1;
-  height: 44px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.cancel-btn {
-  background: #fff;
-  border: 1px solid #e5e5e5;
-}
-
-.cancel-text {
-  color: #666;
   font-size: 16px;
+  color: inherit;
+  text-align: center;
 }
 
-.confirm-btn {
-  background: #000;
-  border: 1px solid #000;
-}
-
-.confirm-text {
-  color: #fff;
-  font-size: 16px;
-}

src/components/DistanceQuickFilter/index.scss

@@ -0,0 +1,91 @@
+.distanceQuickFilterWrap {
+  width: 100%;
+
+  .nut-menu-bar {
+    background-color: unset;
+    box-shadow: unset;
+    padding: 0 15px;
+    gap: 5px;
+  }
+
+  .nut-menu-title {
+    flex: unset;
+    box-sizing: border-box;
+    display: flex;
+    height: 28px;
+    padding: 4px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+    border-radius: 999px;
+    border: 0.5px solid rgba(0, 0, 0, 0.06);
+    background: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .nut-menu-title.active {
+    color: #000;
+  }
+
+  .nut-menu-container-wrap {
+    width: 100vw;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+  }
+
+  .nut-menu-container-item {
+    color: rgba(60, 60, 67, 0.60);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .nut-menu-container-item.active {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    color: #000;
+  }
+
+  .positionWrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .cityName {
+    font-size: 13px;
+    font-weight: 400;
+    color: #3c3c43;
+  }
+
+  .distanceWrap {
+    margin-bottom: 16px;
+    width: 100%;
+  }
+
+  .distanceBubbleItem {
+    display: flex;
+    width: 80px;
+    height: 28px;
+    padding: 4px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+    border-radius: 999px;
+    border: 0.5px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .itemIcon {
+    width: 20px;
+    height: 20px;
+  }
+}

src/components/DistanceQuickFilter/index.tsx

@@ -0,0 +1,81 @@
+import React, { useRef, useState } from "react";
+import { Menu, Button } from "@nutui/nutui-react-taro";
+import { Image } from "@tarojs/components";
+import img from "@/config/images";
+import Bubble from "../Bubble";
+import "./index.scss";
+
+const Demo3 = (props) => {
+  const {
+    cityOptions,
+    quickOptions,
+    onChange,
+    cityName,
+    quickName,
+    cityValue,
+    quickValue,
+  } = props;
+
+  const itemRef = useRef(null);
+
+  const handleChange = (name: string, value: string) => {
+    // setIsChange(true);
+    onChange && onChange(name, value);
+    (itemRef.current as any)?.toggle(false);
+  };
+
+  return (
+    <Menu
+      className="distanceQuickFilterWrap"
+    >
+      <Menu.Item
+        title={cityValue}
+        ref={itemRef}
+        icon={<Image src={img.ICON_MENU_ITEM_SELECTED} />}
+      >
+        <div className="positionWrap">
+          <p className="title">当前位置</p>
+          <p className="cityName">上海市</p>
+        </div>
+        <div className="distanceWrap">
+          <Bubble
+            options={cityOptions}
+            value={cityValue}
+            onChange={handleChange}
+            layout="grid"
+            size="small"
+            columns={4}
+            itemClassName="distanceBubbleItem"
+            name={cityName}
+          />
+        </div>
+      </Menu.Item>
+      <Menu.Item
+        options={quickOptions}
+        defaultValue={quickValue}
+        onChange={(value) => handleChange(quickName, value)}
+        icon={<Image className="itemIcon" src={img.ICON_MENU_ITEM_SELECTED} />}
+      />
+      {/* <Menu.Item title="筛选" ref={itemRef}>
+        <div
+          style={{
+            width: '50%',
+            lineHeight: '28px',
+            padding: '0 30px',
+          }}
+        >
+          自定义内容
+        </div>
+        <Button
+          size="small"
+          onClick={() => {
+            ;(itemRef.current as any)?.toggle(false)
+          }}
+        >
+          确认
+        </Button>
+      </Menu.Item> */}
+    </Menu>
+  );
+};
+export default Demo3;

src/components/FormSwitch/index.scss

@@ -33,8 +33,8 @@
         .info-popover {
           position: absolute;
           bottom: 22px;
-          left: -65px;
+          left: -92px;
-          width: 130px;
+          width: 184px;
           padding:12px;
           background: rgba(57, 59, 68, 0.90);
           color: #fff;
@@ -51,7 +51,7 @@
           content: '';
           position: absolute;
           bottom: -6px;
-          left: 68px; /* 对齐图标（宽12px），可按需微调 */
+          left: 94px; /* 对齐图标（宽12px），可按需微调 */
           width: 0;
           height: 0;
           border-left: 6px solid transparent;

src/components/GuideBar/index.scss

@@ -0,0 +1,90 @@
+@use '~@/scss/images.scss' as img;
+
+.guide-bar-container {
+  padding-top: calc(60px + 20px + env(safe-area-inset-bottom));
+}
+
+.guide-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: calc(60px + 20px + env(safe-area-inset-bottom));
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 12px env(safe-area-inset-bottom);
+  z-index: 999;
+
+  &-pages {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    display: inline-flex;
+    width: 240px;
+    height: 60px;
+    padding: 8px 6px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: rgba(255, 255, 255, 0.40);
+    box-shadow: 0 4px 64px 0 rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(16px);
+
+    &-item {
+      display: flex;
+      width: 76px;
+      height: 48px;
+      // padding: 14px 0;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      color: rgba(60, 60, 67, 0.60);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 125% */
+    }
+
+    &-item-active {
+      display: flex;
+      width: 76px;
+      height: 48px;
+      // padding: 14px 22px;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      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);
+      color: #000;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 125% */
+    }
+  }
+
+  &-publish {
+    display: flex;
+    width: 60px;
+    height: 60px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: 999px;
+    // border: 2px solid rgba(0, 0, 0, 0.06);
+    background: radial-gradient(75.92% 98.69% at 26.67% 8.33%, #BDFF4A 16.88%, #95F23E 54.19%, #32D838 100%);
+    box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+    backdrop-filter: blur(16px);
+
+    &-icon {
+      width: 36px;
+      height: 36px;
+    }
+  }
+}

src/components/GuideBar/index.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import img from '@/config/images'
+import './index.scss'
+import PublishMenu from '../PublishMenu'
+export type currentPageType = 'games' | 'message' | 'personal'
+
+const GuideBar = (props) => {
+  const { currentPage } = props
+
+  const guideItems = [
+    {
+      code: 'list',
+      text: '球局',
+    },
+    {
+      code: 'message',
+      text: '消息',
+    },
+    {
+      code: 'personal',
+      text: '我的',
+    },
+  ]
+
+  const handlePublish = () => {
+    Taro.navigateTo({
+      url: '/pages/publishBall/index',
+    })
+  }
+
+  const handlePageChange = (code: string) => {
+    if (code === currentPage) {
+      return
+    }
+    Taro.navigateTo({
+      url: `/pages/${code}/index`,
+    }).then(() => {
+      Taro.pageScrollTo({
+        scrollTop: 0,
+        duration: 300,
+      })
+    })
+  }
+
+  return (
+    <View className='guide-bar-container'>
+      <View className='guide-bar'>
+        {/* guide area on the left */}
+        <View className='guide-bar-pages'>
+          {guideItems.map((item) => (
+            <View
+              className={`guide-bar-pages-item ${currentPage === item.code ? 'guide-bar-pages-item-active' : ''}`}
+              onClick={() => handlePageChange(item.code)}
+            >
+              <Text>{item.text}</Text>
+            </View>
+          ))}
+        </View>
+        {/* publish button on the right */}
+        {/* <View className='guide-bar-publish' onClick={handlePublish}>
+          <Image className='guide-bar-publish-icon' src={img.ICON_GUIDE_BAR_PUBLISH} />
+        </View> */}
+        <PublishMenu />
+      </View>
+    </View>
+  )
+}
+
+export default GuideBar

src/components/HourMinutePicker/HourMinutePicker.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react'
+import { View, Text, PickerView, PickerViewColumn } from '@tarojs/components'
+import styles from './index.module.scss'
+
+export interface HourMinutePickerProps {
+  onChange: (hour: number, minute: number) => void
+  defaultHour?: number
+  defaultMinute?: number
+  minHour?: number
+  maxHour?: number
+}
+
+const HourMinutePicker: React.FC<HourMinutePickerProps> = ({
+  onChange,
+  defaultHour = new Date().getHours(),
+  defaultMinute = new Date().getMinutes(),
+  minHour = 0,
+  maxHour = 23
+}) => {
+  console.log('defaultHour', defaultHour)
+  console.log('defaultMinute', defaultMinute)
+  const [selectedHour, setSelectedHour] = useState(defaultHour)
+  const [selectedMinute, setSelectedMinute] = useState(defaultMinute)
+  
+  // 计算当前选项在数组中的索引
+  const getHourIndex = (hour: number) => hour - minHour
+  const getMinuteIndex = (minute: number) => Math.floor(minute / 5)
+
+  // 生成小时和分钟的选项数据
+  const pickerOptions = [
+    // 小时列
+    Array.from({ length: maxHour - minHour + 1 }, (_, index) => ({
+      text: `${minHour + index}时`,
+      value: minHour + index
+    })),
+    // 分钟列 (5分钟间隔)
+    Array.from({ length: 12 }, (_, index) => ({
+      text: `${index * 5 < 10 ? '0' + index * 5 : index * 5}分`,
+      value: index * 5
+    }))
+  ]
+
+  useEffect(() => {
+    setSelectedHour(defaultHour)
+    setSelectedMinute(defaultMinute)
+  }, [defaultHour, defaultMinute])
+
+  const handlePickerChange = (event: any) => {
+    const values = event.detail.value
+    if (values && values.length >= 2) {
+      // 根据索引获取实际值
+      const hourIndex = values[0]
+      const minuteIndex = values[1]
+      const hour = minHour + hourIndex
+      const minute = minuteIndex * 5
+      setSelectedHour(hour)
+      setSelectedMinute(minute)
+      onChange(hour, minute)
+    }
+  }
+
+  return (
+    <View className={styles['hour-minute-picker-popup']}>
+      {/* 拖拽手柄 */}      
+      {/* 时间选择器 */}
+      <View className={styles['picker-container']}>
+        {/* 多列选择器 */}
+        <View className={styles['picker-wrapper']}>
+          <PickerView
+            value={[getHourIndex(selectedHour), getMinuteIndex(selectedMinute)]}
+            onChange={handlePickerChange}
+            className={styles['multi-column-picker']}
+          >
+            <PickerViewColumn className={styles['picker-column']}>
+              {pickerOptions[0].map((option, index) => (
+                <View key={option.value} className={styles['picker-item']}>
+                  <Text className={styles['picker-item-text']}>{option.text}</Text>
+                </View>
+              ))}
+            </PickerViewColumn>
+            <PickerViewColumn className={styles['picker-column']}>
+              {pickerOptions[1].map((option, index) => (
+                <View key={option.value} className={styles['picker-item']}>
+                  <Text className={styles['picker-item-text']}>{option.text}</Text>
+                </View>
+              ))}
+            </PickerViewColumn>
+          </PickerView>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default HourMinutePicker

src/components/HourMinutePicker/index.module.scss

@@ -0,0 +1,44 @@
+.hour-minute-picker-popup {
+  background-color: #fff;
+  border-radius: 16px;
+  width: 100%;
+  position: relative;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 26px 16px 0 16px;
+  box-sizing: border-box;
+}
+
+.picker-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.picker-wrapper {
+  width: 100%;
+  max-width: 400px;
+}
+
+.multi-column-picker {
+  height: 216px;
+  width: 100%;
+}
+
+.picker-column {
+  flex: 1;
+  text-align: center;
+}
+
+.picker-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+}
+
+.picker-item-text {
+  font-size: 16px;
+  color: #333;
+  font-weight: 400;
+}

src/components/HourMinutePicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './HourMinutePicker'
+export type { HourMinutePickerProps } from './HourMinutePicker'

src/components/ListCard/index.scss

@@ -1,4 +1,10 @@
-.list-item {
+.listCard {
+  background: linear-gradient(90deg, rgba(183, 248, 113, 0.5) 0%, rgba(183, 248, 113, 0.1) 100%);
+  border-radius: 20px;
+  border-width: 0.5px;
+}
+
+.listItem {
   display: flex;
   padding: 12px 15px;
   background: #ffffff;
@@ -248,3 +254,42 @@
   height: 100%;
   object-fit: cover;
 }
+
+// 底部
+.smoothPlayingGame {
+  padding: 5px 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+
+  .smoothWrapper,
+  .localAreaWrapper {
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .smoothTitle {
+    font-size: 14px;
+  }
+
+  .line {
+    height: 8px;
+    width: 1px;
+    background: #00000040;
+    border-radius: 99px;
+  }
+
+  .iconListPlayingGame,
+  .localArea {
+    width: 14px;
+    height: 14px;
+  }
+
+  .localArea {
+    border: 0.5px solid #FFFFFFA6;
+    border-radius: 50%;
+  }
+}

src/components/ListCard/index.tsx

@@ -1,10 +1,11 @@
 import { View, Text, Image } from "@tarojs/components";
+import Taro from "@tarojs/taro";
 import img from "../../config/images";
 import { ListCardProps } from "../../../types/list/types";
 import "./index.scss";
-// import SkeletonComponent from "../../components/Skeleton";
 
 const ListCard: React.FC<ListCardProps> = ({
+  id,
   title,
   dateTime,
   location,
@@ -13,39 +14,37 @@ const ListCard: React.FC<ListCardProps> = ({
   maxCount,
   skillLevel,
   matchType,
-  images,
+  images = [],
   shinei,
 }) => {
   const renderItemImage = (src: string) => {
     return <Image src={src} className="image" mode="aspectFill" />;
   };
 
+  const handleViewDetail = () => {
+    console.log('id', id)
+    Taro.navigateTo({
+      url: `/pages/detail/index?id=${id || 1}&from=list&autoShare=0`,
+    });
+  };
+
   // 根据图片数量决定展示样式
   const renderImages = () => {
-    if (images.length === 0) return null;
+    if (images?.length === 0) return null;
 
-    if (images.length === 1) {
+    if (images?.length === 1) {
       return (
         <View className="single-image">
-          <View className="image-container">
+          <View className="image-container">{renderItemImage(images[0])}</View>
-            {/* <Image src={images[0]} className="image" mode="aspectFill" /> */}
-            {renderItemImage(images[0])}
-          </View>
         </View>
       );
     }
 
-    if (images.length === 2) {
+    if (images?.length === 2) {
       return (
         <View className="double-image">
-          <View className="image-container">
+          <View className="image-container">{renderItemImage(images[0])}</View>
-            {/* <Image src={images[0]} className="image" mode="aspectFill" /> */}
+          <View className="image-container">{renderItemImage(images[1])}</View>
-            {renderItemImage(images[0])}
-          </View>
-          <View className="image-container">
-            {/* <Image src={images[1]} className="image" mode="aspectFill" /> */}
-            {renderItemImage(images[1])}
-          </View>
         </View>
       );
     }
@@ -53,79 +52,94 @@ const ListCard: React.FC<ListCardProps> = ({
     // 3张或更多图片
     return (
       <View className="triple-image">
-        <View className="image-container">{renderItemImage(images[0])}</View>
+        <View className="image-container">{renderItemImage(images?.[0])}</View>
-        <View className="image-container">{renderItemImage(images[1])}</View>
+        <View className="image-container">{renderItemImage(images?.[1])}</View>
-        <View className="image-container">{renderItemImage(images[2])}</View>
+        <View className="image-container">{renderItemImage(images?.[2])}</View>
       </View>
     );
   };
   return (
-    <View className="list-item">
+    <View className="listCard">
-      {/* 左侧内容区域 */}
+      <View className="listItem" onClick={handleViewDetail}>
-      <View className="content">
+        {/* 左侧内容区域 */}
-        {/* 标题 */}
+        <View className="content">
-        <View className="titleWrapper">
+          {/* 标题 */}
-          <Text className="title">{title}</Text>
+          <View className="titleWrapper">
-          <Image
+            <Text className="title">{title}</Text>
-            src={img.ICON_LIST_RIGHT_ARROW}
+            <Image
-            className="title-right-arrow"
+              src={img.ICON_LIST_RIGHT_ARROW}
-            mode="aspectFit"
+              className="title-right-arrow"
-          />
+              mode="aspectFit"
-        </View>
+            />
-
-        {/* 时间信息 */}
-
-        <View className="date-time">
-          <Text>{dateTime}</Text>
-        </View>
-
-        {/* 地点,室内外,距离 */}
-
-        <View className="location">
-          <Text className="location-text location-position">{location}</Text>
-          <Text className="location-text location-time-distance">
-            {shinei && `・${shinei}`}
-            {distance && `・${distance}`}
-          </Text>
-        </View>
-
-        {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
-        <View className="bottom-info">
-          <View className="left-section">
-            <View className="avatar-group">
-              {Array.from({ length: Math.min(registeredCount, 3) }).map(
-                (_, index) => (
-                  <View key={index} className="avatar">
-                    <Image
-                      className="avatar-image"
-                      src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
-                      mode="aspectFill"
-                    />
-                  </View>
-                )
-              )}
-            </View>
           </View>
 
-          <View className="tags">
+          {/* 时间信息 */}
-            <View className="tag">
+
-              <Text className="tag-text">
+          <View className="date-time">
-                报名人数 {registeredCount}/
+            <Text>{dateTime}</Text>
-                <Text className="tag-text-max">{maxCount}</Text>
+          </View>
-              </Text>
+
+          {/* 地点,室内外,距离 */}
+
+          <View className="location">
+            <Text className="location-text location-position">{location}</Text>
+            <Text className="location-text location-time-distance">
+              {shinei && `・${shinei}`}
+              {distance && `・${distance}`}
+            </Text>
+          </View>
+
+          {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
+          <View className="bottom-info">
+            <View className="left-section">
+              <View className="avatar-group">
+                {Array.from({ length: Math.min(registeredCount, 3) }).map(
+                  (_, index) => (
+                    <View key={index} className="avatar">
+                      <Image
+                        className="avatar-image"
+                        src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
+                        mode="aspectFill"
+                      />
+                    </View>
+                  )
+                )}
+              </View>
             </View>
-            <View className="tag">
+
-              <Text className="tag-text">{skillLevel}</Text>
+            <View className="tags">
-            </View>
+              <View className="tag">
-            <View className="tag">
+                <Text className="tag-text">
-              <Text className="tag-text">{matchType}</Text>
+                  报名人数 {registeredCount}/
+                  <Text className="tag-text-max">{maxCount}</Text>
+                </Text>
+              </View>
+              <View className="tag">
+                <Text className="tag-text">{skillLevel}</Text>
+              </View>
+              <View className="tag">
+                <Text className="tag-text">{matchType}</Text>
+              </View>
             </View>
           </View>
         </View>
+
+        {/* 右侧图片区域 */}
+        <View className="image-section">{renderImages()}</View>
+      </View>
+      {/* 畅打球局 */}
+      <View className="smoothPlayingGame">
+        <View className="smoothWrapper">
+          <Image src={img.ICON_LIST_PLAYING_GAME} className="iconListPlayingGame" />
+          <Text className="smoothTitle">畅打球局</Text>
+        </View>
+        <View className="line" />
+        <View>场馆方:</View>
+        <View className="localAreaWrapper">
+          <Image className="localArea" src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center" />
+          <Text className="localAreaText">仁恒河滨花园网球场</Text>
+        </View>
       </View>
-
-      {/* 右侧图片区域 */}
-      <View className="image-section">{renderImages()}</View>
     </View>
   );
 };

src/components/ListCardSkeleton/index.tsx

@@ -13,7 +13,6 @@ const ListCard = () => {
         </View>
 
         {/* 时间信息 */}
-
         <View className="date-time">
           <Skeleton visible={false} style={{ width: "88px", }} />
         </View>

src/components/ListLoadError/index.module.scss

@@ -0,0 +1,44 @@
+.listLoadError {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+
+  .listLoadErrorImg {
+    width: 154px;
+    height: 154px;
+  }
+
+  .listLoadErrorText {
+    margin-top: 35px;
+    margin-bottom: 12px;
+    font-weight: 500;
+    font-style: Medium;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+
+  .listLoadErrorBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 76px;
+    background: #00000008;
+    border: 0.5px solid #0000001F;
+    border-radius: 12px;
+    padding: 12px 0;
+    font-weight: 500;
+    font-style: Medium;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0px;
+
+  }
+
+  .reloadIcon {
+    width: 16px;
+    height: 16px;
+  }
+}

src/components/ListLoadError/index.tsx

@@ -0,0 +1,24 @@
+import { Image, View, Text, Button } from "@tarojs/components";
+import styles from "./index.module.scss";
+import img from "@/config/images";
+
+const ListLoadError = ({ reload }: { reload: () => void }) => {
+  const handleReload = () => {
+    reload && typeof reload === "function" && reload();
+  };
+
+  return (
+    <View className={styles.listLoadError}>
+      <Image
+        className={styles.listLoadErrorImg}
+        src={img.ICON_LIST_LOAD_ERROR}
+      />
+      <Text className={styles.listLoadErrorText}>加载失败</Text>
+      <Button className={styles.listLoadErrorBtn} onClick={handleReload}>
+        <Image src={img?.ICON_LIST_RELOAD} className={styles.reloadIcon} />
+        重试
+      </Button>
+    </View>
+  );
+};
+export default ListLoadError;

src/components/MapDisplay/README.md

@@ -1,215 +0,0 @@
-# 腾讯地图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) 

src/components/MapDisplay/index.scss

@@ -1,382 +0,0 @@
-.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;
-    }
-  }
-} 

src/components/MapDisplay/index.tsx

@@ -1,505 +0,0 @@
-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 

src/components/MapDisplay/mapPlugin.tsx

@@ -1,63 +0,0 @@
-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>
-    )
-}

src/components/MapDisplay/mapService.ts

@@ -1,190 +0,0 @@
-// 腾讯地图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() 

src/components/Menu/index.tsx

@@ -6,7 +6,7 @@ import { MenuFilterProps } from "../../../types/list/types";
 import styles from "./index.module.scss";
 
 const MenuComponent = (props: MenuFilterProps) => {
-  const { options, value, onChange, wrapperClassName, itemClassName, name } =
+  const { options, value, onChange, wrapperClassName, itemClassName, name, onOpen, onClose,open } =
     props;
   const [isChange, setIsChange] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -18,10 +18,12 @@ const MenuComponent = (props: MenuFilterProps) => {
 
   const handleOpen = () => {
     setIsOpen(true);
+    onOpen && typeof onOpen === "function" && onOpen();
   };
 
   const handleClose = () => {
     setIsOpen(false);
+    onClose && typeof onClose === "function" && onClose();
   };
 
   return (

src/components/NumberInterval/NumberInterval.tsx

@@ -6,16 +6,30 @@ import { InputNumber } from '@nutui/nutui-react-taro'
 interface NumberIntervalProps {
   value: [number, number]
   onChange: (value: [number, number]) => void
+  min: number
+  max: number
 }
 
 const NumberInterval: React.FC<NumberIntervalProps> = ({
   value,
-  onChange
+  onChange,
+  min,
+  max
 }) => {
-  const [minParticipants, maxParticipants] = value || [1, 4]
+  const [minParticipants, maxParticipants] = value || [1, 1]
+  
   const handleChange = (value: [number | string, number | string]) => {
-    onChange([Number(value[0]), Number(value[1])])
+    const newMin = Number(value[0])
+    const newMax = Number(value[1])
+    
+    // 确保最少人数不能大于最多人数
+    if (newMin > newMax) {
+      return
+    }
+    
+    onChange([newMin, newMax])
   }
+  
   return (
     <View className='participants-control-section'>
       <View className='participant-control'>
@@ -24,7 +38,7 @@ const NumberInterval: React.FC<NumberIntervalProps> = ({
           <InputNumber
             className="format-width"
             defaultValue={minParticipants}
-            min={minParticipants}
+            min={min}
             max={maxParticipants}
             onChange={(value) => handleChange([value, maxParticipants])}
             formatter={(value) => `${value}人`}
@@ -37,9 +51,9 @@ const NumberInterval: React.FC<NumberIntervalProps> = ({
           <InputNumber
             className="format-width"
             defaultValue={maxParticipants}
-            onChange={(value) => handleChange([value, maxParticipants])}
+            onChange={(value) => handleChange([minParticipants, value])}
             min={minParticipants}
-            max={maxParticipants}
+            max={max}
             formatter={(value) => `${value}人`}
           />
         </View>

src/components/PublishMenu/PublishMenu.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import styles from './index.module.scss'
+import images from '@/config/images'
+
+export interface PublishMenuProps {
+  onPersonalPublish?: () => void
+  onActivityPublish?: () => void
+}
+
+const PublishMenu: React.FC<PublishMenuProps> = () => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const handleIconClick = () => {
+    setIsVisible(!isVisible)
+  }
+
+  const handleMenuItemClick = (type: 'individual' | 'group') => {
+    // 跳转到publishBall页面并传递type参数
+    console.log(type, 'type');
+    Taro.navigateTo({
+      url: `/pages/publishBall/index?type=${type}`
+    })
+    setIsVisible(false)
+  }
+
+
+
+  return (
+    <View className={styles.publishMenu}>
+      
+      {/* 菜单选项 */}
+      {isVisible && (
+        <View className={styles.menuCard}>
+          <View 
+            className={styles.menuItem}
+            onClick={() => handleMenuItemClick('individual')}
+          >
+            <View className={styles.menuIcon}>
+              <Image src={images.ICON_PERSON} />
+            </View>
+            <View className={styles.menuContent}>
+              <Text className={styles.menuTitle}>发布个人约球</Text>
+              <Text className={styles.menuDesc}>已订场，找球友；未订场，找搭子</Text>
+            </View>
+            <View className={styles.menuArrow}>
+              <Image src={images.ICON_ARROW_RIGHT} className={styles.img} />
+            </View>
+          </View>
+          
+          <View 
+            className={styles.menuItem}
+            onClick={() => handleMenuItemClick('group')}
+          >
+            <View className={styles.menuIcon}>
+              <Image src={images.ICON_GROUP} />
+            </View>
+            <View className={styles.menuContent}>
+              <Text className={styles.menuTitle}>发布畅打活动</Text>
+              <Text className={styles.menuDesc}>认证球场官方组织</Text>
+            </View>
+            <View className={styles.menuArrow}>
+              <Image src={images.ICON_ARROW_RIGHT} className={styles.img} />
+            </View>
+          </View>
+        </View>
+      )}
+      
+      {/* 绿色圆形按钮 */}
+      <View 
+        className={`${styles.greenButton} ${isVisible ? styles.rotated : ''}`}
+        onClick={handleIconClick}
+      >
+        <Image src={images.ICON_PUBLISH} className={styles.closeIcon} />
+      </View>
+    </View>
+  )
+}
+
+export default PublishMenu

src/components/PublishMenu/index.module.scss

@@ -0,0 +1,195 @@
+.publishMenu {
+  position: relative;
+  z-index: 1000;
+}
+
+
+.menuCard {
+  position: absolute;
+  bottom: 80px;
+  right: 0;
+  width: 302px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 12px;
+  animation: slideIn 0.3s ease-out;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  /* 小三角指示器 */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    right: 20px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid white;
+    /* 移除阴影，避免连接处的黑色 */
+  }
+  
+  /* 为小三角添加单独的阴影效果 */
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: -9px;
+    right: 20px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid rgba(0, 0, 0, 0.1);
+    z-index: -1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-radius: 20px;
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+  background: var(--Backgrounds-Primary, #FFF);
+  height: 68px;
+}
+
+.menuIcon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+
+.ballIcon {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #333;
+  border-radius: 50%;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 8px;
+    border: 1px solid #333;
+    border-radius: 50%;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 4px;
+    height: 4px;
+    background: #333;
+    border-radius: 50%;
+  }
+}
+
+.activityIcon {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #333;
+    border-radius: 50% 50% 0 50%;
+    transform: rotate(-45deg);
+  }
+  
+  &::after {
+    content: '+';
+    position: absolute;
+    top: -2px;
+    right: 0;
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.menuContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.menuTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  margin-bottom: 2px;
+  line-height: 24px; /* 150% */
+}
+
+.menuDesc {
+  font-size: 12px;
+  color: rgba(60, 60, 67, 0.60);
+  line-height: 18px;
+}
+
+.menuArrow {
+  font-size: 16px;
+  color: #ccc;
+  margin-left: 8px;
+  .img{
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.greenButton {
+  border-radius: 50%;
+  display: flex;
+  width: 60px;
+  height: 60px;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  &.rotated {
+    transform: rotate(-90deg);
+  }
+}
+
+.closeIcon {
+  color: white;
+  font-size: 24px;
+  width: 60px;
+  height: 60px;
+  font-weight: bold;
+  line-height: 1;
+}

src/components/PublishMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from './PublishMenu'
+export type { PublishMenuProps } from './PublishMenu'

src/components/SearchBar/index.module.scss

@@ -5,9 +5,17 @@
   --nutui-searchbar-input-text-color: #000000;
   --nutui-searchbar-input-padding: 0 0 0 10px;
   --nutui-searchbar-padding: 10px 0 0 0;
+  background-color: unset;
+
   :global(.nut-searchbar-content) {
     box-shadow: 0 4px 48px #00000014;
   }
+
+  .searchBarLeft {
+    display: flex;
+    align-items: center;
+  }
+
   .searchBarRight {
     position: relative;
     width: 44px;
@@ -18,14 +26,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     &.active {
       background-color: #000000;
     }
   }
+
   .filterIcon {
     width: 20px;
     height: 20px;
   }
+
   .filterCount {
     background-color: #000000;
     position: absolute;
@@ -41,6 +52,7 @@
     justify-content: center;
     font-size: 11px;
   }
+
   .searchIcon {
     width: 20px;
     height: 20px;

src/components/SearchBar/index.tsx

@@ -8,20 +8,24 @@ interface IProps {
   isSelect: boolean;
   filterCount: number;
   onChange: (value: string) => void;
+  value: string;
+  onInputClick: () => void;
 }
 
 const SearchBarComponent = (props: IProps) => {
-  const { handleFilterIcon, isSelect, filterCount, onChange } = props;
+  const { handleFilterIcon, isSelect, filterCount, onChange, value, onInputClick } = props;
+
   const handleChange = (value: string) => {
     onChange && onChange(value);
   };
   return (
     <>
       <SearchBar
+        clearable={false}
         leftIn={
-          <div>
+          <View className={styles.searchBarLeft}>
             <Image className={styles.searchIcon} src={img.ICON_SEARCH} />
-          </div>
+          </View>
         }
         right={
           <View
@@ -42,6 +46,8 @@ const SearchBarComponent = (props: IProps) => {
         className={styles.searchBar}
         placeholder="搜索上海的球局和场地"
         onChange={handleChange}
+        value={value}
+        onInputClick={onInputClick}
       />
     </>
   );

src/components/TextareaTag/TextareaTag.tsx

@@ -19,7 +19,7 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
   value, 
   onChange, 
   placeholder = '请输入',
-  maxLength = 500,
+  maxLength = 1000,
   options = []
 }) => {
   // 处理文本输入变化

src/components/TimePicker/README.md

@@ -0,0 +1,77 @@
+# TimePicker 时间选择器组件
+
+## 功能特性
+
+- 使用自定义样式重写PickerViewColumn功能
+- 完全还原原生PickerView的样式和动画效果
+- 支持年份和月份选择
+- 平滑的滚动动画和切换效果
+- 响应式设计，支持触摸滚动
+- 渐变遮罩效果增强视觉层次
+
+## 技术实现
+
+### 核心特性
+- 使用ScrollView替代PickerViewColumn
+- 自定义滚动逻辑实现选项对齐
+- CSS动画和过渡效果还原原生体验
+- 智能滚动位置计算和自动对齐
+
+### 样式还原
+- 选中项指示器（高亮背景）
+- 渐变遮罩效果（顶部和底部）
+- 平滑的过渡动画
+- 精确的尺寸和间距
+
+## 使用方法
+
+```tsx
+import { TimePicker } from '@/components/TimePicker'
+
+const [visible, setVisible] = useState(false)
+
+<TimePicker
+  visible={visible}
+  onClose={() => setVisible(false)}
+  onConfirm={(year, month) => {
+    console.log('选择的时间:', year, month)
+    setVisible(false)
+  }}
+  defaultYear={2024}
+  defaultMonth={6}
+  minYear={2020}
+  maxYear={2030}
+/>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | boolean | - | 是否显示选择器 |
+| visible | boolean | - | 是否显示选择器 |
+| onClose | () => void | - | 关闭回调 |
+| onConfirm | (year: number, month: number) => void | - | 确认选择回调 |
+| defaultYear | number | 当前年份 | 默认选中的年份 |
+| defaultMonth | number | 当前月份 | 默认选中的月份 |
+| minYear | number | 2020 | 最小年份 |
+| maxYear | number | 2030 | 最大年份 |
+
+## 样式定制
+
+组件使用CSS Modules，可以通过修改`index.module.scss`文件来自定义样式：
+
+- `.time-picker-popup`: 弹出层容器
+- `.picker-container`: 选择器容器
+- `.custom-picker`: 自定义选择器
+- `.picker-indicator`: 选中项指示器
+- `.picker-column`: 选择列
+- `.picker-item`: 选择项
+- `.picker-item-active`: 激活状态的选择项
+
+## 测试
+
+运行测试页面：
+```tsx
+import TimePickerTest from '@/components/TimePicker/test'
+```

src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,233 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { View, Text, ScrollView } from '@tarojs/components'
+import { CommonPopup } from '../index'
+import styles from './index.module.scss'
+
+export interface TimePickerProps {
+  visible: boolean
+  onClose: () => void
+  onConfirm: (year: number, month: number) => void
+  defaultYear?: number
+  defaultMonth?: number
+  minYear?: number
+  maxYear?: number
+}
+
+const TimePicker: React.FC<TimePickerProps> = ({
+  visible,
+  onClose,
+  onConfirm,
+  defaultYear = new Date().getFullYear(),
+  defaultMonth = new Date().getMonth() + 1,
+  minYear = 2020,
+  maxYear = 2030
+}) => {
+  const [selectedYear, setSelectedYear] = useState(defaultYear)
+  const [selectedMonth, setSelectedMonth] = useState(defaultMonth)
+  const [yearScrollTop, setYearScrollTop] = useState(0)
+  const [monthScrollTop, setMonthScrollTop] = useState(0)
+  
+  const yearScrollRef = useRef<any>(null)
+  const monthScrollRef = useRef<any>(null)
+  
+  // 计算当前选项在数组中的索引
+  const getYearIndex = (year: number) => year - minYear
+  const getMonthIndex = (month: number) => month - 1
+
+  // 生成选择器的选项数据
+  const yearOptions = Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
+    text: `${minYear + index}年`,
+    value: minYear + index
+  }))
+  
+  const monthOptions = Array.from({ length: 12 }, (_, index) => ({
+    text: `${index + 1}月`,
+    value: index + 1
+  }))
+
+  // 计算滚动位置 - 确保每次只显示一个选项
+  const calculateScrollTop = (index: number) => {
+    const itemHeight = 48 // 每个选项的高度
+    const containerHeight = 216 // 容器高度
+    const centerOffset = (containerHeight - itemHeight) / 2
+    return index * itemHeight - centerOffset
+  }
+
+  // 获取当前可见的选项数量
+  const getVisibleItemCount = () => {
+    const containerHeight = 216
+    const itemHeight = 48
+    return Math.floor(containerHeight / itemHeight)
+  }
+
+  useEffect(() => {
+    if (visible) {
+      setSelectedYear(defaultYear)
+      setSelectedMonth(defaultMonth)
+      
+      // 设置初始滚动位置
+      const yearScrollTop = calculateScrollTop(getYearIndex(defaultYear))
+      const monthScrollTop = calculateScrollTop(getMonthIndex(defaultMonth))
+      setYearScrollTop(yearScrollTop)
+      setMonthScrollTop(monthScrollTop)
+    }
+  }, [visible, defaultYear, defaultMonth])
+
+  // 处理年份滚动
+  const handleYearScroll = (event: any) => {
+    const scrollTop = event.detail.scrollTop
+    const itemHeight = 48
+    const containerHeight = 216
+    const centerOffset = (containerHeight - itemHeight) / 2
+    
+    // 计算当前选中的年份索引
+    const currentIndex = Math.round((scrollTop + centerOffset) / itemHeight)
+    const clampedIndex = Math.max(0, Math.min(currentIndex, yearOptions.length - 1))
+    const newYear = minYear + clampedIndex
+    
+    if (newYear !== selectedYear) {
+      setSelectedYear(newYear)
+    }
+  }
+
+  // 处理年份滚动结束，自动对齐
+  const handleYearScrollEnd = () => {
+    const yearIndex = getYearIndex(selectedYear)
+    const alignedScrollTop = calculateScrollTop(yearIndex)
+    // 使用setTimeout确保滚动动画完成后再对齐
+    setTimeout(() => {
+      setYearScrollTop(alignedScrollTop)
+    }, 100)
+  }
+
+  // 处理月份滚动
+  const handleMonthScroll = (event: any) => {
+    const scrollTop = event.detail.scrollTop
+    const itemHeight = 48
+    const containerHeight = 216
+    const centerOffset = (containerHeight - itemHeight) / 2
+    
+    // 计算当前选中的月份索引
+    const currentIndex = Math.round((scrollTop + centerOffset) / itemHeight)
+    const clampedIndex = Math.max(0, Math.min(currentIndex, monthOptions.length - 1))
+    const newMonth = clampedIndex + 1
+    
+    if (newMonth !== selectedMonth) {
+      setSelectedMonth(newMonth)
+    }
+  }
+
+  // 处理月份滚动结束，自动对齐
+  const handleMonthScrollEnd = () => {
+    const monthIndex = getMonthIndex(selectedMonth)
+    const alignedScrollTop = calculateScrollTop(monthIndex)
+    // 使用setTimeout确保滚动动画完成后再对齐
+    setTimeout(() => {
+      setMonthScrollTop(alignedScrollTop)
+    }, 100)
+  }
+
+  const handleConfirm = () => {
+    onConfirm(selectedYear, selectedMonth)
+    onClose()
+  }
+
+  if (!visible) return null
+
+  return (
+    <CommonPopup
+      visible={visible}
+      onClose={onClose}
+      onConfirm={handleConfirm}
+      showHeader={false}
+      hideFooter={false}
+      cancelText="返回"
+      confirmText="完成"
+      position="bottom"
+      round={true}
+      className={styles['time-picker-popup']}
+    >
+      {/* 拖拽手柄 */}
+      <View className={styles['popup-handle']} />
+      
+      {/* 时间选择器 */}
+      <View className={styles['picker-container']}>
+        {/* 自定义多列选择器 */}
+        <View className={styles['picker-wrapper']}>
+          <View className={styles['custom-picker']}>
+            {/* 选中项指示器 */}
+            <View className={styles['picker-indicator']} />
+            
+            {/* 年份列 */}
+            <View className={styles['picker-column']}>
+              <ScrollView
+                ref={yearScrollRef}
+                scrollY
+                scrollTop={yearScrollTop}
+                onScroll={handleYearScroll}
+                onTouchEnd={handleYearScrollEnd}
+                onScrollToLower={handleYearScrollEnd}
+                onScrollToUpper={handleYearScrollEnd}
+                className={styles['picker-scroll']}
+                scrollWithAnimation={true}
+                enhanced={true}
+                showScrollbar={false}
+                bounces={false}
+                fastDeceleration={true}
+              >
+                <View className={styles['picker-padding']} />
+                {yearOptions.map((option, index) => (
+                  <View 
+                    key={option.value} 
+                    className={`${styles['picker-item']} ${
+                      option.value === selectedYear ? styles['picker-item-active'] : ''
+                    }`}
+                    data-value={option.value}
+                  >
+                    <Text className={styles['picker-item-text']}>{option.text}</Text>
+                  </View>
+                ))}
+                <View className={styles['picker-padding']} />
+              </ScrollView>
+            </View>
+            
+            {/* 月份列 */}
+            <View className={styles['picker-column']}>
+              <ScrollView
+                ref={monthScrollRef}
+                scrollY
+                scrollTop={monthScrollTop}
+                onScroll={handleMonthScroll}
+                onTouchEnd={handleMonthScrollEnd}
+                onScrollToLower={handleMonthScrollEnd}
+                onScrollToUpper={handleMonthScrollEnd}
+                className={styles['picker-scroll']}
+                scrollWithAnimation={true}
+                enhanced={true}
+                showScrollbar={false}
+                bounces={false}
+                fastDeceleration={true}
+              >
+                <View className={styles['picker-padding']} />
+                {monthOptions.map((option, index) => (
+                  <View 
+                    key={option.value} 
+                    className={`${styles['picker-item']} ${
+                      option.value === selectedMonth ? styles['picker-item-active'] : ''
+                    }`}
+                    data-value={option.value}
+                  >
+                    <Text className={styles['picker-item-text']}>{option.text}</Text>
+                  </View>
+                ))}
+                <View className={styles['picker-padding']} />
+              </ScrollView>
+            </View>
+          </View>
+        </View>
+      </View>
+    </CommonPopup>
+  )
+}
+
+export default TimePicker

src/components/TimePicker/demo.module.scss

@@ -0,0 +1,81 @@
+.demoContainer {
+  padding: 20px;
+  text-align: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  color: white;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  display: block;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.subtitle {
+  font-size: 16px;
+  margin-bottom: 30px;
+  display: block;
+  opacity: 0.9;
+}
+
+.demoButton {
+  margin: 20px 0;
+  width: 250px;
+  height: 50px;
+  border-radius: 25px;
+  font-size: 18px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  
+  &:active {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(0.98);
+  }
+}
+
+.demoResult {
+  margin: 30px 0;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  text {
+    font-size: 18px;
+    font-weight: 600;
+    color: white;
+  }
+}
+
+.demoFeatures {
+  margin-top: 40px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  opacity: 0.9;
+  border-radius: 16px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.featureTitle {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  display: block;
+  color: white;
+}
+
+.featureItem {
+  font-size: 14px;
+  margin: 8px 0;
+  display: block;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.5;
+}

src/components/TimePicker/demo.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { View, Button, Text } from '@tarojs/components'
+import TimePicker from './TimePicker'
+import styles from './demo.module.scss'
+
+const TimePickerDemo: React.FC = () => {
+  const [visible, setVisible] = useState(false)
+  const [selectedTime, setSelectedTime] = useState('')
+
+  const handleConfirm = (year: number, month: number) => {
+    setSelectedTime(`${year}年${month}月`)
+    setVisible(false)
+  }
+
+  return (
+    <View className={styles.demoContainer}>
+      <Text className={styles.title}>TimePicker 演示</Text>
+      <Text className={styles.subtitle}>体验"一个一个往下翻"的效果</Text>
+      
+      <Button 
+        type="primary" 
+        onClick={() => setVisible(true)}
+        className={styles.demoButton}
+      >
+        打开时间选择器
+      </Button>
+      
+      {selectedTime && (
+        <View className={styles.demoResult}>
+          <Text>已选择: {selectedTime}</Text>
+        </View>
+      )}
+      
+      <View className={styles.demoFeatures}>
+        <Text className={styles.featureTitle}>特性说明:</Text>
+        <Text className={styles.featureItem}>• 每次只显示一个选项</Text>
+        <Text className={styles.featureItem}>• 完美居中对齐</Text>
+        <Text className={styles.featureItem}>• 平滑滚动动画</Text>
+        <Text className={styles.featureItem}>• 触摸结束后自动对齐</Text>
+      </View>
+      
+      <TimePicker
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={handleConfirm}
+        defaultYear={2024}
+        defaultMonth={6}
+        minYear={2020}
+        maxYear={2030}
+      />
+    </View>
+  )
+}
+
+export default TimePickerDemo

src/components/TimePicker/index.module.scss

@@ -0,0 +1,187 @@
+/* 时间选择器弹出层样式 */
+.time-picker-popup {
+  .common-popup-content {
+    padding: 0;
+  }
+}
+
+.popup-handle {
+  width: 32px;
+  height: 4px;
+  background: #e0e0e0;
+  border-radius: 2px;
+  margin: 12px auto;
+}
+
+.picker-container {
+  padding: 26px 16px 0 16px;
+  background: #fff;
+}
+
+.picker-wrapper {
+  position: relative;
+}
+
+.custom-picker {
+  position: relative;
+  width: 100%;
+  height: 216px;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 确保只显示一个选项 */
+  perspective: 1000px;
+  /* 水平布局 */
+  flex-direction: row;
+  /* 确保列之间有适当间距 */
+  gap: 0;
+}
+
+/* 选中项指示器 */
+.picker-indicator {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: rgba(22, 24, 35, 0.05);
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(22, 24, 35, 0.1);
+  /* 确保指示器完美覆盖选中项 */
+  margin: 0 20px;
+  width: calc(100% - 40px);
+}
+
+.picker-column {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 水平居中布局 */
+  min-width: 0;
+  /* 确保列之间有适当间距 */
+  padding: 0 8px;
+  
+  &:first-child {
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  /* 确保滚动容器正确显示 */
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 84px;
+    pointer-events: none;
+    z-index: 2;
+  }
+  
+  &::before {
+    top: 0;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
+  }
+  
+  &::after {
+    bottom: 0;
+    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
+  }
+}
+
+.picker-scroll {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
+  /* 确保滚动行为 */
+  scroll-snap-type: y mandatory;
+  /* 优化滚动性能 */
+  overscroll-behavior: contain;
+}
+
+.picker-padding {
+  height: 84px; /* (216 - 48) / 2 = 84px，用于居中对齐 */
+  /* 确保padding区域不可见 */
+  opacity: 0;
+  pointer-events: none;
+}
+
+.picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  width: 100%;
+  font-size: 16px;
+  color: #161823;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  position: relative;
+  will-change: transform, color;
+  /* 确保每个选项都能正确对齐 */
+  scroll-snap-align: center;
+  /* 水平居中 */
+  text-align: center;
+  
+  &.picker-item-active {
+    color: #161823;
+    font-weight: 600;
+    transform: scale(1.02);
+    
+    .picker-item-text {
+      color: #161823;
+      font-weight: 600;
+    }
+  }
+  
+  &:not(.picker-item-active) {
+    color: rgba(22, 24, 35, 0.6);
+    
+    .picker-item-text {
+      color: rgba(22, 24, 35, 0.6);
+    }
+  }
+}
+
+.picker-item-text {
+  font-size: 16px;
+  color: inherit;
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  user-select: none;
+  width: 100%;
+  line-height: 48px;
+  white-space: nowrap;
+  /* 确保文字完美居中 */
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 强制居中对齐 */
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 滚动条隐藏 */
+.picker-scroll {
+  ::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+}
+
+/* 移除重复的渐变遮罩代码，已在.picker-column中定义 */

src/components/TimePicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TimePicker'
+export type { TimePickerProps } from './TimePicker'

src/components/TimePicker/layout-test.module.scss

@@ -0,0 +1,59 @@
+.testContainer {
+  padding: 20px;
+  text-align: center;
+  background: #f8f9fa;
+  min-height: 100vh;
+}
+
+.testTitle {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  display: block;
+  color: #333;
+}
+
+.testSubtitle {
+  font-size: 16px;
+  margin-bottom: 30px;
+  display: block;
+  color: #666;
+}
+
+.testInfo {
+  margin: 20px 0;
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: left;
+  
+  text {
+    font-size: 14px;
+    margin: 8px 0;
+    display: block;
+    color: #555;
+    line-height: 1.5;
+  }
+}
+
+.testButton {
+  margin: 20px 0;
+  width: 200px;
+  height: 44px;
+  border-radius: 22px;
+  font-size: 16px;
+  background: #007bff;
+  border: none;
+}
+
+.testResult {
+  margin: 20px 0;
+  color: white;
+  border-radius: 8px;
+  
+  text {
+    font-size: 16px;
+    font-weight: 600;
+  }
+}

src/components/TimePicker/layout-test.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { View, Text, Button } from '@tarojs/components'
+import TimePicker from './TimePicker'
+import styles from './layout-test.module.scss'
+
+const LayoutTest: React.FC = () => {
+  const [visible, setVisible] = useState(false)
+  const [selectedTime, setSelectedTime] = useState('')
+
+  const handleConfirm = (year: number, month: number) => {
+    setSelectedTime(`${year}年${month}月`)
+    setVisible(false)
+  }
+
+  return (
+    <View className={styles.testContainer}>
+      <Text className={styles.testTitle}>布局测试</Text>
+      <Text className={styles.testSubtitle}>验证年份和月份的水平居中对齐</Text>
+      
+      <View className={styles.testInfo}>
+        <Text>• 年份和月份应该在同一行显示</Text>
+        <Text>• 两个列应该水平居中对齐</Text>
+        <Text>• 选中项指示器应该完美覆盖两个列</Text>
+      </View>
+      
+      <Button 
+        type="primary" 
+        onClick={() => setVisible(true)}
+        className={styles.testButton}
+      >
+        测试布局
+      </Button>
+      
+      {selectedTime && (
+        <View className={styles.testResult}>
+          <Text>选择结果: {selectedTime}</Text>
+        </View>
+      )}
+      
+      <TimePicker
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={handleConfirm}
+        defaultYear={2024}
+        defaultMonth={6}
+        minYear={2020}
+        maxYear={2030}
+      />
+    </View>
+  )
+}

src/components/TimePicker/test.module.scss

@@ -0,0 +1,36 @@
+.container {
+  padding: 20px;
+  text-align: center;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 30px;
+  display: block;
+}
+
+.button {
+  margin: 20px 0;
+  width: 200px;
+  height: 44px;
+  border-radius: 22px;
+  font-size: 16px;
+}
+
+.result {
+  margin-top: 30px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  text {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+}

src/components/TimePicker/test.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { View, Button, Text } from '@tarojs/components'
+import TimePicker from './TimePicker'
+import styles from './test.module.scss'
+
+const TimePickerTest: React.FC = () => {
+  const [visible, setVisible] = useState(false)
+  const [selectedTime, setSelectedTime] = useState('')
+
+  const handleConfirm = (year: number, month: number) => {
+    setSelectedTime(`${year}年${month}月`)
+    setVisible(false)
+  }
+
+  return (
+    <View className={styles.container}>
+      <Text className={styles.title}>TimePicker 组件测试</Text>
+      
+      <Button 
+        type="primary" 
+        onClick={() => setVisible(true)}
+        className={styles.button}
+      >
+        打开时间选择器
+      </Button>
+      
+      {selectedTime && (
+        <View className={styles.result}>
+          <Text>已选择: {selectedTime}</Text>
+        </View>
+      )}
+      
+      <TimePicker
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={handleConfirm}
+        defaultYear={2024}
+        defaultMonth={6}
+        minYear={2020}
+        maxYear={2030}
+      />
+    </View>
+  )
+}
+
+export default TimePickerTest

src/components/TimeSelector/TimeSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { View, Text, } from '@tarojs/components'
-import { getDate, getTime } from '@/utils/timeUtils'
+import { getDate, getTime, getDateStr, getEndTime } from '@/utils/timeUtils'
-import DateTimePicker from '@/components/DateTimePicker'
+import DialogCalendarCard from '@/components/CalendarCard/DialogCalendarCard'
 import './TimeSelector.scss'
 
 export interface TimeRange {
@@ -23,8 +23,11 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
 }) => {
   // 格式化日期显示
   const [visible, setVisible] = useState(false)
-  const handleConfirm = (year: number, month: number) => {
+  const handleConfirm = (date: Date) => {
-    console.log('选择的日期:', year, month)
+    console.log('选择的日期:', date)
+    const start_time = getDateStr(date)
+    const end_time = getEndTime(start_time)
+    if (onChange) onChange({start_time, end_time})
   }
   return (
     <View className='time-selector'>
@@ -56,14 +59,10 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
           </View>
         </View>
       </View>
-      <DateTimePicker
+      <DialogCalendarCard
-        visible={visible}
+              visible={visible}
-        onClose={() => setVisible(false)}
+              onChange={handleConfirm}
-        onConfirm={handleConfirm}
+              onClose={() => setVisible(false)}
-        defaultYear={2025}
-        defaultMonth={11}
-        minYear={2020}
-        maxYear={2030}
       />
     </View>
   )

src/components/UploadCover/index.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { Image, View, Text } from '@tarojs/components'
 import img from '../../config/images'
-import UploadSourcePopup from './upload-source-popup'
+import UploadSourcePopup, { sourceMap } from './upload-source-popup'
 import UploadFromWx from './upload-from-wx'
 import { CommonPopup } from '../'
 
@@ -58,6 +58,9 @@ export default function UploadCover(props: UploadCoverProps) {
   } = props
 
   const [visible, setVisible] = useState(false)
+  const uploadSourcePopupRef = useRef<{
+    show: (sourceType: sourceType, maxCount: number) => void
+  }>(null)
 
   const onAdd = useCallback((images: CoverImageValue[]) => {
     // FIXME: prev is not latest value
@@ -86,6 +89,7 @@ export default function UploadCover(props: UploadCoverProps) {
         round
         position="bottom"
         hideFooter
+        zIndex={1000}
       >
         <View className="upload-source-popup-container" style={{ height: source.length * 56 + 52 + 'px' }}>
           {
@@ -96,7 +100,9 @@ export default function UploadCover(props: UploadCoverProps) {
                     item === 'album' ? (
                       <UploadFromWx onAdd={onWxAdd} maxCount={maxCount - value.length} />
                     ) : (
-                      <UploadSourcePopup sourceType={item} onAdd={onAdd} maxCount={maxCount - value.length} />
+                      <View className="upload-source-popup-item-text" onClick={() => uploadSourcePopupRef.current?.show(item, maxCount - value.length)}>
+                        <Text>{sourceMap.get(item)}</Text>
+                      </View>
                     )
                   }
                 </View>
@@ -105,6 +111,7 @@ export default function UploadCover(props: UploadCoverProps) {
           }
         </View>
       </CommonPopup>
+      <UploadSourcePopup ref={uploadSourcePopupRef} onAdd={onAdd} />
       <div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
         {value.length < maxCount && (
           <div className="upload-cover-act" onClick={() => setVisible(true)}>

src/components/UploadCover/upload-source-popup.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
 import { Image, View, Text, ScrollView, Button } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import img from '../../config/images'
@@ -17,12 +17,10 @@ type ImageItem = {
 }
 
 interface UploadImageProps {
-  sourceType: SourceType
   onAdd: (images: ImageItem[]) => void
-  maxCount: number
 }
 
-const sourceMap = new Map<SourceType, string>([
+export const sourceMap = new Map<SourceType, string>([
   ['history', '历史图库'],
   ['preset', '预设图库']
 ])
@@ -31,13 +29,13 @@ const checkImageSelected = (images: ImageItem[], image: ImageItem) => {
   return images.some(item => item.id === image.id)
 }
 
-export default function UploadImage(props: UploadImageProps) {
+export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
   const {
-    sourceType = 'history',
     onAdd = () => void 0,
-    maxCount = 9,
   } = props
   const [visible, setVisible] = useState(false)
+  const [sourceType, setSourceType] = useState<SourceType>('history')
+  const [maxCount, setMaxCount] = useState(9)
   const [images, setImages] = useState<ImageItem[]>([])
   const [selectedImages, setSelectedImages] = useState<ImageItem[]>([])
 
@@ -54,36 +52,50 @@ export default function UploadImage(props: UploadImageProps) {
     }
   }
 
-  useEffect(() => {
+  useImperativeHandle(ref, () => ({
-    if (visible) {
+    show: (sourceType: SourceType, maxCount: number) => {
-      publishService.getPictures({
+      setVisible(true)
-        pageOption: {
+      setSourceType(sourceType)
-          page: 1,
+      setMaxCount(maxCount)
-          pageSize: 100,
+      fetchImages()
-        },
-        seachOption: {
-          tag: '',
-          resource_type: 'image',
-          dateRange: [],
-        },
-      }).then(res => {
-        if (res.success) {
-          setImages(res.data.data.rows.map(item => ({
-            id: Date.now().toString(),
-            url: item.thumbnail_url,
-          })))
-        } else {
-          // TODO: 显示错误信息
-          Taro.showToast({
-            title: res.message,
-            icon: 'none'
-          })
-        }
-      })
-    } else {
-      setSelectedImages([])
     }
-  }, [visible])
+  }))
+
+  function fetchImages() {
+    publishService.getPictures({
+      pageOption: {
+        page: 1,
+        pageSize: 100,
+      },
+      seachOption: {
+        tag: '',
+        resource_type: 'image',
+        dateRange: [],
+      },
+    }).then(res => {
+      if (res.success) {
+        let start = 0
+        setImages(res.data.data.rows.map(item => ({
+          id: (Date.now() + start++).toString(),
+          url: item.thumbnail_url,
+        })))
+      } else {
+        // TODO: 显示错误信息
+        Taro.showToast({
+          title: res.message,
+          icon: 'none'
+        })
+      }
+    })
+  }
+
+  function onClose() {
+    setVisible(false)
+    setSelectedImages([])
+    setImages([])
+    setSourceType('history')
+    setMaxCount(9)
+  }
 
   const handleConfirm = () => {
     if (selectedImages.length > 0) {
@@ -103,10 +115,11 @@ export default function UploadImage(props: UploadImageProps) {
     <>
       <CommonPopup
         visible={visible}
-        onClose={() => setVisible(false)}
+        onClose={onClose}
         round
         hideFooter
         position='bottom'
+        zIndex={1001}
       >
         <View className="upload-popup">
           <View className="upload-popup-title">{sourceMap.get(sourceType)}</View>
@@ -154,8 +167,7 @@ export default function UploadImage(props: UploadImageProps) {
           )}
         </View>
       </CommonPopup>
-      <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View>
+      {/* <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View> */}
     </>
   );
-};
+});
-

src/components/index.ts

@@ -9,19 +9,28 @@ import TimeSelector from './TimeSelector'
 import TitleTextarea from './TitleTextarea'
 import CommonPopup from './CommonPopup'
 import DateTimePicker from './DateTimePicker/DateTimePicker'
+import TimePicker from './TimePicker/TimePicker'
+import CalendarCard, { DialogCalendarCard } from './CalendarCard'
+import CommonDialog from './CommonDialog'
+import PublishMenu from './PublishMenu/PublishMenu'
 import UploadCover from './UploadCover'
 
-export {
+ export { 
-    ActivityTypeSwitch,
+     ActivityTypeSwitch, 
-    TextareaTag,
+     TextareaTag, 
-    FormSwitch,
+     FormSwitch,
-    ImageUpload,
+     ImageUpload, 
-    Range,
+     Range, 
-    NumberInterval,
+     NumberInterval, 
-    TimeSelector,
+     TimeSelector, 
-    TitleTextarea,
+     TitleTextarea,
-    CommonPopup,
+     CommonPopup,
-    DateTimePicker,
+     DateTimePicker,
-    UploadCover,
+     TimePicker,
-}
+    CalendarCard,
+    DialogCalendarCard,
+    CommonDialog,
+    PublishMenu,
+    UploadCover
+ }
 

src/config/formSchema/publishBallFormSchema.ts

@@ -50,7 +50,8 @@ export const publishBallFormSchema: FormFieldConfig[] = [
     placeholder: '请选择活动类型',
     required: true,
     props: {
-      maxCount: 9
+      maxCount: 9,
+      source: ['album', 'history', 'preset']
     }
   },
   {
@@ -121,7 +122,8 @@ export const publishBallFormSchema: FormFieldConfig[] = [
     defaultValue: 1,
     props: {
       showSummary: true,
-      summary: '最少1人，最多4人',
+      min: 1,
+      max: 20,
     }
   },
   
@@ -146,6 +148,9 @@ export const publishBallFormSchema: FormFieldConfig[] = [
     type: FieldType.TEXTAREATAG,
     placeholder: '补充性别偏好、特殊要求和注意事项等信息',
     required: true,
+    props: {
+      maxLength: 1000,
+    },
     options:[
       { label: '仅限男生', value: '仅限男生' },
       { label: '仅限女生', value: '仅限女生' },

src/config/images.js

@@ -19,7 +19,6 @@ export default {
     ICON_LIST_RIGHT_ARROW: require('@/static/list/icon-list-right-arrow.svg'),
     ICON_ARROW_LEFT: require('@/static/detail/icon-arrow-left.svg'),
     ICON_LOGO_GO: require('@/static/detail/icon-logo-go.svg'),
-    ICON_SEARCH: require('@/static/publishBall/icon-search.svg'),
     ICON_MAP: require('@/static/publishBall/icon-map.svg'),
     ICON_STADIUM: require('@/static/publishBall/icon-stadium.svg'),
     ICON_ARRORW_SMALL: require('@/static/publishBall/icon-arrow-small.svg'),
@@ -28,6 +27,11 @@ export default {
     ICON_ADD: require('@/static/publishBall/icon-add.svg'),
     ICON_COPY: require('@/static/publishBall/icon-arrow-right.svg'),
     ICON_DELETE: require('@/static/publishBall/icon-delete.svg'),
+    ICON_RIGHT_MAX: require('@/static/publishBall/icon-right-max.svg'),
+    ICON_PLUS: require('@/static/publishBall/icon-plus.svg'),
+    ICON_GROUP: require('@/static/publishBall/icon-group.svg'),
+    ICON_PERSON: require('@/static/publishBall/icon-person.svg'),
+    ICON_PUBLISH: require('@/static/publishBall/icon-publish.png'),
     ICON_CIRCLE_UNSELECT: require('@/static/publishBall/icon-circle-unselect.svg'),
     ICON_CIRCLE_SELECT: require('@/static/publishBall/icon-circle-select-ring.svg'),
     ICON_CIRCLE_SELECT_ARROW: require('@/static/publishBall/icon-circle-select-arrow.svg'),
@@ -41,4 +45,15 @@ export default {
     ICON_DETAIL_COMMENT: require('@/static/detail/icon-comment.svg'),
     ICON_DETAIL_COMMENT_DARK: require('@/static/detail/icon-comment-dark.svg'),
     ICON_DETAIL_SHARE: require('@/static/detail/icon-share-dark.svg'),
+    ICON_GUIDE_BAR_PUBLISH: require('@/static/common/guide-bar-publish.svg'),
+    ICON_NAVIGATOR_BACK: require('@/static/common/navigator-back.svg'),
+    ICON_LIST_PLAYING_GAME: require('@/static/list/icon-paying-game.svg'),
+    ICON_LIST_LOAD_ERROR: require('@/static/list/icon-load-error.svg'),
+    ICON_LIST_RELOAD: require('@/static/list/icon-reload.svg'),
+    ICON_LIST_SEARCH_SEARCH: require('@/static/search/icon-search.svg'),
+    ICON_LIST_SEARCH_BACK: require('@/static/search/icon-back.svg'),
+    ICON_LIST_SEARCH_CLEAR: require('@/static/search/icon-search-clear.svg'),
+    ICON_LIST_SEARCH_CLEAR_HISTORY: require('@/static/search/icon-clear-history.svg'),
+    ICON_LIST_SEARCH_SUGGESTION: require('@/static/search/icon-search-suggestion.svg'),
+    ICON_LIST_INPUT_LOGO: require('@/static/list/icon-input-logo.svg'),
   }

src/container/inputCustomerNavbar/index.scss

@@ -0,0 +1,47 @@
+  .inputCustomerNavbarContainer {
+    padding-left: 17px;
+    display: flex;
+    gap: 8px;
+
+
+    .logo {
+      width: 28px;
+      height: 16px;
+    }
+
+    .icon16 {
+      width: 16px;
+      height: 16px;
+    }
+
+    .navContent {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      width: 73%;
+      height: max-content;
+      padding-top: 5px;
+    }
+
+    .searchContainer {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 5.85px;
+      padding: 7.8px;
+      border-radius: 30px;
+      border: 0.488px solid rgba(0, 0, 0, 0.06);
+      box-shadow: 0 3.902px 46.829px 0 rgba(0, 0, 0, 0.08);
+      height: 30px;
+      box-sizing: border-box;
+      font-size: 13.659px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 17.561px;
+      flex: 1;
+
+      .nut-input {
+        padding: 0;
+      }
+    }
+  }

src/container/inputCustomerNavbar/index.tsx

@@ -0,0 +1,74 @@
+import { View, Image } from "@tarojs/components";
+import img from "@/config/images";
+import { getCurrentLocation } from "@/utils/locationUtils";
+import "./index.scss";
+import { useEffect } from "react";
+import { useGlobalState } from "@/store/global";
+import { useListState } from "@/store/listStore";
+import CustomNavbar from "@/components/CustomNavbar";
+import { Input } from "@nutui/nutui-react-taro";
+import Taro from "@tarojs/taro";
+
+interface IProps {
+  icon: string;
+}
+
+const ListHeader = (props: IProps) => {
+  const { icon } = props;
+  const { updateState, statusNavbarHeightInfo } = useGlobalState();
+  const { searchValue } = useListState();
+  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
+
+  // 获取位置信息
+  const getCurrentLocal = () => {
+    updateState({
+      getLocationLoading: true,
+    });
+    getCurrentLocation().then((res) => {
+      updateState({
+        getLocationLoading: false,
+        location: res || {},
+      });
+    });
+  };
+  useEffect(() => {
+    getCurrentLocal();
+  }, []);
+
+  const handleInputClick = () => {
+    Taro.navigateTo({
+      url: "/pages/search/index",
+    });
+  }
+
+  return (
+    <CustomNavbar>
+      <View
+        className="inputCustomerNavbarContainer"
+        style={{
+          height: `${navbarHeight}px`,
+          paddingTop: `${statusBarHeight}px`,
+        }}
+      >
+        <View className="navContent">
+          {/* logo */}
+          <Image src={icon} className="logo" />
+          {/* 搜索框 */}
+          <View className="searchContainer">
+            <Image
+              className="searchIcon icon16"
+              src={img.ICON_LIST_SEARCH_SEARCH}
+            />
+            <Input
+              placeholder="搜索上海的球局和场地"
+              clearable={false}
+              value={searchValue}
+              onClick={handleInputClick}
+            />
+          </View>
+        </View>
+      </View>
+    </CustomNavbar>
+  );
+};
+export default ListHeader;

src/container/listContainer/index.scss

@@ -0,0 +1,22 @@
+.listContentWrapper {
+  padding: 0 5px;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  // background-color: red;
+
+  .recommendTextWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 22px 10px;
+  }
+
+  .recommendText {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+}

src/container/listContainer/index.tsx

@@ -0,0 +1,45 @@
+import { View, Text } from "@tarojs/components";
+import ListCard from "@/components/ListCard";
+import ListLoadError from "@/components/ListLoadError";
+import ListCardSkeleton from "@/components/ListCardSkeleton";
+import "./index.scss";
+
+const ListContainer = (props) => {
+  const { loading, data = [], error, reload, recommendList } = props;
+
+  if (error) {
+    return <ListLoadError reload={reload} />;
+  }
+
+  const renderList = (list) => {
+    if (loading && list.length === 0) {
+      return (
+        <>
+          {new Array(10).fill(0).map(() => {
+            return <ListCardSkeleton />;
+          })}
+        </>
+      );
+    }
+
+    return (
+      <>
+        {list?.map((match, index) => (
+          <ListCard key={match.id || index} {...match} />
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <View className="listContentWrapper">
+      {renderList(data)}
+      <View className="recommendTextWrapper">
+        <Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
+      </View>
+      {renderList(recommendList)}
+    </View>
+  );
+};
+
+export default ListContainer;

src/container/listCustomNavbar/index.module.scss

@@ -0,0 +1,43 @@
+  .container {
+    padding-left: 17px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .line {
+      width: 1px;
+      height: 25px;
+      background-color: #0000000F;
+    }
+
+    .logo {
+      width: 60px;
+      height: 34px;
+    }
+
+    .change {
+      width: 12px;
+      height: 12px;
+    }
+
+    .cityWrapper {
+      line-height: 20px;
+    }
+
+    .city {
+      font-weight: 600;
+      font-size: 13px;
+      line-height: 20px;
+    }
+
+    .infoWrapper {
+      line-height: 12px;
+    }
+
+    .info {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      color: #3C3C4399;
+    }
+  }

src/container/listCustomNavbar/index.tsx

@@ -0,0 +1,69 @@
+import { View, Text, Image } from "@tarojs/components";
+import img from "@/config/images";
+import { getCurrentLocation } from "@/utils/locationUtils";
+import styles from "./index.module.scss";
+import { useEffect } from "react";
+import { useGlobalState } from "@/store/global";
+import { useListState } from "@/store/listStore";
+import CustomNavbar from '@/components/CustomNavbar'
+
+const ListHeader = () => {
+  const {
+    updateState,
+    location,
+    getLocationText,
+    getLocationLoading,
+    statusNavbarHeightInfo,
+  } = useGlobalState();
+  const { gamesNum } = useListState();
+  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
+
+  // 获取位置信息
+  const getCurrentLocal = () => {
+    updateState({
+      getLocationLoading: true,
+    });
+    getCurrentLocation().then((res) => {
+      updateState({
+        getLocationLoading: false,
+        location: res || {},
+      });
+    });
+  };
+  useEffect(() => {
+    getCurrentLocal();
+  }, []);
+
+  const currentAddress = getLocationLoading
+    ? getLocationText
+    : location?.address;
+
+  return (
+    <CustomNavbar>
+      <View
+        className={styles.container}
+        style={{
+          height: `${navbarHeight}px`,
+          paddingTop: `${statusBarHeight}px`,
+        }}
+      >
+        {/* logo */}
+        <Image src={img.ICON_LOGO} className={styles.logo} />
+        <View className={styles.line} />
+        <View className={styles.content}>
+          <View className={styles.cityWrapper}>
+            {/* 位置 */}
+            <Text className={styles.city}>{currentAddress}</Text>
+            {!getLocationLoading && (
+              <Image src={img.ICON_CHANGE} className={styles.change} />
+            )}
+          </View>
+          <View className={styles.infoWrapper}>
+            <Text className={styles.info}>附近${gamesNum}场球局</Text>
+          </View>
+        </View>
+      </View>
+    </CustomNavbar>
+  );
+};
+export default ListHeader;

src/nutui-theme.scss

@@ -3,7 +3,7 @@
 // ==========================================
 
 // 引入NutUI原始样式（如果需要）
-// @import '@nutui/nutui-react-taro/dist/style.css';
+@import '@nutui/nutui-react-taro/dist/style.css';
 
 // 全局主题变量覆盖
 $nut-primary-color: #000000 !important;

src/pages/detail/index.scss

@@ -29,6 +29,7 @@
     color: #fff;
     display: flex;
     align-items: center;
+    background: rgba(0, 0, 0, 0.10);
 
     .detail-navigator-back {
       border-right: 1px solid #444;
@@ -123,6 +124,7 @@
       &-tags {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
         gap: 6px;
 
         &-tag {
@@ -545,6 +547,7 @@
 
         &-scroll {
           flex: 0 0 auto;
+          width: calc(100% - 116px);
 
           &-content {
             display: flex;
@@ -813,7 +816,7 @@
               border-radius: 20px;
               border: 1px solid rgba(33, 178, 0, 0.20);
               background: rgba(255, 255, 255, 0.16);
-              padding: 12px 15px;
+              padding: 12px 0 12px 15px;
               box-sizing: border-box;
 
               &-title {
@@ -923,6 +926,52 @@
         border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, 0.06);
         background: #FFF;
+
+        .sticky-bottom-bar-share {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 4px;
+
+          &-icon {
+            width: 16px;
+            height: 16px;
+          }
+
+          &-text {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 10px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 16px; /* 160% */
+          }
+        }
+
+        &-separator {
+          width: 1px;
+          height: 24px;
+          background: rgba(0, 0, 0, 0.10);
+        }
+
+        .sticky-bottom-bar-comment {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 4px;
+
+          &-icon {
+            width: 16px;
+            height: 16px;
+          }
+
+          &-text {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 10px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 16px; /* 160% */
+          }
+        }
       }
 
       &-join-game {
@@ -938,8 +987,48 @@
         border-radius: 16px;
         border: 1px solid rgba(0, 0, 0, 0.06);
         background: #FFF;
+
+        &-price {
+          font-family: "PoetsenOne";
+          font-size: 28px;
+          font-weight: 400;
+          line-height: 24px; /* 114.286% */
+          letter-spacing: -0.56px;
+          color: #000;
+        }
       }
     }
   }
 }
 
+.share-popup-content {
+  width: 100%;
+  height: 100%;
+  padding: 20px 16px env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  // padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  & > view {
+    width: 100px;
+    height: 64px;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+
+    & > image {
+      width: 24px;
+      height: 24px;
+    }
+
+    & > text {
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}
+

src/pages/detail/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'
 import { View, Text, Button, Swiper, SwiperItem, Image, Map, ScrollView } from '@tarojs/components'
 import { Cell, Avatar, Progress, Popover } from '@nutui/nutui-react-taro'
-import Taro, { useRouter } from '@tarojs/taro'
+import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro'
 // 导入API服务
 import DetailService from '../../services/detailService'
 import {
@@ -9,8 +9,9 @@ import {
   useUserActions
 } from '../../store/userStore'
 import img from '../../config/images'
-import { getTextColorOnImage } from '../../utils/processImage'
+import { getTextColorOnImage } from '../../utils'
 import './index.scss'
+import { CommonPopup } from '@/components'
 
 const images = [
   'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/1a35ebbf-2361-44da-b338-7608561d0b31.png',
@@ -22,6 +23,71 @@ function insertDotInTags(tags: string[]) {
   return tags.join('-·-').split('-')
 }
 
+const SharePopup = forwardRef(({ id, from }: { id: string, from: string }, ref) => {
+  const [visible, setVisible] = useState(false)
+
+  useImperativeHandle(ref, () => ({
+    show: () => {
+      setVisible(true)
+    }
+  }))
+
+  function handleShareToWechat() {
+    useShareAppMessage(() => {
+      return {
+        title: '分享',
+        path: `/pages/detail/index?id=${id}&from=${from}`,
+      }
+    })
+  }
+
+  function handleShareToWechatMoments() {
+    useShareTimeline(() => {
+      return {
+        title: '分享',
+        path: `/pages/detail/index?id=${id}&from=${from}`,
+      }
+    })
+  }
+
+  function handleSaveToLocal() {
+    Taro.saveImageToPhotosAlbum({
+      filePath: images[0],
+      success: () => {
+        Taro.showToast({ title: '保存成功', icon: 'success' })
+      },
+      fail: () => {
+        Taro.showToast({ title: '保存失败', icon: 'none' })
+      },
+    })
+  }
+
+  return (
+    <CommonPopup
+      title="分享"
+      visible={visible}
+      onClose={() => { setVisible(false) }}
+      hideFooter
+      style={{ minHeight: '100px' }}
+    >
+      <View catchMove className='share-popup-content'>
+        <View onClick={handleShareToWechat}>
+          <Image src={img.ICON_DETAIL_SHARE} />
+          <Text>分享到微信</Text>
+        </View>
+        <View onClick={handleShareToWechatMoments}>
+          <Image src={img.ICON_DETAIL_SHARE} />
+          <Text>分享朋友圈</Text>
+        </View>
+        <View onClick={handleSaveToLocal}>
+          <Image src={img.ICON_DETAIL_SHARE} />
+          <Text>保存到本地</Text>
+        </View>
+      </View>
+    </CommonPopup>
+  )
+})
+
 function Index() {
   // 使用Zustand store
   // const userStats = useUserStats()
@@ -31,16 +97,24 @@ function Index() {
   const [colors, setColors] = useState<string []>([])
   const [detail, setDetail] = useState<any>(null)
   const { params } = useRouter()
-  const { id, share } = params
+  const { id, autoShare, from } = params
+
+  console.log('from', from)
 
   // 本地状态管理
   const [loading, setLoading] = useState(false)
+  const sharePopupRef = useRef<any>(null)
 
   // 页面加载时获取数据
-  useEffect(() => {
+  // useEffect(() => {
+  //   fetchDetail()
+  //   calcBgMainColors()
+  // }, [])
+
+  useDidShow(() => {
     fetchDetail()
     calcBgMainColors()
-  }, [])
+  })
 
   const fetchDetail = async () => {
     const res = await DetailService.getDetail(Number(id))
@@ -59,6 +133,26 @@ function Index() {
     setColors(textcolors)
   }
 
+  function handleShare() {
+    sharePopupRef.current.show()
+  }
+
+  const openMap = () => {
+    Taro.openLocation({
+      latitude: detail?.latitude,   // 纬度（必填）
+      longitude: detail?.longitude, // 经度（必填）
+      name: '上海体育场',   // 位置名（可选）
+      address: '上海市徐汇区肇嘉浜路128号', // 地址详情（可选）
+      scale: 15,            // 地图缩放级别（1-28）
+    })
+  }
+
+  const handleJoinGame = () => {
+    Taro.navigateTo({
+      url: `/pages/orderCheck/index?id=${id}`,
+    })
+  }
+
   const tags = [{
     name: '🕙 急招',
     icon: '',
@@ -139,7 +233,7 @@ function Index() {
       {/* custom navbar */}
       <view className="custom-navbar">
         <View className='detail-navigator'>
-          <View className='detail-navigator-back'>
+          <View className='detail-navigator-back' onClick={() => { Taro.navigateBack() }}>
             <Image className='detail-navigator-back-icon' src={img.ICON_ARROW_LEFT} />
           </View>
           <View className='detail-navigator-icon'>
@@ -234,7 +328,7 @@ function Index() {
               {/* location message */}
               <View className='location-message-text'>
                 {/* venue name and distance */}
-                <View className='location-message-text-name-distance'>
+                <View className='location-message-text-name-distance' onClick={openMap}>
                   <Text>上海体育场</Text>
                   <Text>·</Text>
                   <Text>1.2km</Text>
@@ -325,7 +419,7 @@ function Index() {
             </View>
             {/* participants list */}
             <ScrollView className='participants-list-scroll' scrollX>
-              <View className='participants-list-scroll-content' style={{ width: `${(participants.length + 1) * 108 + (participants.length) * 8 - 30}px` }}>
+              <View className='participants-list-scroll-content' style={{ width: `${participants.length * 103 + (participants.length - 1) * 8}px` }}>
                 {participants.map((participant) => (
                   <View key={participant.id} className='participants-list-item'>
                     {/* <Avatar className='participants-list-item-avatar' src={participant.user.avatar_url} /> */}
@@ -420,7 +514,7 @@ function Index() {
                       <Avatar className='recommend-games-list-item-addon-avatar' src={game.avatar} />
                       <View className='recommend-games-list-item-addon-message'>
                         <View className='recommend-games-list-item-addon-message-applications'>
-                          <Text>报名人数 {game.checkedApplications} / {game.applications}</Text>
+                          <Text>报名人数 {game.checkedApplications}/{game.applications}</Text>
                         </View>
                         <View className='recommend-games-list-item-addon-message-level-requirements'>
                           <Text>{game.levelRequirements}</Text>
@@ -439,10 +533,17 @@ function Index() {
         {/* sticky bottom action bar */}
         <View className="sticky-bottom-bar">
           <View className="sticky-bottom-bar-share-and-comment">
-            <View></View>
+            <View className='sticky-bottom-bar-share' onClick={handleShare}>
-            <View></View>
+              <Image className='sticky-bottom-bar-share-icon' src={img.ICON_DETAIL_SHARE} />
+              <Text className='sticky-bottom-bar-share-text'>分享</Text>
+            </View>
+            <View className='sticky-bottom-bar-share-and-comment-separator' />
+            <View className='sticky-bottom-bar-comment' onClick={() => { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
+              <Image className='sticky-bottom-bar-comment-icon' src={img.ICON_DETAIL_COMMENT_DARK} />
+              <Text className='sticky-bottom-bar-comment-text'>32</Text>
+            </View>
           </View>
-          <View className="sticky-bottom-bar-join-game">
+          <View className="sticky-bottom-bar-join-game" onClick={handleJoinGame}>
             <Text>🎾</Text>
             <Text>立即加入</Text>
             <View className='game-price'>
@@ -450,6 +551,8 @@ function Index() {
             </View>
           </View>
         </View>
+        {/* share popup */}
+        <SharePopup ref={sharePopupRef} id={id} from={from} />
       </View>
     </View>
   )

src/pages/index/index.scss

@@ -1,261 +0,0 @@
-.index-page {
-  padding: 20px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-  
-  .page-header {
-    text-align: center;
-    margin-bottom: 24px;
-    
-    .page-title {
-      font-size: 28px;
-      font-weight: bold;
-      color: white;
-      display: block;
-      margin-bottom: 8px;
-    }
-    
-    .page-subtitle {
-      font-size: 16px;
-      color: rgba(255, 255, 255, 0.8);
-      display: block;
-    }
-  }
-  
-  .user-card {
-    background: white;
-    border-radius: 16px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    
-    .user-header {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      
-      .user-info {
-        flex: 1;
-        
-        .username {
-          font-size: 20px;
-          font-weight: bold;
-          color: #333;
-          display: block;
-          margin-bottom: 4px;
-        }
-        
-        .user-level {
-          font-size: 14px;
-          color: #666;
-          display: block;
-          margin-bottom: 4px;
-        }
-        
-        .join-date {
-          font-size: 12px;
-          color: #999;
-          display: block;
-        }
-      }
-    }
-  }
-  
-  .stats-section {
-    background: white;
-    border-radius: 16px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    
-    .section-title {
-      font-size: 18px;
-      font-weight: bold;
-      color: #333;
-      margin-bottom: 16px;
-      display: block;
-    }
-    
-    :global {
-      .nut-cell {
-        background: #f8f9fa;
-        border-radius: 12px;
-        margin-bottom: 8px;
-        border: none;
-        
-        &:last-child {
-          margin-bottom: 0;
-        }
-        
-        .nut-cell__title {
-          font-weight: 500;
-          color: #555;
-        }
-        
-        .nut-cell__value {
-          font-weight: bold;
-          color: #007bff;
-        }
-      }
-    }
-  }
-  
-  .action-section {
-    background: white;
-    border-radius: 16px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    
-    .section-title {
-      font-size: 18px;
-      font-weight: bold;
-      color: #333;
-      margin-bottom: 16px;
-      display: block;
-    }
-    
-    .button-group {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      
-      .custom-button {
-        border-radius: 12px;
-        font-weight: 500;
-        height: 48px;
-        border: none;
-        margin-bottom: 12px;
-        font-size: 16px;
-        color: white;
-        
-        &.primary-btn {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-        
-        &.success-btn {
-          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-        }
-        
-        &.warning-btn {
-          background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-        }
-        
-        &:disabled {
-          opacity: 0.6;
-        }
-      }
-      
-      // 保留 NutUI 按钮样式（备用）
-      :global {
-        .nut-button {
-          border-radius: 12px;
-          font-weight: 500;
-          height: 48px;
-          border: none;
-          
-          &--primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          }
-          
-          &--success {
-            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-          }
-          
-          &--warning {
-            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-          }
-          
-          &:disabled {
-            opacity: 0.6;
-          }
-        }
-      }
-    }
-  }
-  
-  .loading-section {
-    background: white;
-    border-radius: 16px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    
-    .loading-text {
-      font-size: 16px;
-      color: #666;
-      margin-bottom: 12px;
-      display: block;
-    }
-    
-    :global {
-      .nut-progress {
-        .nut-progress-outer {
-          background: #f0f0f0;
-          border-radius: 10px;
-        }
-        
-        .nut-progress-inner {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border-radius: 10px;
-        }
-      }
-    }
-  }
-  
-  .tips-section {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 16px;
-    padding: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    
-    .tips-title {
-      font-size: 18px;
-      font-weight: bold;
-      color: #333;
-      margin-bottom: 16px;
-      display: block;
-    }
-    
-    .tips-content {
-      .tip-item {
-        font-size: 14px;
-        color: #666;
-        line-height: 1.6;
-        margin-bottom: 8px;
-        display: block;
-        
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
-// 响应式设计
-@media (max-width: 768px) {
-  .index-page {
-    padding: 16px;
-    
-    .page-header {
-      .page-title {
-        font-size: 24px;
-      }
-      
-      .page-subtitle {
-        font-size: 14px;
-      }
-    }
-    
-    .user-card,
-    .stats-section,
-    .action-section,
-    .loading-section,
-    .tips-section {
-      padding: 16px;
-      margin-bottom: 16px;
-    }
-  }
-}

src/pages/index/index.tsx

@@ -5,6 +5,7 @@ import Taro from '@tarojs/taro'
 // 导入API服务
 import demoApi from '../../services/demoApi'
 import commonApi from '../../services/commonApi'
+import PublishMenu from '../../components/PublishMenu'
 import { 
   useUserStats, 
   useUserActions
@@ -286,6 +287,13 @@ function Index() {
           <Text className='tip-item'>• 请求失败时会自动使用模拟数据</Text>
         </View>
       </View>
+      <PublishMenu
+        onPersonalPublish={() => {
+          Taro.navigateTo({
+            url: '/pages/publishBall/index'
+          })
+        }}
+      />
     </View>
   )
 }

src/pages/list/FilterPopup.tsx

@@ -12,6 +12,8 @@ import { FilterPopupProps } from "../../../types/list/types";
 import CourtType from "@/components/CourtType";
 // 玩法
 import GamePlayType from "@/components/GamePlayType";
+import { useDictionaryActions } from "@/store/dictionaryStore";
+import { useMemo } from "react";
 
 const FilterPopup = (props: FilterPopupProps) => {
   const {
@@ -27,7 +29,22 @@ const FilterPopup = (props: FilterPopupProps) => {
   } = props;
 
   const store = useListStore() || {};
-  const { timeBubbleData, locationOptions, gamePlayOptions } = store;
+  const { getDictionaryValue } = useDictionaryActions() || {};
+  const { timeBubbleData } = store;
+
+  const handleOptions = (dictionaryValue: []) => {
+    return dictionaryValue?.map((item) => ({ label: item, value: item })) || [];
+  };
+
+  const courtType = getDictionaryValue("court_type") || [];
+  const locationOptions = useMemo(() => {
+    return courtType ? handleOptions(courtType) : [];
+  }, [courtType]);
+
+  const gamePlay = getDictionaryValue("game_play") || [];
+  const gamePlayOptions = useMemo(() => {
+    return gamePlay ? handleOptions(gamePlay) : [];
+  }, [gamePlay]);
 
   const handleFilterChange = (name, value) => {
     onChange({ [name]: value });

src/pages/list/index.module.scss

@@ -1,22 +1,25 @@
 .listPage {
-  background-color: #fafafa;
+  background-color: #fefefe;
 
   .listTopSearchWrapper {
     padding: 0 15px;
+    // position: sticky;
+    // background: #fefefe;
+    // z-index: 999;
   }
 
+  // .isScroll {
+  //   border-bottom: 0.5px solid #0000000F;
+  // }
+
   .listTopFilterWrapper {
     display: flex;
     align-items: center;
-    margin-top: 5px;
+    padding-top: 10px;
-    margin-bottom: 10px;
+    padding-bottom: 10px;
     gap: 5px;
   }
 
-  .listContentWrapper {
-    padding: 0 5px;
-  }
-
   .menuFilter {
     padding: 0;
   }

src/pages/list/index.tsx

@@ -1,33 +1,34 @@
-import ListCard from "../../components/ListCard";
-import ListCardSkeleton from "../../components/ListCardSkeleton";
-import List from "../../components/List";
 import Menu from "../../components/Menu";
 import CityFilter from "../../components/CityFilter";
 import SearchBar from "../../components/SearchBar";
 import FilterPopup from "./FilterPopup";
 import styles from "./index.module.scss";
 import { useEffect } from "react";
-import Taro, { useReachBottom } from "@tarojs/taro";
+import Taro, { usePageScroll, useReachBottom } from "@tarojs/taro";
 import { useListStore } from "@/store/listStore";
-import {useGlobalState} from '@/store/global'
+import { useGlobalState } from "@/store/global";
 import { View } from "@tarojs/components";
-import CustomerNavBar from "@/components/CustomNavbar";
+import CustomerNavBar from "@/container/listCustomNavbar";
+import InputCustomerBar from "@/container/inputCustomerNavbar";
+import GuideBar from "@/components/GuideBar";
+import ListContainer from "@/container/listContainer";
+import DistanceQuickFilter from "@/components/DistanceQuickFilter";
+import img from "@/config/images";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
   const store = useListStore() || {};
 
-    const {statusNavbarHeightInfo } = useGlobalState() || {}
+  const { statusNavbarHeightInfo } = useGlobalState() || {};
-    // console.log("===store===", store);
+  const { totalHeight } = statusNavbarHeightInfo || {};
-    // console.log('===statusNavbarHeightInfo', statusNavbarHeightInfo)
   const {
     isShowFilterPopup,
     error,
     matches,
+    recommendList,
     loading,
     fetchMatches,
     refreshMatches,
-    clearError,
     updateState,
     filterCount,
     updateFilterOptions, // 更新筛选条件
@@ -36,8 +37,22 @@ const ListPage = () => {
     distanceData,
     quickFilterData,
     distanceQuickFilter,
+    isScrollTop,
+    searchValue,
+    isShowInputCustomerNavBar,
   } = store;
 
+  usePageScroll((res) => {
+    // if (res?.scrollTop > 0 && !isScrollTop) {
+    //   updateState({ isScrollTop: true });
+    // }
+    if (res?.scrollTop >= totalHeight && !isScrollTop) {
+      updateState({ isShowInputCustomerNavBar: true });
+    } else {
+      updateState({ isShowInputCustomerNavBar: false });
+    }
+  });
+
   useReachBottom(() => {
     console.log("触底了");
     // 调用 store 的加载更多方法
@@ -47,7 +62,7 @@ const ListPage = () => {
   useEffect(() => {
     // 页面加载时获取数据
     fetchMatches();
-  }, [fetchMatches]);
+  }, []);
 
   // 下拉刷新处理函数 - 使用Taro生命周期钩子
   Taro.usePullDownRefresh(() => {
@@ -78,78 +93,6 @@ const ListPage = () => {
       });
   });
 
-  // 错误处理
-  useEffect(() => {
-    if (error) {
-      Taro.showToast({
-        title: error,
-        icon: "error",
-        duration: 2000,
-      });
-      // 3秒后自动清除错误
-      setTimeout(() => {
-        clearError();
-      }, 3000);
-    }
-  }, [error, clearError]);
-
-  // 加载状态显示
-  if (loading && matches.length === 0) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "200px",
-          fontSize: "14px",
-          color: "#999",
-        }}
-      >
-        <div style={{ marginBottom: "10px" }}>加载中...</div>
-        <div style={{ fontSize: "12px", color: "#ccc" }}>
-          正在获取网球比赛数据
-        </div>
-      </div>
-    );
-  }
-
-  // 错误状态显示
-  if (error && matches.length === 0) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "200px",
-          fontSize: "14px",
-          color: "#999",
-        }}
-      >
-        <div style={{ marginBottom: "10px" }}>加载失败</div>
-        <div style={{ marginBottom: "15px", fontSize: "12px", color: "#ccc" }}>
-          {error}
-        </div>
-        <button
-          onClick={() => fetchMatches()}
-          style={{
-            padding: "8px 16px",
-            fontSize: "12px",
-            color: "#fff",
-            backgroundColor: "#007aff",
-            border: "none",
-            borderRadius: "4px",
-          }}
-        >
-          重试
-        </button>
-      </div>
-    );
-  }
-
   const toggleShowPopup = () => {
     updateState({ isShowFilterPopup: !isShowFilterPopup });
   };
@@ -174,21 +117,40 @@ const ListPage = () => {
     });
   };
 
+  const handleSearchClick = () => {
+    Taro.navigateTo({
+      url: "/pages/search/index",
+    });
+  };
+
   return (
     <>
-      <CustomerNavBar />
+      {!isShowInputCustomerNavBar ? (
+        <CustomerNavBar />
+      ) : (
+        <InputCustomerBar icon={img.ICON_LIST_INPUT_LOGO} />
+      )}
 
       <View className={styles.listPage}>
-        <View className={styles.listTopSearchWrapper}>
+        <View
+          className={`${styles.listTopSearchWrapper} ${
+            isScrollTop ? styles.isScroll : ""
+          }`}
+          // style={{
+          //   top: statusNavbarHeightInfo?.totalHeight,
+          // }}
+        >
           <SearchBar
             handleFilterIcon={toggleShowPopup}
             isSelect={filterCount > 0}
             filterCount={filterCount}
             onChange={handleSearchChange}
+            value={searchValue}
+            onInputClick={handleSearchClick}
           />
           {/* 综合筛选 */}
           {isShowFilterPopup && (
-            <div>
+            <View>
               <FilterPopup
                 loading={loading}
                 onCancel={toggleShowPopup}
@@ -200,47 +162,33 @@ const ListPage = () => {
                 onClose={toggleShowPopup}
                 statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
               />
-            </div>
+            </View>
           )}
-          {/* 筛选 */}
+        </View>
-          <div className={styles.listTopFilterWrapper}>
+        {/* 筛选 */}
-            {/* 全城筛选 */}
+        <View className={styles.listTopFilterWrapper}>
-            <CityFilter
+          <DistanceQuickFilter
-              options={distanceData}
+            cityOptions={distanceData}
-              value={distanceQuickFilter?.distance}
+            quickOptions={quickFilterData}
-              wrapperClassName={styles.menuFilter}
+            onChange={handleDistanceOrQuickChange}
-              onChange={handleDistanceOrQuickChange}
+            cityName="distance"
-              name="distance"
+            quickName="quick"
-            />
+            cityValue={distanceQuickFilter?.distance}
-            {/* 智能排序 */}
+            quickValue={distanceQuickFilter?.quick}
-            <Menu
+          />
-              options={quickFilterData}
-              value={distanceQuickFilter?.quick}
-              onChange={handleDistanceOrQuickChange}
-              wrapperClassName={styles.menuFilter}
-              name="quick"
-            />
-          </div>
         </View>
 
-        <View className={styles.listContentWrapper}>
+        {/* 列表内容 */}
-          {/* 列表内容 */}
+        <ListContainer
-          <List>
+          data={matches}
-            {!loading &&
+          recommendList={recommendList}
-              matches.length > 0 &&
+          loading={loading}
-              matches.map((match, index) => (
+          error={error}
-                <ListCard key={match.id || index} {...match} />
+          reload={refreshMatches}
-              ))}
+        />
-          </List>
-
-          {/* 空状态 */}
-          {loading &&
-            matches.length === 0 &&
-            new Array(10).fill(0).map(() => {
-              return <ListCardSkeleton />;
-            })}
-        </View>
       </View>
+
+      <GuideBar currentPage="list" />
     </>
   );
 };

src/pages/login/index/index.tsx

@@ -110,7 +110,7 @@ const LoginPage: React.FC = () => {
       <View className="background_image">
         <Image
           className="bg_img"
-          src={require('../../../static/login/login_bg.png')}
+          src="http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/2e00dea1-8723-42fe-ae42-84fe38e9ac3f.png"
           mode="aspectFill"
         />
         <View className="bg_overlay"></View>

src/pages/login/verification/index.tsx

@@ -124,7 +124,7 @@ const VerificationPage: React.FC = () => {
 
         setTimeout(() => {
           Taro.redirectTo({
-            url: '/pages/index/index'
+            url: '/pages/list/index'
           });
         }, 200);
       } else {

src/pages/mapDisplay/index.tsx

@@ -1,5 +0,0 @@
-// import MapPlugin from "src/components/MapDisplay/mapPlugin"; 
-import MapDisplay from "src/components/MapDisplay";
-export default function MapDisplayPage() {
-  return <MapDisplay />
-}

src/pages/message/index.config.ts

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '消息',
+  // navigationBarBackgroundColor: '#FAFAFA',
+  navigationStyle: 'custom',
+})

src/pages/message/index.scss

@@ -0,0 +1,80 @@
+@use '~@/scss/images.scss' as img;
+
+$--Backgrounds-Primary: '#fff';
+
+.message-container {
+  width: 100%;
+  height: 100vh;
+  background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
+  // padding-top: 100px;
+  box-sizing: border-box;
+
+  .custom-navbar {
+    height: 56px; /* 通常与原生导航栏高度一致 */
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    // background-color: #fff;
+    color: #000;
+    padding-top: 44px; /* 适配状态栏 */
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    .message-navigator {
+      position: relative;
+      left: 15px;
+      top: -2px;
+      width: 80px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+
+      .message-navigator-avatar {
+        width: 32px;
+        height: 32px;
+      }
+
+      .message-navigator-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #000;
+      }
+    }
+  }
+
+  .message-content {
+
+    .message-content-list {
+      display: flex;
+      flex-direction: column;
+      padding: 10px 15px;
+      box-sizing: border-box;
+      gap: 12px;
+
+      .message-item {
+        padding: 10px;
+        // border: 1px solid rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+        background-color: rgba(255, 255, 255, 0.5);
+        border-radius: 10px;
+      }
+
+      .message-item-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #000;
+      }
+
+      .message-item-content {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+}

src/pages/message/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { View, Text, ScrollView } from '@tarojs/components'
+import { Avatar } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
+import GuideBar from '@/components/GuideBar'
+// import img from '@/config/images'
+import './index.scss'
+
+const Personal = () => {
+  const messageList = Array(10).fill(0).map((_, index) => ({
+    id: index + 1,
+    title: `消息${index + 1}消息${index + 1}消息${index + 1}消息${index + 1}`,
+    content: Array(Math.round(Math.random() * 40)).fill(0).map((_, index) => `消息${index + 1}`).join(''),
+  }))
+
+  return (
+    <View className='message-container'>
+      <View className='custom-navbar'>
+        <View className='message-navigator'>
+          <Avatar className='message-navigator-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+          <Text className='message-navigator-title'>消息</Text>
+        </View>
+      </View>
+      <ScrollView scrollY className='message-content'>
+        <View className='message-content-list'>
+          {messageList.map((item) => (
+            <View className='message-item' key={item.id}>
+              <View className='message-item-title'>
+                <Text>{item.title}</Text>
+              </View>
+              <View className='message-item-content'>
+                <Text>{item.content}</Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+      <GuideBar currentPage='message' />
+    </View>
+  )
+}
+
+export default Personal

src/pages/orderCheck/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '订单确认',
+  navigationBarBackgroundColor: '#FAFAFA'
+})

src/pages/orderCheck/index.scss

@@ -0,0 +1 @@
+@use '~@/scss/images.scss' as img;

src/pages/orderCheck/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Text, Button } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { delay } from '@/utils'
+
+const OrderCheck = () => {
+  const handlePay = async () => {
+    Taro.showLoading({
+      title: '支付中...',
+      mask: true
+    })
+    await delay(2000)
+    Taro.hideLoading()
+    Taro.showToast({
+      title: '支付成功',
+      icon: 'success'
+    })
+    await delay(1000)
+    Taro.navigateBack({
+      delta: 1
+    })
+  }
+  return (
+    <View>
+      <Text>OrderCheck</Text>
+      <Button onClick={handlePay}>支付</Button>
+    </View>
+  )
+}
+
+export default OrderCheck

src/pages/personal/index.config.ts

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '个人中心',
+  // navigationBarBackgroundColor: '#FAFAFA',
+  navigationStyle: 'custom',
+})

src/pages/personal/index.scss

@@ -0,0 +1,35 @@
+@use '~@/scss/images.scss' as img;
+
+$--Backgrounds-Primary: '#fff';
+
+.personal-container {
+  width: 100%;
+  height: 100vh;
+  background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
+  padding-top: 100px;
+  box-sizing: border-box;
+
+  .personal-navigator {
+    position: fixed;
+    left: 10px;
+    top: 54px;
+    width: 32px;
+    height: 32px;
+
+    .personal-navigator-back {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .personal-content {
+    width: 100%;
+    height: calc(100vh - 300px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #000;
+  }
+}

src/pages/personal/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Taro, { useRouter } from '@tarojs/taro'
+import GuideBar from '@/components/GuideBar'
+import img from '@/config/images'
+import './index.scss'
+
+const Personal = () => {
+  const { params } = useRouter()
+  const { id } = params
+
+  const handleBack = () => {
+    Taro.navigateBack()
+  }
+
+  return (
+    <View className='personal-container'>
+      {id && (
+        <View className='personal-navigator' onClick={handleBack}>
+          <Image className='personal-navigator-back' src={img.ICON_NAVIGATOR_BACK} />
+        </View>
+      )}
+      <View className='personal-content'>
+        <Text>Personal</Text>
+      </View>
+      <GuideBar currentPage='personal' />
+    </View>
+  )
+}
+
+export default Personal

src/pages/publishBall/components/FormBasicInfo/FormBasicInfo.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react'
-import { View, Text, Input, Image, Picker } from '@tarojs/components'
+import { View, Text, Input, Image } from '@tarojs/components'
 import PopupGameplay from '../PopupGameplay'
 import img from '@/config/images';
 import { FormFieldConfig } from '@/config/formSchema/publishBallFormSchema';
@@ -66,9 +66,51 @@ const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
     setShowStadiumSelector(false)
   }
   
-  const handleChange = useCallback((key: string, value: any) => {
+  const handleChange = useCallback((key: string, costValue: any) => {
-    onChange({...value, [key]: value})
+    // 价格输入限制：¥0.00–9999.99
-  }, [onChange])
+    console.log(costValue, 'valuevalue');
+
+    if (key === children[0]?.prop) {
+      // 允许清空
+      if (costValue === '') {
+        onChange({...value, [key]: ''});
+        return;
+      }
+      
+      // 只允许数字和一个小数点
+      const filteredValue = costValue.replace(/[^\d.]/g, '');
+      
+      // 确保只有一个小数点
+      const parts = filteredValue.split('.');
+      if (parts.length > 2) {
+        return; // 不更新，保持原值
+      }
+      
+      // 限制小数点后最多2位
+      if (parts.length === 2 && parts[1].length > 2) {
+        return; // 不更新，保持原值
+      }
+      
+      const numValue = parseFloat(filteredValue);
+      if (isNaN(numValue)) {
+        onChange({...value, [key]: ''});
+        return;
+      }
+      if (numValue < 0) {
+        onChange({...value, [key]: '0'});
+        return;
+      }
+      if (numValue > 9999.99) {
+        onChange({...value, [key]: '9999.99'});
+        return;
+      }
+      
+      // 使用过滤后的值
+      onChange({...value, [key]: filteredValue});
+      return;
+    }
+    onChange({...value, [key]: costValue})
+  }, [onChange, children])
 
   useEffect(() => {
     if (children.length > 2) {
@@ -76,6 +118,10 @@ const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
       setPlayGame(options)
     }
   }, [children])
+
+  useEffect(() => {
+    console.log(value, 'valuevalue');
+  }, [value])
   const renderChildren = () => {
     return children.map((child: any, index: number) => {
       return <View className='form-item'>
@@ -91,6 +137,7 @@ const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
               placeholder='请输入'
               placeholderClass='title-placeholder'
               type='digit'
+              maxlength={7}
               value={value[child.prop]}
               onInput={(e) => handleChange(child.prop, e.detail.value)}
             />

src/pages/publishBall/components/SelectStadium/SelectStadium.tsx

@@ -13,7 +13,7 @@ export interface Stadium {
   id?: string
   name: string
   address?: string
-  istance?: string
+  distance_km?: number | null | undefined
   longitude?: number
   latitude?: number
 }
@@ -78,6 +78,15 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
     setShowDetail(true)
   }
 
+  const calculateDistance = (stadium: Stadium) => {
+    const distance_km = stadium.distance_km
+    if (!distance_km) return ''
+    if (distance_km && distance_km > 1) {
+      return distance_km.toFixed(1) + 'km'
+    }
+    return (distance_km * 1000).toFixed(0) + 'm'
+  }
+
 
   // 处理搜索框输入
   const handleSearchInput = (e: any) => {
@@ -253,7 +262,7 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
                         handleItemLocation(stadium) 
                       }}
                     >
-                      {stadium.istance} · 
+                      {calculateDistance(stadium)} · 
                     </Text>
                     <Text 
                       className='stadium-address-text'

src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx

@@ -14,7 +14,7 @@ export interface Stadium {
   address?: string
   longitude?: number
   latitude?: number
-  istance?: string
+  distance_km?: number | null
   court_type?: string
   court_surface?: string
   description?: string
@@ -100,7 +100,7 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
     address: stadium.address,
     latitude: stadium.longitude,
     longitude: stadium.latitude,
-    istance: stadium.istance,
+    istance: stadium.distance_km,
     court_type: court_type[0] || '',
     court_surface: court_surface[0] || '',
     additionalInfo: '',
@@ -117,6 +117,13 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
     setFormData: (data: any) => setFormData(data)
   }), [formData, stadium])
 
+  const calculateDistance = (distance_km: number | null) => {
+    if (!distance_km) return ''
+    if (distance_km && distance_km > 1) {
+      return distance_km.toFixed(1) + 'km'
+    }
+    return (distance_km * 1000).toFixed(0) + 'm'
+  }
 
 
   const handleMapLocation = () => {
@@ -128,7 +135,8 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
           name: res.name,
           address: res.address,
           latitude: res.longitude,
-          longitude: res.latitude
+          longitude: res.latitude,
+          istance: null
         })
       },
       fail: (err) => {
@@ -166,7 +174,7 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
         <View className='stadium-item-right'>
           <View className='stadium-name'>{formData.name}</View>
           <View className='stadium-address'>
-            <Text>{formData.istance} · </Text>
+            <Text>{calculateDistance(formData.istance || null)} · </Text>
             <Text>{formData.address}</Text>
             <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
           </View>

src/pages/publishBall/components/WechatSwitch/WechatSwitch.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
-import { View, Text } from '@tarojs/components'
+import { View, Text, Input } from '@tarojs/components'
 import { Checkbox } from '@nutui/nutui-react-taro'
 import styles from './index.module.scss'
 interface FormSwitchProps {
@@ -10,7 +10,14 @@ interface FormSwitchProps {
 }
 
 const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, wechatId }) => {
+  const [editWechat, setEditWechat] = useState(false)
+  const editWechatId = () => {
     
+  }
+  const setWechatId = useCallback((e: any) => {
+    const value = e.target.value
+    onChange(value)
+  }, [])
   return (
     <>
       <View className={styles['wechat-contact-section']}>
@@ -28,7 +35,14 @@ const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, wech
           wechatId && (
             <View className={styles['wechat-contact-id']}>
               <Text className={styles['wechat-contact-text']}>微信号: {wechatId.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')}</Text>
-              <View className={styles['wechat-contact-edit']}>修改</View>
+              <View className={styles['wechat-contact-edit']} onClick={editWechatId}>修改</View>
+            </View>
+          )
+        }
+        {
+          editWechat && (
+            <View className={styles['wechat-contact-edit']}>
+              <Input value={wechatId} onInput={setWechatId} />
             </View>
           )
         }

src/pages/publishBall/index.module.scss

@@ -25,6 +25,7 @@
     align-items: center;
     gap: 4px;
     color: rgba(60, 60, 67, 0.50);
+    font-size: 14px;
 
     &-icon{
       width: 16px;
@@ -183,6 +184,9 @@
         border: 1px solid rgba(0, 0, 0, 0.06);
         background: #000;
         box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.10);
+        &.submit-btn-disabled {
+          color: rgba(255, 255, 255, 0.30);
+        }
     }
 
     .submit-tip {
@@ -191,12 +195,21 @@
       color: #999;
       line-height: 1.4;
       display: flex;
-    justify-content: center;
+      justify-content: center;
-    padding: 12px 0;
+      padding: 12px 0;
+      align-items: center;
       .link {
         color: #007AFF;
       }
     }
+
+    .submit-checkbox {
+      width: 11px;
+      height: 11px;
+      :global(.nut-icon-Checked){
+        background: rgba(22, 24, 35, 0.75)!important;
+      }
+    }
   }
 
   // 加载状态遮罩保持原样
@@ -230,74 +243,7 @@
     }
   }
 
-  // 删除确认弹窗
-  .delete-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10000;
 
-    &__content {
-      background: white;
-      border-radius: 16px;
-      padding: 24px;
-      margin: 0 32px;
-      max-width: 320px;
-      width: 100%;
-      text-align: center;
-    }
-
-    &__title {
-      display: block;
-      font-size: 18px;
-      font-weight: 600;
-      color: theme.$primary-color;
-      margin-bottom: 8px;
-    }
-
-    &__desc {
-      display: block;
-      font-size: 14px;
-      color: rgba(60, 60, 67, 0.6);
-      margin-bottom: 24px;
-    }
-
-    &__actions {
-      display: flex;
-      gap: 12px;
-
-      .delete-modal__btn {
-        flex: 1;
-        height: 44px;
-        border-radius: 12px;
-        font-size: 16px;
-        font-weight: 500;
-        border: none;
-        cursor: pointer;
-        transition: all 0.2s ease;
-
-        &:first-child {
-          background: rgba(0, 0, 0, 0.04);
-          color: rgba(60, 60, 67, 0.8);
-        }
-
-        &:last-child {
-          background: #FF3B30;
-          color: white;
-        }
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
 }
 
 // 旋转动画