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

feat(app): 新增个人中心课表视图

Browse Source
This commit is contained in:
richarjiang
2026-04-19 22:23:23 +08:00
parent 9575210b06
commit bd3d519b4f
17 changed files with 998 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/app/src/components/ProfileMenu.vue
View File

@@ -82,15 +82,25 @@ const menuItems = computed<MenuItem[]>(() => {
badge: bookingBadge,
requireAuth: true,
},
...(props.inviteShareEligible
...(props.isAdmin
? [{
key: 'invite',
key: 'teaching-schedule',
type: 'item' as const,
title: '邀请好友',
path: '/pages/profile/invite',
title: '我的课表',
path: '/pages/profile/teaching-schedule',
requireAuth: true,
}]
: []),
// 临时隐藏邀请好友入口，后续恢复时直接取消这段注释即可。
// ...(props.inviteShareEligible
// ? [{
// key: 'invite',
// type: 'item' as const,
// title: '邀请好友',
// path: '/pages/profile/invite',
// requireAuth: true,
// }]
// : []),
{
key: 'info',
type: 'item',
@@ -236,6 +246,29 @@ function handleTap(item: MenuItem) {
}
}
&--teaching-schedule {
background: rgba(93, 140, 138, 0.12);
&::before {
content: '';
width: 24rpx;
height: 22rpx;
border: 2.5rpx solid #476d72;
border-radius: 6rpx;
box-sizing: border-box;
}
&::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 12rpx;
height: 12rpx;
transform: translate(-30%, -18%) rotate(45deg);
border-top: 2.5rpx solid #476d72;
border-left: 2.5rpx solid #476d72;
}
}
&--invite {
background: rgba(255, 122, 69, 0.12);
&::before {

4
packages/app/src/manifest.json
View File

@@ -1,12 +1,12 @@
{
"name": "普拉提约课",
"appid": "",
"appid": "wx3e7a133d2305fa2c",
"description": "普拉提工作室约课小程序",
"versionName": "0.1.0",
"versionCode": "100",
"transformPx": false,
"mp-weixin": {
"appid": "",
"appid": "wx3e7a133d2305fa2c",
"setting": {
"urlCheck": false,
"es6": true,

6
packages/app/src/pages.json
View File

@@ -45,6 +45,12 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/profile/teaching-schedule",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/profile/info",
"style": {

582
packages/app/src/pages/profile/teaching-schedule.vue Normal file
View File

@@ -0,0 +1,582 @@
<template>
<view class="schedule-page" :style="{ paddingTop: navBarHeight }">
<CustomNavBar title="我的课表" show-back />
<view class="schedule-hero">
<view class="schedule-hero__copy">
<text class="schedule-hero__eyebrow">Teaching Day</text>
<text class="schedule-hero__title">按日查看当天课程与学员</text>
<text class="schedule-hero__desc">只显示你当天有学员的课程，按时间顺序一屏速览。</text>
</view>
<view class="schedule-hero__meta">
<text class="schedule-hero__meta-num">{{ summary.slotCount }}</text>
<text class="schedule-hero__meta-label">节课程</text>
<text class="schedule-hero__meta-sub">{{ summary.studentCount }} 位学员</text>
</view>
</view>
<view class="schedule-toolbar">
<DateSelector v-model="selectedDate" variant="booking" @select="handleDateSelect" />
<view class="schedule-toolbar__summary">
<view class="schedule-toolbar__chip">
<text class="schedule-toolbar__chip-label">{{ dateLabel }}</text>
</view>
<view class="schedule-toolbar__chip schedule-toolbar__chip--soft">
<text class="schedule-toolbar__chip-label">{{ summaryRangeLabel }}</text>
</view>
</view>
</view>
<scroll-view
class="schedule-scroll"
scroll-y
refresher-enabled
:refresher-triggered="refreshing"
@refresherrefresh="handleRefresh"
>
<view v-if="loading && !refreshing" class="schedule-skeleton">
<view v-for="i in 3" :key="i" class="schedule-skeleton__card">
<view class="schedule-skeleton__time" />
<view class="schedule-skeleton__line schedule-skeleton__line--long" />
<view class="schedule-skeleton__line schedule-skeleton__line--short" />
</view>
</view>
<view v-else-if="slots.length === 0" class="schedule-empty">
<view class="schedule-empty__badge">休</view>
<text class="schedule-empty__title">这一天没有已预约课程</text>
<text class="schedule-empty__desc">当前只展示有学员的课程安排，空白日期不会出现占位时段。</text>
</view>
<view v-else class="schedule-list">
<view v-for="slot in slots" :key="slot.slotId" class="schedule-card">
<view class="schedule-card__rail" />
<view class="schedule-card__header">
<view>
<text class="schedule-card__time">{{ slot.startTime.slice(0, 5) }}</text>
<text class="schedule-card__range">{{ slot.startTime.slice(0, 5) }} - {{ slot.endTime.slice(0, 5) }}</text>
</view>
<view class="schedule-card__count">
<text class="schedule-card__count-num">{{ slot.students.length }}</text>
<text class="schedule-card__count-label">人</text>
</view>
</view>
<view class="schedule-card__body">
<view v-for="student in slot.students" :key="student.bookingId" class="student-row">
<view class="student-row__avatar">{{ getNameInitial(student.nickname) }}</view>
<view class="student-row__main">
<view class="student-row__headline">
<text class="student-row__name">{{ student.nickname || '未命名学员' }}</text>
<text class="student-row__status" :class="statusClass(student.status)">
{{ statusLabel(student.status) }}
</text>
</view>
<text v-if="student.phone" class="student-row__phone">{{ maskPhone(student.phone) }}</text>
<text v-else class="student-row__phone student-row__phone--muted">未绑定手机号</text>
</view>
</view>
</view>
</view>
</view>
<view class="schedule-bottom-space" />
</scroll-view>
</view>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import type { TeachingScheduleSlot } from '@mp-pilates/shared'
import { BookingStatus } from '@mp-pilates/shared'
import CustomNavBar from '../../components/CustomNavBar.vue'
import DateSelector from '../../components/DateSelector.vue'
import { useBookingStore } from '../../stores/booking'
import { useUserStore } from '../../stores/user'
import { formatDate, getWeekdayLabel, isToday } from '../../utils/format'
import { getSystemLayout } from '../../utils/system'
import { getErrorMessage } from '../../utils/auth'
const bookingStore = useBookingStore()
const userStore = useUserStore()
const { teachingSchedule, loadingTeachingSchedule } = storeToRefs(bookingStore)
const { loggedIn, isAdmin } = storeToRefs(userStore)
const navBarHeight = ref('64px')
const selectedDate = ref(formatDate(new Date()))
const refreshing = ref(false)
const slots = computed<readonly TeachingScheduleSlot[]>(() => teachingSchedule.value)
const loading = computed(() => loadingTeachingSchedule.value)
const summary = computed(() => ({
slotCount: slots.value.length,
studentCount: slots.value.reduce((sum, slot) => sum + slot.students.length, 0),
}))
const dateLabel = computed(() => {
const label = `${selectedDate.value.slice(5, 7)}月${selectedDate.value.slice(8, 10)}日 ${getWeekdayLabel(selectedDate.value)}`
return isToday(selectedDate.value) ? `今天 · ${label}` : label
})
const summaryRangeLabel = computed(() => {
if (slots.value.length === 0) {
return '暂无课程'
}
const first = slots.value[0]
const last = slots.value[slots.value.length - 1]
return `${first.startTime.slice(0, 5)} - ${last.endTime.slice(0, 5)}`
})
const STATUS_LABELS: Record<BookingStatus, string> = {
[BookingStatus.PENDING_CONFIRMATION]: '待确认',
[BookingStatus.CONFIRMED]: '已确认',
[BookingStatus.CANCELLED]: '已取消',
[BookingStatus.COMPLETED]: '已完成',
[BookingStatus.NO_SHOW]: '未出席',
}
onMounted(() => {
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
})
onShow(() => {
if (!loggedIn.value) {
uni.showToast({ title: '请先登录', icon: 'none' })
return
}
if (!isAdmin.value) {
uni.showToast({ title: '仅管理员可查看', icon: 'none' })
return
}
loadSchedule(selectedDate.value)
})
function handleDateSelect(date: string) {
selectedDate.value = date
loadSchedule(date)
}
async function handleRefresh() {
refreshing.value = true
try {
await loadSchedule(selectedDate.value)
} finally {
refreshing.value = false
}
}
async function loadSchedule(date: string) {
try {
await bookingStore.fetchTeachingSchedule(date)
} catch (err: unknown) {
uni.showToast({ title: getErrorMessage(err, '课表加载失败'), icon: 'none' })
}
}
function getNameInitial(name: string): string {
const normalized = (name || '?').trim()
return normalized.slice(0, 1).toUpperCase()
}
function maskPhone(phone: string): string {
return `${phone.slice(0, 3)} ${phone.slice(3, 7)} ${phone.slice(7, 11)}`
}
function statusLabel(status: BookingStatus): string {
return STATUS_LABELS[status] ?? status
}
function statusClass(status: BookingStatus): string {
return status === BookingStatus.PENDING_CONFIRMATION
? 'student-row__status--pending'
: 'student-row__status--confirmed'
}
</script>
<style lang="scss" scoped>
.schedule-page {
min-height: 100vh;
background:
radial-gradient(circle at top right, rgba(93, 140, 138, 0.18), transparent 34%),
linear-gradient(180deg, #f3ede6 0%, #f7f4ef 30%, #fbfaf7 100%);
}
.schedule-hero {
margin: 24rpx 24rpx 20rpx;
padding: 32rpx 30rpx;
border-radius: 32rpx;
box-sizing: border-box;
background:
linear-gradient(145deg, rgba(60, 86, 92, 0.96), rgba(108, 137, 127, 0.92)),
#3e5b60;
color: #f8f5ef;
display: flex;
gap: 24rpx;
box-shadow: 0 22rpx 60rpx rgba(55, 84, 82, 0.18);
&__copy {
flex: 1;
display: flex;
flex-direction: column;
gap: 10rpx;
}
&__eyebrow {
font-size: 20rpx;
letter-spacing: 4rpx;
text-transform: uppercase;
color: rgba(248, 245, 239, 0.7);
}
&__title {
font-size: 38rpx;
line-height: 1.25;
font-weight: 700;
}
&__desc {
font-size: 24rpx;
line-height: 1.6;
color: rgba(248, 245, 239, 0.78);
}
&__meta {
width: 164rpx;
max-width: 100%;
border-radius: 24rpx;
padding: 22rpx 18rpx;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.12);
border: 1rpx solid rgba(255, 255, 255, 0.12);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
text-align: center;
gap: 6rpx;
}
&__meta-num {
font-size: 52rpx;
font-weight: 700;
line-height: 1;
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
}
&__meta-label,
&__meta-sub {
font-size: 22rpx;
color: rgba(248, 245, 239, 0.78);
}
}
.schedule-toolbar {
position: sticky;
top: 0;
z-index: 10;
padding-bottom: 12rpx;
background: linear-gradient(180deg, rgba(247, 244, 239, 0.94), rgba(247, 244, 239, 0.74));
backdrop-filter: blur(14rpx);
&__summary {
display: flex;
gap: 12rpx;
padding: 16rpx 24rpx 0;
}
&__chip {
padding: 14rpx 22rpx;
border-radius: 999rpx;
background: #ffffff;
border: 1rpx solid rgba(93, 140, 138, 0.12);
box-shadow: 0 10rpx 24rpx rgba(80, 92, 82, 0.08);
&--soft {
background: rgba(255, 255, 255, 0.78);
}
}
&__chip-label {
font-size: 22rpx;
color: #5b6058;
}
}
.schedule-scroll {
height: calc(100vh - v-bind(navBarHeight));
}
.schedule-skeleton {
padding: 12rpx 24rpx 0;
display: flex;
flex-direction: column;
gap: 18rpx;
&__card {
border-radius: 28rpx;
padding: 28rpx;
background: rgba(255, 255, 255, 0.74);
}
&__time,
&__line {
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(220, 223, 218, 0.7), rgba(239, 241, 238, 0.95), rgba(220, 223, 218, 0.7));
background-size: 300% 100%;
animation: shimmer 1.4s linear infinite;
}
&__time {
width: 180rpx;
height: 38rpx;
margin-bottom: 20rpx;
}
&__line {
height: 24rpx;
margin-top: 14rpx;
&--long {
width: 100%;
}
&--short {
width: 60%;
}
}
}
.schedule-empty {
margin: 40rpx 24rpx 0;
border-radius: 32rpx;
padding: 72rpx 40rpx;
background: rgba(255, 255, 255, 0.82);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14rpx;
box-shadow: 0 18rpx 44rpx rgba(108, 122, 112, 0.08);
&__badge {
width: 100rpx;
height: 100rpx;
border-radius: 32rpx;
background: linear-gradient(145deg, #e8ddd2, #f5efe8);
color: #7e7467;
display: flex;
align-items: center;
justify-content: center;
font-size: 44rpx;
font-weight: 700;
}
&__title {
font-size: 34rpx;
color: #3f403c;
font-weight: 600;
}
&__desc {
font-size: 24rpx;
color: #9b958b;
line-height: 1.7;
}
}
.schedule-list {
padding: 12rpx 24rpx 0;
display: flex;
flex-direction: column;
gap: 18rpx;
}
.schedule-card {
position: relative;
overflow: hidden;
border-radius: 30rpx;
padding: 28rpx 28rpx 18rpx 40rpx;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 20rpx 48rpx rgba(83, 95, 86, 0.1);
&__rail {
position: absolute;
top: 24rpx;
left: 18rpx;
bottom: 24rpx;
width: 8rpx;
border-radius: 999rpx;
background: linear-gradient(180deg, #5d8c8a, #d7c4b1);
}
&__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16rpx;
margin-bottom: 20rpx;
}
&__time {
display: block;
font-size: 46rpx;
line-height: 1;
font-weight: 700;
color: #304549;
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
}
&__range {
display: block;
margin-top: 8rpx;
font-size: 22rpx;
color: #8a8e86;
letter-spacing: 1rpx;
}
&__count {
min-width: 116rpx;
padding: 14rpx 16rpx;
border-radius: 20rpx;
background: #f3efe8;
text-align: center;
}
&__count-num {
font-size: 34rpx;
color: #6e5b4f;
font-weight: 700;
}
&__count-label {
margin-left: 4rpx;
font-size: 22rpx;
color: #907d6f;
}
&__body {
display: flex;
flex-direction: column;
gap: 16rpx;
}
}
.student-row {
display: flex;
gap: 18rpx;
padding: 20rpx 20rpx 20rpx 16rpx;
border-radius: 22rpx;
background: linear-gradient(135deg, rgba(246, 244, 239, 0.98), rgba(255, 255, 255, 0.9));
&__avatar {
width: 72rpx;
height: 72rpx;
border-radius: 24rpx;
background: linear-gradient(145deg, #5d8c8a, #86a99d);
color: #fff;
font-size: 28rpx;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
&__main {
flex: 1;
min-width: 0;
}
&__headline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12rpx;
}
&__name {
font-size: 30rpx;
font-weight: 600;
color: #313630;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__status {
flex-shrink: 0;
padding: 8rpx 14rpx;
border-radius: 999rpx;
font-size: 20rpx;
font-weight: 600;
&--pending {
background: rgba(206, 164, 96, 0.14);
color: #9b6e22;
}
&--confirmed {
background: rgba(93, 140, 138, 0.14);
color: #376a69;
}
}
&__phone {
display: block;
margin-top: 10rpx;
font-size: 24rpx;
color: #7b8179;
&--muted {
color: #b0b3ad;
}
}
}
.schedule-bottom-space {
height: 36rpx;
}
@media (max-width: 420px) {
.schedule-hero {
flex-direction: column;
align-items: stretch;
&__meta {
width: 100%;
margin: 0 auto;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12rpx;
}
}
.schedule-toolbar__summary {
flex-wrap: wrap;
}
.schedule-card__header,
.student-row__headline {
flex-direction: column;
align-items: flex-start;
}
}
@keyframes shimmer {
from {
background-position: 200% 0;
}
to {
background-position: -100% 0;
}
}
</style>

21
packages/app/src/stores/booking.ts
View File

@@ -6,6 +6,7 @@ import type {
BookingWithUser,
BookingStatusHistory,
CreateBookingDto,
TeachingScheduleSlot,
} from '@mp-pilates/shared'
import { get, post, put } from '../utils/request'
@@ -21,8 +22,10 @@ export const useBookingStore = defineStore('booking', () => {
const slots = ref<readonly TimeSlotWithBookingStatus[]>([])
const myBookings = ref<readonly BookingWithDetails[]>([])
const upcomingBookings = ref<readonly BookingWithDetails[]>([])
const teachingSchedule = ref<readonly TeachingScheduleSlot[]>([])
const loadingSlots = ref(false)
const loadingBookings = ref(false)
const loadingTeachingSchedule = ref(false)
async function fetchSlots(date: string) {
loadingSlots.value = true
@@ -70,6 +73,21 @@ export const useBookingStore = defineStore('booking', () => {
}
}
async function fetchTeachingSchedule(date: string) {
loadingTeachingSchedule.value = true
try {
const result = await get<TeachingScheduleSlot[]>('/admin/teaching-schedule', { date })
teachingSchedule.value = Array.isArray(result) ? result : []
return teachingSchedule.value
} catch (err) {
console.error('Fetch teaching schedule failed:', err)
teachingSchedule.value = []
throw err
} finally {
loadingTeachingSchedule.value = false
}
}
// ─── Admin methods ──────────────────────────────────────────────────────
async function fetchAllAdminBookings(
@@ -124,13 +142,16 @@ export const useBookingStore = defineStore('booking', () => {
slots,
myBookings,
upcomingBookings,
teachingSchedule,
loadingSlots,
loadingBookings,
loadingTeachingSchedule,
fetchSlots,
createBooking,
cancelBooking,
fetchMyBookings,
fetchUpcomingBookings,
fetchTeachingSchedule,
fetchAllAdminBookings,
confirmBooking,
completeBooking,

12
packages/app/src/stores/user.ts
View File

@@ -11,6 +11,10 @@ import { get, put } from '../utils/request'
import { ROUTES } from '../utils/routes'
import { cacheSubscriptionMessageTemplateConfig, resetSubscriptionMessageTemplateCache } from '../utils/wechat-subscription'
function syncSubscriptionTemplates(profile?: Pick<UserProfileResponse, 'subscriptionMessageTemplates'> | null) {
cacheSubscriptionMessageTemplateConfig(profile?.subscriptionMessageTemplates)
}
export const useUserStore = defineStore('user', () => {
// State
const user = ref<UserProfileResponse | null>(null)
@@ -36,7 +40,7 @@ export const useUserStore = defineStore('user', () => {
const result = await wxLogin()
token.value = result.token
user.value = result.user
cacheSubscriptionMessageTemplateConfig(result.user.subscriptionMessageTemplates)
syncSubscriptionTemplates(result.user)
return { user: result.user, isNewUser: result.isNewUser }
} catch (err) {
console.error('Login failed:', err)
@@ -62,7 +66,7 @@ export const useUserStore = defineStore('user', () => {
if (!isLoggedIn()) return
try {
user.value = await get<UserProfileResponse>('/user/profile')
cacheSubscriptionMessageTemplateConfig(user.value.subscriptionMessageTemplates)
syncSubscriptionTemplates(user.value)
return user.value
} catch (err) {
console.error('Fetch profile failed:', err)
@@ -90,13 +94,13 @@ export const useUserStore = defineStore('user', () => {
async function updateProfile(data: { nickname?: string; avatarUrl?: string }) {
const updated = await put<UserProfileResponse>('/user/profile', data)
user.value = updated
cacheSubscriptionMessageTemplateConfig(updated.subscriptionMessageTemplates)
syncSubscriptionTemplates(updated)
return updated
}
function setProfile(profile: UserProfileResponse) {
user.value = profile
cacheSubscriptionMessageTemplateConfig(profile.subscriptionMessageTemplates)
syncSubscriptionTemplates(profile)
}
function checkAuth() {

14
packages/app/src/utils/wechat-subscription.ts
View File

@@ -103,10 +103,18 @@ async function fetchTemplateConfig(): Promise<SubscriptionMessageTemplateConfig>
return config
}
export function cacheSubscriptionMessageTemplateConfig(config: SubscriptionMessageTemplateConfig): SubscriptionMessageTemplateConfig {
const normalized: SubscriptionMessageTemplateConfig = {
templates: config.templates.filter((item) => item.templateId),
function normalizeTemplateConfig(config?: Partial<SubscriptionMessageTemplateConfig> | null): SubscriptionMessageTemplateConfig {
const templates = Array.isArray(config?.templates) ? config.templates : []
return {
templates: templates.filter((item): item is SubscriptionMessageTemplate => !!item?.templateId),
}
}
export function cacheSubscriptionMessageTemplateConfig(
config?: Partial<SubscriptionMessageTemplateConfig> | null,
): SubscriptionMessageTemplateConfig {
const normalized = normalizeTemplateConfig(config)
cachedConfig = normalized
uni.setStorageSync(TEMPLATE_CONFIG_STORAGE_KEY, normalized)
return normalized