121 lines
4.9 KiB
Vue
121 lines
4.9 KiB
Vue
<template>
|
|
<view class="slot-card" :class="`slot-card--${statusClass}`" @tap="emit('cardTap', timeSlot)">
|
|
<view class="slot-heading">
|
|
<view class="slot-time">
|
|
<text class="time-start">{{ startTimeDisplay }}</text>
|
|
<text class="time-end">— {{ endTimeDisplay }}</text>
|
|
</view>
|
|
<text class="slot-duration">{{ durationMin }} 分钟</text>
|
|
</view>
|
|
<view class="slot-body">
|
|
<view class="course-info">
|
|
<text class="course-name">普拉提私教</text>
|
|
<text class="slot-status">{{ capacityLabel }}</text>
|
|
</view>
|
|
<view class="action-area">
|
|
<template v-if="timeSlot.isBookedByMe">
|
|
<text class="booked-label">已预约</text>
|
|
<view v-if="timeSlot.status === TimeSlotStatus.OPEN" class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
|
|
<text>取消预约</text>
|
|
</view>
|
|
</template>
|
|
<button v-else-if="!isPast && timeSlot.status === TimeSlotStatus.OPEN && timeSlot.bookedCount < timeSlot.capacity"
|
|
class="book-button" hover-class="book-button--pressed" @tap.stop="emit('book', timeSlot)">
|
|
预约
|
|
</button>
|
|
<text v-else class="unavailable-label">{{ isPast ? '已结束' : timeSlot.status === TimeSlotStatus.CLOSED ? '未开放' : '已约满' }}</text>
|
|
</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, isBookedByMe } = props.timeSlot
|
|
if (isBookedByMe) return myBookingLabel.value
|
|
if (isPast.value) return '已结束'
|
|
if (status === TimeSlotStatus.CLOSED) return '暂未开放'
|
|
if (status === TimeSlotStatus.FULL || bookedCount >= capacity) return '名额已满'
|
|
return `还可约 ${Math.max(0, capacity - bookedCount)} 位`
|
|
})
|
|
|
|
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>
|
|
.slot-card {
|
|
margin: 0 32rpx 20rpx;
|
|
padding: 28rpx;
|
|
border: 1rpx solid #eee8e3;
|
|
border-radius: 28rpx;
|
|
background: #fff;
|
|
color: #514943;
|
|
}
|
|
.slot-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16rpx; }
|
|
.slot-time { display: flex; align-items: baseline; gap: 12rpx; font-variant-numeric: tabular-nums; }
|
|
.time-start { font-size: 40rpx; font-weight: 500; line-height: 1.2; }
|
|
.time-end { font-size: 28rpx; color: #8b817b; }
|
|
.slot-duration { flex-shrink: 0; font-size: 22rpx; color: #8b817b; }
|
|
.slot-body { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-top: 24rpx; }
|
|
.course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
|
.course-name { font-size: 26rpx; font-weight: 400; }
|
|
.slot-status { font-size: 22rpx; color: #617d73; }
|
|
.action-area { display: flex; flex-direction: column; align-items: flex-end; gap: 2rpx; flex-shrink: 0; }
|
|
.book-button {
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-width: 136rpx; height: 72rpx; margin: 0; padding: 0 30rpx;
|
|
border: none; border-radius: 999rpx; background: #6b8276;
|
|
font-size: 26rpx; font-weight: 400; line-height: 1; color: #fff;
|
|
&::after { border: none; }
|
|
&--pressed { background: #597264; }
|
|
}
|
|
.booked-label { font-size: 24rpx; color: #617d73; }
|
|
.cancel-link { padding: 12rpx 0 8rpx 20rpx; font-size: 21rpx; color: #8b817b; }
|
|
.unavailable-label { padding: 14rpx 24rpx; border-radius: 999rpx; background: #f3f0ed; color: #8b817b; font-size: 23rpx; }
|
|
.slot-card--booked { background: #f2f5f0; border-color: #e2e9df; }
|
|
.slot-card--expired, .slot-card--closed, .slot-card--full {
|
|
background: #f7f5f2;
|
|
.time-start, .course-name { color: #8b817b; }
|
|
.slot-status { color: #948a82; }
|
|
}
|
|
</style>
|