Explorar el Código

✨ feat(home): 优化日期选择器UI和交互体验
- 将原生日期输入替换为自定义Picker组件,提升视觉一致性
- 实现日期格式化函数,将日期显示为"今天"、"明天"或"X月X日"格式
- 限制日期选择范围为今天至未来7天

♻️ refactor(schedule-list): 调整组件导出方式
- 将命名导出改为默认导出,统一组件导出规范

yourname hace 3 meses
padre
commit
e0cc9a1c71
Se han modificado 2 ficheros con 36 adiciones y 12 borrados
  1. 32 10
      mini/src/pages/home/index.tsx
  2. 4 2
      mini/src/pages/schedule-list/ScheduleListPage.tsx

+ 32 - 10
mini/src/pages/home/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
-import { View, Text, Swiper, SwiperItem, Image, Button } from '@tarojs/components'
+import React, { useState } from 'react'
+import { View, Text, Swiper, SwiperItem, Image, Button, Picker } from '@tarojs/components'
 import { navigateTo } from '@tarojs/taro'
 import { TabBarLayout } from '@/layouts/tab-bar-layout'
 import { AreaPicker } from '../../components/AreaPicker'
@@ -57,6 +57,22 @@ const HomePage: React.FC = () => {
   }
 
 
+  // 格式化日期显示
+  const formatDateDisplay = (dateStr: string) => {
+    const date = new Date(dateStr)
+    const today = new Date()
+    const tomorrow = new Date(today)
+    tomorrow.setDate(today.getDate() + 1)
+
+    if (date.toDateString() === today.toDateString()) {
+      return '今天'
+    } else if (date.toDateString() === tomorrow.toDateString()) {
+      return '明天'
+    } else {
+      return `${date.getMonth() + 1}月${date.getDate()}日`
+    }
+  }
+
   // 处理日期选择
   const handleDateChange = (e: any) => {
     setSearchParams(prev => ({
@@ -234,14 +250,20 @@ const HomePage: React.FC = () => {
           <Text className="text-sm text-gray-600 mb-2 block">出发日期</Text>
           <View className="flex justify-between items-center bg-gray-50 rounded-lg p-3 border border-gray-200">
             <Text className="text-sm text-gray-600">选择日期</Text>
-            <View className="picker">
-              <input
-                type="date"
-                value={searchParams.date}
-                onChange={handleDateChange}
-                className="text-sm text-blue-500 font-bold"
-              />
-            </View>
+            <Picker
+              mode="date"
+              value={searchParams.date}
+              start={new Date().toISOString().split('T')[0]}
+              end={new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]}
+              fields="day"
+              onChange={handleDateChange}
+            >
+              <View className="picker-trigger bg-white px-3 py-1 rounded border border-gray-300">
+                <Text className="text-sm text-blue-500 font-bold">
+                  {formatDateDisplay(searchParams.date)}
+                </Text>
+              </View>
+            </Picker>
           </View>
         </View>
 

+ 4 - 2
mini/src/pages/schedule-list/ScheduleListPage.tsx

@@ -57,7 +57,7 @@ interface Route {
   updatedAt: string
 }
 
-export const ScheduleListPage: React.FC = () => {
+const ScheduleListPage: React.FC = () => {
   const router = useRouter()
   const [selectedDate, setSelectedDate] = useState<string>('')
   const [dateOptions, setDateOptions] = useState<string[]>([])
@@ -345,4 +345,6 @@ export const ScheduleListPage: React.FC = () => {
       </ScrollView>
     </View>
   )
-}
+}
+
+export default ScheduleListPage