会员个人中心页面初步完成

2026-06-04 14:18:53 +08:00
parent 8e7c8f52f6
commit 7350293d0e
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,117 @@
+<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>