richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 将课程预约卡片改造为电影票风格设计

Browse Source 
### 改动内容

#### 1. SlotCard 组件完全重新设计
- **新增票据风格装饰**：左右两侧添加圆角凹陷（打孔效果）
- **三栏布局**：
  - 左：时间（开始时间大号、分割线、结束时间小号）
  - 中：课程名称、时长、剩余名额 + 虚线分割符
  - 右：操作按钮或状态徽章
- **日期展示**：卡片上方显示完整日期 (YYYY-MM-DD)
- **状态指示器**：
  - 绿色：有空位
  - 橙色：接近满额（80% 以上）
  - 红色：已满
  - 灰色：已关闭/已过期
- **响应式样式**：根据预约、满额、已过期等状态自动调整背景颜色和透明度

#### 2. 预约页面 (booking/index.vue) 样式调整
- 移除卡片列表的间距（`gap: 20rpx` → `padding: 24rpx 0 0`）
- 更新日期摘要的内边距（`0 8rpx 4rpx` → `0 24rpx 16rpx`）
- 调整加载骨架屏的尺寸和间距
- 优化预加载动画匹配新卡片设计

### 设计特点
✨ 票据风格的视觉设计
🎯 改进的信息层级和易读性
🎨 精细的状态指示和颜色编码
📱 保持响应式和易用性

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
richarjiang
2026-04-06 17:12:53 +08:00
parent ba4e4bb301
commit 168968f073
2 changed files with 327 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

552
packages/app/src/components/SlotCard.vue
View File

