时舟年
118 lines
4.5 KiB
Vue
118 lines
4.5 KiB
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="/static/images/chevronright4.png"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-for="item in previewItems"
|
||
:key="item.id"
|
||
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__date">
|
||
<view class="booking-section__date-inner">
|
||
<text class="booking-section__num">{{ item.dateDay }}</text>
|
||
<text class="booking-section__date-sub">{{ item.dateMonth }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="booking-section__content">
|
||
<view class="booking-section__content-inner">
|
||
<text class="booking-section__desc">{{ item.desc }}</text>
|
||
<view class="booking-section__meta">
|
||
<view class="booking-section__meta-inner">
|
||
<image
|
||
class="booking-section__icon-coach"
|
||
src="/static/images/user2.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="booking-section__coach">教练：{{ item.coach }}</text>
|
||
<image
|
||
class="booking-section__icon-location"
|
||
src="/static/images/mappin1.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="booking-section__text">{{ item.location }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="booking-section__status-wrap">
|
||
<view
|
||
class="booking-section__status-badge"
|
||
:class="'booking-section__status-badge--' + item.status"
|
||
>
|
||
<text
|
||
class="booking-section__status-text"
|
||
:class="{ 'booking-section__status-text--pending': item.status === 'pending' }"
|
||
>
|
||
{{ item.statusLabel }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="!previewItems.length" class="booking-section__empty">
|
||
<text class="booking-section__empty-text">暂无进行中的预约</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
options: {
|
||
virtualHost: false,
|
||
styleIsolation: 'apply-shared'
|
||
},
|
||
props: {
|
||
items: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
emits: ['view-all', 'item-tap'],
|
||
computed: {
|
||
previewItems() {
|
||
return this.items
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||
@import '@/common/style/memberInfo/member-info-booking-list.css';
|
||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||
|
||
.booking-section__empty {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px 16px;
|
||
}
|
||
|
||
.booking-section__empty-text {
|
||
font-size: 14px;
|
||
color: #8A99B4;
|
||
}
|
||
</style>
|