hms/apps/miniprogram-uniapp/src/components/WeekCalendar.vue

<template>
  <view class="week-calendar">
    <view class="week-nav">
      <text class="week-arrow" @tap="weekOffset--">&#x25C0;</text>
      <text class="week-label">{{ dates[0]?.slice(5) }} ~ {{ dates[6]?.slice(5) }}</text>
      <text class="week-arrow" @tap="weekOffset++">&#x25B6;</text>
    </view>
    <view class="week-grid">
      <view v-for="(day, idx) in WEEKDAYS" :key="dates[idx]"
        class="week-cell"
        :class="{
          'cell-selected': dates[idx] === selectedDate,
          'cell-empty': !isScheduled(dates[idx]),
          'cell-past': dates[idx] < today
        }"
        @tap="onCellTap(dates[idx])">
        <text class="cell-weekday">{{ day }}</text>
        <text class="cell-date" :class="{ 'cell-today': dates[idx] === today }">
          {{ parseInt(dates[idx]?.slice(8) || '0') }}
        </text>
        <view v-if="isScheduled(dates[idx])" class="cell-dot" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  scheduledDates: string[]
  selectedDate: string
}>()

const emit = defineEmits<{
  (e: 'selectDate', date: string): void
}>()

const WEEKDAYS = ['一', '二', '三', '四', '五', '六', '日']
const weekOffset = ref(0)

const today = computed(() => {
  const d = new Date()
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
})

const dates = computed(() => {
  const result: string[] = []
  const now = new Date()
  const monday = new Date(now)
  monday.setDate(now.getDate() - ((now.getDay() + 6) % 7) + weekOffset.value * 7)
  for (let i = 0; i < 7; i++) {
    const d = new Date(monday)
    d.setDate(monday.getDate() + i)
    result.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`)
  }
  return result
})

function isScheduled(date: string): boolean {
  return props.scheduledDates.includes(date)
}

function onCellTap(date: string) {
  if (isScheduled(date) && date >= today.value) {
    emit('selectDate', date)
  }
}
</script>

<style lang="scss" scoped>
.week-calendar {
  background: $card;
  border-radius: $r;
  padding: 20px 16px;
  box-shadow: $shadow-sm;
}

.week-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.week-arrow {
  font-size: 28px;
  color: $pri;
  padding: 8px 16px;
}

.week-label {
  font-size: var(--tk-font-body-sm);
  color: $tx2;
  font-weight: 600;
}

.week-grid {
  display: flex;
  justify-content: space-around;
}

.week-cell {
  @include flex-center;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
  border-radius: $r-sm;
  transition: background 0.2s;
}

.cell-weekday {
  font-size: var(--tk-font-micro);
  color: $tx3;
  margin-bottom: 4px;
}

.cell-date {
  font-size: var(--tk-font-body-sm);
  color: $tx;
  font-weight: 600;
  margin-bottom: 4px;
}

.cell-today {
  color: $pri;
}

.cell-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: $pri;
}

.cell-selected {
  background: $pri-l;

  .cell-date { color: $pri-d; }
  .cell-dot { background: $pri-d; }
}

.cell-empty {
  opacity: 0.4;
}

.cell-past {
  opacity: 0.5;

  .cell-dot { background: $tx3; }
}
</style>