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

<template>
  <view class="slot-card-wrapper" :class="[`status-${statusClass}`]" @tap="emit('cardTap', timeSlot)">
    <!-- Ticket background image -->
    <image
      class="ticket-bg"
      src="/static/courseBg.png"
      mode="aspectFill"
    />

    <!-- Card content overlay -->
    <view class="ticket-content">
      <!-- ── Top section: Time row (like flight ticket) ── -->
      <view class="ticket-top">
        <!-- Left: Start time -->
        <view class="time-block">
          <text class="time-main">{{ startTimeDisplay }}</text>
          <text class="time-label">{{ timeSlot.date }}</text>
        </view>

        <!-- Center: Duration + icon -->
        <view class="duration-block">
          <view class="duration-line">
            <view class="line-dot" />
            <view class="line-dash" />
            <view class="duration-icon">
              <text class="icon-text">⏱</text>
            </view>
            <view class="line-dash" />
            <view class="line-dot" />
          </view>
          <text class="duration-text">{{ durationMin }}分钟</text>
        </view>

        <!-- Right: End time -->
        <view class="time-block time-block--right">
          <text class="time-main">{{ endTimeDisplay }}</text>
          <view class="capacity-tag" :class="capacityClass">
            <text class="capacity-text">{{ capacityLabel }}</text>
          </view>
        </view>
      </view>

      <!-- ── Dashed tear-off line ── -->
      <view class="tear-line" />

      <!-- ── Bottom section: Course name + Action ── -->
      <view class="ticket-bottom">
        <view class="course-info">
          <text class="course-name">普拉提私教</text>
        </view>

        <!-- Action area -->
        <view class="action-area">
          <!-- Expired -->
          <template v-if="isPast && !timeSlot.isBookedByMe">
            <view class="action-badge badge-expired">
              <text>已过期</text>
            </view>
          </template>

          <!-- OPEN + not booked -->
          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
            <view class="action-btn btn-book" @tap.stop="emit('book', timeSlot)">
              <text>预约</text>
            </view>
          </template>

          <!-- OPEN + booked by me -->
          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
            <view class="action-badge badge-booked">
              <text>{{ myBookingLabel }}</text>
            </view>
            <view class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
              <text>取消</text>
            </view>
          </template>

          <!-- FULL -->
          <template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
            <view class="action-badge badge-full">
              <text>已约满</text>
            </view>
          </template>

          <!-- CLOSED -->
          <template v-else>
            <view class="action-badge badge-closed">
              <text>已关闭</text>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { TimeSlotWithBookingStatus } from '@mp-pilates/shared'
import { BookingStatus, TimeSlotStatus } from '@mp-pilates/shared'
import { computed } from 'vue'
import { isSlotPast } from '../utils/format'

interface Props {
  timeSlot: TimeSlotWithBookingStatus
}

const props = defineProps<Props>()
const emit = defineEmits<{
  book: [timeSlot: TimeSlotWithBookingStatus]
  cancel: [timeSlot: TimeSlotWithBookingStatus]
  cardTap: [timeSlot: TimeSlotWithBookingStatus]
}>()

const startTimeDisplay = computed(() => props.timeSlot.startTime.slice(0, 5))
const endTimeDisplay = computed(() => props.timeSlot.endTime.slice(0, 5))

const durationMin = computed(() => {
  const [sh, sm] = props.timeSlot.startTime.split(':').map(Number)
  const [eh, em] = props.timeSlot.endTime.split(':').map(Number)
  return (eh * 60 + em) - (sh * 60 + sm)
})

const myBookingLabel = computed(() => (
  props.timeSlot.myBookingStatus === BookingStatus.PENDING_CONFIRMATION
    ? '已预约待确认'
    : '已预约'
))

const capacityLabel = computed(() => {
  const { bookedCount, capacity, status } = props.timeSlot
  if (status === TimeSlotStatus.CLOSED) return '已关闭'
  if (status === TimeSlotStatus.FULL) return '已约满'
  const remaining = capacity - bookedCount
  return `剩余${remaining}位`
})

