gym-manage/gym-manage-uniapp/components/memberInfo/MemberInfoBookingList.vue

<template>
    <view class="booking-section">
        <view class="booking-section__inner">
            <view class="booking-section__header">
                <view class="booking-section__header-inner">
                    <text class="booking-section__title">我的预约</text>
                    <view
                        class="booking-section__link"
                        hover-class="mi-tap--hover"
                        :hover-stay-time="150"
                        @tap="$emit('view-all')"
                    >
                        <text class="booking-section__view-all">查看全部</text>
                        <image
                            class="booking-section__link-arrow"
                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright2.png"
                            mode="aspectFit"
                        />
                    </view>
                </view>
            </view>
            <view class="booking-section__list">
                <!-- 无数据 -->
                <view v-if="!displayItems || displayItems.length === 0" class="booking-section__empty">
                    <text class="booking-section__empty-text">暂无预约记录</text>
                </view>
                <view v-else class="booking-section__list-inner">
                    <view
                        v-for="(item, index) in displayItems"
                        :key="item.id"
                        class="booking-section__row"
                    >
                        <view v-if="index > 0" class="booking-section__divider"></view>
                        <view
                            class="booking-section__item"
                            hover-class="mi-tap-row--hover"
                            :hover-stay-time="150"
                            @tap="$emit('item-tap', item)"
                        >
                            <view class="booking-section__item-inner">
                                <view
                                    class="booking-section__dot"
                                    :class="'booking-section__dot--' + item.status"
                                ></view>
                                <view class="booking-section__content">
                                    <view class="booking-section__content-inner">
                                        <text class="booking-section__desc">{{ item.title }}</text>
                                        <text class="booking-section__text">{{ item.time }}</text>
                                    </view>
                                </view>
                                <view
                                    class="booking-section__tag-badge"
                                    :class="'booking-section__tag-badge--' + item.status"
                                >
                                    <text
                                        class="booking-section__tag-text"
                                        :class="'booking-section__tag-text--' + item.status"
                                    >
                                        {{ item.statusLabel }}
                                    </text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    items: {
        type: Array,
        default: () => []
    }
})

defineEmits(['view-all', 'item-tap'])

const displayItems = computed(() => {
    return props.items || []
})
</script>

<style lang="scss">
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-tap.css';

.booking-section {
    width: 100%;
    height: auto;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.booking-section__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    position: relative;
}

.booking-section__header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.booking-section__header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.booking-section__title {
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
}

.booking-section__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.booking-section__list-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.booking-section__empty {
  padding: 48rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-section__empty-text {
  font-size: 26rpx;
  color: #999;
}

.booking-section__row {
    width: 100%;
}

.booking-section__divider {
    height: 1px;
    background: var(--border-light);
    margin: 0 16rpx;
}

.booking-section__item {
    padding: 24rpx 16rpx;
}

.booking-section__item-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16rpx;
}

.booking-section__dot {
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
    flex-shrink: 0;
}

.booking-section__dot--ongoing {
    background: #4CAF50;
}

.booking-section__dot--completed {
    background: #2196F3;
}

.booking-section__dot--cancelled {
    background: var(--text-muted);
}

.booking-section__content {
    flex: 1;
    min-width: 0;
}

.booking-section__content-inner {
    display: flex;
    flex-direction: column;
    gap: 6rpx;
}

.booking-section__desc {
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-section__text {
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: var(--text-muted);
}

.booking-section__tag-badge {
    padding: 4rpx 14rpx;
    border-radius: 8rpx;
    flex-shrink: 0;
}

.booking-section__tag-badge--ongoing {
    background: rgba(76, 175, 80, 0.1);
}

.booking-section__tag-badge--completed {
    background: rgba(33, 150, 243, 0.1);
}

.booking-section__tag-badge--cancelled {
    background: rgba(153, 153, 153, 0.1);
}

.booking-section__tag-text {
    font-size: var(--font-size-xs);
    font-family: var(--font-family);
}

.booking-section__tag-text--ongoing {
    color: #4CAF50;
}

.booking-section__tag-text--completed {
    color: #2196F3;
}

.booking-section__tag-text--cancelled {
    color: var(--text-muted);
}
</style>