SmartParks_uniapp/components/CommonCalendar.vue

<template>
  <view class="calendar-container">
    <!-- 展开/收起按钮，可以外部隐藏 -->
    <view class="calendar-header">
      <button size="mini" @click="toggleMode">
        {{ mode === 'month' ? '收起为周' : '展开为月' }}
      </button>
      <text>{{ displayTitle }}</text>
    </view>

    <view
      class="calendar-content"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      :style="{ height: mode === 'month' ? '450rpx' : '120rpx', transition: 'height 0.3s' }"
    >
      <!-- 星期栏 -->
      <view class="calendar-week">
        <text v-for="(w, i) in weeks" :key="i">{{ w }}</text>
      </view>

      <!-- 日期 -->
      <view class="calendar-days">
        <view
          v-for="(item, i) in renderDays"
          :key="i"
          :class="{
            'calendar-day': true,
            'today': item.isToday,
            'selected': isSelected(item),
            'other-month': item.otherMonth
          }"
          @click="selectDate(item)"
        >
          {{ item.day || '' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomCalendar',
  props: {
    initialMode: { type: String, default: 'month' }, // 'month' or 'week'
    initialDate: { type: String, default: '' },
    allowWeekSwitch: { type: Boolean, default: true } // 控制是否允许上下滑切换
  },
  data() {
    const today = new Date()
    return {
      mode: this.initialMode,
      selected: this.initialDate || this.formatDate(today),
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      renderDays: [],
      touchStartX: 0,
      touchStartY: 0,
      touchMoveX: 0,
      touchMoveY: 0,
      anchorDate: new Date() // 当前视图基准日期
    }
  },
  computed: {
    displayTitle() {
      return `${this.anchorDate.getFullYear()}年${this.anchorDate.getMonth() + 1}月`
    }
  },
  watch: {
    mode() {
      this.generateRenderDays()
    },
    selected() {
      this.generateRenderDays()
    }
  },
  mounted() {
    this.anchorDate = this.safeDate(this.selected)
    this.generateRenderDays()
  },
  methods: {
    // =================== 日期工具 ===================
    formatDate(date) {
      const y = date.getFullYear()
      const m = date.getMonth() + 1
      const d = date.getDate()
      return `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`
    },
    safeDate(date) {
      return new Date(date)
    },
    startOfMonth(date) {
      const d = this.safeDate(date)
      d.setDate(1)
      return d
    },
    startOfWeek(date) {
      const d = this.safeDate(date)
      const day = d.getDay()
      d.setDate(d.getDate() - day)
      return d
    },
    pad(num) {
      return num < 10 ? '0' + num : '' + num
    },

    // =================== 渲染日历 ===================
    generateRenderDays() {
      const days = []
      if (this.mode === 'month') {
        const year = this.anchorDate.getFullYear()
        const month = this.anchorDate.getMonth() + 1
        const firstDayWeek = new Date(year, month - 1, 1).getDay()
        const monthDays = new Date(year, month, 0).getDate()

        // 上月补位
        const lastMonth = month === 1 ? 12 : month - 1
        const lastMonthYear = month === 1 ? year - 1 : year
        const lastMonthDays = new Date(lastMonthYear, lastMonth, 0).getDate()
        for (let i = 0; i < firstDayWeek; i++) {
          days.push({
            day: lastMonthDays - firstDayWeek + 1 + i,
            date: this.formatDate(new Date(lastMonthYear, lastMonth - 1, lastMonthDays - firstDayWeek + 1 + i)),
            otherMonth: true,
            isToday: false
          })
        }

        // 本月
        const todayStr = this.formatDate(new Date())
        for (let i = 1; i <= monthDays; i++) {
          const dateStr = `${year}-${this.pad(month)}-${this.pad(i)}`
          days.push({
            day: i,
            date: dateStr,
            otherMonth: false,
            isToday: dateStr === todayStr
          })
        }

        // 下月补位
        while (days.length % 7 !== 0) {
          const nextDay = days.length - (firstDayWeek + monthDays) + 1
          days.push({
            day: nextDay,
            date: this.formatDate(new Date(month === 12 ? year + 1 : year, month % 12, nextDay)),
            otherMonth: true,
            isToday: false
          })
        }
      } else {
        // 周视图
        const base = this.safeDate(this.selected)
        const weekDay = base.getDay()
        for (let i = 0; i < 7; i++) {
          const d = new Date(base)
          d.setDate(base.getDate() - weekDay + i)
          days.push({
            day: d.getDate(),
            date: this.formatDate(d),
            otherMonth: d.getMonth() !== base.getMonth(),
            isToday: this.formatDate(d) === this.formatDate(new Date())
          })
        }
      }
      this.renderDays = days
    },

    // =================== 事件 ===================
    toggleMode() {
      if (!this.allowWeekSwitch) return
      this.mode = this.mode === 'month' ? 'week' : 'month'
      this.anchorDate = this.mode === 'month' ? this.startOfMonth(this.safeDate(this.selected)) : this.startOfWeek(this.safeDate(this.selected))
      this.generateRenderDays()
    },
    selectDate(item) {
      if (!item.day) return
      this.selected = item.date
      this.$emit('dateChange', item.date)
    },
    isSelected(item) {
      return item.date === this.selected && !item.otherMonth
    },

    // =================== 滑动 ===================
    onTouchStart(e) {
      const t = e.changedTouches[0]
      this.touchStartX = t.clientX
      this.touchStartY = t.clientY
    },
    onTouchMove(e) {
      const t = e.changedTouches[0]
      this.touchMoveX = t.clientX
      this.touchMoveY = t.clientY
    },
    onTouchEnd(e) {
      const t = e.changedTouches[0]
      const endX = t.clientX
      const endY = t.clientY
      const deltaX = endX - this.touchStartX
      const deltaY = endY - this.touchStartY
      const threshold = 40

      // 垂直滑动切换周/月
      if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > threshold) {
        if (!this.allowWeekSwitch) return

        if (deltaY < 0 && this.mode !== 'week') {
          this.mode = 'week'
          this.anchorDate = this.startOfWeek(this.safeDate(this.selected))
          this.generateRenderDays()
        } else if (deltaY > 0 && this.mode !== 'month') {
          this.mode = 'month'
          this.anchorDate = this.startOfMonth(this.safeDate(this.selected))
          this.generateRenderDays()
        }
        return
      }

      // 水平滑动翻页
      if (Math.abs(deltaX) > threshold && Math.abs(deltaX) >= Math.abs(deltaY)) {
        if (deltaX < 0) this.slide(1)
        else this.slide(-1)
      }
    },
    slide(direction) {
      if (this.mode === 'month') {
        const y = this.anchorDate.getFullYear()
        let m = this.anchorDate.getMonth() + 1 + direction
        let year = y
        if (m > 12) { m = 1; year++ }
        if (m < 1) { m = 12; year-- }
        this.anchorDate = new Date(year, m - 1, 1)
      } else {
        const d = this.safeDate(this.selected)
        d.setDate(d.getDate() + direction * 7)
        this.selected = this.formatDate(d)
        this.anchorDate = this.startOfWeek(d)
      }
      this.generateRenderDays()
    }
  }
}
</script>

<style scoped>
.calendar-container {
  width: 100%;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 16rpx #eee;
  padding: 12rpx;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.calendar-content {
  overflow: hidden;
}
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  color: #999;
  font-size: 24rpx;
  padding: 8rpx 0;
  text-align: center;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 80rpx; /* 每个格子固定高度 */
}
.calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;   /* 固定宽度 */
  height: 60rpx;  /* 固定高度，和宽度一致 */
  margin: auto;   /* 居中对齐，避免被挤压 */
  font-size: 30rpx;
  border-radius: 50%;
  transition: background 0.2s;
}
.today {
  color: #007aff;
  font-weight: bold;
  border: 1rpx solid #007aff;
}
.selected {
  background: #007aff;
  color: #fff;
}
.other-month {
  color: #ccc;
}
</style>