OfficeSystem/components/MonthCalendar.vue

<template>
  <view class="month-calendar-container">
    <!-- 日期选择器头部 -->
    <view class="calendar-header" @click="toggleCalendar">
      <view class="date-display">
        <text class="year-month">{{ displayYearMonth }}</text>
        <text class="day">{{ displayDay }}</text>
        <text class="weekday">{{ displayWeekday }}</text>
      </view>
      <view class="event-count" v-if="eventCount > 0">
        <text>日程数：{{ eventCount }}</text>
      </view>
      <view class="arrow-icon" :class="{ 'rotate': isExpanded }">
        <text>▼</text>
      </view>
    </view>

    <!-- 日历下拉区域 -->
    <view class="calendar-dropdown" :class="{ 'expanded': isExpanded }">
      <!-- 月份切换栏 -->
      <view class="month-header">
        <view class="month-nav-btn" @click="prevMonth">
          <text>‹</text>
        </view>
        <view class="month-title">{{ currentYear }}年{{ currentMonth }}月</view>
        <view class="month-nav-btn" @click="nextMonth">
          <text>›</text>
        </view>
      </view>

      <!-- 星期标题 -->
      <view class="weekdays">
        <view class="weekday-item" v-for="day in weekdays" :key="day">{{ day }}</view>
      </view>

      <!-- 日历滑动容器 -->
      <view 
        class="calendar-swipe-container"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
      >
        <view 
          class="calendar-wrapper"
          :style="{ 
            transform: `translateX(${translateX}px)`,
            transition: isAnimating ? 'transform 0.3s ease-out' : 'none'
          }"
        >
          <!-- 上一个月 -->
          <view class="calendar-month">
            <view 
              class="calendar-day"
              v-for="(dayObj, index) in prevMonthDays"
              :key="`prev-${index}`"
              :class="{
                'other-month': !dayObj.isCurrentMonth,
                'today': isToday(dayObj),
                'selected': isSelected(dayObj),
                'has-event': hasEvent(dayObj)
              }"
              @click="selectDate(dayObj)"
            >
              <text class="day-number">{{ dayObj.day }}</text>
              <view class="event-dot" v-if="hasEvent(dayObj)"></view>
            </view>
          </view>

          <!-- 当前月 -->
          <view class="calendar-month">
            <view 
              class="calendar-day"
              v-for="(dayObj, index) in currentMonthDays"
              :key="`current-${index}`"
              :class="{
                'other-month': !dayObj.isCurrentMonth,
                'today': isToday(dayObj),
                'selected': isSelected(dayObj),
                'has-event': hasEvent(dayObj)
              }"
              @click="selectDate(dayObj)"
            >
              <text class="day-number">{{ dayObj.day }}</text>
              <view class="event-dot" v-if="hasEvent(dayObj)"></view>
            </view>
          </view>

          <!-- 下一个月 -->
          <view class="calendar-month">
            <view 
              class="calendar-day"
              v-for="(dayObj, index) in nextMonthDays"
              :key="`next-${index}`"
              :class="{
                'other-month': !dayObj.isCurrentMonth,
                'today': isToday(dayObj),
                'selected': isSelected(dayObj),
                'has-event': hasEvent(dayObj)
              }"
              @click="selectDate(dayObj)"
            >
              <text class="day-number">{{ dayObj.day }}</text>
              <view class="event-dot" v-if="hasEvent(dayObj)"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const props = defineProps({
  selectedDate: {
    type: String,
    default: () => new Date().toISOString().slice(0, 10)
  },
  events: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['change']);

// 展开/收起状态
const isExpanded = ref(false);

// 当前显示的年月
const currentYear = ref(new Date().getFullYear());
const currentMonth = ref(new Date().getMonth() + 1);

// 星期标题
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

// 滑动相关
const touchStartX = ref(0);
const screenWidth = ref(375);
const translateX = ref(0);
const baseTranslateX = ref(0);
const isAnimating = ref(false);
const isDragging = ref(false);

// 初始化屏幕宽度
const initScreenWidth = () => {
  uni.getSystemInfo({
    success: (res) => {
      screenWidth.value = res.windowWidth || res.screenWidth || 375;
    }
  });
};

// 获取月份的第一天是星期几（0-6，0是星期日）
const getFirstDayOfMonth = (year, month) => {
  return new Date(year, month - 1, 1).getDay();
};

// 获取月份的天数
const getDaysInMonth = (year, month) => {
  return new Date(year, month, 0).getDate();
};

// 生成月份的日期数组（包含前后月份的填充日期）
const generateMonthDays = (year, month) => {
  const firstDay = getFirstDayOfMonth(year, month);
  const daysInMonth = getDaysInMonth(year, month);
  const days = [];
  
  // 计算上个月的最后几天
  const prevMonth = month === 1 ? 12 : month - 1;
  const prevYear = month === 1 ? year - 1 : year;
  const prevMonthDays = getDaysInMonth(prevYear, prevMonth);
  
  // 填充前面月份的日期（从最后几天开始）
  if (firstDay > 0) {
    for (let i = firstDay - 1; i >= 0; i--) {
      days.push({
        day: prevMonthDays - i,
        year: prevYear,
        month: prevMonth,
        isCurrentMonth: false
      });
    }
  }
  
  // 填充当前月份的日期
  for (let i = 1; i <= daysInMonth; i++) {
    days.push({
      day: i,
      year: year,
      month: month,
      isCurrentMonth: true
    });
  }
  
  // 填充后面月份的日期（确保有6行，即42个格子）
  const totalDays = days.length;
  const remainingDays = 42 - totalDays; // 6行 * 7列 = 42
  const nextMonth = month === 12 ? 1 : month + 1;
  const nextYear = month === 12 ? year + 1 : year;
  
  for (let i = 1; i <= remainingDays; i++) {
    days.push({
      day: i,
      year: nextYear,
      month: nextMonth,
      isCurrentMonth: false
    });
  }
  
  return days;
};

// 计算当前月份的日期
const currentMonthDays = computed(() => {
  return generateMonthDays(currentYear.value, currentMonth.value);
});

// 计算上一个月
const prevMonthYear = computed(() => {
  if (currentMonth.value === 1) {
    return currentYear.value - 1;
  }
  return currentYear.value;
});

const prevMonthMonth = computed(() => {
  if (currentMonth.value === 1) {
    return 12;
  }
  return currentMonth.value - 1;
});

const prevMonthDays = computed(() => {
  return generateMonthDays(prevMonthYear.value, prevMonthMonth.value);
});

// 计算下一个月
const nextMonthYear = computed(() => {
  if (currentMonth.value === 12) {
    return currentYear.value + 1;
  }
  return currentYear.value;
});

const nextMonthMonth = computed(() => {
  if (currentMonth.value === 12) {
    return 1;
  }
  return currentMonth.value + 1;
});

const nextMonthDays = computed(() => {
  return generateMonthDays(nextMonthYear.value, nextMonthMonth.value);
});

// 格式化日期为 YYYY-MM-DD
const formatDate = (year, month, day) => {
  const m = String(month).padStart(2, '0');
  const d = String(day).padStart(2, '0');
  return `${year}-${m}-${d}`;
};

// 判断是否是今天
const isToday = (dayObj) => {
  if (!dayObj || !dayObj.day) return false;
  const today = new Date();
  return (
    dayObj.year === today.getFullYear() &&
    dayObj.month === today.getMonth() + 1 &&
    dayObj.day === today.getDate()
  );
};

// 判断是否被选中
const isSelected = (dayObj) => {
  if (!dayObj || !dayObj.day) return false;
  const selected = new Date(props.selectedDate);
  return (
    dayObj.year === selected.getFullYear() &&
    dayObj.month === selected.getMonth() + 1 &&
    dayObj.day === selected.getDate()
  );
};

// 判断是否有事件
const hasEvent = (dayObj) => {
  if (!dayObj || !dayObj.day) return false;
  const dateStr = formatDate(dayObj.year, dayObj.month, dayObj.day);
  return props.events.some(event => event.date === dateStr);
};

// 选择日期
const selectDate = (dayObj) => {
  if (!dayObj || !dayObj.day) return;
  const dateStr = formatDate(dayObj.year, dayObj.month, dayObj.day);
  emit('change', dateStr);
  // 选择后不收起日历
  // setTimeout(() => {
  //   isExpanded.value = false;
  // }, 200);
};

// 切换日历展开/收起
const toggleCalendar = () => {
  isExpanded.value = !isExpanded.value;
  if (isExpanded.value) {
    initScreenWidth();
    // 同步当前显示月份到选中日期
    const selected = new Date(props.selectedDate);
    currentYear.value = selected.getFullYear();
    currentMonth.value = selected.getMonth() + 1;
    translateX.value = -screenWidth.value;
    baseTranslateX.value = -screenWidth.value;
  }
};

// 切换到上一个月
const prevMonth = () => {
  if (currentMonth.value === 1) {
    currentYear.value -= 1;
    currentMonth.value = 12;
  } else {
    currentMonth.value -= 1;
  }
  translateX.value = -screenWidth.value;
};

// 切换到下一个月
const nextMonth = () => {
  if (currentMonth.value === 12) {
    currentYear.value += 1;
    currentMonth.value = 1;
  } else {
    currentMonth.value += 1;
  }
  translateX.value = -screenWidth.value;
};

// 触摸开始
const handleTouchStart = (e) => {
  if (isAnimating.value) return;
  const touch = e.touches[0];
  touchStartX.value = touch.clientX;
  isDragging.value = true;
  baseTranslateX.value = translateX.value;
};

// 触摸移动
const handleTouchMove = (e) => {
  if (!isDragging.value || isAnimating.value) return;
  const touch = e.touches[0];
  const deltaX = touch.clientX - touchStartX.value;
  translateX.value = baseTranslateX.value + deltaX;
  
  // 限制滑动范围
  const minTranslate = -screenWidth.value * 2;
  const maxTranslate = 0;
  translateX.value = Math.max(minTranslate, Math.min(maxTranslate, translateX.value));
};

// 触摸结束
const handleTouchEnd = (e) => {
  if (!isDragging.value || isAnimating.value) return;
  
  const touch = e.changedTouches[0];
  const deltaX = touch.clientX - touchStartX.value;
  const minSwipeDistance = screenWidth.value * 0.2;
  
  isDragging.value = false;
  
  if (Math.abs(deltaX) > minSwipeDistance) {
    if (deltaX > 0) {
      // 向左滑动，显示上一个月
      slideToPrevMonth();
    } else {
      // 向右滑动，显示下一个月
      slideToNextMonth();
    }
  } else {
    // 回到中间位置
    resetToCenter();
  }
};

// 重置到中心位置
const resetToCenter = () => {
  isAnimating.value = true;
  translateX.value = -screenWidth.value;
  setTimeout(() => {
    isAnimating.value = false;
  }, 300);
};

// 滑动到上一个月
const slideToPrevMonth = () => {
  isAnimating.value = true;
  translateX.value = -screenWidth.value * 2;
  
  setTimeout(() => {
    isAnimating.value = false;
    prevMonth();
    setTimeout(() => {
      translateX.value = -screenWidth.value;
      baseTranslateX.value = -screenWidth.value;
    }, 0);
  }, 300);
};

// 滑动到下一个月
const slideToNextMonth = () => {
  isAnimating.value = true;
  translateX.value = 0;
  
  setTimeout(() => {
    isAnimating.value = false;
    nextMonth();
    setTimeout(() => {
      translateX.value = -screenWidth.value;
      baseTranslateX.value = -screenWidth.value;
    }, 0);
  }, 300);
};

// 显示的年月日
const displayYearMonth = computed(() => {
  const date = new Date(props.selectedDate);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
});

const displayDay = computed(() => {
  const date = new Date(props.selectedDate);
  return String(date.getDate()).padStart(2, '0');
});

const displayWeekday = computed(() => {
  const date = new Date(props.selectedDate);
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  return `星期${weekdays[date.getDay()]}`;
});

// 日程数量
const eventCount = computed(() => {
  return props.events.filter(e => e.date === props.selectedDate).length;
});

// 监听选中日期变化，同步月份显示
watch(() => props.selectedDate, (newDate) => {
  if (!isExpanded.value) {
    const selected = new Date(newDate);
    currentYear.value = selected.getFullYear();
    currentMonth.value = selected.getMonth() + 1;
  }
}, { immediate: true });

// 初始化
initScreenWidth();
</script>

<style scoped lang="scss">
.month-calendar-container {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: #fff;
  cursor: pointer;
}

.date-display {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.year-month {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.day {
  font-size: 32rpx;
  font-weight: 600;
  color: #2885ff;
}

.weekday {
  font-size: 24rpx;
  color: #999;
}

.event-count {
  font-size: 24rpx;
  color: #666;
  margin-right: 20rpx;
}

.arrow-icon {
  font-size: 24rpx;
  color: #999;
  transition: transform 0.3s;
  
  &.rotate {
    transform: rotate(180deg);
  }
}

.calendar-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  
  &.expanded {
    max-height: 800rpx;
    overflow: visible;
  }
}

.month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.month-nav-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #666;
  cursor: pointer;
  
  &:active {
    background: #f5f5f5;
    border-radius: 50%;
  }
}

.month-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.weekdays {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.weekday-item {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  color: #666;
}

.calendar-swipe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-x;
}

.calendar-wrapper {
  display: flex;
  width: 300%;
  will-change: transform;
}

.calendar-month {
  flex: 0 0 33.333%;
  width: 33.333%;
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.calendar-day {
  flex: 0 0 calc(100% / 7);
  width: calc(100% / 7);
  height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  
  &:active {
    background: #f5f5f5;
    border-radius: 50%;
  }
  
  &.other-month {
    .day-number {
      color: #ddd;
    }
  }
  
  &.today {
    .day-number {
      color: #2885ff;
      font-weight: 600;
      

    }
  }
  
  &.selected {
    .day-number {
      color: #fff;
      background: #2885ff;
      border-radius: 50%;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  &.has-event {
    &::after {
      content: '';
      position: absolute;
      bottom: 8rpx;
      width: 8rpx;
      height: 8rpx;
      background: #2885ff;
      border-radius: 50%;
    }
  }
}

.day-number {
  font-size: 28rpx;
  color: #333;
}

.event-dot {
  position: absolute;
  bottom: 8rpx;
  width: 8rpx;
  height: 8rpx;
  background: #2885ff;
  border-radius: 50%;
}
</style>