日程添加

pages/index/index.vue

@@ -1,17 +1,15 @@
 <template>
-
   <!-- 顶部Tabs栏 -->
-  <view class="fixed-tabs" >
+    <uv-tabs :list="topTabs" @click="clickTab"></uv-tabs>
-    <uv-tabs :list="topTabs" @click="click"></uv-tabs>
-  </view>
-
   <!-- 内容区域 -->
-  <view class="content-wrapper" :style="{ paddingTop: (  tabsHeight) + 'px' }">
+  <view class="content-wrapper" >
     <view>
-      <uv-calendar ref="calendar"  mode="single" @change="handleConfirm" closeOnClickConfirm="false"></uv-calendar>
+      <uv-calendar ref="calendar" mode="single"  @confirm="handleConfirm" ></uv-calendar>
       <button @click="openCalendar">选择日期</button>
+      <view style=" font-size: 12px; color: #666;">
+        当前选择日期：{{ selectedDate }}，事件数：{{ eventsInDay.length }}
+      </view>
     </view>
-
     <!-- 时间轴表格 -->
     <TimeTable :hours="hours" :events="eventsInDay" />
   </view>
@@ -25,24 +23,20 @@
   <!-- 底部导航 -->
   <uv-tabbar :value="value" @change="index=>value = index">
     <uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
-    <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+    <uv-tabbar-item text="工作台" icon="calendar"></uv-tabbar-item>
-    <uv-tabbar-item text="直播 " icon="play-right"></uv-tabbar-item>
+    <uv-tabbar-item text="月度考核 " icon="integral"></uv-tabbar-item>
-    <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+    <uv-tabbar-item text="管理" icon="account"></uv-tabbar-item>
   </uv-tabbar>
+
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 
 import TimeTable from '@/components/TimeTable.vue';
 import FabPlus from '@/components/FabPlus.vue';
 import AddEventModal from '@/components/AddEventModal.vue';
 
