mp-pilates/packages/app/src/components/DateSelector.vue

<template>
  <view class="date-selector" :class="`date-selector--${variant}`">
    <scroll-view class="scroll" scroll-x enhanced :show-scrollbar="false">
      <view class="track">
        <view
          v-for="item in dateRange"
          :key="item.date"
          class="date-item"
          :class="[
            `date-item--${variant}`,
            { active: item.date === modelValue, today: item.isToday },
          ]"
          @tap="handleSelect(item.date)"
        >
          <text class="weekday">{{ item.isToday ? '今天' : item.weekday }}</text>
          <text class="day">{{ getDayNumber(item.date) }}</text>
          <text v-if="variant !== 'soft' || getDayNumber(item.date) === '1'" class="month">{{ getMonthNumber(item.date) }}月</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { DATE_SELECTOR_DAYS } from '@mp-pilates/shared'
import { getDateRange } from '../utils/format'

interface Props {
  modelValue: string
  variant?: 'default' | 'booking' | 'soft'
}

const props = defineProps<Props>()
const emit = defineEmits<{
  select: [date: string]
  'update:modelValue': [date: string]
}>()

const dateRange = computed(() => getDateRange(DATE_SELECTOR_DAYS))

function getDayNumber(date: string): string {
  return String(parseInt(date.split('-')[2], 10))
}

function getMonthNumber(date: string): string {
  return String(parseInt(date.split('-')[1], 10))
}

function handleSelect(date: string) {
  emit('update:modelValue', date)
  emit('select', date)
}

const variant = computed(() => props.variant ?? 'default')
</script>

<style lang="scss" scoped>
.date-selector {
  background: #fff;
  padding: 16rpx 0 20rpx;
  border-bottom: 1rpx solid $primary-border;

  &.date-selector--booking {
    background: rgba(252, 250, 248, 0.96);
    border-bottom-color: rgba(192, 154, 137, 0.12);
  }

  .scroll {
    width: 100%;
    white-space: nowrap;
  }

  .track {
    display: inline-flex;
    flex-direction: row;
    padding: 0 24rpx;
    gap: 16rpx;
  }

  .date-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 88rpx;
    padding: 16rpx 12rpx;
    border-radius: 16rpx;
    background: $primary-bg;
    gap: 4rpx;
    transition: background 0.2s;
    flex-shrink: 0;

    .weekday {
      font-size: 22rpx;
      color: #999;
      line-height: 1.3;
    }

    .day {
      font-size: 40rpx;
      font-weight: 700;
      color: #333;
      line-height: 1.2;
    }

    .month {
      font-size: 20rpx;
      color: #bbb;
      line-height: 1.3;
    }

    &.active {
      background: $primary-color;

      .weekday {
        color: rgba(255, 255, 255, 0.85);
      }

      .day {
        color: #fff;
      }

      .month {
        color: rgba(255, 255, 255, 0.7);
      }
    }

    &.today:not(.active) {
      .weekday {
        color: $primary-dark;
        font-weight: 600;
      }
    }

    &.date-item--booking {
      background: rgba(247, 242, 238, 0.88);
      border: 1rpx solid rgba(192, 154, 137, 0.08);

      .weekday {
        color: #9d8b83;
      }

      .day {
        color: #3a2e2a;
      }

      .month {
        color: #b7a79f;
      }

      &.active {
        background: linear-gradient(135deg, #d7beb1, #b98f7d);
        box-shadow: 0 12rpx 28rpx rgba(143, 103, 89, 0.16);

        .weekday,
        .day,
        .month {
          color: #fffaf7;
        }
      }

      &.today:not(.active) {
        .weekday {
          color: #8f6759;
        }
      }
    }
  }
}

.date-selector.date-selector--soft {
  padding: 8rpx 0 24rpx;
  background: #fbf9f6;
  border-bottom: none;
  .track { padding: 0 32rpx; gap: 12rpx; }
  .date-item {
    min-width: 0; width: 86rpx; height: 116rpx; padding: 0;
    box-sizing: border-box; border-radius: 24rpx;
    background: transparent; gap: 12rpx;
    .weekday { font-size: 22rpx; color: #8b817b; }
    .day { font-size: 34rpx; font-weight: 400; color: #514943; }
    &.active {
      background: #eee3dc;
      .weekday, .day { color: #705b4f; }
      .day { font-weight: 500; }
    }
    &.today:not(.active) .weekday { color: #617d73; font-weight: 400; }
  }
}
</style>