发布页开发

src/components/TimeSelector/TimeSelector.scss

@@ -0,0 +1,73 @@
+@use '~@/scss/themeColor.scss' as theme;
+.time-selector {
+  // 区域标题 - 灰色背景
+  width: 100%;
+  // 时间区域 - 合并的白色块
+  .time-section {
+    background: white;
+    border-radius: 16px;
+    width: 100%;
+    .time-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 44px;
+      padding-left: 12px;
+      &:last-child {
+        margin-bottom: 0;
+        .time-content {
+          border-bottom: none;
+        }
+      }
+
+      .time-label {
+        display: flex;
+        align-items: center;
+        padding: 0 3px;
+        font-size: 14px;
+        color: theme.$primary-color;
+        .dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: theme.$primary-color;
+          border: 1.5px solid theme.$primary-color;
+          margin-right: 12px;
+          &.hollow {
+            background: transparent;
+            width: 8px;
+            height: 8px;
+          }
+        }
+      }
+
+      .time-content {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid  rgba(0, 0, 0, 0.06);
+        line-height: 44px;
+        justify-content: space-between;
+        flex: 1;
+        padding-right: 12px;
+        .time-text-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          gap: 4px;
+        }
+        .time-text {
+          font-size: 13px;
+          color: theme.$primary-color;
+          padding: 0 12px;
+          background: theme.$primary-shallow-bg;
+          height: 28px;
+          line-height: 28px;
+          border-radius: 14px;
+          &.time-am {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}

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

src/components/TimeSelector/index.ts

@@ -0,0 +1 @@
+export { default, type TimeRange } from './TimeSelector'