@@ -1,70 +1,95 @@
<template>
<view class="slot-card" :class="{ 'slot-card--booked': timeSlot.isBookedByMe, 'slot-card--past': isPast && !timeSlot.isBookedByMe }">
<!-- Booked accent bar -->
<view v-if="timeSlot.isBookedByMe" class="booked-bar" />
<view class="slot-card-wrapper">
<!-- Date display above card -->
<view class="slot-date">
{{ timeSlot.date }}
</view>
<view class="slot-main">
<!-- Left: Time column -->
<view class="slot-time-col">
<text class="slot-start">{{ timeSlot.startTime.slice(0, 5) }}</text>
<view class="time-divider" />
<text class="slot-end">{{ timeSlot.endTime.slice(0, 5) }}</text>
<view class="slot-card" :class="[
{ 'slot-card--booked': timeSlot.isBookedByMe },
{ 'slot-card--past': isPast && !timeSlot.isBookedByMe },
{ 'slot-card--full': timeSlot.status === TimeSlotStatus.FULL },
`status-${statusClass}`
]">
<!-- Decorative left curves (ticket style) -->
<view class="curve curve-left">
<view class="curve-inner curve-top" />
<view class="curve-inner curve-bottom" />
</view>
<!-- Center: Info -->
<view class="slot-info">
<view class="slot-title-row">
<text class="slot-title">普拉提私教</text>
<text class="slot-duration">{{ durationMin }}分钟</text>
<!-- Main content -->
<view class="slot-content">
<!-- Left: Time column -->
<view class="time-section">
<text class="start-time">{{ timeSlot.startTime.slice(0, 5) }}</text>
<view class="time-divider" />
<text class="end-time">{{ timeSlot.endTime.slice(0, 5) }}</text>
</view>
<view class="slot-meta">
<view class="slot-capacity" :class="capacityClass">
<text class="capacity-dot" />
<text class="capacity-text">{{ capacityLabel }}</text>
<!-- Center divider with dashes -->
<view class="divider-dashes" />
<!-- Center: Course info -->
<view class="course-section">
<text class="course-name">普拉提私教</text>
<view class="course-meta">
<text class="course-duration">{{ durationMin }}分钟</text>
<text class="meta-separator">•</text>
<view class="course-capacity" :class="capacityClass">
<text class="capacity-text">{{ capacityLabel }}</text>
</view>
</view>
</view>
<!-- Center divider with dashes -->
<view class="divider-dashes" />
<!-- Right: Action section -->
<view class="action-section">
<!-- Expired badge -->
<template v-if="isPast && !timeSlot.isBookedByMe">
<view class="action-badge badge-expired">
<text>已过期</text>
</view>
</template>
<!-- OPEN + not booked: Book button -->
<template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
<view class="action-button btn-book" @tap.stop="emit('book', timeSlot)">
<text>预约</text>
</view>
</template>
<!-- OPEN + booked by me: Cancel link -->
<template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
<view class="action-badge badge-booked">
<text>已预约</text>
</view>
<view class="action-cancel" @tap.stop="emit('cancel', timeSlot)">
<text>取消</text>
</view>
</template>
<!-- FULL: Full badge -->
<template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
<view class="action-badge badge-full">
<text>已约满</text>
</view>
</template>
<!-- CLOSED: Closed badge -->
<template v-else>
<view class="action-badge badge-closed">
<text>已关闭</text>
</view>
</template>
</view>
</view>
<!-- Right: Action -->
<view class="slot-action">
<template v-if="isPast && !timeSlot.isBookedByMe">
<view class="badge-expired">
<text class="badge-expired-text">已过期</text>
</view>
</template>
<!-- OPEN + not booked -->
<template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
<view class="btn btn-book" @tap.stop="emit('book', timeSlot)">
<text class="btn-text">预约</text>
</view>
</template>
<!-- OPEN + booked by me -->
<template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
<view class="booked-badge-col">
<view class="badge-booked">
<text class="badge-text">已预约</text>
</view>
<view class="btn-cancel" @tap.stop="emit('cancel', timeSlot)">
<text class="btn-cancel-text">取消预约</text>
</view>
</view>
</template>
<!-- FULL -->
<template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
<view class="btn btn-full">
<text class="btn-text">已约满</text>
</view>
</template>
<!-- CLOSED -->
<template v-else>
<view class="btn btn-closed">
<text class="btn-text">已关闭</text>
</view>
</template>
<!-- Decorative right curves (ticket style) -->
<view class="curve curve-right">
<view class="curve-inner curve-top" />
<view class="curve-inner curve-bottom" />
</view>
</view>
</view>
@@ -108,253 +133,308 @@ const capacityClass = computed(() => {
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>
.slot-card-wrapper {
padding: 0 24rpx 24rpx;
display: flex;
flex-direction: column;
gap: 8rpx;
}
.slot-date {
font-size: 24rpx;
color: #999;
padding: 0 12rpx;
font-weight: 500;
}
/* ─── Main Card ─── */
.slot-card {
background: #fff;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
position: relative;
transition: transform 0.15s, box-shadow 0.15s;
display: flex;
align-items: center;
background: #fff;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
min-height: 140rpx;
padding: 0;
&:active {
transform: scale(0.985);
transform: scale(0.98);
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
&--booked {
background: #f0f7fb;
box-shadow: 0 4rpx 24rpx rgba($primary-dark, 0.12);
/* Status variants */
&.status-open {
background: linear-gradient(135deg, #fff 0%, #fafaf8 100%);
}
&--past {
background: #f8f8f8;
&.status-booked {
background: linear-gradient(135deg, #f0f7fb 0%, #f5fbff 100%);
box-shadow: 0 4rpx 20rpx rgba(66, 133, 244, 0.1);
}
&.status-full,
&.status-closed {
background: #fafaf8;
opacity: 0.85;
}
&.status-expired {
background: #f8f8f6;
opacity: 0.7;
.slot-start {
color: #bbb;
}
.slot-title {
color: #bbb;
}
}
}
.booked-bar {
/* ─── Decorative curves (ticket punch holes) ─── */
.curve {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 8rpx;
background: linear-gradient(180deg, $primary-color, $primary-dark);
border-radius: 24rpx 0 0 24rpx;
}
.slot-main {
width: 48rpx;
height: 140rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 32rpx 28rpx 32rpx 36rpx;
gap: 24rpx;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
&.curve-left {
left: -24rpx;
}
&.curve-right {
right: -24rpx;
}
}
/* ── Time column ─── */
.slot-time-col {
.curve-inner {
width: 48rpx;
height: 48rpx;
background: #FAF8F5; /* Match page background */
border-radius: 0 48rpx 48rpx 0;
.curve-right & {
border-radius: 48rpx 0 0 48rpx;
}
}
/* ─── Main content flex layout ─── */
.slot-content {
display: flex;
align-items: center;
width: 100%;
padding: 28rpx 48rpx;
gap: 0;
}
/* ─── Time Section ─── */
.time-section {
display: flex;
flex-direction: column;
align-items: center;
min-width: 80rpx;
min-width: 90rpx;
flex-shrink: 0;
gap: 8rpx;
}
.slot-start {
font-size: 34rpx;
.start-time {
font-size: 38rpx;
font-weight: 700;
color: #1a1a1a;
line-height: 1;
}
.end-time {
font-size: 26rpx;
font-weight: 500;
color: #999;
line-height: 1;
}
.time-divider {
width: 2rpx;
height: 20rpx;
background: #e0dcd6;
border-radius: 1rpx;
margin: 4rpx 0;
}
/* ─── Dashed dividers ─── */
.divider-dashes {
flex: 0 0 auto;
width: 2rpx;
height: 80rpx;
background: repeating-linear-gradient(
to bottom,
#e0dcd6 0,
#e0dcd6 8rpx,
transparent 8rpx,
transparent 16rpx
);
margin: 0 20rpx;
opacity: 0.6;
}
/* ─── Course Section (center) ─── */
.course-section {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
gap: 8rpx;
min-width: 120rpx;
}
.course-name {
font-size: 32rpx;
font-weight: 700;
color: #1a1a1a;
line-height: 1.2;
}
.time-divider {
width: 2rpx;
height: 16rpx;
background: #e0dcd6;
margin: 6rpx 0;
border-radius: 1rpx;
}
.slot-end {
font-size: 24rpx;
font-weight: 500;
color: #999;
line-height: 1.2;
}
/* ── Info ─── */
.slot-info {
flex: 1;
.course-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 10rpx;
min-width: 0;
}
.slot-title-row {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 12rpx;
}
.slot-title {
font-size: 30rpx;
font-weight: 600;
color: #1a1a1a;
}
.slot-duration {
font-size: 22rpx;
color: #bbb;
font-weight: 400;
color: #999;
}
.slot-meta {
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.course-duration {
font-weight: 500;
}
.slot-capacity {
display: inline-flex;
align-items: center;
gap: 8rpx;
.meta-separator {
color: #ddd;
}
.capacity-dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
.capacity-text {
font-size: 22rpx;
font-weight: 500;
}
.course-capacity {
font-weight: 600;
padding: 4rpx 8rpx;
border-radius: 4rpx;
&.cap-open {
.capacity-dot { background: #4caf50; }
.capacity-text { color: #4caf50; }
}
color: #4caf50;
background: rgba(76, 175, 80, 0.08);
&.cap-almost {
.capacity-dot { background: #f59e0b; }
.capacity-text { color: #f59e0b; }
}
&.cap-full {
.capacity-dot { background: #ef4444; }
.capacity-text { color: #ef4444; }
}
&.cap-closed {
.capacity-dot { background: #ccc; }
.capacity-text { color: #999; }
}
}
/* ── Action ─── */
.slot-action {
flex-shrink: 0;
}
.btn {
min-width: 140rpx;
height: 72rpx;
border-radius: 36rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 32rpx;
.btn-text {
font-size: 26rpx;
font-weight: 600;
}
&.btn-book {
background: linear-gradient(135deg, $primary-color, $primary-dark);
box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
.btn-text { color: #fff; }
&:active {
opacity: 0.85;
.capacity-text {
color: #4caf50;
}
}
&.btn-full {
background: #fef0f0;
&.cap-almost {
color: #f59e0b;
background: rgba(245, 158, 11, 0.08);
.btn-text { color: #ef4444; }
.capacity-text {
color: #f59e0b;
}
}
&.btn-closed {
background: #f5f5f5;
&.cap-full {
color: #ef4444;
background: rgba(239, 68, 68, 0.08);
.btn-text { color: #bbb; }
.capacity-text {
color: #ef4444;
}
}
&.cap-closed {
color: #999;
background: rgba(0, 0, 0, 0.04);
.capacity-text {
color: #999;
}
}
}
.booked-badge-col {
.capacity-text {
font-weight: 600;
}
/* ─── Action Section (right) ─── */
.action-section {
display: flex;
flex-direction: column;
align-items: center;
min-width: 100rpx;
flex-shrink: 0;
gap: 8rpx;
}
.badge-booked {
height: 52rpx;
padding: 0 24rpx;
background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
border-radius: 26rpx;
.action-button,
.action-badge {
padding: 10rpx 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
font-weight: 600;
white-space: nowrap;
}
.badge-text {
font-size: 24rpx;
color: $primary-dark;
font-weight: 600;
.action-button {
min-width: 120rpx;
height: 60rpx;
transition: all 0.15s;
&:active {
opacity: 0.85;
}
}
.btn-book {
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
color: #fff;
box-shadow: 0 4rpx 12rpx rgba($primary-dark, 0.25);
}
.action-badge {
padding: 8rpx 16rpx;
font-size: 24rpx;
white-space: nowrap;
}
.badge-booked {
background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
color: $primary-dark;
}
.badge-expired {
height: 52rpx;
padding: 0 24rpx;
background: #f0f0f0;
border-radius: 26rpx;
display: flex;
align-items: center;
justify-content: center;
.badge-expired-text {
font-size: 24rpx;
color: #999;
font-weight: 600;
}
color: #999;
}
.btn-cancel {
padding: 4rpx 8rpx;
display: flex;
align-items: center;
.badge-full {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.btn-cancel-text {
font-size: 22rpx;
color: #ef4444;
font-weight: 400;
}
.badge-closed {
background: #f0f0f0;
color: #bbb;
}
.action-cancel {
padding: 4rpx 12rpx;
font-size: 22rpx;
color: #ef4444;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(239, 68, 68, 0.3);
}
</style>

23
packages/app/src/pages/booking/index.vue
View File

@@ -329,13 +329,12 @@ onMounted(async () => {
.slot-list {
display: flex;
flex-direction: column;
gap: 20rpx;
padding: 24rpx 24rpx 0;
padding: 24rpx 0 0;
}
/* ── Date summary ──────────────────────────────────── */
.date-summary {
padding: 0 8rpx 4rpx;
padding: 0 24rpx 16rpx;
}
.date-summary-text {
@@ -348,25 +347,25 @@ onMounted(async () => {
.loading-wrap {
display: flex;
flex-direction: column;
gap: 20rpx;
gap: 24rpx;
padding: 28rpx 24rpx;
}
.skeleton-card {
height: 140rpx;
border-radius: 24rpx;
border-radius: 20rpx;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
padding: 32rpx 28rpx 32rpx 36rpx;
gap: 24rpx;
padding: 28rpx 48rpx;
gap: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}
.skeleton-time {
width: 80rpx;
height: 72rpx;
width: 90rpx;
height: 80rpx;
border-radius: 12rpx;
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background-size: 400% 100%;
@@ -400,9 +399,9 @@ onMounted(async () => {
}
.skeleton-btn {
width: 140rpx;
height: 72rpx;
border-radius: 36rpx;
width: 100rpx;
height: 60rpx;
border-radius: 20rpx;
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;