发布页开发

2025-08-17 22:58:00 +08:00
parent 68a6558776
commit 2b3caf027b
76 changed files with 6173 additions and 1610 deletions
--- a/src/components/TimeSelector/TimeSelector.tsx
+++ b/src/components/TimeSelector/TimeSelector.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import { View, Text, Picker } from '@tarojs/components'
+import './TimeSelector.scss'
+
+export interface TimeRange {
+  startDate: string
+  startTime: string
+  endTime: string
+}
+
+interface TimeSelectorProps {
+  value: TimeRange
+  onChange: (timeRange: TimeRange) => void
+}
+
+const TimeSelector: React.FC<TimeSelectorProps> = ({ 
+  value = {
+    startDate: '',
+    startTime: '',
+    endTime: ''
+  }, 
+  onChange
+}) => {
+  // 格式化日期显示
+  const formatDate = (dateStr: string) => {
+    return dateStr.replace(/-/g, '年').replace(/-/g, '月') + '日'
+  }
+
+  // 处理开始日期变化
+  const handleStartDateChange = (e: any) => {
+    onChange({
+      ...value,
+      startDate: e.detail.value
+    })
+  }
+
+  // 处理开始时间变化
+  const handleStartTimeChange = (e: any) => {
+    onChange({
+      ...value,
+      startTime: e.detail.value
+    })
+  }
+
+  // 处理结束时间变化
+  const handleEndTimeChange = (e: any) => {
+    onChange({
+      ...value,
+      endTime: e.detail.value
+    })
+  }
+
+  return (
+    <View className='time-selector'>
+      <View className='time-section'>
+        {/* 开始时间 */}
+        <View className='time-item'>
+          <View className='time-label'>
+            <View className='dot'></View>
+          </View>
+          <View className='time-content'>
+            <Text className='time-label'>开始时间</Text>
+            <view className='time-text-wrapper'>
+              <Text className='time-text'>2025年11月23日</Text>
+              <Text className='time-text time-am'>8:00 AM</Text>
+            </view>
+          </View>
+        </View>
+
+        {/* 结束时间 */}
+        <View className='time-item'>
+          <View className='time-label'>
+            <View className='dot hollow'></View>
+          </View>
+          <View className='time-content'>
+            <Text className='time-label'>结束时间</Text>
+            <view className='time-text-wrapper'>
+              <Text className='time-text'>2025年11月23日</Text>
+              <Text className='time-text time-am'>8:00 AM</Text>
+            </view>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default TimeSelector