feat: 优化首页、个人中心页面 UI
This commit is contained in:
richarjiang
@@ -1,94 +1,29 @@
|
||||
<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 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>
|
||||
|
||||
<!-- ── 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>
|
||||
<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>
|
||||
@@ -122,24 +57,17 @@ const durationMin = computed(() => {
|
||||
|
||||
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 { 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(() => {
|
||||
@@ -154,276 +82,39 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ─── Wrapper ─── */
|
||||
.slot-card-wrapper {
|
||||
position: relative;
|
||||
margin: 0 24rpx 20rpx;
|
||||
min-height: 220rpx;
|
||||
transition: all 0.2s ease;
|
||||
filter: drop-shadow(0 16rpx 28rpx rgba(120, 91, 79, 0.08));
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Status-based opacity */
|
||||
&.status-expired {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
&.status-full,
|
||||
&.status-closed {
|
||||
opacity: 0.75;
|
||||
}
|
||||
.slot-card {
|
||||
margin: 0 32rpx 20rpx;
|
||||
padding: 28rpx;
|
||||
border: 1rpx solid #eee8e3;
|
||||
border-radius: 28rpx;
|
||||
background: #fff;
|
||||
color: #514943;
|
||||
}
|
||||
|
||||
/* ─── Ticket background image ─── */
|
||||
.ticket-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
.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; }
|
||||
}
|
||||
|
||||
/* ─── 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: #3a2e2a;
|
||||
line-height: 1;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #a18a82;
|
||||
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: #ccb7ae;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.line-dash {
|
||||
flex: 1;
|
||||
height: 2rpx;
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
#dccbc2 0,
|
||||
#dccbc2 8rpx,
|
||||
transparent 8rpx,
|
||||
transparent 16rpx
|
||||
);
|
||||
}
|
||||
|
||||
.duration-icon {
|
||||
flex-shrink: 0;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(185, 143, 125, 0.12);
|
||||
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: #a18a82;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Capacity tag */
|
||||
.capacity-tag {
|
||||
margin-top: 8rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
|
||||
&.cap-open {
|
||||
background: rgba(101, 163, 126, 0.12);
|
||||
|
||||
.capacity-text {
|
||||
color: #5d9472;
|
||||
}
|
||||
}
|
||||
|
||||
&.cap-almost {
|
||||
background: rgba(214, 161, 92, 0.14);
|
||||
|
||||
.capacity-text {
|
||||
color: #b98543;
|
||||
}
|
||||
}
|
||||
|
||||
&.cap-full {
|
||||
background: rgba(216, 91, 87, 0.12);
|
||||
|
||||
.capacity-text {
|
||||
color: #c96763;
|
||||
}
|
||||
}
|
||||
|
||||
&.cap-closed {
|
||||
background: rgba(111, 96, 91, 0.08);
|
||||
|
||||
.capacity-text {
|
||||
color: #9d8f89;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: #3a2e2a;
|
||||
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, #d5b9ab 0%, #b98f7d 100%);
|
||||
color: #fffaf7;
|
||||
box-shadow: 0 8rpx 18rpx rgba(143, 103, 89, 0.24);
|
||||
min-width: 120rpx;
|
||||
height: 60rpx;
|
||||
transition: all 0.15s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
.badge-booked {
|
||||
background: linear-gradient(135deg, rgba(247, 240, 235, 0.96), rgba(236, 225, 217, 0.98));
|
||||
color: #8f6759;
|
||||
}
|
||||
|
||||
.badge-expired {
|
||||
background: rgba(111, 96, 91, 0.08);
|
||||
color: #9d8f89;
|
||||
}
|
||||
|
||||
.badge-full {
|
||||
background: rgba(216, 91, 87, 0.12);
|
||||
color: #c96763;
|
||||
}
|
||||
|
||||
.badge-closed {
|
||||
background: rgba(111, 96, 91, 0.08);
|
||||
color: #b5a8a1;
|
||||
}
|
||||
|
||||
.cancel-link {
|
||||
font-size: 22rpx;
|
||||
color: #c96763;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(201, 103, 99, 0.28);
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user