const capacityClass = computed(() => {
  const { bookedCount, capacity, status } = props.timeSlot
  if (status === TimeSlotStatus.CLOSED) return 'cap-closed'
  if (status === TimeSlotStatus.FULL) return 'cap-full'
  if (bookedCount >= capacity * 0.8) return 'cap-almost'
  return 'cap-open'
})

const statusClass = computed(() => {
  if (isPast.value && !props.timeSlot.isBookedByMe) return 'expired'
  if (props.timeSlot.isBookedByMe) return 'booked'
  if (props.timeSlot.status === TimeSlotStatus.FULL) return 'full'
  if (props.timeSlot.status === TimeSlotStatus.CLOSED) return 'closed'
  return 'open'
})

const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.startTime))
</script>

<style lang="scss" scoped>
/* ─── Wrapper ─── */
.slot-card-wrapper {
  position: relative;
  margin: 0 24rpx 20rpx;
  min-height: 220rpx;
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.98);
  }

  /* Status-based opacity */
  &.status-expired {
    opacity: 0.55;
  }

  &.status-full,
  &.status-closed {
    opacity: 0.75;
  }
}

/* ─── Ticket background image ─── */
.ticket-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ─── Content overlay ─── */
.ticket-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 28rpx 40rpx 24rpx;
}

/* ═══ Top section: Time row ═══ */
.ticket-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 100rpx;

  &--right {
    align-items: flex-end;
  }
}

.time-main {
  font-size: 40rpx;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1;
  letter-spacing: 1rpx;
}

.time-label {
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #999;
  font-weight: 500;
}

/* Duration center block */
.duration-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 16rpx;
}

.duration-line {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 8rpx;
}

.line-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.line-dash {
  flex: 1;
  height: 2rpx;
  background: repeating-linear-gradient(
    to right,
    #d0d0d0 0,
    #d0d0d0 8rpx,
    transparent 8rpx,
    transparent 16rpx
  );
}

.duration-icon {
  flex-shrink: 0;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: rgba($primary-color, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8rpx;
}

.icon-text {
  font-size: 22rpx;
}

.duration-text {
  margin-top: 6rpx;
  font-size: 22rpx;
  color: #999;
  font-weight: 500;
}

/* Capacity tag */
.capacity-tag {
  margin-top: 8rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 20rpx;

  &.cap-open {
    background: rgba(76, 175, 80, 0.08);

    .capacity-text {
      color: #4caf50;
    }
  }

  &.cap-almost {
    background: rgba(245, 158, 11, 0.08);

    .capacity-text {
      color: #f59e0b;
    }
  }

  &.cap-full {
    background: rgba(239, 68, 68, 0.08);

    .capacity-text {
      color: #ef4444;
    }
  }

  &.cap-closed {
    background: rgba(0, 0, 0, 0.04);

    .capacity-text {
      color: #999;
    }
  }
}

.capacity-text {
  font-size: 20rpx;
  font-weight: 600;
}

/* ═══ Tear-off dashed line ═══ */
.tear-line {
  margin: 20rpx -40rpx 16rpx;
  height: 2rpx;
  background: repeating-linear-gradient(
    to right,
    #e0dcd6 0,
    #e0dcd6 10rpx,
    transparent 10rpx,
    transparent 20rpx
  );
  opacity: 0.6;
}

/* ═══ Bottom section ═══ */
.ticket-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.course-info {
  flex: 1;
}

.course-name {
  font-size: 30rpx;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 1rpx;
}

/* ─── Action area ─── */
.action-area {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex-shrink: 0;
}

.action-btn,
.action-badge {
  padding: 10rpx 24rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-book {
  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
  min-width: 120rpx;
  height: 60rpx;
  transition: all 0.15s;

  &:active {
    opacity: 0.85;
    transform: scale(0.96);
  }
}

.badge-booked {
  background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
  color: $primary-dark;
}

.badge-expired {
  background: #f0f0f0;
  color: #999;
}

.badge-full {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.badge-closed {
  background: #f0f0f0;
  color: #bbb;
}

.cancel-link {
  font-size: 22rpx;
  color: #ef4444;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(239, 68, 68, 0.3);
}
</style>