-// 获取状态栏高度
-
-const tabsHeight = ref(44); // tabs 高度，单位：px
-
-
 // 顶部tabs选项
 const topTabs = [
   { name: '日程编辑', value: 0 },
@@ -52,7 +46,7 @@ const topTabs = [
 ];
 const topTabValue = ref(0);
 
-function click(item) {
+function clickTab(item) {
   topTabValue.value = item.value;
   console.log('切换tab:', item.name);
 }
@@ -61,49 +55,99 @@ function click(item) {
 const selectedDate = ref(new Date().toISOString().slice(0, 10));
 
 // 小时段
-const hours = Array.from({length: 24}, (_,i)=>i); // 8~20点
+const hours = Array.from({length: 24}, (_,i)=>i); // 0~23点
 // 示例日程
 const today = new Date().toISOString().slice(0, 10);
+// 获取明天的日期
+const tomorrow = new Date();
+tomorrow.setDate(tomorrow.getDate() + 1);
+const tomorrowStr = tomorrow.toISOString().slice(0, 10);
+// 获取昨天的日期
+const yesterday = new Date();
+yesterday.setDate(yesterday.getDate() - 1);
+const yesterdayStr = yesterday.toISOString().slice(0, 10);
+
 const allEvents = ref([
-  {id:1,title:'日程标题',startHour:15,startMin:30,color:'#e3fae6',date:today},
+  {id:1,title:'今天的日程1',startHour:15,startMin:30,color:'#e3fae6',date:today},
-  {id:2,title:'日程标题',startHour:16,startMin:0,color:'#fae1e1',date:today},
+  {id:2,title:'今天的日程2',startHour:16,startMin:0,color:'#fae1e1',date:today},
-  {id:3,title:'日程标题',startHour:23,startMin:0,color:'#e3fae6',date:today},
+  {id:3,title:'今天的日程3',startHour:23,startMin:0,color:'#e3fae6',date:today},
+  {id:4,title:'明天的日程1',startHour:9,startMin:0,color:'#e3fae6',date:tomorrowStr},
+  {id:5,title:'明天的日程2',startHour:14,startMin:30,color:'#fae1e1',date:tomorrowStr},
+  {id:6,title:'昨天的日程',startHour:10,startMin:0,color:'#e3fae6',date:yesterdayStr},
 ]);
 
 // 根据当前选择日期过滤
-const eventsInDay = computed(() =>
+const eventsInDay = computed(() => {
-  allEvents.value.filter(e=>e.date===selectedDate.value)
+  const filtered = allEvents.value.filter(e=>e.date===selectedDate.value);
-);
+  console.log('计算 eventsInDay，selectedDate:', selectedDate.value, '过滤后事件数:', filtered.length);
+  return filtered;
+});
+
+// 监控 selectedDate 的变化
+watch(selectedDate, (newDate, oldDate) => {
+  console.log('selectedDate 发生变化：', oldDate, '->', newDate);
+  console.log('eventsInDay 新值：', eventsInDay.value);
+}, { immediate: true });
 
 const calendar = ref(null)
+
+// 格式化日期为 YYYY-MM-DD
+function formatDateToYYYYMMDD(dateInput) {
+  if (!dateInput) return '';
+
+  let dateStr = '';
+
+  // 如果已经是字符串格式 YYYY-MM-DD，直接返回
+  if (typeof dateInput === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
+    return dateInput;
+  }
+
+  // 处理各种可能的输入格式
+  if (typeof dateInput === 'string') {
+    dateStr = dateInput;
+  } else if (dateInput?.date) {
+    dateStr = dateInput.date;
+  } else if (dateInput?.value) {
+    dateStr = dateInput.value;
+  } else if (Array.isArray(dateInput) && dateInput.length > 0) {
+    dateStr = typeof dateInput[0] === 'string' ? dateInput[0] : (dateInput[0]?.date || dateInput[0]?.value || '');
+  }
+
+  if (!dateStr) return '';
+
+  // 尝试解析日期
+  const date = new Date(dateStr);
+  if (!isNaN(date.getTime())) {
+    // 格式化为 YYYY-MM-DD
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+
+  // 如果已经是 YYYY-MM-DD 格式但 new Date 解析失败（如时区问题），尝试直接使用
+  if (/^\d{4}-\d{2}-\d{2}/.test(dateStr)) {
+    return dateStr.slice(0, 10);
+  }
+
+  return '';
+}
+
 // 打开日历方法
 const openCalendar = () => {
   if (calendar.value) {
     calendar.value.open()
   }
 }
-const handleConfirm = (e) => {
-  console.log('日历选择：', e);
-  // 处理日历返回的日期，可能是对象或字符串
-  let dateStr = '';
-  if (typeof e === 'string') {
-    dateStr = e;
-  } else if (e?.date) {
-    dateStr = e.date;
-  } else if (e?.value) {
-    dateStr = e.value;
-  } else if (Array.isArray(e) && e.length > 0) {
-    // 如果是数组，取第一个
-    dateStr = typeof e[0] === 'string' ? e[0] : (e[0]?.date || e[0]?.value || '');
-  }
 
-  // 格式化日期为 YYYY-MM-DD
+// confirm 事件处理（可能在确认时触发）
-  if (dateStr) {
+const handleConfirm = (e) => {
-    const date = new Date(dateStr);
+  console.log('日历 confirm 事件：', e, typeof e);
-    if (!isNaN(date.getTime())) {
+  const formattedDate = formatDateToYYYYMMDD(e);
-      selectedDate.value = date.toISOString().slice(0, 10);
+  if (formattedDate) {
-      console.log('更新选择日期：', selectedDate.value);
+    selectedDate.value = formattedDate;
-    }
+    console.log('通过 confirm 更新选择日期：', selectedDate.value);
+    console.log('过滤后的事件数：', eventsInDay.value.length);
   }
 }
 
@@ -118,16 +162,6 @@ function addEvent(e) {
   showAdd.value = false;
 }
 const value=ref(0);
-
-// 底部导航
-const tabbarItems = [
-  { label: '任务列表', value: 0, icon: 'list' },
-  { label: '首页', value: 1, icon: 'home' },
-  { label: '工作台', value: 2, icon: 'calendar' },
-  { label: '月度考核', value: 3, icon: 'integral' },
-  { label: '管理', value: 4, icon: 'account' }
-];
-const tabbarVal = ref(1);
 </script>
 
 <style lang="scss" scoped>