Compare commits
10 Commits
9c5dd4a911
...
3a9982209f
| Author | SHA1 | Date | |
|---|---|---|---|
|
3a9982209f | ||
|
|
f71ff968ad | ||
|
|
c0e0d31ae7 | ||
|
|
4633ceea8c | ||
|
|
fdb13c32c2 | ||
|
|
694330b7a6 | ||
|
|
9eee4f6b87 | ||
|
|
9811c9a13b | ||
|
|
a85270efd4 | ||
|
|
b6986ba30c |
803
ADMIN_SCHEDULING_EXPLORATION.md
Normal file
803
ADMIN_SCHEDULING_EXPLORATION.md
Normal file
@@ -0,0 +1,803 @@
|
||||
# WeChat Mini-Program Admin Scheduling/排课设置 - Complete Exploration Report
|
||||
|
||||
**Date**: 2026-04-05
|
||||
**Project**: mp-pilates (WeChat mini-program for pilates studio bookings)
|
||||
|
||||
---
|
||||
|
||||
## 📋 Executive Summary
|
||||
|
||||
This is a **Pilates studio booking management system** with a comprehensive admin scheduling UI. The "排课设置" (Schedule Setup) feature allows admins to:
|
||||
1. Define recurring weekly class templates (时间模板)
|
||||
2. Manually add time slots for specific dates
|
||||
3. Close slots (临时调整 → 关闭时段)
|
||||
4. Batch generate slots from templates
|
||||
|
||||
The architecture uses:
|
||||
- **Frontend**: Vue 3 + TypeScript (WeChat mini-program with Taro/UNI framework)
|
||||
- **Backend**: NestJS + Prisma ORM
|
||||
- **State Management**: Pinia (Vue state management)
|
||||
- **Database**: Likely PostgreSQL/MySQL with Prisma
|
||||
|
||||
---
|
||||
|
||||
## 🗂️ File Structure
|
||||
|
||||
### Frontend Admin Pages
|
||||
```
|
||||
packages/app/src/pages/admin/
|
||||
├── index.vue # Admin dashboard with nav grid
|
||||
├── week-template.vue # 📅 Scheduling/排课设置 - Main feature
|
||||
├── slot-adjust.vue # 🔧 Temporary adjustments (3 tabs)
|
||||
├── members.vue # 👥 Member management
|
||||
├── orders.vue # 📋 Order management
|
||||
├── card-types.vue # 💳 Card type management
|
||||
└── studio.vue # 🏢 Studio settings
|
||||
```
|
||||
|
||||
### Stores
|
||||
```
|
||||
packages/app/src/stores/
|
||||
└── admin.ts # Pinia store with all admin API calls
|
||||
```
|
||||
|
||||
### Backend API
|
||||
```
|
||||
packages/server/src/
|
||||
├── time-slot/
|
||||
│ ├── time-slot.controller.ts # Admin & member endpoints for slots
|
||||
│ ├── time-slot.service.ts # Business logic for slots
|
||||
│ ├── slot-generator.service.ts # Template-based slot generation
|
||||
│ └── dto/
|
||||
│ ├── week-template.dto.ts # Input validation
|
||||
│ ├── create-manual-slot.dto.ts
|
||||
│ └── query-slots.dto.ts
|
||||
├── studio/
|
||||
│ └── studio.controller.ts # Studio config (admin endpoints)
|
||||
└── scheduler/ # Cron scheduler for auto-generation
|
||||
```
|
||||
|
||||
### Shared Types
|
||||
```
|
||||
packages/shared/src/types/
|
||||
├── week-template.ts # WeekTemplate interface
|
||||
├── time-slot.ts # TimeSlot interface
|
||||
└── constants.ts # WEEKDAY_LABELS, SLOT_GENERATION_DAYS
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔑 Key Components
|
||||
|
||||
### 1. **Admin Dashboard (index.vue)**
|
||||
|
||||
**File**: `packages/app/src/pages/admin/index.vue`
|
||||
|
||||
**Features**:
|
||||
- Display stats: today's bookings, total orders, total bookings
|
||||
- Navigation grid to 6 admin modules:
|
||||
- 📅 **排课设置** → `/pages/admin/week-template`
|
||||
- 🔧 **临时调整** → `/pages/admin/slot-adjust`
|
||||
- 👥 **会员管理** → `/pages/admin/members`
|
||||
- 📋 **订单管理** → `/pages/admin/orders`
|
||||
- 💳 **卡种管理** → `/pages/admin/card-types`
|
||||
- 🏢 **工作室设置** → `/pages/admin/studio`
|
||||
|
||||
**Key Functions**:
|
||||
```typescript
|
||||
- navigate(path): Navigates to admin pages
|
||||
- loadStats(): Fetches dashboard statistics via adminStore.fetchDashboardStats()
|
||||
```
|
||||
|
||||
**State**:
|
||||
```typescript
|
||||
const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })
|
||||
const statsLoading = ref(false)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. **Week Template Management (week-template.vue)** ✨ MAIN SCHEDULING UI
|
||||
|
||||
**File**: `packages/app/src/pages/admin/week-template.vue`
|
||||
**Route**: `/pages/admin/week-template`
|
||||
|
||||
#### Purpose
|
||||
Manage recurring weekly schedule templates. These are used to **auto-generate** time slots for future weeks.
|
||||
|
||||
#### Data Structure
|
||||
```typescript
|
||||
interface WeekTemplate {
|
||||
readonly id: string
|
||||
readonly dayOfWeek: number // 1=Mon, 2=Tue, ..., 7=Sun (ISO format)
|
||||
readonly startTime: string // HH:MM format
|
||||
readonly endTime: string // HH:MM format
|
||||
readonly capacity: number // Max bookings per slot
|
||||
readonly isActive: boolean // Enable/disable template
|
||||
readonly createdAt: string
|
||||
readonly updatedAt: string
|
||||
}
|
||||
```
|
||||
|
||||
#### UI Sections
|
||||
1. **Toolbar**
|
||||
- Display template count: "共 N 条模板"
|
||||
- "+ 新增时段" (Add new slot) button
|
||||
|
||||
2. **Template List** (Grouped by weekday)
|
||||
- Days are sorted (Monday → Sunday)
|
||||
- Each day shows count: "3 个时段"
|
||||
- Each template row displays:
|
||||
- Time range: "09:00 – 10:00"
|
||||
- Capacity: "10 人"
|
||||
- Actions:
|
||||
- Toggle button: "启用"/"停用" (Enable/Disable)
|
||||
- "编辑" (Edit)
|
||||
- "删除" (Delete)
|
||||
- Inactive templates are grayed out (opacity: 0.5)
|
||||
|
||||
3. **Modal for Add/Edit**
|
||||
- Star date picker (1-7 for weekday)
|
||||
- Start time picker
|
||||
- End time picker
|
||||
- Capacity input (number)
|
||||
- Validation: time and capacity required
|
||||
- Cancel/Confirm buttons
|
||||
|
||||
4. **Save Bar** (Fixed at bottom)
|
||||
- Only shows when `isDirty` flag is true
|
||||
- "保存全部更改" button with loading state
|
||||
|
||||
#### Key Functions
|
||||
|
||||
```typescript
|
||||
async fetchTemplates()
|
||||
- Fetches all templates from backend
|
||||
- Groups by dayOfWeek for display
|
||||
- Clears isDirty flag
|
||||
|
||||
async handleSave()
|
||||
- Maps local template state to API payload
|
||||
- Calls adminStore.saveWeekTemplates(payload)
|
||||
- Refreshes templates after save
|
||||
- Shows success/error toast
|
||||
|
||||
function openAdd()
|
||||
- Opens modal for creating new template
|
||||
- Clears form
|
||||
|
||||
function openEdit(tpl)
|
||||
- Opens modal in edit mode
|
||||
- Populates form with existing values
|
||||
|
||||
function submitForm()
|
||||
- Validates form (time and capacity required)
|
||||
- Creates or updates template in memory
|
||||
- Sets isDirty = true (triggers save bar)
|
||||
|
||||
function toggleTemplate(tpl)
|
||||
- Toggles isActive flag
|
||||
- Sets isDirty = true
|
||||
|
||||
function deleteTemplate(tpl)
|
||||
- Shows confirmation modal
|
||||
- Removes from array
|
||||
- Sets isDirty = true
|
||||
```
|
||||
|
||||
#### Local State Management
|
||||
```typescript
|
||||
const templates = ref<LocalTemplate[]>([])
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const isDirty = ref(false) // Tracks unsaved changes
|
||||
const showModal = ref(false)
|
||||
const editTarget = ref<LocalTemplate | null>(null)
|
||||
|
||||
const form = ref({
|
||||
dayIdx: 0, // Selected day index (0-6)
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
capacityStr: '10',
|
||||
})
|
||||
|
||||
const grouped = computed(() => {
|
||||
// Groups templates by dayOfWeek for rendering
|
||||
return Object.fromEntries(
|
||||
Object.entries(map).sort(([a], [b]) => Number(a) - Number(b))
|
||||
)
|
||||
})
|
||||
```
|
||||
|
||||
#### Example: Adding a Monday 9AM-10AM class
|
||||
1. User taps "+ 新增时段"
|
||||
2. Modal opens, form is reset to defaults
|
||||
3. User selects "周一" (Monday) from picker
|
||||
4. User confirms times and capacity
|
||||
5. New template object is pushed to `templates` array
|
||||
6. `isDirty` is set to true → save bar appears
|
||||
7. User taps "保存全部更改"
|
||||
8. Store calls `PUT /admin/week-template` with all templates
|
||||
9. Backend deletes all old templates and creates new ones
|
||||
10. Frontend refetches and displays updated list
|
||||
|
||||
---
|
||||
|
||||
### 3. **Slot Adjustment (slot-adjust.vue)** - Temporary Slot Management
|
||||
|
||||
**File**: `packages/app/src/pages/admin/slot-adjust.vue`
|
||||
**Route**: `/pages/admin/slot-adjust`
|
||||
|
||||
#### Purpose
|
||||
Handle temporary/manual time slot operations:
|
||||
1. Add one-off slots for specific dates
|
||||
2. Close available slots
|
||||
3. Batch-generate slots from templates
|
||||
|
||||
#### UI Structure (3 Tabs)
|
||||
|
||||
##### Tab 0: "新增时段" (Add Manual Slot)
|
||||
- Date picker (defaults to today)
|
||||
- Start/End time pickers
|
||||
- Capacity input
|
||||
- Submit button: "新增时段"
|
||||
- **Endpoint**: `POST /admin/time-slot/manual`
|
||||
|
||||
```typescript
|
||||
interface CreateManualSlotDto {
|
||||
date: string // YYYY-MM-DD
|
||||
startTime: string // HH:MM
|
||||
endTime: string // HH:MM
|
||||
capacity?: number // Defaults to DEFAULT_SLOT_CAPACITY (1)
|
||||
}
|
||||
```
|
||||
|
||||
##### Tab 1: "关闭时段" (Close Slots)
|
||||
- Date picker (defaults to today)
|
||||
- Loads all slots for selected date
|
||||
- Displays slot list with:
|
||||
- Time range
|
||||
- Status badge (OPEN/FULL/CLOSED)
|
||||
- Booked count: "X/Y"
|
||||
- Close button (if not already closed)
|
||||
- Confirmation modal when closing
|
||||
- **Endpoint**: `PUT /admin/time-slot/:id/close`
|
||||
|
||||
**Slot Status Colors**:
|
||||
```
|
||||
OPEN → Green badge #27ae60
|
||||
FULL → Orange badge #e67e22
|
||||
CLOSED → Gray badge #999
|
||||
```
|
||||
|
||||
##### Tab 2: "批量生成" (Batch Generate)
|
||||
- Start date picker
|
||||
- End date picker (defaults to +7 days)
|
||||
- Hint: "将根据排课模板，自动生成所选日期范围内的时段"
|
||||
- *"Will auto-generate slots for selected date range based on schedule template"*
|
||||
- Submit button: "批量生成"
|
||||
- **Endpoint**: `POST /admin/generate-slots`
|
||||
|
||||
**How it works**:
|
||||
1. Frontend sends date range to backend
|
||||
2. Backend fetches all **active** WeekTemplates
|
||||
3. For each day in range, finds matching templates by weekday
|
||||
4. Creates TimeSlot records with `source: TEMPLATE`
|
||||
5. Uses `skipDuplicates: true` to avoid re-generating existing slots
|
||||
|
||||
```typescript
|
||||
// Backend example: If templates include:
|
||||
// - Monday: 09:00-10:00, 18:00-19:00 (2 templates)
|
||||
// - Wednesday: 10:00-11:00 (1 template)
|
||||
//
|
||||
// And user selects 2026-04-05 to 2026-04-11:
|
||||
// - Mon 04-06: 2 slots generated
|
||||
// - Wed 04-08: 1 slot generated
|
||||
// Total: 3 slots (if these dates fall in range)
|
||||
```
|
||||
|
||||
#### Key Functions
|
||||
```typescript
|
||||
async submitAddSlot()
|
||||
- POST /admin/time-slot/manual
|
||||
- Shows success/error toast
|
||||
|
||||
async loadSlotsForClose()
|
||||
- Fetches slots for closeDate via adminStore.fetchSlotsByDate(date)
|
||||
- Sets slotsLoading flag
|
||||
|
||||
async closeSlot(slot)
|
||||
- Confirmation modal
|
||||
- PUT /admin/time-slot/:id/close
|
||||
- Reloads slot list
|
||||
|
||||
async submitGenerate()
|
||||
- POST /admin/generate-slots with date range
|
||||
- Shows toast with count of generated slots
|
||||
```
|
||||
|
||||
#### Local State
|
||||
```typescript
|
||||
const activeTab = ref(0) // 0=Add, 1=Close, 2=Generate
|
||||
const submitting = ref(false)
|
||||
const slotsLoading = ref(false)
|
||||
|
||||
// Tab 0: Add form
|
||||
const addForm = ref({
|
||||
date: formatDate(new Date()),
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
capacityStr: '10',
|
||||
})
|
||||
|
||||
// Tab 1: Close slots
|
||||
const closeDate = ref(formatDate(new Date()))
|
||||
const daySlots = ref<TimeSlot[]>([])
|
||||
|
||||
// Tab 2: Generate form
|
||||
const genForm = ref({
|
||||
startDate: formatDate(new Date()),
|
||||
endDate: formatDate(new Date(Date.now() + 7 * 86400000)), // +7 days
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. **Admin Store (Pinia)**
|
||||
|
||||
**File**: `packages/app/src/stores/admin.ts`
|
||||
|
||||
#### API Methods Related to Scheduling
|
||||
|
||||
```typescript
|
||||
// ── Week templates ───────────────────────────────────────────────
|
||||
|
||||
async fetchWeekTemplates(): Promise<WeekTemplate[]>
|
||||
// GET /admin/week-template
|
||||
// Returns all templates for current studio
|
||||
// Usage: Gets templates for display in week-template.vue
|
||||
|
||||
async saveWeekTemplates(templates: WeekTemplateInput[]): Promise<WeekTemplate[]>
|
||||
// PUT /admin/week-template
|
||||
// Body: { templates: [...] }
|
||||
// Replaces ALL templates with new set (delete all, create new)
|
||||
// Note: Backend uses transaction for atomicity
|
||||
|
||||
// ── Time slots ───────────────────────────────────────────────────
|
||||
|
||||
async fetchSlotsByDate(date: string): Promise<TimeSlot[]>
|
||||
// GET /admin/time-slots?date=YYYY-MM-DD
|
||||
// Returns all slots for a specific date
|
||||
// Used in slot-adjust.vue Tab 1 (close slots)
|
||||
|
||||
async createManualSlot(dto: CreateManualSlotDto): Promise<TimeSlot>
|
||||
// POST /admin/time-slot/manual
|
||||
// Creates a one-off time slot
|
||||
// Used in slot-adjust.vue Tab 0
|
||||
|
||||
async closeSlot(id: string): Promise<TimeSlot>
|
||||
// PUT /admin/time-slot/:id/close
|
||||
// Changes slot status from OPEN to CLOSED
|
||||
// Used in slot-adjust.vue Tab 1
|
||||
|
||||
async generateSlots(startDate: string, endDate: string): Promise<{ count: number }>
|
||||
// POST /admin/generate-slots
|
||||
// Generates slots from active templates for date range
|
||||
// Used in slot-adjust.vue Tab 2
|
||||
// Returns: { count: number of newly created slots }
|
||||
|
||||
// ── Dashboard ────────────────────────────────────────────────────
|
||||
|
||||
async fetchDashboardStats(): Promise<AdminStats>
|
||||
// GET /admin/stats
|
||||
// Returns: { todayBookings, totalOrders, totalBookings }
|
||||
// Used in index.vue
|
||||
```
|
||||
|
||||
#### API Response Types
|
||||
```typescript
|
||||
interface AdminStats {
|
||||
todayBookings: number
|
||||
totalOrders: number
|
||||
totalBookings: number
|
||||
}
|
||||
|
||||
interface WeekTemplate {
|
||||
id: string
|
||||
dayOfWeek: number // 1-7 (ISO weekday)
|
||||
startTime: string // HH:MM
|
||||
endTime: string // HH:MM
|
||||
capacity: number
|
||||
isActive: boolean
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
interface TimeSlot {
|
||||
id: string
|
||||
date: string // YYYY-MM-DD
|
||||
startTime: string
|
||||
endTime: string
|
||||
capacity: number
|
||||
bookedCount: number
|
||||
status: TimeSlotStatus // OPEN | FULL | CLOSED
|
||||
source: TimeSlotSource // TEMPLATE | MANUAL
|
||||
templateId: string | null
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔌 Backend Architecture
|
||||
|
||||
### Time Slot Controller
|
||||
**File**: `packages/server/src/time-slot/time-slot.controller.ts`
|
||||
|
||||
#### Member Endpoints (Public)
|
||||
```
|
||||
GET /time-slot/available?date=YYYY-MM-DD
|
||||
- Get available slots for a date
|
||||
- Include booking status for current user
|
||||
|
||||
GET /time-slot/:id
|
||||
- Get specific slot details
|
||||
```
|
||||
|
||||
#### Admin Endpoints (Requires JWT + ADMIN role)
|
||||
```
|
||||
GET /admin/week-template
|
||||
- Returns all WeekTemplates
|
||||
- Ordered by: dayOfWeek ASC, startTime ASC
|
||||
|
||||
PUT /admin/week-template
|
||||
- Request body: { templates: [...] }
|
||||
- Replaces all templates (transaction-based)
|
||||
- Validation: dayOfWeek 1-7, startTime/endTime strings
|
||||
|
||||
POST /admin/time-slot/manual
|
||||
- Request body: { date, startTime, endTime, capacity? }
|
||||
- Creates manual slot with source=MANUAL
|
||||
- Capacity defaults to DEFAULT_SLOT_CAPACITY
|
||||
|
||||
PUT /admin/time-slot/:id/close
|
||||
- Changes slot status to CLOSED
|
||||
- Returns updated slot
|
||||
|
||||
POST /admin/generate-slots
|
||||
- Generates slots from active templates
|
||||
- Fetches templates where isActive=true
|
||||
- Creates slots for next SLOT_GENERATION_DAYS (14 days by default)
|
||||
- Uses skipDuplicates to make re-runs safe
|
||||
- Returns: { count: number }
|
||||
```
|
||||
|
||||
### Time Slot Service
|
||||
**File**: `packages/server/src/time-slot/time-slot.service.ts`
|
||||
|
||||
Key methods:
|
||||
```typescript
|
||||
async getWeekTemplates(): Promise<WeekTemplate[]>
|
||||
// Returns all templates sorted by day/time
|
||||
|
||||
async replaceWeekTemplates(items: Array<{...}>): Promise<any>
|
||||
// Transaction-based replacement:
|
||||
// 1. Delete all existing templates
|
||||
// 2. Create new ones from items array
|
||||
// 3. Return count of created
|
||||
|
||||
async createManualSlot(dto): Promise<TimeSlot>
|
||||
// Creates slot with source=MANUAL, status=OPEN
|
||||
|
||||
async closeSlot(id: string): Promise<TimeSlot>
|
||||
// Updates status to CLOSED
|
||||
```
|
||||
|
||||
### Slot Generator Service
|
||||
**File**: `packages/server/src/time-slot/slot-generator.service.ts`
|
||||
|
||||
Key method:
|
||||
```typescript
|
||||
async generateSlots(daysAhead: number = 14): Promise<number>
|
||||
// 1. Fetches all WeekTemplates where isActive=true
|
||||
// 2. For each of next N days:
|
||||
// - Calculate ISO weekday (1=Mon, 7=Sun)
|
||||
// - Find matching templates by dayOfWeek
|
||||
// - Create TimeSlot records with source=TEMPLATE, templateId=id
|
||||
// 3. Uses createMany with skipDuplicates=true
|
||||
// 4. Returns count of newly created slots
|
||||
//
|
||||
// Key: Converts JS getDay() (0=Sun) to ISO weekday (1=Mon, 7=Sun)
|
||||
|
||||
async cleanupExpiredSlots(): Promise<number>
|
||||
// Called by scheduler
|
||||
// Closes all OPEN slots with date < today
|
||||
|
||||
async checkExpiredMemberships(): Promise<number>
|
||||
// Called by scheduler
|
||||
// Expires memberships past end date or with 0 sessions left
|
||||
|
||||
async completeBookings(): Promise<number>
|
||||
// Called by scheduler
|
||||
// Marks CONFIRMED bookings as COMPLETED if slot date passed
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Data Flow: "排课设置" User Journey
|
||||
|
||||
### Scenario: Admin sets up class schedule for next week
|
||||
|
||||
1. **Admin opens dashboard** → `index.vue`
|
||||
- Taps "排课设置" nav item
|
||||
|
||||
2. **Admin navigates to Week Template page** → `week-template.vue`
|
||||
- `onMounted()` → `fetchTemplates()`
|
||||
- Frontend: `GET /admin/week-template`
|
||||
- Shows existing templates grouped by day
|
||||
- Example display:
|
||||
```
|
||||
周一
|
||||
09:00-10:00 10人 [启用] [编辑] [删除]
|
||||
18:00-19:00 8人 [启用] [编辑] [删除]
|
||||
周三
|
||||
10:00-11:00 12人 [启用] [编辑] [删除]
|
||||
```
|
||||
|
||||
3. **Admin adds a new class** → Click "+ 新增时段"
|
||||
- Modal opens
|
||||
- Select day, time, capacity
|
||||
- Click "确认"
|
||||
- Template added to local `templates` array
|
||||
- **Save bar appears** at bottom
|
||||
|
||||
4. **Admin edits existing template** → Click "编辑"
|
||||
- Modal opens with existing values
|
||||
- Modify time/capacity
|
||||
- Click "确认"
|
||||
- Updated in local array
|
||||
- Save bar shows if changed
|
||||
|
||||
5. **Admin disables a template** → Click "停用"
|
||||
- `isActive` flipped to false
|
||||
- Template grayed out
|
||||
- Save bar shows
|
||||
|
||||
6. **Admin saves all changes** → Click "保存全部更改"
|
||||
- Loading state
|
||||
- Frontend: `PUT /admin/week-template` with all templates
|
||||
- Backend transaction:
|
||||
```
|
||||
BEGIN TRANSACTION
|
||||
DELETE FROM week_template
|
||||
INSERT INTO week_template (day_of_week, start_time, end_time, capacity, is_active) VALUES (...)
|
||||
COMMIT TRANSACTION
|
||||
```
|
||||
- Success toast
|
||||
- Frontend refetches templates
|
||||
- Save bar disappears
|
||||
|
||||
7. **Backend scheduler auto-generates slots**
|
||||
- Nightly cron (scheduler module)
|
||||
- Calls `SlotGeneratorService.generateSlots(14)`
|
||||
- Queries active WeekTemplates
|
||||
- For each day in next 14 days:
|
||||
- Checks what templates apply (by ISO weekday)
|
||||
- Creates TimeSlot records
|
||||
- Uses `skipDuplicates` to avoid duplicates on re-run
|
||||
- Example output:
|
||||
```
|
||||
date: 2026-04-06 (Monday)
|
||||
09:00-10:00 source=TEMPLATE templateId=abc123
|
||||
18:00-19:00 source=TEMPLATE templateId=def456
|
||||
date: 2026-04-08 (Wednesday)
|
||||
10:00-11:00 source=TEMPLATE templateId=ghi789
|
||||
```
|
||||
|
||||
8. **Members can see and book the generated slots**
|
||||
- Frontend: `GET /time-slot/available?date=2026-04-06`
|
||||
- Members choose a slot and confirm booking
|
||||
|
||||
---
|
||||
|
||||
## 📅 Constants & Utilities
|
||||
|
||||
### Shared Constants
|
||||
**File**: `packages/shared/src/constants.ts`
|
||||
|
||||
```typescript
|
||||
export const SLOT_GENERATION_DAYS = 14
|
||||
// Number of days ahead to generate slots for
|
||||
|
||||
export const DEFAULT_SLOT_CAPACITY = 1
|
||||
// Default capacity if not specified (for private lessons)
|
||||
|
||||
export const WEEKDAY_LABELS = ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
// Index 0 is unused, 1-7 map to weekdays
|
||||
// Used in dropdowns and display
|
||||
|
||||
export const DEFAULT_CANCEL_HOURS_LIMIT = 2
|
||||
// Hours before slot to allow free cancellation
|
||||
|
||||
export const TIME_PERIODS = {
|
||||
MORNING: { label: '上午', start: '06:00', end: '12:00' },
|
||||
AFTERNOON: { label: '下午', start: '12:00', end: '18:00' },
|
||||
EVENING: { label: '晚上', start: '18:00', end: '22:00' }
|
||||
}
|
||||
|
||||
export const DATE_SELECTOR_DAYS = 7
|
||||
```
|
||||
|
||||
### Format Utilities
|
||||
**File**: `packages/app/src/utils/format.ts`
|
||||
|
||||
```typescript
|
||||
formatDate(date: Date | string): string
|
||||
// Converts to YYYY-MM-DD format
|
||||
// Used for date pickers and API calls
|
||||
|
||||
getWeekdayLabel(date: Date | string): string
|
||||
// Returns Chinese weekday (周一-周日)
|
||||
|
||||
isToday(date: Date | string): boolean
|
||||
// Checks if date is today
|
||||
|
||||
getDateRange(days: number): Array<{ date, weekday, isToday }>
|
||||
// Generates future N days' dates
|
||||
```
|
||||
|
||||
### Request Utility
|
||||
**File**: `packages/app/src/utils/request.ts`
|
||||
|
||||
```typescript
|
||||
function request<T>(options: RequestOptions): Promise<T>
|
||||
// Makes HTTP request with JWT auth
|
||||
// Auto-refreshes token on 401
|
||||
|
||||
function get<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
function post<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
function put<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
function del<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
|
||||
// Base URL logic:
|
||||
// - Production: https://focus.richarjiang.com/api
|
||||
// - Development: http://localhost:3000/api
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Permission Model
|
||||
|
||||
**Role**: `UserRole.ADMIN`
|
||||
|
||||
### Protected Endpoints
|
||||
All `/admin/*` endpoints require:
|
||||
1. Valid JWT token
|
||||
2. Header: `Authorization: Bearer <token>`
|
||||
3. User role must be `ADMIN`
|
||||
|
||||
Protected by:
|
||||
- `@UseGuards(JwtAuthGuard, RolesGuard)`
|
||||
- `@Roles(UserRole.ADMIN)`
|
||||
|
||||
### Auth Flow
|
||||
1. Admin logs in via auth module
|
||||
2. JWT token returned, stored in `uni.setStorageSync('token')`
|
||||
3. All requests include token in Authorization header
|
||||
4. If 401 response: clear token, show login prompt
|
||||
5. If 4xx/5xx: show error toast
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Current Implementation Notes
|
||||
|
||||
### Implemented Features ✅
|
||||
- [x] Week template CRUD (Create, Read, Update via replace)
|
||||
- [x] Manual slot creation
|
||||
- [x] Close individual slots
|
||||
- [x] Batch slot generation from templates
|
||||
- [x] UI for all three slot adjustment tabs
|
||||
- [x] Local state change tracking (isDirty)
|
||||
- [x] Modal form for adding/editing templates
|
||||
- [x] Grouping templates by weekday
|
||||
- [x] Status badges for slots (OPEN/FULL/CLOSED)
|
||||
|
||||
### Missing/Stub Features ⚠️
|
||||
- [ ] `fetchDashboardStats()` API endpoint appears to be stubbed
|
||||
- `index.vue` calls it but endpoint not found in backend
|
||||
- May need to implement in studio or payment controller
|
||||
- [ ] No client-side validation errors displayed on API failures
|
||||
- [ ] No confirmation before overwriting all templates
|
||||
- [ ] No undo/restore from past template versions
|
||||
|
||||
### Edge Cases to Watch 🔍
|
||||
1. **Timezone handling**: All dates are treated as UTC midnight
|
||||
- Slot generation uses `setUTCHours(0,0,0,0)`
|
||||
- Frontend format displays as YYYY-MM-DD (local string)
|
||||
|
||||
2. **Duplicate slot prevention**:
|
||||
- Backend uses `skipDuplicates: true` in createMany
|
||||
- Assumes date + startTime + endTime forms unique key
|
||||
|
||||
3. **Template replacement is atomic**:
|
||||
- All templates deleted, all new ones created in transaction
|
||||
- If one row fails, entire operation rolls back
|
||||
|
||||
4. **ISO weekday vs JS getDay()**:
|
||||
- Shared code uses ISO: 1=Mon, 7=Sun
|
||||
- Frontend picker displays Chinese labels
|
||||
- Backend slot-generator converts JS getDay() to ISO
|
||||
|
||||
---
|
||||
|
||||
## 📱 UI Design Patterns
|
||||
|
||||
### Colors & Styling
|
||||
- **Primary**: `#1a1a2e` (dark navy)
|
||||
- **Accent**: `#c9a87c` (gold)
|
||||
- **Success**: `#27ae60` (green)
|
||||
- **Warning**: `#e67e22` (orange)
|
||||
- **Danger**: `#c0392b` (red)
|
||||
- **Background**: `#f5f3f0` (light beige)
|
||||
|
||||
### Component Patterns
|
||||
1. **Skeleton loaders**: Shimmer animation for loading states
|
||||
2. **Save bar**: Fixed bottom bar shows only when changes exist
|
||||
3. **Toggle buttons**: Color indicates state (on=green, off=orange)
|
||||
4. **Modals**: Bottom-sheet style with backdrop
|
||||
5. **Pickers**: WeChat native pickers for date/time
|
||||
6. **Badges**: Color-coded status indicators
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Deployment & Configuration
|
||||
|
||||
### Frontend
|
||||
- WeChat mini-program environment
|
||||
- Base URL logic in `packages/app/src/utils/request.ts`:
|
||||
```typescript
|
||||
// Production
|
||||
https://focus.richarjiang.com/api
|
||||
|
||||
// Development
|
||||
http://localhost:3000/api
|
||||
```
|
||||
|
||||
### Backend
|
||||
- NestJS server on port 3000
|
||||
- Prisma ORM with database
|
||||
- JWT authentication
|
||||
- Role-based access control (RBAC)
|
||||
|
||||
---
|
||||
|
||||
## 📚 Related Files Summary
|
||||
|
||||
| File | Purpose | Type |
|
||||
|------|---------|------|
|
||||
| `admin/index.vue` | Admin dashboard | Component |
|
||||
| `admin/week-template.vue` | Schedule templates | Component ⭐ |
|
||||
| `admin/slot-adjust.vue` | Manual slot ops | Component |
|
||||
| `stores/admin.ts` | Admin API calls | Store |
|
||||
| `time-slot.service.ts` | Slot business logic | Service |
|
||||
| `slot-generator.service.ts` | Template-based generation | Service |
|
||||
| `time-slot.controller.ts` | API endpoints | Controller |
|
||||
| `week-template.ts` | Type definitions | Type |
|
||||
| `constants.ts` | Shared constants | Config |
|
||||
| `format.ts` | Date/time utilities | Utility |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Takeaways
|
||||
|
||||
1. **"排课设置"** is the master schedule template management page
|
||||
2. **Templates are ISO-weekday based** (1=Monday, 7=Sunday)
|
||||
3. **Slot generation is automated** via backend scheduler, triggered by:
|
||||
- Nightly cron job
|
||||
- Or manual POST to `/admin/generate-slots` endpoint
|
||||
4. **Save pattern**: Local changes tracked, one "save all" API call with full template array
|
||||
5. **Timezone**: All operations use UTC midnight as boundaries
|
||||
6. **Atomicity**: Backend uses Prisma transactions for template replacement
|
||||
7. **Permissions**: All admin endpoints protected by JWT + ADMIN role guard
|
||||
|
||||
552
BOOKING_ARCHITECTURE_DIAGRAM.md
Normal file
552
BOOKING_ARCHITECTURE_DIAGRAM.md
Normal file
@@ -0,0 +1,552 @@
|
||||
# Booking Page - Architecture Diagram
|
||||
|
||||
## 🏛️ Complete System Architecture
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ WECHAT MINI-PROGRAM │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ FRONTEND (Vue 3 + Uni-app) │ │
|
||||
│ │ │ │
|
||||
│ │ ┌────────────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ pages/booking/index.vue (Main Page Component) │ │ │
|
||||
│ │ │ ───────────────────────────────────────────────────────────── │ │ │
|
||||
│ │ │ State: │ │ │
|
||||
│ │ │ • selectedDate: string │ │ │
|
||||
│ │ │ • selectedPeriod: PeriodKey | null │ │ │
|
||||
│ │ │ • showConfirmPopup: boolean │ │ │
|
||||
│ │ │ • pendingSlot: TimeSlotWithBookingStatus | null │ │ │
|
||||
│ │ │ • refreshing: boolean │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ Computed: │ │ │
|
||||
│ │ │ • scrollHeight (responsive) │ │ │
|
||||
│ │ │ • filteredSlots (depends on period) │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ Lifecycle: │ │ │
|
||||
│ │ │ • onMounted() → Load memberships + today's slots │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ Event Handlers: │ │ │
|
||||
│ │ │ • onDateSelect() → loadSlots(newDate) │ │ │
|
||||
│ │ │ • onPeriodChange() → Auto-filter via computed │ │ │
|
||||
│ │ │ • onRefresh() → Reload slots │ │ │
|
||||
│ │ │ • onBookTap() → Auth check → Show popup │ │ │
|
||||
│ │ │ • onConfirmBooking() → Create booking → Refresh │ │ │
|
||||
│ │ │ • onCancelTap() → Cancel booking → Refresh │ │ │
|
||||
│ │ └────────────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ ↓ │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ Child Components (All reactive & event-driven) │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ ┌──────────────────┐ ┌──────────────────┐ │ │ │
|
||||
│ │ │ │ DateSelector.vue │ │ TimePeriod...vue │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ [Today] [5] [4] │ │ 全部 上午 下午... │ │ │ │
|
||||
│ │ │ │ Props: modelValue│ │ Props: modelValue│ │ │ │
|
||||
│ │ │ │ Emit: @select │ │ Emit: @change │ │ │ │
|
||||
│ │ │ └──────────────────┘ └──────────────────┘ │ │ │
|
||||
│ │ │ ↓ ↓ │ │ │
|
||||
│ │ │ (Updates selectedDate) (Updates selectedPeriod) │ │ │
|
||||
│ │ │ ↓ ↓ │ │ │
|
||||
│ │ │ (Triggers loadSlots) (Recomputes filteredSlots) │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │
|
||||
│ │ │ │ SlotCard.vue (Rendered via v-for over filteredSlots) │ │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ │
|
||||
│ │ │ │ │ [09:00-10:00] [0/1 人] │ │ │ │ │
|
||||
│ │ │ │ │ [可预约] │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ Props: slot (TimeSlotWithBookingStatus) │ │ │ │ │
|
||||
│ │ │ │ │ Emit: @book | @cancel │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ Computed: │ │ │ │ │
|
||||
│ │ │ │ │ • capacityLabel ("0/1 人" | "已关闭") │ │ │ │ │
|
||||
│ │ │ │ │ • capacityClass (cap-open | cap-almost | ...) │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ Button States (4 conditions): │ │ │ │ │
|
||||
│ │ │ │ │ 1. OPEN + not booked → "可预约" │ │ │ │ │
|
||||
│ │ │ │ │ 2. OPEN + booked → "已预约" + "取消" │ │ │ │ │
|
||||
│ │ │ │ │ 3. FULL → "已约满" │ │ │ │ │
|
||||
│ │ │ │ │ 4. CLOSED → "已关闭" │ │ │ │ │
|
||||
│ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │
|
||||
│ │ │ │ ↓ ↓ │ │ │ │
|
||||
│ │ │ │ (onBookTap) (onCancelTap) │ │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ │
|
||||
│ │ │ │ │ BookingConfirmPopup.vue (Modal) │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ Props: │ │ │ │ │
|
||||
│ │ │ │ │ • visible: boolean │ │ │ │ │
|
||||
│ │ │ │ │ • slot: TimeSlotWithBookingStatus │ │ │ │ │
|
||||
│ │ │ │ │ • memberships: MembershipWithCardType[] │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ State: │ │ │ │ │
|
||||
│ │ │ │ │ • selectedMembershipId (auto-selected on show) │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ Display: │ │ │ │ │
|
||||
│ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │
|
||||
│ │ │ │ │ │ 确认预约 ✕ │ │ │ │ │
|
||||
│ │ │ │ │ ├─────────────────────────────────┤ │ │ │ │ │
|
||||
│ │ │ │ │ │ 日期: 2026-04-05 │ │ │ │ │ │
|
||||
│ │ │ │ │ │ 时间: 09:00 - 10:00 │ │ │ │ │ │
|
||||
│ │ │ │ │ │ 剩余: 1 个名额 │ │ │ │ │ │
|
||||
│ │ │ │ │ ├─────────────────────────────────┤ │ │ │ │ │
|
||||
│ │ │ │ │ │ 💳 私教课程 │ │ │ │ │ │
|
||||
│ │ │ │ │ │ 剩余 10 次 ✓ │ │ │ │ │ │
|
||||
│ │ │ │ │ ├─────────────────────────────────┤ │ │ │ │ │
|
||||
│ │ │ │ │ │ [取消] [确认预约] │ │ │ │ │ │
|
||||
│ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ │
|
||||
│ │ │ │ │ ↓ │ │ │ │ │
|
||||
│ │ │ │ │ Emit: @confirm({timeSlotId, membershipId}) │ │ │ │ │
|
||||
│ │ │ │ │ or @cancel │ │ │ │ │
|
||||
│ │ │ │ └──────────────────────────────────────────────────────┘ │ │ │ │
|
||||
│ │ │ └──────────────────────────────────────────────────────────┘ │ │ │
|
||||
│ │ └────────────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ ↓ │ │
|
||||
│ │ ┌────────────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ Pinia Stores (Reactive State Management) │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ stores/booking.ts: │ │ │
|
||||
│ │ │ State: │ │ │
|
||||
│ │ │ • slots: TimeSlotWithBookingStatus[] │ │ │
|
||||
│ │ │ • myBookings: BookingWithDetails[] │ │ │
|
||||
│ │ │ • upcomingBookings: BookingWithDetails[] │ │ │
|
||||
│ │ │ • loadingSlots: boolean │ │ │
|
||||
│ │ │ • loadingBookings: boolean │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ Actions: │ │ │
|
||||
│ │ │ • fetchSlots(date) │ │ │
|
||||
│ │ │ • createBooking(dto) │ │ │
|
||||
│ │ │ • cancelBooking(bookingId) │ │ │
|
||||
│ │ │ • fetchMyBookings() │ │ │
|
||||
│ │ │ • fetchUpcomingBookings() │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ stores/user.ts: │ │ │
|
||||
│ │ │ State: │ │ │
|
||||
│ │ │ • user: UserProfileResponse | null │ │ │
|
||||
│ │ │ • memberships: MembershipWithCardType[] │ │ │
|
||||
│ │ │ • token: string (from localStorage) │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ Computed: │ │ │
|
||||
│ │ │ • loggedIn: !!token │ │ │
|
||||
│ │ │ • hasValidMembership: activeMemberships.length > 0 │ │ │
|
||||
│ │ │ • activeMemberships: memberships filtered by ACTIVE │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ Actions: │ │ │
|
||||
│ │ │ • login() │ │ │
|
||||
│ │ │ • fetchMemberships() │ │ │
|
||||
│ │ │ • fetchProfile() │ │ │
|
||||
│ │ │ • logout() │ │ │
|
||||
│ │ └────────────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ ↓ │ │
|
||||
│ │ ┌────────────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ Utils & Helpers │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ utils/request.ts (HTTP Client): │ │ │
|
||||
│ │ │ • request<T>(options): Promise<T> │ │ │
|
||||
│ │ │ • get<T>(url, data?): Promise<T> │ │ │
|
||||
│ │ │ • post<T>(url, data?): Promise<T> │ │ │
|
||||
│ │ │ • put<T>(url, data?): Promise<T> │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ utils/format.ts (Date Utilities): │ │ │
|
||||
│ │ │ • formatDate(date): string │ │ │
|
||||
│ │ │ • getWeekdayLabel(date): string │ │ │
|
||||
│ │ │ • isToday(date): boolean │ │ │
|
||||
│ │ │ • getDateRange(days): DateInfo[] │ │ │
|
||||
│ │ └────────────────────────────────────────────────────────────────┘ │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────┘ │
|
||||
│ ↕ │
|
||||
│ HTTP Requests │
|
||||
│ (Bearer Token in Header) │
|
||||
│ ↓ │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ BACKEND API │ │
|
||||
│ │ (packages/server/src/time-slot, booking, membership modules) │ │
|
||||
│ │ │ │
|
||||
│ │ GET /api/time-slot/available?date=YYYY-MM-DD │ │
|
||||
│ │ → TimeSlotWithBookingStatus[] │ │
|
||||
│ │ │ │
|
||||
│ │ POST /api/booking │ │
|
||||
│ │ Body: { timeSlotId, membershipId } │ │
|
||||
│ │ → BookingWithDetails │ │
|
||||
│ │ │ │
|
||||
│ │ PUT /api/booking/:bookingId/cancel │ │
|
||||
│ │ → BookingWithDetails (status: CANCELLED) │ │
|
||||
│ │ │ │
|
||||
│ │ GET /api/membership/my │ │
|
||||
│ │ → MembershipWithCardType[] │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────┘ │
|
||||
│ ↕ │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ DATABASE │ │
|
||||
│ │ (TimeSlot, Booking, Membership, User tables) │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Data Flow Lifecycle
|
||||
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════════════════╗
|
||||
║ BOOKING PAGE LIFECYCLE ║
|
||||
╚══════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
1. PAGE LOAD
|
||||
┌─ onMounted()
|
||||
│ ├─ IF loggedIn AND no memberships
|
||||
│ │ └─ userStore.fetchMemberships()
|
||||
│ │ GET /membership/my
|
||||
│ │ → memberships array
|
||||
│ │
|
||||
│ └─ loadSlots(today)
|
||||
│ → bookingStore.fetchSlots(date)
|
||||
│ GET /time-slot/available?date=YYYY-MM-DD
|
||||
│ → slots array
|
||||
│ → Render SlotCard components
|
||||
│
|
||||
└─ READY ✓
|
||||
|
||||
2. USER SELECTS DATE
|
||||
├─ onDateSelect(newDate)
|
||||
├─ selectedDate.value = newDate
|
||||
└─ loadSlots(newDate)
|
||||
→ bookingStore.fetchSlots(newDate)
|
||||
→ slots array (for new date)
|
||||
→ SlotCard components re-render
|
||||
|
||||
3. USER SELECTS TIME PERIOD
|
||||
├─ onPeriodChange(period)
|
||||
├─ selectedPeriod.value = period
|
||||
└─ filteredSlots computed updates automatically
|
||||
→ Vue watches TIME_PERIODS[period]
|
||||
→ Filters slots by startTime
|
||||
→ SlotCard components re-render (subset)
|
||||
|
||||
4. USER PULLS TO REFRESH
|
||||
├─ onRefresh()
|
||||
├─ refreshing.value = true
|
||||
├─ loadSlots(selectedDate.value)
|
||||
│ → bookingStore.fetchSlots()
|
||||
│ → slots array (refreshed)
|
||||
└─ refreshing.value = false
|
||||
|
||||
5. USER TAPS "可预约" (Book)
|
||||
├─ onBookTap(slot)
|
||||
│
|
||||
├─ CHECK: loggedIn?
|
||||
│ ├─ NO → Show login modal
|
||||
│ │ User clicks confirm
|
||||
│ │ → userStore.login()
|
||||
│ │ POST /auth/wxLogin
|
||||
│ │ → token + user
|
||||
│ │ → userStore.fetchMemberships()
|
||||
│ │ GET /membership/my
|
||||
│ │ → memberships array
|
||||
│ │ → RETRY onBookTap(slot)
|
||||
│ │
|
||||
│ └─ YES → Continue
|
||||
│
|
||||
├─ CHECK: hasValidMembership?
|
||||
│ ├─ NO → Show purchase modal
|
||||
│ │ User clicks confirm
|
||||
│ │ → uni.navigateTo('/pages/store/index')
|
||||
│ │
|
||||
│ └─ YES → Continue
|
||||
│
|
||||
├─ pendingSlot.value = slot
|
||||
├─ showConfirmPopup.value = true
|
||||
│
|
||||
└─ POPUP SHOWN ✓
|
||||
├─ selectedMembershipId auto-selected (first one)
|
||||
├─ Watch on popup visibility + memberships
|
||||
│ → Auto-select first membership when shown
|
||||
│
|
||||
└─ User sees:
|
||||
• Slot date/time
|
||||
• Membership card options
|
||||
• Deduction message
|
||||
|
||||
6. USER CONFIRMS BOOKING
|
||||
├─ onConfirmBooking({timeSlotId, membershipId})
|
||||
├─ showConfirmPopup.value = false
|
||||
├─ uni.showLoading('预约中...')
|
||||
│
|
||||
├─ bookingStore.createBooking(payload)
|
||||
│ └─ POST /booking
|
||||
│ Body: { timeSlotId, membershipId }
|
||||
│ → BookingWithDetails
|
||||
│
|
||||
├─ uni.hideLoading()
|
||||
├─ uni.showToast('预约成功！')
|
||||
│
|
||||
├─ loadSlots(selectedDate.value) // REFRESH
|
||||
│ → bookingStore.fetchSlots()
|
||||
│ GET /time-slot/available?date=
|
||||
│ → slots array (UPDATED)
|
||||
│ • slot.isBookedByMe = true
|
||||
│ • slot.myBookingId = bookingId
|
||||
│ • Button now shows "已预约"
|
||||
│
|
||||
└─ BOOKING COMPLETE ✓
|
||||
|
||||
7. USER TAPS "取消" (Cancel)
|
||||
├─ onCancelTap(slot)
|
||||
├─ Show confirmation modal
|
||||
├─ User confirms
|
||||
│
|
||||
├─ uni.showLoading('取消中...')
|
||||
│
|
||||
├─ bookingStore.cancelBooking(slot.myBookingId)
|
||||
│ └─ PUT /booking/:id/cancel
|
||||
│ → BookingWithDetails (status: CANCELLED)
|
||||
│
|
||||
├─ uni.hideLoading()
|
||||
├─ uni.showToast('已取消预约')
|
||||
│
|
||||
├─ loadSlots(selectedDate.value) // REFRESH
|
||||
│ → bookingStore.fetchSlots()
|
||||
│ GET /time-slot/available?date=
|
||||
│ → slots array (UPDATED)
|
||||
│ • slot.isBookedByMe = false
|
||||
│ • slot.myBookingId = null
|
||||
│ • Button now shows "可预约"
|
||||
│
|
||||
└─ CANCELLATION COMPLETE ✓
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 State Synchronization
|
||||
|
||||
```
|
||||
Component ←→ Pinia Store ←→ API ←→ Database
|
||||
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ Component (Vue Template) │
|
||||
│ │
|
||||
│ {{ bookingStore.slots }} ← Reactive binding │
|
||||
│ {{ filteredSlots }} ← Computed from slots │
|
||||
│ {{ userStore.hasValidMembership }} ← Computed from store │
|
||||
│ │
|
||||
│ @click="onBookTap(slot)" ← User action │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
↑ ↓
|
||||
│ Read │ Mutate
|
||||
│ ↓
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ Pinia Store State │
|
||||
│ │
|
||||
│ slots: TimeSlotWithBookingStatus[] │
|
||||
│ ↓ Recomputed when: │
|
||||
│ - fetchSlots() returns data │
|
||||
│ - createBooking() succeeds │
|
||||
│ - cancelBooking() succeeds │
|
||||
│ │
|
||||
│ memberships: MembershipWithCardType[] │
|
||||
│ ↓ Set when: │
|
||||
│ - fetchMemberships() returns data │
|
||||
│ │
|
||||
│ loadingSlots: boolean │
|
||||
│ ↓ Set to: │
|
||||
│ - true on fetchSlots() start │
|
||||
│ - false on fetchSlots() end │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
↑ ↓
|
||||
│ Response │ Request
|
||||
│ ↓
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ API Layer (utils/request.ts) │
|
||||
│ │
|
||||
│ GET /time-slot/available?date=2026-04-05 │
|
||||
│ ↓ Returns ApiResponse<TimeSlotWithBookingStatus[]> │
|
||||
│ { success: true, data: [...], message: null } │
|
||||
│ │
|
||||
│ POST /booking │
|
||||
│ ↓ Body: { timeSlotId, membershipId } │
|
||||
│ ↓ Returns ApiResponse<BookingWithDetails> │
|
||||
│ { success: true, data: {...}, message: null } │
|
||||
│ │
|
||||
│ PUT /booking/:id/cancel │
|
||||
│ ↓ Returns ApiResponse<BookingWithDetails> │
|
||||
│ { success: true, data: {...}, message: null } │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
↑ ↓
|
||||
│ SELECT/UPDATE │ INSERT/UPDATE
|
||||
│ ↓
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ Database │
|
||||
│ │
|
||||
│ TimeSlot Table │
|
||||
│ id, date, startTime, endTime, capacity, │
|
||||
│ bookedCount, status, source, templateId │
|
||||
│ │
|
||||
│ Booking Table │
|
||||
│ id, userId, timeSlotId, membershipId, │
|
||||
│ status (CONFIRMED/CANCELLED/...), bookedAt │
|
||||
│ │
|
||||
│ Membership Table │
|
||||
│ id, userId, cardTypeId, status, remainingTimes, │
|
||||
│ expireDate, createdAt, updatedAt │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Component Communication
|
||||
|
||||
```
|
||||
Root: pages/booking/index.vue
|
||||
│
|
||||
├─ PROPS DOWN ──→ DateSelector.vue
|
||||
│ └─ modelValue: string (YYYY-MM-DD)
|
||||
│
|
||||
├─ PROPS DOWN ──→ TimePeriodFilter.vue
|
||||
│ └─ modelValue: PeriodKey | null
|
||||
│
|
||||
├─ PROPS DOWN ──→ SlotCard.vue (v-for)
|
||||
│ └─ slot: TimeSlotWithBookingStatus
|
||||
│
|
||||
├─ PROPS DOWN ──→ BookingConfirmPopup.vue
|
||||
│ ├─ visible: boolean
|
||||
│ ├─ slot: TimeSlotWithBookingStatus | null
|
||||
│ └─ memberships: MembershipWithCardType[]
|
||||
│
|
||||
├─ EVENTS UP ←── DateSelector.vue
|
||||
│ ├─ @select(date) → onDateSelect()
|
||||
│ └─ @update:modelValue(date)
|
||||
│
|
||||
├─ EVENTS UP ←── TimePeriodFilter.vue
|
||||
│ ├─ @change(period) → onPeriodChange()
|
||||
│ └─ @update:modelValue(period)
|
||||
│
|
||||
├─ EVENTS UP ←── SlotCard.vue
|
||||
│ ├─ @book(slot) → onBookTap()
|
||||
│ └─ @cancel(slot) → onCancelTap()
|
||||
│
|
||||
└─ EVENTS UP ←── BookingConfirmPopup.vue
|
||||
├─ @confirm({timeSlotId, membershipId}) → onConfirmBooking()
|
||||
└─ @cancel → showConfirmPopup = false
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧬 Reactive Dependency Chain
|
||||
|
||||
```
|
||||
LocalStorage (token)
|
||||
↓
|
||||
userStore.token
|
||||
↓
|
||||
userStore.loggedIn (computed)
|
||||
↓
|
||||
pages/booking → Check login status
|
||||
↓
|
||||
userStore.memberships
|
||||
↓
|
||||
userStore.activeMemberships (computed, filtered by ACTIVE)
|
||||
↓
|
||||
userStore.hasValidMembership (computed)
|
||||
↓
|
||||
pages/booking → Show/hide booking button & membership popup
|
||||
↓
|
||||
BookingConfirmPopup ← receives activeMemberships as props
|
||||
↓
|
||||
selectedMembershipId (auto-selected on popup show)
|
||||
|
||||
|
||||
bookingStore.slots (array)
|
||||
↓
|
||||
pages/booking.selectedPeriod
|
||||
↓
|
||||
pages/booking.filteredSlots (computed, filtered by TIME_PERIODS)
|
||||
↓
|
||||
v-for → SlotCard components render
|
||||
↓
|
||||
Each SlotCard → capacityLabel (computed)
|
||||
→ capacityClass (computed)
|
||||
→ Button state determined
|
||||
|
||||
|
||||
bookingStore.loadingSlots (boolean)
|
||||
↓
|
||||
pages/booking template
|
||||
↓
|
||||
v-if → Show skeleton | Show slots | Show empty state
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 API Request/Response Chain
|
||||
|
||||
```
|
||||
USER TAPS DATE
|
||||
↓
|
||||
pages/booking/onDateSelect()
|
||||
↓
|
||||
loadSlots(date)
|
||||
↓
|
||||
bookingStore.fetchSlots(date)
|
||||
↓
|
||||
get('/time-slot/available', { date })
|
||||
↓
|
||||
utils/request.get()
|
||||
↓
|
||||
uni.request({
|
||||
url: 'http://localhost:3000/api/time-slot/available',
|
||||
method: 'GET',
|
||||
data: { date: '2026-04-05' },
|
||||
header: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer <token>'
|
||||
}
|
||||
})
|
||||
↓
|
||||
BACKEND: GET /api/time-slot/available?date=2026-04-05
|
||||
(Queries database for TimeSlot records matching date)
|
||||
(Fetches current user's bookings for those slots)
|
||||
(Enriches response with isBookedByMe, myBookingId)
|
||||
↓
|
||||
Response: {
|
||||
"success": true,
|
||||
"data": [
|
||||
{
|
||||
"id": "...",
|
||||
"date": "2026-04-05",
|
||||
"startTime": "09:00",
|
||||
"endTime": "10:00",
|
||||
"capacity": 1,
|
||||
"bookedCount": 0,
|
||||
"status": "OPEN",
|
||||
"source": "MANUAL",
|
||||
"templateId": null,
|
||||
"isBookedByMe": false,
|
||||
"myBookingId": null
|
||||
},
|
||||
...
|
||||
],
|
||||
"message": null
|
||||
}
|
||||
↓
|
||||
request.ts success callback
|
||||
├─ Check: statusCode < 400 ✓
|
||||
├─ Check: body.success === true ✓
|
||||
├─ Extract: body.data (TimeSlotWithBookingStatus[])
|
||||
└─ Resolve promise with data
|
||||
↓
|
||||
bookingStore.fetchSlots() try block
|
||||
├─ slots.value = data
|
||||
└─ loadingSlots.value = false
|
||||
↓
|
||||
Component template reactivity
|
||||
├─ Re-render with new slots
|
||||
├─ Compute filteredSlots
|
||||
└─ Render SlotCard components
|
||||
```
|
||||
|
||||
894
BOOKING_PAGE_ANALYSIS.md
Normal file
894
BOOKING_PAGE_ANALYSIS.md
Normal file
@@ -0,0 +1,894 @@
|
||||
# WeChat Mini-Program Booking Page Analysis
|
||||
## mp-pilates Project (Uni-app + Vue 3)
|
||||
|
||||
---
|
||||
|
||||
## 📋 Project Structure Overview
|
||||
|
||||
```
|
||||
packages/app/src/
|
||||
├── pages/
|
||||
│ └── booking/
|
||||
│ └── index.vue # 📍 Main booking page
|
||||
├── components/
|
||||
│ ├── DateSelector.vue # Date picker (7 days)
|
||||
│ ├── TimePeriodFilter.vue # Morning/Afternoon/Evening filter
|
||||
│ ├── SlotCard.vue # Individual time slot card
|
||||
│ └── BookingConfirmPopup.vue # Confirmation modal
|
||||
├── stores/
|
||||
│ ├── booking.ts # 📍 Booking state management
|
||||
│ └── user.ts # User/membership state
|
||||
└── utils/
|
||||
├── request.ts # API request utilities
|
||||
└── format.ts # Date/time formatting utilities
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 API Flow
|
||||
|
||||
### Endpoint: `/api/time-slot/available?date=YYYY-MM-DD`
|
||||
|
||||
**Request:**
|
||||
- Method: `GET`
|
||||
- Query params: `date` (YYYY-MM-DD format)
|
||||
- Authentication: Bearer token from localStorage
|
||||
|
||||
**Response Format (from your example):**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"data": [
|
||||
{
|
||||
"id": "string (UUID)",
|
||||
"date": "2026-04-05",
|
||||
"startTime": "09:00",
|
||||
"endTime": "10:00",
|
||||
"capacity": 1,
|
||||
"bookedCount": 0,
|
||||
"status": "OPEN",
|
||||
"source": "MANUAL",
|
||||
"templateId": null,
|
||||
"isBookedByMe": false,
|
||||
"myBookingId": null
|
||||
}
|
||||
],
|
||||
"message": null
|
||||
}
|
||||
```
|
||||
|
||||
**Status Values:**
|
||||
- `OPEN` - Available to book
|
||||
- `FULL` - All slots booked
|
||||
- `CLOSED` - Time slot closed
|
||||
|
||||
**Source Values:**
|
||||
- `MANUAL` - Manually created
|
||||
- `TEMPLATE` - Generated from template
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Complete Data Flow Diagram
|
||||
|
||||
```
|
||||
User Opens Booking Page
|
||||
↓
|
||||
[onMounted] Lifecycle Hook
|
||||
↓
|
||||
1. Check if logged in + fetch memberships (if needed)
|
||||
2. Load today's slots: bookingStore.fetchSlots(today)
|
||||
↓
|
||||
bookingStore.fetchSlots(date: string)
|
||||
↓
|
||||
request.get<TimeSlotWithBookingStatus[]>(
|
||||
'/time-slot/available',
|
||||
{ date }
|
||||
)
|
||||
↓
|
||||
Sets: bookingStore.slots = [TimeSlotWithBookingStatus[], ...]
|
||||
↓
|
||||
Vue renders via computed: filteredSlots
|
||||
↓
|
||||
User selects date OR filters by time period
|
||||
↓
|
||||
Updates: selectedDate.value or selectedPeriod.value
|
||||
↓
|
||||
Computed filteredSlots re-calculates
|
||||
↓
|
||||
Renders SlotCard components
|
||||
↓
|
||||
User taps "可预约" (Book Button)
|
||||
↓
|
||||
[onBookTap(slot)]
|
||||
- Check login (if not → show login modal)
|
||||
- Check valid membership (if not → show purchase modal)
|
||||
- Show BookingConfirmPopup
|
||||
↓
|
||||
User selects membership + confirms
|
||||
↓
|
||||
[onConfirmBooking(payload)]
|
||||
- bookingStore.createBooking({timeSlotId, membershipId})
|
||||
- POST /api/booking
|
||||
- Refresh slots: loadSlots(selectedDate.value)
|
||||
↓
|
||||
Success/Error Toast
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 File-by-File Analysis
|
||||
|
||||
### 1️⃣ **pages/booking/index.vue** (Main Component)
|
||||
|
||||
**Template Structure:**
|
||||
```
|
||||
.booking-page
|
||||
├── .sticky-header (z-index: 100)
|
||||
│ ├── DateSelector (v-model="selectedDate")
|
||||
│ └── TimePeriodFilter (v-model="selectedPeriod")
|
||||
├── scroll-view.slot-scroll
|
||||
│ ├── Loading skeleton (4 cards) - when loadingSlots
|
||||
│ ├── Empty state - when no slots
|
||||
│ └── SlotCard list - main content
|
||||
│ └── SlotCard (v-for="slot in filteredSlots")
|
||||
└── BookingConfirmPopup (conditional)
|
||||
```
|
||||
|
||||
**Script Setup - State Variables:**
|
||||
```typescript
|
||||
selectedDate: ref<string> // YYYY-MM-DD format
|
||||
selectedPeriod: ref<PeriodKey> // 'MORNING'|'AFTERNOON'|'EVENING'|null
|
||||
showConfirmPopup: ref<boolean> // Modal visibility
|
||||
pendingSlot: ref<Slot | null> // Slot being booked
|
||||
refreshing: ref<boolean> // Pull-to-refresh state
|
||||
```
|
||||
|
||||
**Computed Properties:**
|
||||
```typescript
|
||||
scrollHeight: computed(() => {
|
||||
// Calculates scroll area height:
|
||||
// windowHeight - headerHeight (220rpx) - tabbarHeight (100rpx)
|
||||
// Converts rpx to pixels dynamically
|
||||
})
|
||||
|
||||
filteredSlots: computed(() => {
|
||||
// If no period selected: return all slots
|
||||
// If period selected: filter by TIME_PERIODS[selectedPeriod].start/.end
|
||||
// Compares slot.startTime with period.start and period.end
|
||||
})
|
||||
```
|
||||
|
||||
**Key Lifecycle - onMounted():**
|
||||
```typescript
|
||||
1. If logged in but no memberships fetched yet:
|
||||
→ await userStore.fetchMemberships()
|
||||
2. Load today's slots:
|
||||
→ await loadSlots(formatDate(new Date()))
|
||||
```
|
||||
|
||||
**Event Handlers:**
|
||||
|
||||
**onDateSelect(date: string)** → Changes selectedDate, calls loadSlots()
|
||||
|
||||
**onPeriodChange(period)** → Updates selectedPeriod (filtering is automatic via computed)
|
||||
|
||||
**onRefresh()** → Pull-to-refresh handler
|
||||
```typescript
|
||||
refreshing.value = true
|
||||
await loadSlots(selectedDate.value)
|
||||
refreshing.value = false
|
||||
```
|
||||
|
||||
**onBookTap(slot)** → Book button clicked:
|
||||
1. Check login status → show login modal if needed
|
||||
2. Check hasValidMembership → show purchase modal if needed
|
||||
3. Set pendingSlot = slot
|
||||
4. Show BookingConfirmPopup
|
||||
|
||||
**onConfirmBooking(payload)** → User confirms booking:
|
||||
```typescript
|
||||
await bookingStore.createBooking(payload)
|
||||
// payload: { timeSlotId, membershipId }
|
||||
await loadSlots(selectedDate.value) // Refresh
|
||||
```
|
||||
|
||||
**onCancelTap(slot)** → Cancel booking:
|
||||
```typescript
|
||||
if (!slot.myBookingId) return
|
||||
// Show confirmation modal
|
||||
await bookingStore.cancelBooking(slot.myBookingId)
|
||||
await loadSlots(selectedDate.value) // Refresh
|
||||
```
|
||||
|
||||
**Styles:**
|
||||
- Page background: `#f5f3f0` (light beige)
|
||||
- Sticky header with box-shadow
|
||||
- Loading skeleton with shimmer animation
|
||||
- Empty state centered with image
|
||||
|
||||
---
|
||||
|
||||
### 2️⃣ **stores/booking.ts** (State Management)
|
||||
|
||||
**State:**
|
||||
```typescript
|
||||
slots: ref<readonly TimeSlotWithBookingStatus[]>([])
|
||||
myBookings: ref<readonly BookingWithDetails[]>([])
|
||||
upcomingBookings: ref<readonly BookingWithDetails[]>([])
|
||||
loadingSlots: ref<boolean>(false)
|
||||
loadingBookings: ref<boolean>(false)
|
||||
```
|
||||
|
||||
**Actions:**
|
||||
|
||||
**fetchSlots(date: string)**
|
||||
```typescript
|
||||
async function fetchSlots(date: string) {
|
||||
loadingSlots.value = true
|
||||
try {
|
||||
slots.value = await get<TimeSlotWithBookingStatus[]>(
|
||||
'/time-slot/available',
|
||||
{ date } // ← date as query param
|
||||
)
|
||||
} catch (err) {
|
||||
console.error('Fetch slots failed:', err)
|
||||
slots.value = []
|
||||
} finally {
|
||||
loadingSlots.value = false
|
||||
}
|
||||
}
|
||||
```
|
||||
⚠️ **CRITICAL:** If request fails, slots.value becomes empty []
|
||||
|
||||
**createBooking(dto: CreateBookingDto)**
|
||||
```typescript
|
||||
// dto: { timeSlotId: string; membershipId: string }
|
||||
const result = await post<BookingWithDetails>('/booking', dto)
|
||||
return result
|
||||
```
|
||||
|
||||
**cancelBooking(bookingId: string)**
|
||||
```typescript
|
||||
const result = await put<BookingWithDetails>(`/booking/${bookingId}/cancel`)
|
||||
return result
|
||||
```
|
||||
|
||||
**fetchMyBookings(status?: string)**
|
||||
```typescript
|
||||
const params = status ? { status } : {}
|
||||
myBookings.value = await get<BookingWithDetails[]>('/booking/my', params)
|
||||
```
|
||||
|
||||
**fetchUpcomingBookings()**
|
||||
```typescript
|
||||
upcomingBookings.value = await get<BookingWithDetails[]>('/booking/my/upcoming')
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3️⃣ **components/SlotCard.vue** (Individual Slot)
|
||||
|
||||
**Props:**
|
||||
```typescript
|
||||
interface Props {
|
||||
slot: TimeSlotWithBookingStatus
|
||||
}
|
||||
```
|
||||
|
||||
**Emits:**
|
||||
```typescript
|
||||
book: [slot] // User wants to book
|
||||
cancel: [slot] // User wants to cancel
|
||||
```
|
||||
|
||||
**Template Sections:**
|
||||
|
||||
**1. Time & Capacity:**
|
||||
```vue
|
||||
<text>{{ slot.startTime.slice(0, 5) }} - {{ slot.endTime.slice(0, 5) }}</text>
|
||||
<!-- e.g., "09:00 - 10:00" -->
|
||||
|
||||
<view class="slot-capacity" :class="capacityClass">
|
||||
{{ capacityLabel }}
|
||||
</view>
|
||||
```
|
||||
|
||||
**2. Action Buttons (4 States):**
|
||||
|
||||
**State A: OPEN + not booked by me**
|
||||
```vue
|
||||
<view class="btn btn-book">可预约</view>
|
||||
<!-- Tan/brown button, emits: book -->
|
||||
```
|
||||
|
||||
**State B: OPEN + booked by me**
|
||||
```vue
|
||||
<view class="badge-booked">已预约</view>
|
||||
<view class="btn-cancel">取消</view>
|
||||
<!-- Badge + cancel link, emits: cancel -->
|
||||
```
|
||||
|
||||
**State C: FULL**
|
||||
```vue
|
||||
<view class="btn btn-disabled">已约满</view>
|
||||
<!-- Gray disabled button -->
|
||||
```
|
||||
|
||||
**State D: CLOSED**
|
||||
```vue
|
||||
<view class="btn btn-disabled">已关闭</view>
|
||||
<!-- Gray disabled button -->
|
||||
```
|
||||
|
||||
**3. Booked Indicator:**
|
||||
```vue
|
||||
<view v-if="slot.isBookedByMe" class="booked-bar" />
|
||||
<!-- Tan bar on left side of card when booked by me -->
|
||||
```
|
||||
|
||||
**Computed Properties:**
|
||||
|
||||
**capacityLabel:**
|
||||
```typescript
|
||||
if (status === CLOSED) return '已关闭'
|
||||
return `${bookedCount}/${capacity} 人` // e.g., "0/1 人"
|
||||
```
|
||||
|
||||
**capacityClass:** Determines background color
|
||||
```
|
||||
CLOSED → cap-closed (gray)
|
||||
FULL → cap-full (red bg, red text)
|
||||
≥80% → cap-almost (orange bg, orange text)
|
||||
<80% → cap-open (green bg, green text)
|
||||
```
|
||||
|
||||
**Styles:**
|
||||
- Card: white background, 20rpx border-radius, shadow
|
||||
- Time text: 36rpx, bold, dark
|
||||
- Capacity badge: 22rpx, inline-flex, colored backgrounds
|
||||
- Buttons: rounded pills (68rpx height, 34rpx border-radius)
|
||||
- Cancel text: underlined, red (#ef4444)
|
||||
- Booked bar: 6rpx tan bar on left edge
|
||||
|
||||
---
|
||||
|
||||
### 4️⃣ **components/DateSelector.vue** (Date Picker)
|
||||
|
||||
**Props:**
|
||||
```typescript
|
||||
interface Props {
|
||||
modelValue: string // YYYY-MM-DD
|
||||
}
|
||||
```
|
||||
|
||||
**Emits:**
|
||||
- `update:modelValue` - v-model update
|
||||
- `select` - Custom event on selection
|
||||
|
||||
**Data:**
|
||||
```typescript
|
||||
dateRange: computed(() => getDateRange(DATE_SELECTOR_DAYS))
|
||||
// DATE_SELECTOR_DAYS = 7
|
||||
// Returns array of { date, weekday, isToday }
|
||||
```
|
||||
|
||||
**Template:**
|
||||
```vue
|
||||
<scroll-view scroll-x>
|
||||
<view class="track">
|
||||
<view v-for="item in dateRange" class="date-item"
|
||||
:class="{ active: item.date === modelValue, today: item.isToday }">
|
||||
<text class="weekday">{{ item.isToday ? '今天' : item.weekday }}</text>
|
||||
<text class="day">{{ getDayNumber(item.date) }}</text>
|
||||
<text class="month">{{ getMonthNumber(item.date) }}月</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
```
|
||||
|
||||
**Date Display Format:**
|
||||
- Weekday: "周一", "周二", or "今天"
|
||||
- Day: Large bold number (e.g., "5")
|
||||
- Month: Small number (e.g., "4月")
|
||||
|
||||
**Styles:**
|
||||
- Active state: tan background (#c9a87c), white text
|
||||
- Today highlight: tan-colored weekday text (even if not active)
|
||||
- Horizontal scroll, no scrollbar
|
||||
|
||||
---
|
||||
|
||||
### 5️⃣ **components/TimePeriodFilter.vue** (Period Filter)
|
||||
|
||||
**Props:**
|
||||
```typescript
|
||||
type PeriodKey = keyof typeof TIME_PERIODS | null
|
||||
|
||||
interface Props {
|
||||
modelValue: PeriodKey
|
||||
}
|
||||
```
|
||||
|
||||
**Emits:**
|
||||
- `update:modelValue` - v-model update
|
||||
- `change` - Custom event
|
||||
|
||||
**Constants:**
|
||||
```typescript
|
||||
const TIME_PERIODS = {
|
||||
MORNING: { label: '上午', start: '06:00', end: '12:00' },
|
||||
AFTERNOON: { label: '下午', start: '12:00', end: '18:00' },
|
||||
EVENING: { label: '晚上', start: '18:00', end: '22:00' },
|
||||
}
|
||||
```
|
||||
|
||||
**Tabs Generated:**
|
||||
```typescript
|
||||
[
|
||||
{ key: null, label: '全部' },
|
||||
{ key: 'MORNING', label: '上午' },
|
||||
{ key: 'AFTERNOON', label: '下午' },
|
||||
{ key: 'EVENING', label: '晚上' },
|
||||
]
|
||||
```
|
||||
|
||||
**Template:**
|
||||
```vue
|
||||
<view v-for="tab in tabs" :class="{ active: modelValue === tab.key }">
|
||||
{{ tab.label }}
|
||||
</view>
|
||||
```
|
||||
|
||||
**Active State:**
|
||||
- Text color: tan (#c9a87c), weight: 600
|
||||
- Bottom border: 4rpx tan underline (CSS ::after)
|
||||
|
||||
---
|
||||
|
||||
### 6️⃣ **components/BookingConfirmPopup.vue** (Confirmation Modal)
|
||||
|
||||
**Props:**
|
||||
```typescript
|
||||
visible: boolean
|
||||
slot: TimeSlotWithBookingStatus | null
|
||||
memberships: MembershipWithCardType[]
|
||||
```
|
||||
|
||||
**Emits:**
|
||||
- `confirm` - { timeSlotId, membershipId }
|
||||
- `cancel` - Popup closes
|
||||
- `update:visible` - Manual visibility control
|
||||
|
||||
**Template Sections:**
|
||||
|
||||
**1. Overlay Mask:**
|
||||
```vue
|
||||
<view v-if="visible" class="popup-mask" @tap="handleMaskTap">
|
||||
<!-- Clicking mask closes popup -->
|
||||
</view>
|
||||
```
|
||||
|
||||
**2. Header:**
|
||||
```vue
|
||||
<text class="popup-title">确认预约</text>
|
||||
<view class="close-btn">✕</view>
|
||||
```
|
||||
|
||||
**3. Info Section (read-only display):**
|
||||
```
|
||||
日期: 2026-04-05
|
||||
时间: 09:00 - 10:00
|
||||
剩余: 1 个名额
|
||||
```
|
||||
|
||||
**4. Membership Card Selection:**
|
||||
|
||||
**Case A: 1 membership**
|
||||
```vue
|
||||
<view class="card-item selected">
|
||||
💳
|
||||
{{ membership.cardType.name }}
|
||||
剩余 {{ remainingTimes }} 次
|
||||
✓
|
||||
</view>
|
||||
```
|
||||
(Auto-selected, pre-filled)
|
||||
|
||||
**Case B: Multiple memberships**
|
||||
```vue
|
||||
<view v-for="m in memberships" class="card-item"
|
||||
:class="{ selected: selectedMembershipId === m.id }">
|
||||
<!-- User taps to select -->
|
||||
</view>
|
||||
```
|
||||
|
||||
**5. Deduction Tip:**
|
||||
```vue
|
||||
<view v-if="selectedMembership" class="deduction-tip">
|
||||
确认后将从「{{ selectedMembership.cardType.name }}」扣除 1 次课时
|
||||
</view>
|
||||
```
|
||||
|
||||
**6. Action Buttons:**
|
||||
```
|
||||
[取消] [确认预约]
|
||||
(Outline) (Tan solid)
|
||||
(Disabled if no membership selected)
|
||||
```
|
||||
|
||||
**Auto-selection Logic:**
|
||||
```typescript
|
||||
watch([() => props.visible, () => props.memberships],
|
||||
([visible, memberships]) => {
|
||||
if (visible && memberships.length > 0) {
|
||||
selectedMembershipId.value = memberships[0].id
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
```
|
||||
|
||||
**Confirm Handler:**
|
||||
```typescript
|
||||
function handleConfirm() {
|
||||
emit('confirm', {
|
||||
timeSlotId: props.slot.id,
|
||||
membershipId: selectedMembershipId.value,
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**Styles:**
|
||||
- Modal: Fixed positioning, rgba(0,0,0,0.45) dark overlay
|
||||
- Panel: White background, rounded top corners, 32rpx padding
|
||||
- Card items: 24rpx padding, border, transition on select
|
||||
- Buttons: 88rpx height, rounded pills (44rpx)
|
||||
- Cancel: Outline style, gray text
|
||||
- Confirm: Solid tan background, white text
|
||||
|
||||
---
|
||||
|
||||
### 7️⃣ **stores/user.ts** (User State)
|
||||
|
||||
**Key State:**
|
||||
```typescript
|
||||
user: ref<UserProfileResponse | null>(null)
|
||||
memberships: ref<readonly MembershipWithCardType[]>([])
|
||||
token: ref<string>(uni.getStorageSync('token'))
|
||||
```
|
||||
|
||||
**Key Computed:**
|
||||
```typescript
|
||||
loggedIn: computed(() => !!token.value)
|
||||
activeMemberships: computed(() =>
|
||||
memberships.value.filter(m => m.status === MembershipStatus.ACTIVE)
|
||||
)
|
||||
hasValidMembership: computed(() => activeMemberships.value.length > 0)
|
||||
```
|
||||
|
||||
**Key Actions:**
|
||||
```typescript
|
||||
async function login()
|
||||
async function fetchMemberships()
|
||||
// GET /membership/my
|
||||
async function logout()
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 8️⃣ **utils/request.ts** (API Client)
|
||||
|
||||
**Base URL Logic:**
|
||||
```typescript
|
||||
const BASE_URL = (() => {
|
||||
const { miniProgram } = uni.getAccountInfoSync()
|
||||
if (miniProgram.envVersion !== 'develop') {
|
||||
return 'https://focus.richarjiang.com/api'
|
||||
}
|
||||
return 'http://localhost:3000/api'
|
||||
})()
|
||||
```
|
||||
|
||||
**Main request() function:**
|
||||
```typescript
|
||||
function request<T>(options: RequestOptions): Promise<T> {
|
||||
// 1. Get token from localStorage
|
||||
const token = uni.getStorageSync('token')
|
||||
|
||||
// 2. Call uni.request with:
|
||||
// - Authorization header (Bearer token)
|
||||
// - Content-Type: application/json
|
||||
|
||||
// 3. Response handling:
|
||||
// - 401 → Clear token, show "please login", reject
|
||||
// - ≥400 → Extract error from response.message, reject
|
||||
// - <400 & success: true → Resolve with data
|
||||
// - <400 & success: false → Reject with message
|
||||
|
||||
// 4. Network fail → Reject with errMsg
|
||||
}
|
||||
|
||||
export function get<T>(url, data?): Promise<T>
|
||||
export function post<T>(url, data?): Promise<T>
|
||||
export function put<T>(url, data?): Promise<T>
|
||||
```
|
||||
|
||||
**⚠️ GET Request Issue:**
|
||||
```typescript
|
||||
// In get(), data becomes the request body
|
||||
// But uni.request with GET should NOT have a body
|
||||
// Query params should be in the URL string
|
||||
// This might cause issues on some platforms!
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9️⃣ **utils/format.ts** (Date Utilities)
|
||||
|
||||
```typescript
|
||||
formatDate(date): string
|
||||
// Returns YYYY-MM-DD
|
||||
|
||||
getWeekdayLabel(date): string
|
||||
// Returns "周一", "周二", ..., "周日"
|
||||
|
||||
isToday(date): boolean
|
||||
// Compares year/month/day
|
||||
|
||||
getDateRange(days: number): ReadonlyArray
|
||||
// Returns array of:
|
||||
// {
|
||||
// date: YYYY-MM-DD,
|
||||
// weekday: "周一" | "今天" (if i===0),
|
||||
// isToday: boolean
|
||||
// }
|
||||
// Uses i * 86400000ms for date increment
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Data Types Overview
|
||||
|
||||
### TimeSlotWithBookingStatus (Extended from TimeSlot)
|
||||
```typescript
|
||||
interface TimeSlotWithBookingStatus extends TimeSlot {
|
||||
readonly isBookedByMe: boolean // Has user already booked?
|
||||
readonly myBookingId: string | null // ID needed to cancel
|
||||
}
|
||||
|
||||
interface TimeSlot {
|
||||
readonly id: string // UUID
|
||||
readonly date: string // YYYY-MM-DD
|
||||
readonly startTime: string // HH:MM
|
||||
readonly endTime: string // HH:MM
|
||||
readonly capacity: number // Max people
|
||||
readonly bookedCount: number // Already booked
|
||||
readonly status: TimeSlotStatus // OPEN|FULL|CLOSED
|
||||
readonly source: TimeSlotSource // TEMPLATE|MANUAL
|
||||
readonly templateId: string | null
|
||||
}
|
||||
```
|
||||
|
||||
### MembershipWithCardType
|
||||
```typescript
|
||||
interface MembershipWithCardType {
|
||||
readonly id: string
|
||||
readonly cardType: CardType
|
||||
readonly status: MembershipStatus // ACTIVE|EXPIRED|USED_UP
|
||||
readonly remainingTimes: number | null
|
||||
readonly expireDate: string // YYYY-MM-DD
|
||||
}
|
||||
```
|
||||
|
||||
### CreateBookingDto
|
||||
```typescript
|
||||
interface CreateBookingDto {
|
||||
readonly timeSlotId: string
|
||||
readonly membershipId: string
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Color Scheme
|
||||
|
||||
| Element | Color | Hex | Usage |
|
||||
|---------|-------|-----|-------|
|
||||
| Primary (Accent) | Tan/Brown | #c9a87c | Buttons, active tabs, highlights |
|
||||
| Background | Light Beige | #f5f3f0 | Page background |
|
||||
| Text Primary | Dark Gray | #1a1a1a | Main headings |
|
||||
| Text Secondary | Medium Gray | #666/#999 | Labels, descriptions |
|
||||
| Text Tertiary | Light Gray | #bbb | Disabled, hints |
|
||||
| Success | Green | #4caf50 | Open slots (capacity label) |
|
||||
| Warning | Orange | #f59e0b | Almost full (capacity label) |
|
||||
| Error | Red | #ef4444 | Full/closed, cancel button |
|
||||
| Borders | Very Light Gray | #f0f0f0/#f0ece8 | Dividers, borders |
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Potential Issues & Problems
|
||||
|
||||
### 1. **GET Request Body Issue**
|
||||
**File:** `utils/request.ts` in `get()` function
|
||||
```typescript
|
||||
export function get<T>(url: string, data?: Record<string, unknown>): Promise<T> {
|
||||
return request<T>({ url, method: 'GET', data }) // ← data as body!
|
||||
}
|
||||
```
|
||||
**Problem:** GET requests shouldn't have a body. Query params should be in the URL.
|
||||
**Impact:** `/time-slot/available?date=2026-04-05` might not work on all platforms.
|
||||
|
||||
### 2. **Empty Slots Array on Error**
|
||||
**File:** `stores/booking.ts`, `fetchSlots()`
|
||||
```typescript
|
||||
catch (err) {
|
||||
console.error('Fetch slots failed:', err)
|
||||
slots.value = [] // ← Clears state on error!
|
||||
}
|
||||
```
|
||||
**Problem:** Network error → page shows "empty state" instead of error message.
|
||||
**Impact:** Users can't tell if there's an error or truly no slots available.
|
||||
|
||||
### 3. **No Error Handling in Main Page**
|
||||
**File:** `pages/booking/index.vue`, `loadSlots()`
|
||||
```typescript
|
||||
async function loadSlots(date: string) {
|
||||
await bookingStore.fetchSlots(date)
|
||||
// ← No error handling, no user feedback
|
||||
}
|
||||
```
|
||||
**Problem:** If fetchSlots() fails, user sees empty page with no explanation.
|
||||
|
||||
### 4. **Manual Date Calculation**
|
||||
**File:** `utils/format.ts`, `getDateRange()`
|
||||
```typescript
|
||||
const d = new Date(now.getTime() + i * 86400000)
|
||||
```
|
||||
**Problem:** Doesn't account for DST transitions. Using `Date.setDate()` would be safer.
|
||||
|
||||
### 5. **No Loading State for Slots**
|
||||
**File:** `pages/booking/index.vue`
|
||||
```typescript
|
||||
<view v-if="bookingStore.loadingSlots && !refreshing" class="loading-wrap">
|
||||
```
|
||||
**Problem:** Skeleton appears only on initial load, not when changing dates or refreshing.
|
||||
**Impact:** Date changes appear instant (good UX but confusing if slow network).
|
||||
|
||||
### 6. **Hardcoded Membership Message**
|
||||
**File:** `components/BookingConfirmPopup.vue`
|
||||
```typescript
|
||||
确认后将从「{{ selectedMembership.cardType.name }}」扣除 1 次课时
|
||||
// ← Always says "1 次" even if card might deduct different amounts
|
||||
```
|
||||
**Problem:** Doesn't show actual deduction amount if dynamic.
|
||||
|
||||
---
|
||||
|
||||
## 📊 Event Flow Sequence
|
||||
|
||||
```
|
||||
1. PAGE LOAD (onMounted)
|
||||
├─ Check: userStore.loggedIn?
|
||||
├─ If yes & no memberships: fetchMemberships()
|
||||
└─ loadSlots(today)
|
||||
└─ GET /time-slot/available?date=today
|
||||
└─ bookingStore.slots = [...]
|
||||
└─ render SlotCard components
|
||||
|
||||
2. USER TAPS DATE
|
||||
├─ selectedDate.value = newDate
|
||||
└─ onDateSelect(newDate)
|
||||
└─ loadSlots(newDate)
|
||||
└─ fetchSlots()
|
||||
|
||||
3. USER FILTERS PERIOD
|
||||
├─ selectedPeriod.value = MORNING|AFTERNOON|EVENING|null
|
||||
└─ filteredSlots computed updates
|
||||
└─ SlotCards re-render (no new API call)
|
||||
|
||||
4. USER PULLS TO REFRESH
|
||||
├─ onRefresh()
|
||||
└─ loadSlots(selectedDate.value)
|
||||
|
||||
5. USER TAPS "可预约" BUTTON
|
||||
├─ onBookTap(slot)
|
||||
├─ Check login (if not → login modal)
|
||||
├─ Check membership (if not → purchase modal)
|
||||
└─ Show BookingConfirmPopup
|
||||
└─ Pre-select first membership
|
||||
|
||||
6. USER CONFIRMS BOOKING
|
||||
├─ onConfirmBooking({timeSlotId, membershipId})
|
||||
├─ POST /booking
|
||||
│ └─ bookingStore.createBooking()
|
||||
├─ Show success toast
|
||||
└─ loadSlots(selectedDate.value) // Refresh
|
||||
└─ Updated slot.isBookedByMe = true
|
||||
|
||||
7. USER TAPS "取消" BUTTON
|
||||
├─ onCancelTap(slot)
|
||||
├─ Confirm modal
|
||||
├─ PUT /booking/:id/cancel
|
||||
│ └─ bookingStore.cancelBooking()
|
||||
├─ Show success toast
|
||||
└─ loadSlots(selectedDate.value) // Refresh
|
||||
└─ Updated slot.isBookedByMe = false
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Scenarios
|
||||
|
||||
### ✅ Happy Path
|
||||
- [ ] Load page → today's slots display
|
||||
- [ ] Tap date → slots for that date display
|
||||
- [ ] Filter by period → slots filtered correctly
|
||||
- [ ] Tap "可预约" → popup shows with correct time/date
|
||||
- [ ] Select membership → deduction message updates
|
||||
- [ ] Confirm → booking created, slot shows "已预约"
|
||||
- [ ] Pull to refresh → slots reload
|
||||
- [ ] Tap "取消" → booking cancelled, slot back to "可预约"
|
||||
|
||||
### ⚠️ Edge Cases
|
||||
- [ ] No slots for date → empty state appears
|
||||
- [ ] User not logged in → login modal shows
|
||||
- [ ] No valid membership → purchase modal shows
|
||||
- [ ] Network error → ??? (currently shows empty)
|
||||
- [ ] Slot changes to FULL → button becomes disabled
|
||||
- [ ] Slot changes to CLOSED → button becomes disabled
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Integration Points
|
||||
|
||||
**From Backend:**
|
||||
1. ✅ GET `/time-slot/available?date=...` → Returns slots
|
||||
2. ✅ POST `/booking` → Create booking
|
||||
3. ✅ PUT `/booking/:id/cancel` → Cancel booking
|
||||
4. ✅ GET `/membership/my` → List memberships
|
||||
5. ✅ Auth via Bearer token
|
||||
|
||||
**From Frontend:**
|
||||
1. ✅ LocalStorage for token persistence
|
||||
2. ✅ uni.showModal, uni.showToast for UI feedback
|
||||
3. ✅ uni.getSystemInfoSync() for responsive sizing
|
||||
4. ✅ uni.navigateTo() for page navigation
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsive Layout
|
||||
|
||||
**Design Breakpoint:**
|
||||
- Base: 750rpx (WeChat standard width unit)
|
||||
- Window height: dynamic via uni.getSystemInfoSync().windowHeight
|
||||
|
||||
**Scroll Area Height Calculation:**
|
||||
```typescript
|
||||
scrollHeight = windowHeight - headerHeight(220rpx) - tabbarHeight(100rpx)
|
||||
= windowHeight - (220 * (windowWidth / 750)) - (100 * (windowWidth / 750))
|
||||
```
|
||||
|
||||
**Sticky Header:**
|
||||
- Position: sticky (CSS)
|
||||
- Top: 0
|
||||
- Z-index: 100
|
||||
- Contains: DateSelector + TimePeriodFilter
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Summary
|
||||
|
||||
The booking system is well-architected with:
|
||||
- ✅ Clear separation of concerns (component, store, utils)
|
||||
- ✅ Proper type safety with TypeScript
|
||||
- ✅ Responsive date/time selection
|
||||
- ✅ Membership-based booking validation
|
||||
- ✅ Optimistic loading states
|
||||
- ✅ Accessible UI patterns
|
||||
|
||||
But needs:
|
||||
- ⚠️ Better error handling
|
||||
- ⚠️ Fix GET request implementation
|
||||
- ⚠️ Loading state during date/period changes
|
||||
- ⚠️ Network error user feedback
|
||||
|
||||
395
BOOKING_README.md
Normal file
395
BOOKING_README.md
Normal file
@@ -0,0 +1,395 @@
|
||||
# Booking Page Documentation
|
||||
|
||||
## 📚 Overview
|
||||
|
||||
This folder contains comprehensive documentation for the WeChat Mini-Program booking system in the mp-pilates project (Uni-app + Vue 3).
|
||||
|
||||
### 📄 Documentation Files
|
||||
|
||||
1. **BOOKING_PAGE_ANALYSIS.md** ⭐ START HERE
|
||||
- Complete file-by-file breakdown of all components
|
||||
- Data flow diagrams
|
||||
- API contract documentation
|
||||
- Color scheme and styling details
|
||||
- Potential issues and problems
|
||||
|
||||
2. **COMPONENT_HIERARCHY.md**
|
||||
- Visual component tree structure
|
||||
- State management flow (Pinia stores)
|
||||
- API sequence diagrams
|
||||
- State machine for slot cards
|
||||
- Data transformations
|
||||
|
||||
3. **QUICK_REFERENCE.md**
|
||||
- Code snippets for quick lookup
|
||||
- Debugging tips and console commands
|
||||
- Common issues and solutions
|
||||
- Debugging checklist
|
||||
- API examples
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Quick Navigation
|
||||
|
||||
### I want to understand...
|
||||
|
||||
**...the overall flow**
|
||||
→ Read: BOOKING_PAGE_ANALYSIS.md → "Complete Data Flow Diagram" section
|
||||
|
||||
**...how the UI is structured**
|
||||
→ Read: COMPONENT_HIERARCHY.md → "Component Tree" + "UI Layout Breakdown"
|
||||
|
||||
**...where specific code is**
|
||||
→ Read: QUICK_REFERENCE.md → "Finding Specific Things"
|
||||
|
||||
**...how to debug an issue**
|
||||
→ Read: QUICK_REFERENCE.md → "Common Issues & Solutions"
|
||||
|
||||
**...the API contracts**
|
||||
→ Read: QUICK_REFERENCE.md → "API Contract Summary"
|
||||
|
||||
**...the store state**
|
||||
→ Read: COMPONENT_HIERARCHY.md → "State Management Flow"
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Project Structure
|
||||
|
||||
```
|
||||
packages/app/src/
|
||||
├── pages/
|
||||
│ └── booking/
|
||||
│ └── index.vue # Main booking page (311 lines)
|
||||
├── components/
|
||||
│ ├── DateSelector.vue # Date picker (50 lines)
|
||||
│ ├── TimePeriodFilter.vue # Time period filter (50 lines)
|
||||
│ ├── SlotCard.vue # Individual slot card (230 lines)
|
||||
│ └── BookingConfirmPopup.vue # Booking confirmation modal (430 lines)
|
||||
├── stores/
|
||||
│ ├── booking.ts # Booking state (72 lines)
|
||||
│ └── user.ts # User/membership state (110 lines)
|
||||
└── utils/
|
||||
├── request.ts # API request utilities (80 lines)
|
||||
└── format.ts # Date formatting utilities (50 lines)
|
||||
|
||||
packages/shared/src/
|
||||
├── types/
|
||||
│ ├── time-slot.ts # TimeSlot types
|
||||
│ ├── api.ts # API response types
|
||||
│ └── booking.ts # Booking types
|
||||
├── constants.ts # TIME_PERIODS, etc
|
||||
└── enums.ts # Enums (TimeSlotStatus, etc)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Data Flow at a Glance
|
||||
|
||||
```
|
||||
Page Load
|
||||
↓
|
||||
[Check login + load memberships]
|
||||
↓
|
||||
Store: fetchSlots(today)
|
||||
↓
|
||||
API: GET /time-slot/available?date=TODAY
|
||||
↓
|
||||
State: bookingStore.slots = [TimeSlotWithBookingStatus[], ...]
|
||||
↓
|
||||
Computed: filteredSlots (optionally filtered by period)
|
||||
↓
|
||||
Render: SlotCard components
|
||||
↓
|
||||
User interaction:
|
||||
- Tap date → loadSlots(newDate)
|
||||
- Filter period → filteredSlots re-computed
|
||||
- Book slot → onBookTap() → popup
|
||||
- Confirm → createBooking() → refresh slots
|
||||
- Cancel → cancelBooking() → refresh slots
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎭 Key Components
|
||||
|
||||
### 1. pages/booking/index.vue
|
||||
**Role:** Main page that orchestrates everything
|
||||
**State:** selectedDate, selectedPeriod, showConfirmPopup, pendingSlot
|
||||
**Stores:** bookingStore, userStore
|
||||
**Key computed:** scrollHeight, filteredSlots
|
||||
|
||||
### 2. components/SlotCard.vue
|
||||
**Role:** Displays individual time slot
|
||||
**Props:** slot (TimeSlotWithBookingStatus)
|
||||
**Emits:** book, cancel
|
||||
**States:** 4 button states based on status + isBookedByMe
|
||||
|
||||
### 3. components/DateSelector.vue
|
||||
**Role:** Horizontal date picker
|
||||
**Props:** modelValue (YYYY-MM-DD)
|
||||
**Data:** dateRange (7 days from today)
|
||||
**Display:** Shows weekday, day number, month
|
||||
|
||||
### 4. components/TimePeriodFilter.vue
|
||||
**Role:** Horizontal tab filter
|
||||
**Props:** modelValue (MORNING|AFTERNOON|EVENING|null)
|
||||
**Constants:** TIME_PERIODS from shared
|
||||
|
||||
### 5. components/BookingConfirmPopup.vue
|
||||
**Role:** Modal for confirming booking
|
||||
**Props:** visible, slot, memberships
|
||||
**State:** selectedMembershipId (auto-selected on show)
|
||||
**Logic:** Auto-select first membership when popup opens
|
||||
|
||||
### 6. stores/booking.ts
|
||||
**Actions:**
|
||||
- fetchSlots(date) → GET /time-slot/available?date=
|
||||
- createBooking(dto) → POST /booking
|
||||
- cancelBooking(bookingId) → PUT /booking/:id/cancel
|
||||
- fetchMyBookings(status?) → GET /booking/my
|
||||
- fetchUpcomingBookings() → GET /booking/my/upcoming
|
||||
|
||||
### 7. stores/user.ts
|
||||
**Computed:**
|
||||
- loggedIn: !!token.value
|
||||
- hasValidMembership: activeMemberships.length > 0
|
||||
- activeMemberships: memberships filtered by ACTIVE status
|
||||
|
||||
---
|
||||
|
||||
## 📊 State Types
|
||||
|
||||
### TimeSlotWithBookingStatus
|
||||
```typescript
|
||||
{
|
||||
id: string // UUID
|
||||
date: "2026-04-05" // YYYY-MM-DD
|
||||
startTime: "09:00" // HH:MM
|
||||
endTime: "10:00" // HH:MM
|
||||
capacity: 1 // Max slots
|
||||
bookedCount: 0 // Currently booked
|
||||
status: "OPEN" | "FULL" | "CLOSED"
|
||||
source: "MANUAL" | "TEMPLATE"
|
||||
templateId: null
|
||||
isBookedByMe: boolean // User has booked this
|
||||
myBookingId: string | null // Booking ID (for cancel)
|
||||
}
|
||||
```
|
||||
|
||||
### MembershipWithCardType
|
||||
```typescript
|
||||
{
|
||||
id: string
|
||||
cardType: { name: string, ... }
|
||||
status: "ACTIVE" | "EXPIRED" | "USED_UP"
|
||||
remainingTimes: number | null
|
||||
expireDate: "2026-12-31"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Visual States
|
||||
|
||||
### Slot Card Button States
|
||||
|
||||
| Condition | Button | Color | Action |
|
||||
|-----------|--------|-------|--------|
|
||||
| OPEN, not booked | "可预约" | Tan (#c9a87c) | Show popup |
|
||||
| OPEN, booked by me | "已预约" + "取消" link | Tan + Red | Show cancel confirm |
|
||||
| FULL | "已约满" | Gray (#f0f0f0) | Disabled |
|
||||
| CLOSED | "已关闭" | Gray (#f0f0f0) | Disabled |
|
||||
|
||||
### Capacity Badge Colors
|
||||
|
||||
| Condition | Background | Text | Meaning |
|
||||
|-----------|------------|------|---------|
|
||||
| <80% booked | #f0faf3 | #4caf50 | Green - Plenty of spots |
|
||||
| ≥80% booked | #fff8ed | #f59e0b | Orange - Almost full |
|
||||
| FULL | #fef0f0 | #ef4444 | Red - No spots |
|
||||
| CLOSED | #f5f5f5 | #999 | Gray - Unavailable |
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Authentication
|
||||
|
||||
- Token stored in localStorage
|
||||
- Automatically included in request headers
|
||||
- 401 response → Clear token + show "please login" toast
|
||||
- onBookTap checks loggedIn → shows login modal if needed
|
||||
- onBookTap checks hasValidMembership → shows purchase modal if needed
|
||||
|
||||
---
|
||||
|
||||
## 📡 API Endpoints
|
||||
|
||||
### GET /time-slot/available?date=YYYY-MM-DD
|
||||
```
|
||||
Query: date (required, YYYY-MM-DD format)
|
||||
Returns: TimeSlotWithBookingStatus[]
|
||||
Auth: Bearer token required
|
||||
```
|
||||
|
||||
### POST /booking
|
||||
```
|
||||
Body: { timeSlotId, membershipId }
|
||||
Returns: BookingWithDetails
|
||||
Auth: Bearer token required
|
||||
```
|
||||
|
||||
### PUT /booking/:bookingId/cancel
|
||||
```
|
||||
Path: bookingId
|
||||
Returns: BookingWithDetails (with status: CANCELLED)
|
||||
Auth: Bearer token required
|
||||
```
|
||||
|
||||
### GET /membership/my
|
||||
```
|
||||
Returns: MembershipWithCardType[]
|
||||
Auth: Bearer token required
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Known Issues
|
||||
|
||||
### 1. GET Request Body Issue
|
||||
- File: `utils/request.ts`, `get()` function
|
||||
- Problem: Data passed as body instead of query params
|
||||
- Impact: Might not work on all platforms
|
||||
|
||||
### 2. Error Handling
|
||||
- File: `stores/booking.ts`, `fetchSlots()`
|
||||
- Problem: Network error → empty array instead of error message
|
||||
- Impact: Users can't tell if error or truly no slots
|
||||
|
||||
### 3. Loading State
|
||||
- File: `pages/booking/index.vue`
|
||||
- Problem: Skeleton only appears on initial load
|
||||
- Impact: Date changes appear instant (confusing on slow network)
|
||||
|
||||
### 4. Date Math
|
||||
- File: `utils/format.ts`, `getDateRange()`
|
||||
- Problem: Uses ms arithmetic (86400000ms per day)
|
||||
- Impact: Doesn't account for DST transitions
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
### Happy Path
|
||||
- [ ] Load page → today's slots display
|
||||
- [ ] Tap date → slots change for that date
|
||||
- [ ] Filter by period → slots filtered correctly
|
||||
- [ ] Tap "可预约" → popup shows
|
||||
- [ ] Confirm booking → slot shows "已预约"
|
||||
- [ ] Tap "取消" → booking cancelled, slot resets
|
||||
- [ ] Pull to refresh → slots reload
|
||||
|
||||
### Edge Cases
|
||||
- [ ] No slots for date → empty state appears
|
||||
- [ ] Not logged in → login modal on book tap
|
||||
- [ ] No valid membership → purchase modal on book tap
|
||||
- [ ] Network error → ??? (currently shows empty)
|
||||
- [ ] Slot becomes FULL → button updates to disabled
|
||||
- [ ] Multiple memberships → can select different card
|
||||
|
||||
---
|
||||
|
||||
## 📝 File Sizes
|
||||
|
||||
| File | Lines | Purpose |
|
||||
|------|-------|---------|
|
||||
| pages/booking/index.vue | 311 | Main page orchestration |
|
||||
| components/BookingConfirmPopup.vue | 430 | Booking modal |
|
||||
| components/SlotCard.vue | 230 | Slot display |
|
||||
| stores/booking.ts | 72 | Booking state |
|
||||
| utils/request.ts | 80 | API client |
|
||||
| components/DateSelector.vue | 50 | Date picker |
|
||||
| components/TimePeriodFilter.vue | 50 | Period filter |
|
||||
| utils/format.ts | 50 | Date utilities |
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Learning Path
|
||||
|
||||
**Level 1: Overview**
|
||||
1. Read this file
|
||||
2. Look at BOOKING_PAGE_ANALYSIS.md → "Complete Data Flow Diagram"
|
||||
|
||||
**Level 2: Components**
|
||||
1. Read COMPONENT_HIERARCHY.md → "Component Tree"
|
||||
2. Read BOOKING_PAGE_ANALYSIS.md → "File-by-File Analysis"
|
||||
|
||||
**Level 3: Implementation**
|
||||
1. Read QUICK_REFERENCE.md → "Where Slots Come From"
|
||||
2. Read actual source files in order:
|
||||
- stores/booking.ts
|
||||
- pages/booking/index.vue
|
||||
- components/SlotCard.vue
|
||||
- components/BookingConfirmPopup.vue
|
||||
|
||||
**Level 4: Debugging**
|
||||
1. Read QUICK_REFERENCE.md → "Debugging Tips"
|
||||
2. Read QUICK_REFERENCE.md → "Common Issues & Solutions"
|
||||
|
||||
**Level 5: Deep Dive**
|
||||
1. Read COMPONENT_HIERARCHY.md → "State Management Flow"
|
||||
2. Read COMPONENT_HIERARCHY.md → "API Calls Sequence"
|
||||
3. Study utils/request.ts for request handling
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Related Documentation
|
||||
|
||||
- Backend: `/packages/server/src/time-slot/`
|
||||
- Shared types: `/packages/shared/src/types/`
|
||||
- Auth: `/packages/app/src/utils/auth.ts`
|
||||
- User store: `/packages/app/src/stores/user.ts`
|
||||
|
||||
---
|
||||
|
||||
## 📞 Quick Answers
|
||||
|
||||
**Q: Why doesn't the page load?**
|
||||
A: Check 1) Is API returning data? 2) Is token valid? 3) Check console for errors
|
||||
|
||||
**Q: Why doesn't filtering work?**
|
||||
A: Check 1) Is selectedPeriod.value being set? 2) Is slot.startTime correct format?
|
||||
|
||||
**Q: Why doesn't the booking button work?**
|
||||
A: Check 1) Is slot.status === OPEN? 2) Is isBookedByMe === false? 3) Is user logged in?
|
||||
|
||||
**Q: How do I add error handling?**
|
||||
A: See QUICK_REFERENCE.md → "Issue 1: Slots not loading" → Solution
|
||||
|
||||
**Q: How do I test the booking flow?**
|
||||
A: See "Testing Checklist" section above
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Common Tasks
|
||||
|
||||
### Add loading indicator during date change
|
||||
→ Use bookingStore.loadingSlots in template
|
||||
|
||||
### Show error message for API failures
|
||||
→ Add error state to bookingStore, show in template
|
||||
|
||||
### Change colors/styling
|
||||
→ Edit style blocks in .vue files (see color scheme in BOOKING_PAGE_ANALYSIS.md)
|
||||
|
||||
### Modify time period ranges
|
||||
→ Edit TIME_PERIODS in packages/shared/src/constants.ts
|
||||
|
||||
### Change initial date or time range
|
||||
→ Edit pages/booking/index.vue onMounted() or DATE_SELECTOR_DAYS constant
|
||||
|
||||
### Add/remove date selector days
|
||||
→ Edit DATE_SELECTOR_DAYS in packages/shared/src/constants.ts
|
||||
|
||||
---
|
||||
|
||||
Generated: 2026-04-05
|
||||
Last Updated: BOOKING_PAGE_ANALYSIS.md
|
||||
218
BUG_FIX_COMPLETION_INDEX.md
Normal file
218
BUG_FIX_COMPLETION_INDEX.md
Normal file
@@ -0,0 +1,218 @@
|
||||
# Card Types Bug Fix - Completion Index
|
||||
|
||||
## Quick Links
|
||||
|
||||
**Bug Fix Commit**: [a85270e](https://github.com/richarjiang/mp-pilates/commit/a85270e)
|
||||
|
||||
**Files Modified**:
|
||||
- `packages/app/src/pages/admin/card-types.vue` - Added `.stop` modifiers to 3 action buttons
|
||||
|
||||
**Documentation Files**:
|
||||
- `CARD_TYPES_BUG_FIX.md` - Complete bug explanation and fix details
|
||||
- `MODAL_EVENT_HANDLING_AUDIT.md` - Audit of all application modals
|
||||
- `CARD_TYPES_ANALYSIS.md` - Deep technical analysis
|
||||
- `CARD_TYPES_QUICK_REFERENCE.md` - Quick lookup guide
|
||||
- `EXPLORATION_SUMMARY.md` - Full system overview
|
||||
|
||||
---
|
||||
|
||||
## The Bug in 30 Seconds
|
||||
|
||||
**Problem**: Edit modal closes immediately after opening
|
||||
|
||||
**Cause**: Vue event propagation - tap events bubble from action buttons to modal-mask's close handler
|
||||
|
||||
**Solution**: Add `.stop` modifier to prevent event bubbling
|
||||
|
||||
**Impact**: Users can now edit card types successfully
|
||||
|
||||
---
|
||||
|
||||
## What Was Changed
|
||||
|
||||
### File: packages/app/src/pages/admin/card-types.vue
|
||||
|
||||
Three lines modified:
|
||||
|
||||
```diff
|
||||
- <view class="ct-action-btn edit-btn" @tap="openEdit(ct)">
|
||||
+ <view class="ct-action-btn edit-btn" @tap.stop="openEdit(ct)">
|
||||
|
||||
- <view class="ct-action-btn toggle-btn" @tap="toggleActive(ct)">
|
||||
+ <view class="ct-action-btn toggle-btn" @tap.stop="toggleActive(ct)">
|
||||
|
||||
- <view class="ct-action-btn delete-btn" @tap="confirmDelete(ct)">
|
||||
+ <view class="ct-action-btn delete-btn" @tap.stop="confirmDelete(ct)">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Why It Works
|
||||
|
||||
The `.stop` modifier calls `event.stopPropagation()`, which prevents the tap event from bubbling to parent elements. This prevents the modal-mask's close handler from being triggered.
|
||||
|
||||
**Event flow with fix**:
|
||||
1. User taps action button ✓
|
||||
2. Event handler executes (edit/toggle/delete) ✓
|
||||
3. Event propagation is stopped ✗ (no bubbling)
|
||||
4. Modal-mask close handler is NOT triggered ✓
|
||||
5. Modal stays open ✓
|
||||
|
||||
---
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
### Quick Test
|
||||
1. Go to Admin → Card Types
|
||||
2. Click any [编辑] (Edit) button
|
||||
3. Modal should open and stay open
|
||||
4. Edit a field and click [确认] (Confirm)
|
||||
5. Changes should save
|
||||
|
||||
### Full Test Suite
|
||||
See `CARD_TYPES_BUG_FIX.md` for complete testing checklist
|
||||
|
||||
---
|
||||
|
||||
## Documentation Overview
|
||||
|
||||
### Bug Fix Documentation
|
||||
- **CARD_TYPES_BUG_FIX.md** - Complete fix documentation with testing instructions
|
||||
- **MODAL_EVENT_HANDLING_AUDIT.md** - Audit of all modals + preventive measures
|
||||
|
||||
### Feature Documentation
|
||||
- **CARD_TYPES_ANALYSIS.md** - Deep dive into card types system
|
||||
- **CARD_TYPES_QUICK_REFERENCE.md** - Quick lookup guide
|
||||
- **EXPLORATION_SUMMARY.md** - Full system overview
|
||||
- **CARD_TYPES_INDEX.md** - Master index
|
||||
|
||||
### Diagrams
|
||||
- **CARD_TYPES_FLOW_DIAGRAM.txt** - ASCII art workflows
|
||||
|
||||
---
|
||||
|
||||
## Key Findings from Audit
|
||||
|
||||
✅ **card-types.vue** - FIXED (event propagation issue resolved)
|
||||
✅ **week-template.vue** - SAFE (separate DOM structure)
|
||||
✅ **members.vue** - SAFE (single tap handler pattern)
|
||||
✅ **BookingConfirmPopup.vue** - SAFE (dedicated component)
|
||||
|
||||
**Conclusion**: No other files have the same issue.
|
||||
|
||||
---
|
||||
|
||||
## Commit Information
|
||||
|
||||
```
|
||||
Hash: a85270e
|
||||
Author: richarjiang <richarjiang@tencent.com>
|
||||
Date: Sun Apr 5 12:53:03 2026 +0800
|
||||
Message: fix(admin): prevent edit modal from closing immediately on tap
|
||||
|
||||
Fix the card types management edit modal that was closing
|
||||
immediately after opening due to event propagation. Added
|
||||
.stop modifier to all action button tap handlers (edit, toggle,
|
||||
delete) to prevent bubbling to parent modal-mask element.
|
||||
|
||||
- Changed @tap="openEdit(ct)" to @tap.stop="openEdit(ct)"
|
||||
- Changed @tap="toggleActive(ct)" to @tap.stop="toggleActive(ct)"
|
||||
- Changed @tap="confirmDelete(ct)" to @tap.stop="confirmDelete(ct)"
|
||||
|
||||
This fixes the bug where the edit modal would open and close in
|
||||
the same event cycle, making it impossible to edit card types.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Files Changed Summary
|
||||
|
||||
| File | Changes | Lines | Type |
|
||||
|------|---------|-------|------|
|
||||
| card-types.vue | `.stop` modifiers added | 3 | Fix |
|
||||
| CARD_TYPES_BUG_FIX.md | New documentation | 132 | Doc |
|
||||
| MODAL_EVENT_HANDLING_AUDIT.md | New audit report | 200+ | Doc |
|
||||
|
||||
**Total**: 2 files modified/created
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
### Immediate (Before Merge)
|
||||
1. ✅ Code changes applied
|
||||
2. ✅ Commit created
|
||||
3. ✅ Documentation completed
|
||||
4. □ Manual testing required
|
||||
5. □ Code review approval needed
|
||||
|
||||
### For Deployment
|
||||
1. Test the fix manually
|
||||
2. Review commit in GitHub
|
||||
3. Get team approval
|
||||
4. Merge to main branch
|
||||
5. Deploy to staging
|
||||
6. Deploy to production
|
||||
|
||||
### For Prevention
|
||||
1. Review `MODAL_EVENT_HANDLING_AUDIT.md` guidelines
|
||||
2. Apply best practices to new code
|
||||
3. Add E2E tests for modal interactions
|
||||
4. Consider ESLint rules for modal event handling
|
||||
|
||||
---
|
||||
|
||||
## Technical Deep Dive
|
||||
|
||||
### Problem Pattern
|
||||
|
||||
This is a classic Vue event propagation issue that occurs when:
|
||||
1. List items have action buttons
|
||||
2. Tap handlers on buttons trigger state changes
|
||||
3. Modal appears as overlay
|
||||
4. Modal-mask has a tap handler to close
|
||||
5. Event bubbles from button → card → list → modal-mask
|
||||
|
||||
### Solution Pattern
|
||||
|
||||
The fix is to add `.stop` modifier to any event handler that triggers state changes that render overlays:
|
||||
|
||||
```vue
|
||||
<!-- Before: Event bubbles to parent handlers -->
|
||||
<button @tap="openModal(item)">Edit</button>
|
||||
|
||||
<!-- After: Event stops propagating -->
|
||||
<button @tap.stop="openModal(item)">Edit</button>
|
||||
```
|
||||
|
||||
### Why This Is Safe
|
||||
|
||||
- `.stop` only prevents propagation, not default behavior
|
||||
- Event still executes on the clicked element
|
||||
- All three buttons work independently
|
||||
- No side effects or unexpected behavior
|
||||
- Follows Vue best practices
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- **Vue Event Modifiers**: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
|
||||
- **Event Propagation**: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
|
||||
- **Uni-app Events**: https://uniapp.dcloud.io/api/ui/intersection-observer
|
||||
|
||||
---
|
||||
|
||||
## Support & Questions
|
||||
|
||||
For questions about this fix:
|
||||
1. Read `CARD_TYPES_BUG_FIX.md` for detailed explanation
|
||||
2. Check `MODAL_EVENT_HANDLING_AUDIT.md` for similar patterns
|
||||
3. Review the commit diff for exact changes
|
||||
4. Consult Vue 3 event handling documentation
|
||||
|
||||
---
|
||||
|
||||
**Status**: ✅ COMPLETE - Ready for testing and deployment
|
||||
|
||||
**Last Updated**: 2026-04-05
|
||||
548
CARD_TYPES_ANALYSIS.md
Normal file
548
CARD_TYPES_ANALYSIS.md
Normal file
@@ -0,0 +1,548 @@
|
||||
# Card Types Management Feature - Comprehensive Analysis
|
||||
|
||||
## Project Structure
|
||||
- **Frontend**: `packages/app` (Vue 3 + Uni-app mini-program)
|
||||
- **Backend**: `packages/server` (NestJS)
|
||||
- **Shared**: `packages/shared` (types, enums, DTOs)
|
||||
|
||||
---
|
||||
|
||||
## 1. DATABASE SCHEMA (Prisma)
|
||||
|
||||
### CardType Model
|
||||
**File**: `packages/server/prisma/schema.prisma` (lines 73-91)
|
||||
|
||||
```prisma
|
||||
model CardType {
|
||||
id String @id @default(uuid())
|
||||
name String
|
||||
type CardTypeCategory // TIMES | DURATION | TRIAL
|
||||
totalTimes Int? // For TIMES/TRIAL cards
|
||||
durationDays Int // How many days card is valid
|
||||
price Decimal(10, 0) // Current price (in cents internally)
|
||||
originalPrice Decimal?(10, 0) // Optional strikethrough price
|
||||
description String?
|
||||
isActive Boolean @default(true) // For 上架/下架
|
||||
sortOrder Int @default(0) // Display order
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
memberships Membership[]
|
||||
orders Order[]
|
||||
}
|
||||
```
|
||||
|
||||
### Card Type Category Enum
|
||||
**File**: `packages/server/prisma/schema.prisma` (lines 17-21)
|
||||
|
||||
```prisma
|
||||
enum CardTypeCategory {
|
||||
TIMES // Time-based card (e.g., 10 classes)
|
||||
DURATION // Month card (e.g., 30 days)
|
||||
TRIAL // Trial card
|
||||
}
|
||||
```
|
||||
|
||||
**Shared Enum**: `packages/shared/src/enums.ts` (lines 8-12)
|
||||
```typescript
|
||||
export enum CardTypeCategory {
|
||||
TIMES = 'TIMES',
|
||||
DURATION = 'DURATION',
|
||||
TRIAL = 'TRIAL',
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. SHARED TYPES & DTOs
|
||||
|
||||
### CardType Interface
|
||||
**File**: `packages/shared/src/types/card-type.ts`
|
||||
|
||||
```typescript
|
||||
export interface CardType {
|
||||
readonly id: string
|
||||
readonly name: string
|
||||
readonly type: CardTypeCategory // TIMES | DURATION | TRIAL
|
||||
readonly totalTimes: number | null // null for DURATION cards
|
||||
readonly durationDays: number
|
||||
readonly price: number // In cents, e.g., 98000 = ¥980
|
||||
readonly originalPrice: number | null
|
||||
readonly description: string | null
|
||||
readonly isActive: boolean // true = 销售中, false = 已下架
|
||||
readonly sortOrder: number
|
||||
readonly createdAt: string
|
||||
readonly updatedAt: string
|
||||
}
|
||||
```
|
||||
|
||||
### CreateCardTypeDto
|
||||
```typescript
|
||||
export interface CreateCardTypeDto {
|
||||
readonly name: string
|
||||
readonly type: CardTypeCategory
|
||||
readonly totalTimes?: number
|
||||
readonly durationDays: number
|
||||
readonly price: number
|
||||
readonly originalPrice?: number
|
||||
readonly description?: string
|
||||
readonly sortOrder?: number
|
||||
}
|
||||
```
|
||||
|
||||
### UpdateCardTypeDto
|
||||
```typescript
|
||||
export interface UpdateCardTypeDto {
|
||||
readonly name?: string
|
||||
readonly totalTimes?: number
|
||||
readonly durationDays?: number
|
||||
readonly price?: number
|
||||
readonly originalPrice?: number
|
||||
readonly description?: string
|
||||
readonly isActive?: boolean // For toggling 上架/下架
|
||||
readonly sortOrder?: number
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. SERVER-SIDE IMPLEMENTATION
|
||||
|
||||
### Membership Controller
|
||||
**File**: `packages/server/src/membership/membership.controller.ts`
|
||||
|
||||
**Endpoints**:
|
||||
```typescript
|
||||
// Public (no auth)
|
||||
GET /membership/card-types → getActiveCardTypes()
|
||||
|
||||
// Admin only (JWT + RolesGuard)
|
||||
GET /admin/card-types → getAllCardTypes()
|
||||
POST /admin/card-types → createCardType(dto)
|
||||
PUT /admin/card-types/:id → updateCardType(id, dto)
|
||||
DELETE /admin/card-types/:id → deleteCardType(id)
|
||||
```
|
||||
|
||||
### Membership Service
|
||||
**File**: `packages/server/src/membership/membership.service.ts`
|
||||
|
||||
#### getActiveCardTypes()
|
||||
- Returns only cards where `isActive: true`
|
||||
- Sorted by `sortOrder` (ascending)
|
||||
- Used by regular users/public
|
||||
|
||||
#### getAllCardTypes()
|
||||
- Returns all cards (including inactive)
|
||||
- Sorted by `sortOrder`
|
||||
- Admin-only
|
||||
|
||||
#### createCardType(dto: CreateCardTypeDto)
|
||||
- Creates a new card type
|
||||
- Sets `isActive: true` by default
|
||||
- `totalTimes` and `description` are optional (default to null)
|
||||
|
||||
#### updateCardType(id: string, dto: UpdateCardTypeDto)
|
||||
- Updates card (all fields optional)
|
||||
- **Can toggle `isActive`** for 上架/下架
|
||||
- Can update name, price, duration, etc.
|
||||
|
||||
#### deleteCardType(id: string)
|
||||
- **Soft delete**: doesn't remove from DB
|
||||
- Sets `isActive: false` instead
|
||||
- Updates the record
|
||||
|
||||
---
|
||||
|
||||
## 4. FRONTEND ADMIN PAGE
|
||||
|
||||
### Card-Types Page
|
||||
**File**: `packages/app/src/pages/admin/card-types.vue`
|
||||
|
||||
#### Layout Structure:
|
||||
1. **Toolbar** (top)
|
||||
- Shows count: "共 X 个卡种"
|
||||
- "+ 新增卡种" button → `openAdd()`
|
||||
|
||||
2. **Card List** (scrollable)
|
||||
- Each card shows:
|
||||
- Header band (colored by type: 次卡/月卡/体验卡)
|
||||
- Status tag (销售中 or 已下架)
|
||||
- Card name, price, description
|
||||
- Meta info: times, duration, sort order
|
||||
- Three action buttons: 编辑, 下架/上架, 删除
|
||||
|
||||
3. **Modal/Popup** (add/edit form)
|
||||
- Title: "新增卡种" or "编辑卡种"
|
||||
- Input fields:
|
||||
* 卡种名称 (name)
|
||||
* 类型 (picker: 次卡, 月卡, 体验卡)
|
||||
* 现价 (price, digit input)
|
||||
* 原价 (originalPrice, optional)
|
||||
* 次数 (totalTimes, optional, required for 次卡)
|
||||
* 有效天数 (durationDays, required)
|
||||
* 排序值 (sortOrder, defaults to 0)
|
||||
* 描述 (description, optional textarea)
|
||||
- Cancel and Confirm buttons
|
||||
|
||||
#### Key Ref Variables:
|
||||
```typescript
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
const loading = ref(false)
|
||||
const showModal = ref(false)
|
||||
const submitting = ref(false)
|
||||
const editTarget = ref<CardType | null>(null)
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
typeIdx: 0, // Index into typeOptions
|
||||
priceStr: '', // String, parsed to number
|
||||
originalPriceStr: '',
|
||||
totalTimesStr: '',
|
||||
durationDaysStr: '90', // Default 90 days
|
||||
sortOrderStr: '0', // Default 0
|
||||
description: '',
|
||||
})
|
||||
```
|
||||
|
||||
#### Functions:
|
||||
|
||||
**fetchCardTypes()**
|
||||
- Calls `adminStore.fetchCardTypes()`
|
||||
- Sets loading state
|
||||
- Updates `cardTypes` ref
|
||||
|
||||
**openAdd()**
|
||||
- Sets `editTarget = null`
|
||||
- Resets `form` to initial state
|
||||
- Sets `showModal = true`
|
||||
- → **Opens new card form**
|
||||
|
||||
**openEdit(ct: CardType)**
|
||||
- Sets `editTarget = ct`
|
||||
- Populates `form` from card data
|
||||
- Finds `typeIdx` from typeOptions
|
||||
- Sets `showModal = true`
|
||||
- → **Opens edit form with card data**
|
||||
|
||||
**closeModal()**
|
||||
- Sets `showModal = false`
|
||||
- Clears `editTarget`
|
||||
|
||||
**submitForm()**
|
||||
- Validates: name (required), price (required, > 0), durationDays (required, >= 1)
|
||||
- Parses string inputs to numbers
|
||||
- Builds payload object
|
||||
- If `editTarget` exists: calls `adminStore.updateCardType()`
|
||||
- Else: calls `adminStore.createCardType()`
|
||||
- Shows success toast and refetches list
|
||||
- Catches errors and shows error toast
|
||||
|
||||
**toggleActive(ct: CardType)**
|
||||
- Calls `adminStore.updateCardType(ct.id, { isActive: !ct.isActive })`
|
||||
- Refetches list
|
||||
- → **上架/下架 button action**
|
||||
|
||||
**confirmDelete(ct: CardType)**
|
||||
- Shows confirmation modal: "删除卡种「X」？此操作不可恢复。"
|
||||
- If confirmed: calls `adminStore.deleteCardType(ct.id)`
|
||||
- Soft deletes (sets isActive: false)
|
||||
- Shows success toast
|
||||
- Refetches list
|
||||
|
||||
#### Helper Functions:
|
||||
|
||||
**typeLabel(ct: CardType): string**
|
||||
- Maps enum to Chinese: TIMES → '次卡', DURATION → '月卡', TRIAL → '体验卡'
|
||||
|
||||
**headerClass(ct: CardType): string**
|
||||
- Returns CSS class for colored header banner
|
||||
|
||||
---
|
||||
|
||||
## 5. ADMIN STORE (Pinia)
|
||||
|
||||
**File**: `packages/app/src/stores/admin.ts`
|
||||
|
||||
```typescript
|
||||
export const useAdminStore = defineStore('admin', () => {
|
||||
// ─── Card types ───────────────────
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
|
||||
async function fetchCardTypes(): Promise<CardType[]> {
|
||||
const data = await get<CardType[]>('/admin/card-types')
|
||||
cardTypes.value = [...data].sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
return cardTypes.value
|
||||
}
|
||||
|
||||
async function createCardType(dto: CreateCardTypeDto): Promise<CardType> {
|
||||
const data = await post<CardType>('/admin/card-types', dto)
|
||||
await fetchCardTypes() // Refetch to get updated list
|
||||
return data
|
||||
}
|
||||
|
||||
async function updateCardType(id: string, dto: UpdateCardTypeDto): Promise<CardType> {
|
||||
const data = await put<CardType>(`/admin/card-types/${id}`, dto)
|
||||
await fetchCardTypes() // Refetch to get updated list
|
||||
return data
|
||||
}
|
||||
|
||||
async function deleteCardType(id: string): Promise<void> {
|
||||
await del(`/admin/card-types/${id}`)
|
||||
await fetchCardTypes() // Refetch to get updated list
|
||||
}
|
||||
|
||||
return {
|
||||
cardTypes,
|
||||
fetchCardTypes,
|
||||
createCardType,
|
||||
updateCardType,
|
||||
deleteCardType,
|
||||
// ... other admin functions
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. WORKFLOW FLOWS
|
||||
|
||||
### Adding a New Card Type
|
||||
1. User taps "+ 新增卡种" button
|
||||
2. `openAdd()` is called
|
||||
- `editTarget = null`
|
||||
- `form` reset to defaults
|
||||
- `showModal = true`
|
||||
3. Modal appears with empty form
|
||||
4. User fills in form fields
|
||||
5. User taps "确认" button
|
||||
6. `submitForm()` validates, builds payload, calls `adminStore.createCardType(payload)`
|
||||
7. Backend creates new CardType (with `isActive: true` by default)
|
||||
8. Admin store refetches list
|
||||
9. Page updates with new card
|
||||
10. Modal closes automatically
|
||||
|
||||
### Editing a Card Type
|
||||
1. User taps "编辑" button on a card
|
||||
2. `openEdit(ct)` is called
|
||||
- `editTarget = ct`
|
||||
- `form` populated from card data
|
||||
- `showModal = true`
|
||||
3. Modal appears with prefilled form
|
||||
4. User modifies fields
|
||||
5. User taps "确认" button
|
||||
6. `submitForm()` validates, builds payload, calls `adminStore.updateCardType(id, payload)`
|
||||
7. Backend updates CardType
|
||||
8. Admin store refetches list
|
||||
9. Page updates with new data
|
||||
10. Modal closes automatically
|
||||
|
||||
### Toggling Active Status (上架/下架)
|
||||
1. User taps "下架" or "上架" button
|
||||
2. `toggleActive(ct)` is called
|
||||
- Calls `adminStore.updateCardType(ct.id, { isActive: !ct.isActive })`
|
||||
3. Backend updates `isActive` field
|
||||
4. Admin store refetches list
|
||||
5. Page re-renders:
|
||||
- If `isActive: false`: card becomes semi-transparent (opacity: 0.6)
|
||||
- Status tag changes from "销售中" to "已下架"
|
||||
- Button text changes
|
||||
|
||||
### Deleting a Card Type
|
||||
1. User taps "删除" button
|
||||
2. `confirmDelete(ct)` is called
|
||||
- Shows confirmation dialog
|
||||
3. User confirms deletion
|
||||
4. `adminStore.deleteCardType(ct.id)` called
|
||||
5. Backend does soft delete: sets `isActive: false`
|
||||
6. Admin store refetches list
|
||||
7. Page updates (card marked as inactive)
|
||||
|
||||
---
|
||||
|
||||
## 7. API COMMUNICATION
|
||||
|
||||
### Request Utility
|
||||
**File**: `packages/app/src/utils/request.ts`
|
||||
|
||||
```typescript
|
||||
const BASE_URL = 'http://localhost:3000/api' // or production URL
|
||||
|
||||
// Helper functions
|
||||
async function get<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
async function post<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
async function put<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
async function del<T>(url: string, data?: Record<string, unknown>): Promise<T>
|
||||
```
|
||||
|
||||
**Response Format**:
|
||||
```typescript
|
||||
interface ApiResponse<T> {
|
||||
success: boolean
|
||||
data: T | null
|
||||
message: string | null
|
||||
}
|
||||
```
|
||||
|
||||
All admin endpoints require:
|
||||
- JWT Bearer token (from storage)
|
||||
- User role must be ADMIN
|
||||
|
||||
---
|
||||
|
||||
## 8. PRICE HANDLING
|
||||
|
||||
**Important**: Prices are stored as integers (cents) in DB and API
|
||||
- ¥980 is stored as `98000` cents
|
||||
- Frontend displays formatted: `¥980.00`
|
||||
|
||||
**Formatting**:
|
||||
```typescript
|
||||
export function formatPrice(cents: number): string {
|
||||
return (cents / 100).toFixed(2) // 98000 → "980.00"
|
||||
}
|
||||
```
|
||||
|
||||
**In Page**: `¥{{ formatPrice(ct.price) }}`
|
||||
|
||||
---
|
||||
|
||||
## 9. CARD TYPE CATEGORIES
|
||||
|
||||
### TIMES Card (次卡)
|
||||
- Used for class count-based purchases
|
||||
- Example: "10次课套餐"
|
||||
- **Required fields**: `totalTimes` (e.g., 10)
|
||||
- Optional fields: `originalPrice`, `description`
|
||||
- Color: Dark blue gradient (`#1a1a2e` to `#2d2d5e`)
|
||||
|
||||
### DURATION Card (月卡)
|
||||
- Used for time-period-based purchases
|
||||
- Example: "30天卡"
|
||||
- **Required fields**: `durationDays`
|
||||
- `totalTimes` is optional/not used
|
||||
- Color: Purple gradient (`#6c3483` to `#9b59b6`)
|
||||
|
||||
### TRIAL Card (体验卡)
|
||||
- Used for trial/sample purchases
|
||||
- Color: Gold/tan gradient (`#7d6608` to `#c9a87c`)
|
||||
|
||||
---
|
||||
|
||||
## 10. FIELD REQUIREMENTS & VALIDATION
|
||||
|
||||
| Field | Create | Update | Type | Validation |
|
||||
|-------|--------|--------|------|-----------|
|
||||
| name | ✓ Required | Optional | string | Trimmed, non-empty |
|
||||
| type | ✓ Required | Optional | enum | TIMES \| DURATION \| TRIAL |
|
||||
| totalTimes | Optional | Optional | integer | Min: 1 |
|
||||
| durationDays | ✓ Required | Optional | integer | Min: 1 |
|
||||
| price | ✓ Required | Optional | number | Min: 0 |
|
||||
| originalPrice | Optional | Optional | number | Min: 0 |
|
||||
| description | Optional | Optional | string | Max: 200 chars |
|
||||
| sortOrder | Optional | Optional | integer | Min: 0, default: 0 |
|
||||
| isActive | N/A | Optional | boolean | default: true on create |
|
||||
|
||||
---
|
||||
|
||||
## 11. POTENTIAL ISSUES & BUG: Edit Popup Closes Immediately
|
||||
|
||||
### Issue Description
|
||||
When user taps "编辑" button, the edit modal popup closes immediately instead of staying open.
|
||||
|
||||
### Root Cause Analysis
|
||||
|
||||
Looking at the template structure (lines 85-195 of card-types.vue):
|
||||
|
||||
```vue
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
<scroll-view scroll-y class="modal">
|
||||
<!-- Form content -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
```
|
||||
|
||||
**The problem**:
|
||||
1. User taps "编辑" button on a card (line 67)
|
||||
2. `openEdit(ct)` sets `showModal = true`
|
||||
3. Modal appears
|
||||
4. BUT: The tap event likely **bubbles** or there's a **race condition**
|
||||
5. The click that triggered `openEdit()` might also trigger `closeModal()`
|
||||
|
||||
### Potential Causes:
|
||||
|
||||
1. **Event Propagation Issue**:
|
||||
- The edit button tap might bubble to parent elements
|
||||
- The modal-mask has `@tap.self="closeModal"`
|
||||
- If the modal appears in the same frame, the tap event might close it
|
||||
|
||||
2. **Modal Rendering Timing**:
|
||||
- If modal renders synchronously in the same event tick
|
||||
- The tap event (which hasn't finished propagating) might hit the modal-mask
|
||||
|
||||
3. **Vue/Uni-app Quirk**:
|
||||
- Some mini-program frameworks have event timing issues
|
||||
- The `.self` modifier might not work as expected with rapid re-renders
|
||||
|
||||
### Solution Approaches:
|
||||
|
||||
1. **Add click guard**: Prevent tap on edit button from propagating
|
||||
```vue
|
||||
<view class="ct-action-btn edit-btn" @tap.stop="openEdit(ct)">
|
||||
```
|
||||
|
||||
2. **Add delay for modal rendering**: Let Vue finish the current cycle
|
||||
```typescript
|
||||
function openEdit(ct: CardType) {
|
||||
editTarget.value = ct
|
||||
form.value = { ... }
|
||||
// Delay modal show to next tick
|
||||
nextTick(() => {
|
||||
showModal.value = true
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
3. **Track modal state change**: Ignore tap events for a brief moment after modal opens
|
||||
```typescript
|
||||
const modalJustOpened = ref(false)
|
||||
|
||||
function openEdit(ct: CardType) {
|
||||
editTarget.value = ct
|
||||
form.value = { ... }
|
||||
showModal.value = true
|
||||
modalJustOpened.value = true
|
||||
setTimeout(() => {
|
||||
modalJustOpened.value = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
if (!modalJustOpened.value) {
|
||||
showModal.value = false
|
||||
editTarget.value = null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
4. **Restructure modal trigger**:
|
||||
- Separate the button from the modal in the DOM
|
||||
- Or use a completely different event model
|
||||
|
||||
---
|
||||
|
||||
## SUMMARY OF ALL FILES REVIEWED
|
||||
|
||||
1. ✅ Frontend page: `packages/app/src/pages/admin/card-types.vue` (607 lines)
|
||||
2. ✅ Admin store: `packages/app/src/stores/admin.ts` (198 lines)
|
||||
3. ✅ Shared types: `packages/shared/src/types/card-type.ts` (39 lines)
|
||||
4. ✅ Server controller: `packages/server/src/membership/membership.controller.ts` (68 lines)
|
||||
5. ✅ Server service: `packages/server/src/membership/membership.service.ts` (173 lines)
|
||||
6. ✅ Create DTO: `packages/server/src/membership/dto/create-card-type.dto.ts` (45 lines)
|
||||
7. ✅ Update DTO: `packages/server/src/membership/dto/update-card-type.dto.ts` (49 lines)
|
||||
8. ✅ Prisma schema: `packages/server/prisma/schema.prisma` (205 lines)
|
||||
9. ✅ Shared enums: `packages/shared/src/enums.ts` (47 lines)
|
||||
10. ✅ Format utils: `packages/app/src/utils/format.ts` (46 lines)
|
||||
11. ✅ Request utils: `packages/app/src/utils/request.ts` (80 lines)
|
||||
12. ✅ Membership types: `packages/shared/src/types/membership.ts` (19 lines)
|
||||
13. ✅ API types: `packages/shared/src/types/api.ts` (20 lines)
|
||||
|
||||
132
CARD_TYPES_BUG_FIX.md
Normal file
132
CARD_TYPES_BUG_FIX.md
Normal file
@@ -0,0 +1,132 @@
|
||||
# Card Types Edit Modal Bug Fix
|
||||
|
||||
## Bug Description
|
||||
|
||||
When a user taps the **[编辑]** (Edit) button in the card types admin page, the edit modal opens briefly but **closes immediately** in the same event cycle. This makes it impossible to edit card types.
|
||||
|
||||
### Root Cause
|
||||
|
||||
The bug was caused by Vue event propagation/bubbling:
|
||||
|
||||
1. User taps edit button → `@tap="openEdit(ct)"` fires
|
||||
2. `openEdit()` sets `showModal.value = true`
|
||||
3. Modal is rendered and displayed
|
||||
4. The tap event **bubbles up** to the parent modal-mask element
|
||||
5. Modal-mask has `@tap.self="closeModal"` which immediately closes the modal
|
||||
6. Result: Modal opens and closes in the same event tick
|
||||
|
||||
### Code Location
|
||||
|
||||
File: `packages/app/src/pages/admin/card-types.vue`
|
||||
|
||||
**Before (buggy):**
|
||||
```vue
|
||||
<!-- Line 67 -->
|
||||
<view class="ct-action-btn edit-btn" @tap="openEdit(ct)">
|
||||
<text class="ct-action-text">编辑</text>
|
||||
</view>
|
||||
|
||||
<!-- Line 73 -->
|
||||
<view class="ct-action-btn toggle-btn" @tap="toggleActive(ct)">
|
||||
...
|
||||
</view>
|
||||
|
||||
<!-- Line 77 -->
|
||||
<view class="ct-action-btn delete-btn" @tap="confirmDelete(ct)">
|
||||
...
|
||||
</view>
|
||||
|
||||
<!-- Line 85 - Modal mask -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
...
|
||||
</view>
|
||||
```
|
||||
|
||||
## Solution Applied
|
||||
|
||||
Added the `.stop` modifier to all action button tap handlers to **prevent event propagation** to parent elements:
|
||||
|
||||
```vue
|
||||
<!-- Line 67 - FIXED -->
|
||||
<view class="ct-action-btn edit-btn" @tap.stop="openEdit(ct)">
|
||||
<text class="ct-action-text">编辑</text>
|
||||
</view>
|
||||
|
||||
<!-- Line 73 - FIXED -->
|
||||
<view class="ct-action-btn toggle-btn" @tap.stop="toggleActive(ct)">
|
||||
...
|
||||
</view>
|
||||
|
||||
<!-- Line 77 - FIXED -->
|
||||
<view class="ct-action-btn delete-btn" @tap.stop="confirmDelete(ct)">
|
||||
...
|
||||
</view>
|
||||
```
|
||||
|
||||
## Why This Works
|
||||
|
||||
The `.stop` modifier is equivalent to calling `event.stopPropagation()`. It prevents the tap event from bubbling up the DOM tree, so:
|
||||
|
||||
1. User taps edit button → `@tap.stop="openEdit(ct)"` fires
|
||||
2. Event propagation is **stopped** - event does NOT bubble to modal-mask
|
||||
3. `openEdit()` sets `showModal.value = true`
|
||||
4. Modal renders and stays open ✓
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Vue Event Modifiers Used
|
||||
|
||||
- **`.stop`** - Calls `event.stopPropagation()` to prevent event bubbling
|
||||
|
||||
### Affected Operations
|
||||
|
||||
Three actions were fixed:
|
||||
1. **Edit** (编辑) - Opens form to edit selected card type
|
||||
2. **Toggle** (上架/下架) - Toggles active status (on/off shelf)
|
||||
3. **Delete** (删除) - Opens confirmation dialog for deletion
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
To verify the fix works:
|
||||
|
||||
1. Navigate to Admin → Card Types Management
|
||||
2. Click the **[编辑]** button on any card
|
||||
3. Verify the edit modal opens and **stays open**
|
||||
4. Edit form fields and confirm the changes save correctly
|
||||
5. Test the toggle button (上架/下架) - should toggle without closing modal
|
||||
6. Test the delete button - should show confirmation dialog
|
||||
|
||||
## Code Changes Summary
|
||||
|
||||
| File | Line | Change | Type |
|
||||
|------|------|--------|------|
|
||||
| card-types.vue | 67 | `@tap="openEdit(ct)"` → `@tap.stop="openEdit(ct)"` | Fix |
|
||||
| card-types.vue | 73 | `@tap="toggleActive(ct)"` → `@tap.stop="toggleActive(ct)"` | Fix |
|
||||
| card-types.vue | 77 | `@tap="confirmDelete(ct)"` → `@tap.stop="confirmDelete(ct)"` | Fix |
|
||||
|
||||
Total changes: **3 lines modified**
|
||||
|
||||
## Impact Assessment
|
||||
|
||||
- **Severity**: High - Feature completely broken, users cannot edit card types
|
||||
- **Risk**: Very Low - Simple modifier addition, no logic changes
|
||||
- **Testing**: Quick manual test needed
|
||||
- **Performance**: No impact
|
||||
- **Breaking Changes**: None
|
||||
- **Backward Compatibility**: Fully compatible
|
||||
|
||||
## Related Documentation
|
||||
|
||||
See the following files for comprehensive feature documentation:
|
||||
- `CARD_TYPES_ANALYSIS.md` - Deep dive into the feature
|
||||
- `CARD_TYPES_QUICK_REFERENCE.md` - Quick lookup guide
|
||||
- `EXPLORATION_SUMMARY.md` - Full system overview
|
||||
- `CARD_TYPES_INDEX.md` - Master index with all references
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. ✅ Apply the fix (COMPLETED)
|
||||
2. Test the feature manually
|
||||
3. Verify all three action buttons work correctly
|
||||
4. Consider adding automated E2E tests for card type management
|
||||
5. Review other modals for similar event propagation issues
|
||||
228
CARD_TYPES_FLOW_DIAGRAM.txt
Normal file
228
CARD_TYPES_FLOW_DIAGRAM.txt
Normal file
@@ -0,0 +1,228 @@
|
||||
╔═══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ CARD TYPES MANAGEMENT - COMPLETE FLOW DIAGRAM ║
|
||||
╚═══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ DATABASE TIER (Prisma/MySQL) │
|
||||
├─────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────┐ ┌──────────────────────────┐ │
|
||||
│ │ CardType Model │ │ CardTypeCategory Enum │ │
|
||||
│ ├─────────────────────────┤ ├──────────────────────────┤ │
|
||||
│ │ id (UUID) │ │ TIMES (classes) │ │
|
||||
│ │ name (String) │ │ DURATION (months) │ │
|
||||
│ │ type (Enum) ───────────────┐ │ TRIAL (trial) │ │
|
||||
│ │ totalTimes (Int?) │ │ └──────────────────────────┘ │
|
||||
│ │ durationDays (Int) │ │ │
|
||||
│ │ price (Decimal) │ └─────────────────────────────────────────┤
|
||||
│ │ originalPrice (Decimal?)│ │
|
||||
│ │ description (String?) │ ┌──────────────────────┐ │
|
||||
│ │ isActive (Boolean) │────→│ Soft Delete Strategy │ │
|
||||
│ │ sortOrder (Int) │ │ DELETE = isActive=false │
|
||||
│ │ createdAt/updatedAt │ └──────────────────────┘ │
|
||||
│ └─────────────────────────┘ │
|
||||
│ │
|
||||
│ Relationships: ← Membership (many), Order (many) │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ API TIER (NestJS Backend) - packages/server/src/membership/ │
|
||||
├─────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ MembershipController MembershipService │
|
||||
│ ┌────────────────────────┐ ┌──────────────────────────┐ │
|
||||
│ │ GET /membership/... │ │ getActiveCardTypes() │ │
|
||||
│ │ GET /admin/card-types │──────────→ │ getAllCardTypes() │ │
|
||||
│ │ POST /admin/... │ │ createCardType(dto) │ │
|
||||
│ │ PUT /admin/.../id │────────┐ │ updateCardType(id, dto) │ │
|
||||
│ │ DELETE /admin/.../id │ │ │ deleteCardType(id) │ │
|
||||
│ └────────────────────────┘ │ └──────────────────────────┘ │
|
||||
│ ↓ │ ↓ │
|
||||
│ Validators: └→ PrismaService (DB calls) │
|
||||
│ - JwtAuthGuard (token required) │
|
||||
│ - RolesGuard (ADMIN role only) │
|
||||
│ │
|
||||
│ Request DTOs: Response Types: │
|
||||
│ ┌─CreateCardTypeDto───┐ ┌──CardType────────┐ │
|
||||
│ │ name ✓ │ │ id │ │
|
||||
│ │ type ✓ │ │ name │ │
|
||||
│ │ durationDays ✓ │ │ type │ │
|
||||
│ │ price ✓ │ ─────────→ │ totalTimes │ │
|
||||
│ │ totalTimes? │ │ durationDays │ │
|
||||
│ │ originalPrice? │ │ price │ │
|
||||
│ │ description? │ │ originalPrice │ │
|
||||
│ │ sortOrder? │ │ isActive │ │
|
||||
│ └─────────────────────┘ │ sortOrder │ │
|
||||
│ └──────────────────┘ │
|
||||
│ ┌─UpdateCardTypeDto───┐ │
|
||||
│ │ (all fields optional) Includes isActive toggle! │
|
||||
│ │ name? │
|
||||
│ │ type? │
|
||||
│ │ price? │
|
||||
│ │ isActive? ──────────────────────→ 上架/下架 functionality │
|
||||
│ │ ... etc ... │
|
||||
│ └─────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ SHARED TYPES TIER - packages/shared/src/types/ │
|
||||
├─────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ TypeScript Interfaces & Enums │
|
||||
│ ├── CardType (read-only interface) │
|
||||
│ ├── CreateCardTypeDto │
|
||||
│ ├── UpdateCardTypeDto │
|
||||
│ └── CardTypeCategory Enum: TIMES | DURATION | TRIAL │
|
||||
│ │
|
||||
│ Shared across Frontend & Backend │
|
||||
│ ✓ Type safety │
|
||||
│ ✓ Request/Response validation │
|
||||
│ ✓ Documentation │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ FRONTEND TIER (Vue 3 + Uni-app) - packages/app/src/ │
|
||||
├─────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ card-types.vue - Admin Management Page │ │
|
||||
│ ├───────────────────────────────────────────────────────────────┤ │
|
||||
│ │ │ │
|
||||
│ │ ┌─── Toolbar ───────────────────────────┐ │ │
|
||||
│ │ │ "共 X 个卡种" [＋ 新增卡种] │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ ↓ tap │ │ │
|
||||
│ │ │ openAdd() ────────────────────┐ │ │ │
|
||||
│ │ └───────────────────────────────────┼───┘ │ │
|
||||
│ │ │ │ │
|
||||
│ │ ┌─── Card List ──────────────────────┼────┐ │ │
|
||||
│ │ │ for each cardType: │ │ │ │
|
||||
│ │ │ ┌────────────────────────────────┐ │ │ │ │
|
||||
│ │ │ │ [Header band - colored by type]│ │ │ │ │
|
||||
│ │ │ │ Card Name, ¥Price │ │ │ │ │
|
||||
│ │ │ │ Duration, Times, Description │ │ │ │ │
|
||||
│ │ │ ├────────────────────────────────┤ │ │ │ │
|
||||
│ │ │ │ [编辑] [下架] [删除] │ │ │ │ │
|
||||
│ │ │ │ ↓ ↓ ↓ │ │ │ │ │
|
||||
│ │ │ │ open toggle delete │ │ │ │ │
|
||||
│ │ │ │ Edit() Active() Confirm() │ │ │ │ │
|
||||
│ │ │ └────────────────────────────────┘ │ │ │ │
|
||||
│ │ └────────────────────────────────────┼────┘ │ │
|
||||
│ │ │ │ │
|
||||
│ │ ┌─── Modal/Popup ────────────────────┼────┐ │ │
|
||||
│ │ │ @tap.self="closeModal" on mask │ │ │ │
|
||||
│ │ │ v-if="showModal" │ │ │ │
|
||||
│ │ │ ┌────────────────────────────────┐ │ │ │ │
|
||||
│ │ │ │ 新增卡种 / 编辑卡种 │ │ │ │ │
|
||||
│ │ │ ├────────────────────────────────┤ │ │ │ │
|
||||
│ │ │ │ 卡种名称 [input] │ │ │ │ │
|
||||
│ │ │ │ 类型 [picker] │ │ │ │ │
|
||||
│ │ │ │ 现价 [digit] │ │ │ │ │
|
||||
│ │ │ │ 原价 [digit] │ │ │ │ │
|
||||
│ │ │ │ 次数 [number] │ │ │ │ │
|
||||
│ │ │ │ 有效天数 [number] │ │ │ │ │
|
||||
│ │ │ │ 排序值 [number] │ │ │ │ │
|
||||
│ │ │ │ 描述 [textarea] │ │ │ │ │
|
||||
│ │ │ ├────────────────────────────────┤ │ │ │ │
|
||||
│ │ │ │ [取消] [确认] │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ ↓ tap │ │ │ │ │
|
||||
│ │ │ │ submitForm() ────┐ │ │ │ │ │
|
||||
│ │ │ │ closeModal() │ │ │ │ │ │
|
||||
│ │ │ │ editTarget = null│ │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ └───────────────────┼───────────┘ │ │ │ │
|
||||
│ │ └─────────────────────┼──────────────┘ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ Reactive State: │ │ │ │
|
||||
│ │ ├─ cardTypes: [] │ │ │ │
|
||||
│ │ ├─ showModal: false │ │ │ │
|
||||
│ │ ├─ editTarget: null │ │ │ │
|
||||
│ │ ├─ form: { │ │ │ │
|
||||
│ │ │ name, typeIdx, │ │ │ │
|
||||
│ │ │ priceStr, ... │ │ │ │
|
||||
│ │ │ } │ │ │ │
|
||||
│ │ └─ submitting: false │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ └───────────────────────┼───────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ ┌──────────────────────────────────────┐ │ │
|
||||
│ │ admin.ts (Pinia Store) │ │ │
|
||||
│ ├──────────────────────────────────────┤ │ │
|
||||
│ │ cardTypes: CardType[] │ │ │
|
||||
│ │ │ │ │
|
||||
│ │ fetchCardTypes() │ │ │
|
||||
│ │ ├─ GET /admin/card-types ────────────┼────────────────────┘ │
|
||||
│ │ ├─ return sorted list │ │
|
||||
│ │ └─ update state │ │
|
||||
│ │ │ │
|
||||
│ │ createCardType(dto) │ │
|
||||
│ │ ├─ POST /admin/card-types ─────→ Backend │
|
||||
│ │ └─ refetch list │ │
|
||||
│ │ │ │
|
||||
│ │ updateCardType(id, dto) ─────────┐ │ │
|
||||
│ │ ├─ PUT /admin/card-types/:id │ │ │
|
||||
│ │ └─ refetch list │ │ │
|
||||
│ │ │ │ │
|
||||
│ │ deleteCardType(id) │ │ │
|
||||
│ │ ├─ DELETE /admin/card-types/:id │ │ │
|
||||
│ │ └─ refetch list │ │ │
|
||||
│ └──────────────────────────────────┘ │ │
|
||||
│ │ │
|
||||
│ utils/request.ts │ │
|
||||
│ ├─ get() │ │
|
||||
│ ├─ post() │ │
|
||||
│ ├─ put() │ │
|
||||
│ └─ del() │ │
|
||||
│ All with JWT Bearer token │ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ CRITICAL BUG: Edit Popup Closes Immediately ║
|
||||
╠══════════════════════════════════════════════════════════════════════════════╣
|
||||
║ ║
|
||||
║ SYMPTOM: When tapping [编辑], modal appears then instantly closes ║
|
||||
║ ║
|
||||
║ ROOT CAUSE: Event propagation issue ║
|
||||
║ 1. User taps [编辑] button ║
|
||||
║ 2. openEdit() sets showModal = true ║
|
||||
║ 3. Modal renders with @tap.self="closeModal" ║
|
||||
║ 4. Tap event might propagate to modal-mask in same tick ║
|
||||
║ 5. closeModal() fires immediately ║
|
||||
║ 6. Modal closes ║
|
||||
║ ║
|
||||
║ SOLUTIONS: ║
|
||||
║ ║
|
||||
║ Option 1: Stop propagation (RECOMMENDED - SIMPLE) ║
|
||||
║ @tap.stop="openEdit(ct)" <!-- Add .stop modifier --> ║
|
||||
║ ║
|
||||
║ Option 2: Use nextTick() for modal rendering ║
|
||||
║ function openEdit(ct: CardType) { ║
|
||||
║ editTarget.value = ct ║
|
||||
║ form.value = { ... } ║
|
||||
║ nextTick(() => { ║
|
||||
║ showModal.value = true // Defer to next frame ║
|
||||
║ }) ║
|
||||
║ } ║
|
||||
║ ║
|
||||
║ Option 3: State guard with timeout ║
|
||||
║ const modalJustOpened = ref(false) ║
|
||||
║ ║
|
||||
║ function openEdit(ct: CardType) { ║
|
||||
║ editTarget.value = ct ║
|
||||
║ form.value = { ... } ║
|
||||
║ showModal.value = true ║
|
||||
║ modalJustOpened.value = true ║
|
||||
║ setTimeout(() => { modalJustOpened.value = false }, 100) ║
|
||||
║ } ║
|
||||
║ ║
|
||||
║ function closeModal() { ║
|
||||
║ if (!modalJustOpened.value) { ║
|
||||
║ showModal.value = false ║
|
||||
║ editTarget.value = null ║
|
||||
║ } ║
|
||||
║ } ║
|
||||
║ ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
244
CARD_TYPES_INDEX.md
Normal file
244
CARD_TYPES_INDEX.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# 卡种管理 (Card Types Management) - Documentation Index
|
||||
|
||||
**Exploration Date**: April 5, 2026
|
||||
**Total Files Analyzed**: 13 source files (~1,800 lines)
|
||||
**Documentation Created**: 4 comprehensive guides (1,546 lines)
|
||||
|
||||
---
|
||||
|
||||
## 📖 Documentation Files
|
||||
|
||||
### 1. **EXPLORATION_SUMMARY.md** ⭐ START HERE
|
||||
**Best for**: Quick overview of the entire system and key findings
|
||||
|
||||
- What was explored (13 files, 1,800 lines)
|
||||
- Documentation generated
|
||||
- Key findings summary
|
||||
- File inventory
|
||||
- Complete workflows
|
||||
- Bug identification
|
||||
- Next steps
|
||||
- Statistics
|
||||
|
||||
**Read time**: 15-20 minutes
|
||||
**Size**: 12 KB, 428 lines
|
||||
|
||||
---
|
||||
|
||||
### 2. **CARD_TYPES_QUICK_REFERENCE.md** 📋 FOR LOOKUP
|
||||
**Best for**: Quick lookup when working on the code
|
||||
|
||||
- File quick links with line numbers
|
||||
- Key data model (CardType entity)
|
||||
- API endpoints
|
||||
- DTOs & validation rules
|
||||
- UI components structure
|
||||
- Form fields list
|
||||
- Operations guide (Add, Edit, Toggle, Delete)
|
||||
- React refs & state
|
||||
- Admin store methods
|
||||
- **Bug explanation with 3 solutions** ⚡
|
||||
- Price handling notes
|
||||
- Testing checklist
|
||||
- Card type categories
|
||||
|
||||
**Read time**: 10 minutes
|
||||
**Size**: 10 KB, 342 lines
|
||||
|
||||
---
|
||||
|
||||
### 3. **CARD_TYPES_ANALYSIS.md** 📚 FOR DEEP DIVE
|
||||
**Best for**: Understanding every detail of the system
|
||||
|
||||
**11 Sections**:
|
||||
1. Project structure
|
||||
2. Database schema (Prisma)
|
||||
3. Shared types & DTOs
|
||||
4. Server-side implementation
|
||||
5. Frontend admin page
|
||||
6. Admin store (Pinia)
|
||||
7. Workflow flows
|
||||
8. API communication
|
||||
9. Price handling
|
||||
10. Card type categories
|
||||
11. **Detailed bug analysis** with root cause
|
||||
|
||||
**Read time**: 30-40 minutes
|
||||
**Size**: 16 KB, 548 lines
|
||||
|
||||
---
|
||||
|
||||
### 4. **CARD_TYPES_FLOW_DIAGRAM.txt** 🎨 FOR VISUALIZATION
|
||||
**Best for**: Understanding data flow and architecture visually
|
||||
|
||||
- Database tier diagram
|
||||
- API tier diagram
|
||||
- Shared types tier
|
||||
- Frontend tier (page structure, store, state)
|
||||
- Complete operation flows (Add, Edit, Toggle, Delete)
|
||||
- **Bug analysis with solutions**
|
||||
|
||||
**Read time**: 20 minutes
|
||||
**Size**: 24 KB, 228 lines (ASCII art)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 How to Use This Documentation
|
||||
|
||||
### Scenario 1: "I need to understand the whole system"
|
||||
1. Start with **EXPLORATION_SUMMARY.md** (overview)
|
||||
2. Look at **CARD_TYPES_FLOW_DIAGRAM.txt** (visual)
|
||||
3. Dive into **CARD_TYPES_ANALYSIS.md** (details)
|
||||
|
||||
### Scenario 2: "I need to find something specific"
|
||||
→ Use **CARD_TYPES_QUICK_REFERENCE.md** (index & lookup)
|
||||
|
||||
### Scenario 3: "I need to fix the edit modal bug"
|
||||
→ Jump to **CARD_TYPES_QUICK_REFERENCE.md** → Section "THE BUG" or
|
||||
→ Read **CARD_TYPES_ANALYSIS.md** → Section 11 "Detailed bug analysis"
|
||||
|
||||
### Scenario 4: "I need to see how data flows"
|
||||
→ Check **CARD_TYPES_FLOW_DIAGRAM.txt**
|
||||
|
||||
### Scenario 5: "I'm new to this project"
|
||||
→ Read in order:
|
||||
1. EXPLORATION_SUMMARY.md
|
||||
2. CARD_TYPES_FLOW_DIAGRAM.txt
|
||||
3. CARD_TYPES_QUICK_REFERENCE.md (bookmark for later)
|
||||
4. CARD_TYPES_ANALYSIS.md (as needed for details)
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Quick File Locations
|
||||
|
||||
### Frontend
|
||||
- Admin page: `packages/app/src/pages/admin/card-types.vue` (607 lines)
|
||||
- Pinia store: `packages/app/src/stores/admin.ts` (198 lines)
|
||||
|
||||
### Backend
|
||||
- Controller: `packages/server/src/membership/membership.controller.ts` (68 lines)
|
||||
- Service: `packages/server/src/membership/membership.service.ts` (173 lines)
|
||||
- Create DTO: `packages/server/src/membership/dto/create-card-type.dto.ts` (45 lines)
|
||||
- Update DTO: `packages/server/src/membership/dto/update-card-type.dto.ts` (49 lines)
|
||||
|
||||
### Database
|
||||
- Prisma schema: `packages/server/prisma/schema.prisma` (205 lines)
|
||||
|
||||
### Shared Types
|
||||
- Card types: `packages/shared/src/types/card-type.ts` (39 lines)
|
||||
- Enums: `packages/shared/src/enums.ts` (47 lines)
|
||||
|
||||
---
|
||||
|
||||
## ⚡ The Critical Bug
|
||||
|
||||
**What**: Edit modal closes immediately when user taps [编辑] button
|
||||
|
||||
**Why**: Event propagation issue - tap event bubbles to modal-mask's @tap.self
|
||||
|
||||
**Where to Fix**: Line 67 of `packages/app/src/pages/admin/card-types.vue`
|
||||
|
||||
**Simple Fix**: Change `@tap="openEdit(ct)"` to `@tap.stop="openEdit(ct)"`
|
||||
|
||||
**See Also**:
|
||||
- CARD_TYPES_QUICK_REFERENCE.md → "THE BUG" section
|
||||
- CARD_TYPES_ANALYSIS.md → Section 11
|
||||
- CARD_TYPES_FLOW_DIAGRAM.txt → Bottom (3 solutions shown)
|
||||
|
||||
---
|
||||
|
||||
## 📊 Key Statistics
|
||||
|
||||
| Aspect | Count |
|
||||
|--------|-------|
|
||||
| Source files analyzed | 13 |
|
||||
| Total lines of code | ~1,800 |
|
||||
| API endpoints | 5 |
|
||||
| Card type categories | 3 (TIMES, DURATION, TRIAL) |
|
||||
| Core operations | 4 (Create, Read, Update, Delete) |
|
||||
| Documentation files | 4 |
|
||||
| Documentation lines | 1,546 |
|
||||
| Bugs identified | 1 |
|
||||
| Bug severity | High (UX-breaking) |
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Card Type Categories
|
||||
|
||||
1. **次卡 (TIMES)**: Class count-based (e.g., 10 classes) - Dark blue
|
||||
2. **月卡 (DURATION)**: Time period-based (e.g., 30 days) - Purple
|
||||
3. **体验卡 (TRIAL)**: Trial cards - Gold/tan
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Auth & Security
|
||||
|
||||
- Admin endpoints require JWT Bearer token
|
||||
- Admin endpoints require ADMIN role
|
||||
- Public endpoint (GET /membership/card-types) returns only active cards
|
||||
|
||||
---
|
||||
|
||||
## 💾 Database Details
|
||||
|
||||
**CardType Model**:
|
||||
- Soft delete (set isActive=false, not removed from DB)
|
||||
- Relationships: Membership (many), Order (many)
|
||||
- Indexed on: isActive, sortOrder
|
||||
|
||||
---
|
||||
|
||||
## 📝 API Endpoints
|
||||
|
||||
| Method | Endpoint | Auth | Purpose |
|
||||
|--------|----------|------|---------|
|
||||
| GET | /membership/card-types | None | Get active cards (public) |
|
||||
| GET | /admin/card-types | JWT+Admin | Get all cards (admin) |
|
||||
| POST | /admin/card-types | JWT+Admin | Create card |
|
||||
| PUT | /admin/card-types/:id | JWT+Admin | Update card (can toggle isActive) |
|
||||
| DELETE | /admin/card-types/:id | JWT+Admin | Soft delete card |
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
- [ ] Create new card with all types
|
||||
- [ ] Edit existing card
|
||||
- [ ] Toggle card status (上架/下架)
|
||||
- [ ] Delete card (soft delete works)
|
||||
- [ ] List updates after each operation
|
||||
- [ ] Modal closes after submit
|
||||
- [ ] **FIX**: Edit modal stays open (not closes immediately)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
1. **Quick start**: Read EXPLORATION_SUMMARY.md (15 min)
|
||||
2. **Deep dive**: Read CARD_TYPES_ANALYSIS.md (30 min)
|
||||
3. **Reference**: Bookmark CARD_TYPES_QUICK_REFERENCE.md
|
||||
4. **Implement bug fix** (5 min)
|
||||
5. **Test thoroughly** (15 min)
|
||||
|
||||
---
|
||||
|
||||
## 💡 Price Handling
|
||||
|
||||
**Critical**: Prices are stored as integers (cents)
|
||||
- ¥980 = 98000 cents
|
||||
- Display: formatPrice(98000) = "980.00"
|
||||
|
||||
---
|
||||
|
||||
## 📚 Related Documentation
|
||||
|
||||
- `ADMIN_SCHEDULING_EXPLORATION.md` - Scheduling feature
|
||||
- `BOOKING_ARCHITECTURE_DIAGRAM.md` - Booking system
|
||||
- `BOOKING_PAGE_ANALYSIS.md` - Booking pages
|
||||
- `SCHEDULING_QUICK_REFERENCE.md` - Scheduling reference
|
||||
|
||||
---
|
||||
|
||||
**Generated**: 2026-04-05
|
||||
**Ready to**: Implement features, fix bugs, deploy updates
|
||||
|
||||
342
CARD_TYPES_QUICK_REFERENCE.md
Normal file
342
CARD_TYPES_QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,342 @@
|
||||
# Card Types Management - Quick Reference Guide
|
||||
|
||||
## 📁 File Quick Links
|
||||
|
||||
| Purpose | File Path | Lines |
|
||||
|---------|-----------|-------|
|
||||
| **Frontend** | | |
|
||||
| Admin page | `packages/app/src/pages/admin/card-types.vue` | 607 |
|
||||
| Store (Pinia) | `packages/app/src/stores/admin.ts` | 198 |
|
||||
| Request utils | `packages/app/src/utils/request.ts` | 80 |
|
||||
| Format utils | `packages/app/src/utils/format.ts` | 46 |
|
||||
| **Backend** | | |
|
||||
| Controller | `packages/server/src/membership/membership.controller.ts` | 68 |
|
||||
| Service | `packages/server/src/membership/membership.service.ts` | 173 |
|
||||
| Create DTO | `packages/server/src/membership/dto/create-card-type.dto.ts` | 45 |
|
||||
| Update DTO | `packages/server/src/membership/dto/update-card-type.dto.ts` | 49 |
|
||||
| **Database** | | |
|
||||
| Prisma schema | `packages/server/prisma/schema.prisma` | 205 |
|
||||
| **Shared** | | |
|
||||
| Card types | `packages/shared/src/types/card-type.ts` | 39 |
|
||||
| Enums | `packages/shared/src/enums.ts` | 47 |
|
||||
| API types | `packages/shared/src/types/api.ts` | 20 |
|
||||
| Membership types | `packages/shared/src/types/membership.ts` | 19 |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Data Model
|
||||
|
||||
### CardType Entity
|
||||
```typescript
|
||||
{
|
||||
id: string (UUID)
|
||||
name: string // e.g., "10次课套餐"
|
||||
type: 'TIMES' | 'DURATION' | 'TRIAL'
|
||||
totalTimes: number | null // For TIMES/TRIAL cards
|
||||
durationDays: number // How many days valid
|
||||
price: number (cents) // ¥980 = 98000
|
||||
originalPrice: number | null // Strikethrough price
|
||||
description: string | null
|
||||
isActive: boolean // 上架(true) / 下架(false)
|
||||
sortOrder: number // Display order (ascending)
|
||||
createdAt: DateTime
|
||||
updatedAt: DateTime
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 API Endpoints
|
||||
|
||||
### Public (No Auth)
|
||||
```
|
||||
GET /membership/card-types Returns active cards only
|
||||
```
|
||||
|
||||
### Admin Only (JWT + ADMIN Role)
|
||||
```
|
||||
GET /admin/card-types Get all cards (including inactive)
|
||||
POST /admin/card-types Create new card
|
||||
PUT /admin/card-types/:id Update card (can toggle isActive)
|
||||
DELETE /admin/card-types/:id Soft delete (sets isActive=false)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 DTOs & Validation
|
||||
|
||||
### CreateCardTypeDto
|
||||
| Field | Required | Type | Validation |
|
||||
|-------|----------|------|-----------|
|
||||
| name | ✓ | string | Must be non-empty |
|
||||
| type | ✓ | enum | TIMES \| DURATION \| TRIAL |
|
||||
| durationDays | ✓ | int | Min: 1 |
|
||||
| price | ✓ | number | Min: 0 |
|
||||
| totalTimes | - | int | Min: 1 (optional) |
|
||||
| originalPrice | - | number | Min: 0 (optional) |
|
||||
| description | - | string | Max: 200 (optional) |
|
||||
| sortOrder | - | int | Min: 0 (optional, default: 0) |
|
||||
|
||||
### UpdateCardTypeDto
|
||||
- All fields optional (partial update)
|
||||
- Can toggle `isActive` for 上架/下架
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI Components
|
||||
|
||||
### Page Structure
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Toolbar: "共 X 个卡种" [＋ 新增卡种] │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Card List │
|
||||
│ ┌───────────────────────────────────────┐ │
|
||||
│ │ [Colored Header Band] │ │
|
||||
│ │ Card Name, ¥Price, Duration, etc │ │
|
||||
│ │ [编辑] [上架/下架] [删除] │ │
|
||||
│ └───────────────────────────────────────┘ │
|
||||
│ ... more cards ... │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Modal (Add/Edit Form) │
|
||||
│ - Title: 新增卡种 / 编辑卡种 │
|
||||
│ - Input fields │
|
||||
│ - [取消] [确认] buttons │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Header Colors by Type
|
||||
- **次卡 (TIMES)**: Dark blue `linear-gradient(90deg, #1a1a2e, #2d2d5e)`
|
||||
- **月卡 (DURATION)**: Purple `linear-gradient(90deg, #6c3483, #9b59b6)`
|
||||
- **体验卡 (TRIAL)**: Gold/tan `linear-gradient(90deg, #7d6608, #c9a87c)`
|
||||
|
||||
---
|
||||
|
||||
## 📋 Form Fields in Modal
|
||||
|
||||
```
|
||||
卡种名称 text input
|
||||
类型 picker (次卡, 月卡, 体验卡)
|
||||
现价（元） digit input
|
||||
原价（元） digit input (optional)
|
||||
次数 number input (optional)
|
||||
有效天数 number input (required, default: 90)
|
||||
排序值 number input (default: 0)
|
||||
描述 textarea (optional)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Operations
|
||||
|
||||
### ADD New Card Type
|
||||
1. Tap [＋ 新增卡种]
|
||||
2. Modal opens with empty form
|
||||
3. Fill fields (name, type, price, duration required)
|
||||
4. Tap [确认]
|
||||
5. Backend creates card (isActive=true by default)
|
||||
6. Modal closes, list updates
|
||||
|
||||
### EDIT Card Type
|
||||
1. Tap [编辑] on a card
|
||||
2. Modal opens with prefilled form
|
||||
3. Modify desired fields
|
||||
4. Tap [确认]
|
||||
5. Backend updates card
|
||||
6. Modal closes, list updates
|
||||
|
||||
### TOGGLE Status (上架/下架)
|
||||
1. Tap [上架] or [下架]
|
||||
2. Backend updates `isActive` toggle
|
||||
3. List re-renders
|
||||
- Card becomes transparent if `isActive=false`
|
||||
- Status tag and button text change
|
||||
|
||||
### DELETE Card Type
|
||||
1. Tap [删除]
|
||||
2. Confirmation dialog appears
|
||||
3. If confirmed: backend soft-deletes (isActive=false)
|
||||
4. List updates
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ React Refs & State
|
||||
|
||||
```typescript
|
||||
const cardTypes = ref<CardType[]>([]) // Current list
|
||||
const loading = ref(false) // Loading spinner
|
||||
const showModal = ref(false) // Modal visibility
|
||||
const submitting = ref(false) // Form submission state
|
||||
const editTarget = ref<CardType | null>(null) // Card being edited (null=add)
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
typeIdx: 0, // Index into typeOptions array
|
||||
priceStr: '', // String (parsed to number on submit)
|
||||
originalPriceStr: '',
|
||||
totalTimesStr: '',
|
||||
durationDaysStr: '90', // Default 90 days
|
||||
sortOrderStr: '0', // Default 0
|
||||
description: '',
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💾 Admin Store Methods
|
||||
|
||||
```typescript
|
||||
// Fetch all cards (including inactive)
|
||||
await adminStore.fetchCardTypes(): Promise<CardType[]>
|
||||
|
||||
// Create new card
|
||||
await adminStore.createCardType(dto: CreateCardTypeDto): Promise<CardType>
|
||||
|
||||
// Update card (all fields optional)
|
||||
// Can toggle isActive, change price, name, etc.
|
||||
await adminStore.updateCardType(id: string, dto: UpdateCardTypeDto): Promise<CardType>
|
||||
|
||||
// Delete card (soft delete: sets isActive=false)
|
||||
await adminStore.deleteCardType(id: string): Promise<void>
|
||||
```
|
||||
|
||||
**Note**: All mutations refetch the list automatically
|
||||
|
||||
---
|
||||
|
||||
## 🐛 THE BUG: Edit Modal Closes Immediately
|
||||
|
||||
### Symptom
|
||||
When user taps [编辑], the edit modal opens then immediately closes.
|
||||
|
||||
### Root Cause
|
||||
Event propagation issue:
|
||||
1. User taps [编辑] button
|
||||
2. `openEdit()` runs and sets `showModal = true`
|
||||
3. Modal renders in same event tick
|
||||
4. Tap event propagates to `modal-mask` which has `@tap.self="closeModal"`
|
||||
5. Modal closes instantly
|
||||
|
||||
### Current Code (Buggy)
|
||||
```vue
|
||||
<view class="ct-action-btn edit-btn" @tap="openEdit(ct)">
|
||||
<text class="ct-action-text">编辑</text>
|
||||
</view>
|
||||
|
||||
<!-- Modal -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
<!-- ... form ... -->
|
||||
</view>
|
||||
```
|
||||
|
||||
### Solutions (Pick One)
|
||||
|
||||
**Option 1: Stop Propagation (RECOMMENDED)**
|
||||
```vue
|
||||
<view class="ct-action-btn edit-btn" @tap.stop="openEdit(ct)">
|
||||
<!-- Add .stop modifier to prevent bubbling -->
|
||||
</view>
|
||||
```
|
||||
|
||||
**Option 2: Use nextTick()**
|
||||
```typescript
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
function openEdit(ct: CardType) {
|
||||
editTarget.value = ct
|
||||
form.value = { ... populate ... }
|
||||
nextTick(() => {
|
||||
showModal.value = true // Render in next frame
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**Option 3: Guard with State**
|
||||
```typescript
|
||||
const modalJustOpened = ref(false)
|
||||
|
||||
function openEdit(ct: CardType) {
|
||||
editTarget.value = ct
|
||||
form.value = { ... }
|
||||
showModal.value = true
|
||||
modalJustOpened.value = true
|
||||
setTimeout(() => { modalJustOpened.value = false }, 100)
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
if (!modalJustOpened.value) { // Ignore if just opened
|
||||
showModal.value = false
|
||||
editTarget.value = null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Recommendation**: Use **Option 1** (@tap.stop) - it's simplest and most idiomatic.
|
||||
|
||||
---
|
||||
|
||||
## 💡 Price Handling
|
||||
|
||||
**Important**: Prices are stored as **integers (cents)** in DB and API
|
||||
- Frontend sends: `{ price: 98000 }` for ¥980
|
||||
- Display: `formatPrice(98000)` → `"980.00"`
|
||||
|
||||
```typescript
|
||||
// Utility function
|
||||
export function formatPrice(cents: number): string {
|
||||
return (cents / 100).toFixed(2)
|
||||
}
|
||||
|
||||
// Usage in template
|
||||
¥{{ formatPrice(ct.price) }}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
- [ ] Can create new card with all field types
|
||||
- [ ] Can edit existing card and see changes
|
||||
- [ ] Can toggle card status (上架/下架)
|
||||
- [ ] Card becomes transparent when inactive
|
||||
- [ ] Can delete card (shows confirmation)
|
||||
- [ ] List updates after each operation
|
||||
- [ ] Price displayed with 2 decimal places
|
||||
- [ ] Modal closes after successful submit
|
||||
- [ ] Modal can be closed by tapping outside (on mask)
|
||||
- [ ] Modal can be closed by tapping Cancel button
|
||||
- [ ] **BUG FIX**: Edit modal stays open and doesn't close immediately
|
||||
|
||||
---
|
||||
|
||||
## 📊 Card Type Categories
|
||||
|
||||
| Type | Chinese | Use Case | Example | Color | Required Fields |
|
||||
|------|---------|----------|---------|-------|-----------------|
|
||||
| TIMES | 次卡 | Classes count | 10次课套餐 | Dark blue | totalTimes |
|
||||
| DURATION | 月卡 | Time period | 30天卡 | Purple | durationDays |
|
||||
| TRIAL | 体验卡 | Trial | 体验卡 | Gold/tan | durationDays |
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Related Features
|
||||
|
||||
### Memberships (User Side)
|
||||
- User can purchase cards (creates Order)
|
||||
- Payment successful creates Membership record
|
||||
- Membership tracks remaining times or expiry date
|
||||
- Used when user books a class
|
||||
|
||||
### Public Card Display
|
||||
- Users see only `isActive=true` cards on shop page
|
||||
- Sorted by `sortOrder`
|
||||
- Can purchase cards
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation Files
|
||||
|
||||
- `CARD_TYPES_ANALYSIS.md` - Complete technical analysis
|
||||
- `CARD_TYPES_FLOW_DIAGRAM.txt` - Visual flow diagrams
|
||||
- `CARD_TYPES_QUICK_REFERENCE.md` - This file (quick lookup)
|
||||
|
||||
51
CLAUDE.md
51
CLAUDE.md
@@ -97,3 +97,54 @@ Prisma schema 位于 `packages/server/prisma/schema.prisma`，关键约定：
|
||||
- **异常处理**：使用 NestJS 内置异常（BadRequestException、NotFoundException 等）
|
||||
- **分页**：统一使用 `PaginatedResponse<T>`，包含 data、total、page、limit
|
||||
- **pnpm**：使用 `shamefully-hoist=true`（.npmrc），为 Uni-app 兼容所需
|
||||
|
||||
## 前端样式规范
|
||||
|
||||
### 主题色变量（必用）
|
||||
|
||||
所有色值必须使用 `packages/app/src/uni.scss` 中定义的 SCSS 变量，禁止在 Vue/Scss 文件中硬编码色值。
|
||||
|
||||
**主题色系：**
|
||||
|
||||
```scss
|
||||
$primary-color: #a9bfcc; /* 主色-柔雾蓝灰 */
|
||||
$primary-dark: #7ba5be; /* 主色-深蓝灰 */
|
||||
$primary-light: #c8d8e4; /* 主色-浅蓝灰 */
|
||||
$primary-bg: #f0f6f9; /* 页面背景-冷白蓝 */
|
||||
$primary-border: #d8eaf4; /* 边框-淡蓝灰 */
|
||||
$primary-selected-bg: #EFF6F9; /* 选中态背景 */
|
||||
```
|
||||
|
||||
**通用语义变量（已同步主题色）：**
|
||||
|
||||
| 变量 | 值 | 用途 |
|
||||
|------|----|------|
|
||||
| `$accent-color` | `#7ba5be` | 强调色 |
|
||||
| `$warning-color` | `#e8a87c` | 警告色 |
|
||||
| `$brand-light` | `#c8d8e4` | 品牌浅色 |
|
||||
| `$border-color` | `rgba(180,160,130,0.2)` | 边框（中性） |
|
||||
| `$text-primary` | `#4A4035` | 主文字（深棕灰） |
|
||||
| `$text-secondary` | `#7A6A5A` | 次文字 |
|
||||
| `$text-hint` | `#A09080` | 弱提示文字 |
|
||||
|
||||
### 变量替换规则
|
||||
|
||||
| 旧硬编码 | 替换为 |
|
||||
|---------|--------|
|
||||
| `#c9a87c`（旧暖棕金） | `$primary-dark` |
|
||||
| `#d4b896`（旧浅棕金） | `$primary-color` |
|
||||
| `#C4956A`（旧警告橙棕） | `$warning-color` |
|
||||
| `#B08050`（旧深棕） | `$accent-color` |
|
||||
| `#7d6608`（旧深暖绿） | `#5a7a8a`（冷青灰） |
|
||||
| `#e8c88a`、`#b49868`（旧暖渐变） | `$primary-color` / `$primary-dark` |
|
||||
|
||||
### CSS 变量规范
|
||||
|
||||
组件内部的多处共用颜色（如阴影、遮罩）若无法用 SCSS 变量，需用 `rgba($primary-dark, 0.x)` 形式动态构造，不可直接写死十六进制值。
|
||||
|
||||
### 新增页面/组件
|
||||
|
||||
新增页面或组件时：
|
||||
1. 优先查阅 `uni.scss` 已有变量
|
||||
2. 若需要新增语义化变量，先更新 `uni.scss`，再在组件中引用
|
||||
3. 禁止在 `<style>` 块内直接写十六进制颜色值（背景色、文字色、边框、阴影均需走变量）
|
||||
|
||||
359
COMPONENT_HIERARCHY.md
Normal file
359
COMPONENT_HIERARCHY.md
Normal file
@@ -0,0 +1,359 @@
|
||||
# Component & Data Flow Hierarchy
|
||||
|
||||
## 🏗️ Component Tree
|
||||
|
||||
```
|
||||
pages/booking/index.vue (Main Page)
|
||||
│
|
||||
├── DateSelector.vue
|
||||
│ └── Emits: @select (date string)
|
||||
│ Props: v-model (current date)
|
||||
│
|
||||
├── TimePeriodFilter.vue
|
||||
│ └── Emits: @change (period key)
|
||||
│ Props: v-model (current period)
|
||||
│
|
||||
├── SlotCard.vue (Multiple, v-for)
|
||||
│ ├── Props: slot (TimeSlotWithBookingStatus)
|
||||
│ ├── Emits: @book (slot) / @cancel (slot)
|
||||
│ └── Computed: capacityLabel, capacityClass
|
||||
│
|
||||
└── BookingConfirmPopup.vue (Modal)
|
||||
├── Props: visible, slot, memberships
|
||||
├── Emits: @confirm ({timeSlotId, membershipId})
|
||||
├── Emits: @cancel
|
||||
└── State: selectedMembershipId
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 State Management Flow
|
||||
|
||||
```
|
||||
Pinia Store (stores/booking.ts)
|
||||
├── State:
|
||||
│ ├── slots: TimeSlotWithBookingStatus[]
|
||||
│ ├── myBookings: BookingWithDetails[]
|
||||
│ ├── upcomingBookings: BookingWithDetails[]
|
||||
│ ├── loadingSlots: boolean
|
||||
│ └── loadingBookings: boolean
|
||||
│
|
||||
└── Actions:
|
||||
├── fetchSlots(date) → GET /time-slot/available?date=
|
||||
├── createBooking({...}) → POST /booking
|
||||
├── cancelBooking(bookingId) → PUT /booking/:id/cancel
|
||||
├── fetchMyBookings(status?) → GET /booking/my
|
||||
└── fetchUpcomingBookings() → GET /booking/my/upcoming
|
||||
|
||||
Pinia Store (stores/user.ts)
|
||||
├── State:
|
||||
│ ├── user: UserProfileResponse | null
|
||||
│ ├── memberships: MembershipWithCardType[]
|
||||
│ ├── token: string
|
||||
│ └── stats: UserStatsResponse | null
|
||||
│
|
||||
├── Computed:
|
||||
│ ├── loggedIn: boolean
|
||||
│ ├── hasValidMembership: boolean
|
||||
│ └── activeMemberships: MembershipWithCardType[]
|
||||
│
|
||||
└── Actions:
|
||||
├── login() → WX login + token
|
||||
├── fetchMemberships() → GET /membership/my
|
||||
├── fetchProfile() → GET /user/profile
|
||||
└── logout()
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📡 API Calls Sequence
|
||||
|
||||
```
|
||||
INITIAL LOAD
|
||||
├─ POST /auth/wxLogin
|
||||
│ └─ Returns: { token, user }
|
||||
│
|
||||
├─ GET /membership/my (if logged in)
|
||||
│ └─ Returns: MembershipWithCardType[]
|
||||
│
|
||||
└─ GET /time-slot/available?date=TODAY
|
||||
└─ Returns: TimeSlotWithBookingStatus[]
|
||||
|
||||
DATE CHANGE
|
||||
└─ GET /time-slot/available?date=SELECTED_DATE
|
||||
└─ Returns: TimeSlotWithBookingStatus[]
|
||||
|
||||
BOOKING CREATION
|
||||
├─ POST /booking
|
||||
│ ├─ Body: { timeSlotId, membershipId }
|
||||
│ └─ Returns: BookingWithDetails
|
||||
│
|
||||
└─ GET /time-slot/available?date=SELECTED_DATE (refresh)
|
||||
└─ Returns: Updated slots with isBookedByMe: true
|
||||
|
||||
BOOKING CANCELLATION
|
||||
├─ PUT /booking/:bookingId/cancel
|
||||
│ └─ Returns: Updated BookingWithDetails
|
||||
│
|
||||
└─ GET /time-slot/available?date=SELECTED_DATE (refresh)
|
||||
└─ Returns: Updated slots with isBookedByMe: false
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎭 Slot Card State Machine
|
||||
|
||||
```
|
||||
TimeSlotWithBookingStatus {
|
||||
status: 'OPEN' | 'FULL' | 'CLOSED'
|
||||
isBookedByMe: boolean
|
||||
}
|
||||
|
||||
STATE COMBINATIONS:
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ status: OPEN, isBookedByMe: false │
|
||||
├─────────────────────────────────────┤
|
||||
│ Button: "可预约" (Tan) │
|
||||
│ Color: #c9a87c │
|
||||
│ Action: onBookTap() → Popup │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ status: OPEN, isBookedByMe: true │
|
||||
├─────────────────────────────────────┤
|
||||
│ Badge: "已预约" │
|
||||
│ Link: "取消" (Red underline) │
|
||||
│ Indicator: Tan bar on left │
|
||||
│ Action: onCancelTap() → Confirm │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ status: FULL │
|
||||
├─────────────────────────────────────┤
|
||||
│ Button: "已约满" (Gray) │
|
||||
│ Color: #f0f0f0 │
|
||||
│ Action: Disabled (no-op) │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ status: CLOSED │
|
||||
├─────────────────────────────────────┤
|
||||
│ Button: "已关闭" (Gray) │
|
||||
│ Color: #f0f0f0 │
|
||||
│ Action: Disabled (no-op) │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Capacity Label Colors
|
||||
|
||||
```
|
||||
Condition Label Background Text
|
||||
─────────────────────────────────────────────────────────────────
|
||||
status === CLOSED "已关闭" #f5f5f5 #999
|
||||
status === FULL "0/1 人" #fef0f0 #ef4444
|
||||
bookedCount >= 80% "0/1 人" #fff8ed #f59e0b
|
||||
bookedCount < 80% "0/1 人" #f0faf3 #4caf50
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Time Period Filters
|
||||
|
||||
```
|
||||
Key Label Start End Range
|
||||
──────────────────────────────────────────────────────
|
||||
null (all) "全部" - - All times
|
||||
'MORNING' "上午" 06:00 12:00 6am-12pm
|
||||
'AFTERNOON' "下午" 12:00 18:00 12pm-6pm
|
||||
'EVENING' "晚上" 18:00 22:00 6pm-10pm
|
||||
|
||||
Filtering Logic:
|
||||
slot.startTime >= period.start && slot.startTime < period.end
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 UI Layout Breakdown
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ 📱 Booking Page (750rpx) │
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐│
|
||||
│ │ 🎫 STICKY HEADER (z-index:100)
|
||||
│ │ ┌───────────────────────────┐│
|
||||
│ │ │ DateSelector (horizontal) ││
|
||||
│ │ │ 今天 5月 4月 3月... ││
|
||||
│ │ └───────────────────────────┘│
|
||||
│ │ ┌───────────────────────────┐│
|
||||
│ │ │ TimePeriodFilter (tabs) ││
|
||||
│ │ │ 全部 | 上午 | 下午 | 晚上││
|
||||
│ │ └───────────────────────────┘│
|
||||
│ └─────────────────────────────┘│
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐│
|
||||
│ │ 📜 SCROLL AREA ││
|
||||
│ │ ││
|
||||
│ │ OR [Loading skeleton] ×4 ││
|
||||
│ │ OR [Empty state] ││
|
||||
│ │ ││
|
||||
│ │ [SlotCard 1] ┌──────────┐ ││
|
||||
│ │ 09:00-10:00 │ 0/1 人 │ ││
|
||||
│ │ │ [可预约] │ ││
|
||||
│ │ ┌──────────┘ └─────────┘ ││
|
||||
│ │ [SlotCard 2] ┌──────────┐ ││
|
||||
│ │ 10:00-11:00 │ 1/1 人 │ ││
|
||||
│ │ ✓已预约 [取消]└─────────┘ ││
|
||||
│ │ [SlotCard 3] ... ││
|
||||
│ │ ││
|
||||
│ │ [Spacer 48rpx] ││
|
||||
│ └─────────────────────────────┘│
|
||||
│ │
|
||||
│ ┌──────────────────────────────┐│
|
||||
│ │ [BookingConfirmPopup] (Modal)││
|
||||
│ │ ┌────────────────────────────┐│
|
||||
│ │ │ ✕ 确认预约 ││
|
||||
│ │ │ ││
|
||||
│ │ │ 日期: 2026-04-05 ││
|
||||
│ │ │ 时间: 09:00 - 10:00 ││
|
||||
│ │ │ 剩余: 1 个名额 ││
|
||||
│ │ │ ───────────────────── ││
|
||||
│ │ │ 💳 私教课程 ││
|
||||
│ │ │ 剩余 10 次 ✓ ││
|
||||
│ │ │ 确认后扣除 1 次课时 ││
|
||||
│ │ │ ││
|
||||
│ │ │ [取消] [确认预约] ││
|
||||
│ │ └────────────────────────────┘│
|
||||
│ └──────────────────────────────┘│
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Authentication Flow
|
||||
|
||||
```
|
||||
PAGE LOAD
|
||||
│
|
||||
├─ Check: userStore.loggedIn?
|
||||
│
|
||||
├─ YES
|
||||
│ ├─ Check: userStore.activeMemberships.length > 0?
|
||||
│ │ ├─ NO: await fetchMemberships()
|
||||
│ │ └─ YES: (already loaded)
|
||||
│ │
|
||||
│ └─ Load today's slots
|
||||
│
|
||||
└─ NO (not logged in)
|
||||
└─ Page loads but booking disabled
|
||||
(onBookTap shows login modal)
|
||||
|
||||
USER TAPS "可预约"
|
||||
│
|
||||
├─ Check: userStore.loggedIn?
|
||||
│ ├─ NO: Show login modal
|
||||
│ │ ├─ User confirms → wxLogin()
|
||||
│ │ ├─ Retry booking flow
|
||||
│ │ └─ Success: Load memberships, show popup
|
||||
│ │
|
||||
│ └─ YES: Continue
|
||||
│
|
||||
├─ Check: userStore.hasValidMembership?
|
||||
│ ├─ NO: Show purchase modal
|
||||
│ │ └─ User navigates to /pages/store/index
|
||||
│ │
|
||||
│ └─ YES: Continue
|
||||
│
|
||||
└─ Show BookingConfirmPopup
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Error Handling (Current)
|
||||
|
||||
```
|
||||
fetchSlots() Error:
|
||||
├─ console.error('Fetch slots failed:', err)
|
||||
├─ slots.value = []
|
||||
└─ UI shows: "当日暂无可约时段" (empty state)
|
||||
❌ User can't distinguish network error from no slots
|
||||
|
||||
createBooking() Error:
|
||||
├─ uni.showToast({ title: message, icon: 'none' })
|
||||
└─ UI shows: Error toast (Good ✓)
|
||||
|
||||
cancelBooking() Error:
|
||||
├─ uni.showToast({ title: message, icon: 'none' })
|
||||
└─ UI shows: Error toast (Good ✓)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧮 Computed Values & Reactivity
|
||||
|
||||
```
|
||||
PAGE LEVEL:
|
||||
scrollHeight = computed(() => {
|
||||
// Recalc when window size changes
|
||||
// = windowHeight - headerHeight - tabbarHeight
|
||||
})
|
||||
|
||||
filteredSlots = computed(() => {
|
||||
// Depends on: slots, selectedPeriod
|
||||
// Recalc when either changes
|
||||
// Filters by TIME_PERIODS[selectedPeriod].start/end
|
||||
})
|
||||
|
||||
COMPONENT LEVEL:
|
||||
SlotCard.capacityLabel = computed(() => {
|
||||
// Depends on: slot.status, slot.bookedCount, slot.capacity
|
||||
// Returns: "已关闭" | "X/Y 人"
|
||||
})
|
||||
|
||||
SlotCard.capacityClass = computed(() => {
|
||||
// Depends on: slot.status, slot.bookedCount, slot.capacity
|
||||
// Returns: "cap-open" | "cap-almost" | "cap-full" | "cap-closed"
|
||||
})
|
||||
|
||||
BookingConfirmPopup.selectedMembership = computed(() => {
|
||||
// Depends on: selectedMembershipId, memberships
|
||||
// Returns: Found membership or null
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Data Transformations
|
||||
|
||||
```
|
||||
Raw API Response
|
||||
└─ TimeSlot {
|
||||
date: "2026-04-05",
|
||||
startTime: "09:00",
|
||||
endTime: "10:00",
|
||||
...
|
||||
}
|
||||
|
||||
STORE (bookingStore.slots)
|
||||
└─ TimeSlotWithBookingStatus extends TimeSlot {
|
||||
isBookedByMe: boolean,
|
||||
myBookingId: string | null
|
||||
}
|
||||
|
||||
DISPLAY (SlotCard)
|
||||
├─ capacityLabel: "0/1 人" | "已关闭"
|
||||
├─ capacityClass: "cap-open" | "cap-almost" | "cap-full" | "cap-closed"
|
||||
├─ Button state: "可预约" | "已预约" | "已约满" | "已关闭"
|
||||
└─ Time display: "09:00 - 10:00" (slice first 5 chars)
|
||||
|
||||
BOOKING CREATION
|
||||
├─ Selected Slot ID
|
||||
├─ Selected Membership ID
|
||||
└─ POST /booking
|
||||
└─ Success: Slot updated with isBookedByMe: true
|
||||
```
|
||||
|
||||
428
EXPLORATION_SUMMARY.md
Normal file
428
EXPLORATION_SUMMARY.md
Normal file
@@ -0,0 +1,428 @@
|
||||
# 卡种管理 (Card Types Management) - Complete Exploration Summary
|
||||
|
||||
**Date**: 2026-04-05
|
||||
**Project**: MP-Pilates (WeChat Mini-Program for Pilates Studio Booking)
|
||||
**Focus**: Card types (卡种) admin feature
|
||||
|
||||
---
|
||||
|
||||
## 📦 What Was Explored
|
||||
|
||||
A comprehensive exploration of the **card types management system** across all three tiers of the application:
|
||||
- Frontend (Vue 3 + Uni-app)
|
||||
- Backend (NestJS)
|
||||
- Database (Prisma/MySQL)
|
||||
- Shared Types
|
||||
|
||||
### Total Files Analyzed: **13 files, ~1,800 lines of code**
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation Generated
|
||||
|
||||
Three comprehensive documentation files have been created in the project root:
|
||||
|
||||
### 1. **CARD_TYPES_ANALYSIS.md** (Complete Technical Guide)
|
||||
- **Sections**: 11 major sections
|
||||
- **Content**:
|
||||
- Database schema details
|
||||
- Shared types and DTOs
|
||||
- Server-side implementation (controller, service, DTOs)
|
||||
- Frontend admin page structure
|
||||
- Admin store (Pinia) implementation
|
||||
- Complete workflow flows
|
||||
- API communication details
|
||||
- Price handling
|
||||
- Card type categories
|
||||
- Field requirements & validation table
|
||||
- **Detailed bug analysis**: Edit popup closes immediately
|
||||
|
||||
### 2. **CARD_TYPES_FLOW_DIAGRAM.txt** (Visual Architecture)
|
||||
- **Content**:
|
||||
- Database tier diagram (CardType model, enums, soft delete)
|
||||
- API tier diagram (endpoints, validators, DTOs)
|
||||
- Shared types tier
|
||||
- Frontend tier (page structure, store, components)
|
||||
- Complete operation flows (Add, Edit, Toggle, Delete)
|
||||
- **Bug analysis with solutions** (3 solution options)
|
||||
|
||||
### 3. **CARD_TYPES_QUICK_REFERENCE.md** (Quick Lookup)
|
||||
- **Sections**: 13 quick-reference sections
|
||||
- **Content**:
|
||||
- File quick links with line numbers
|
||||
- Key data model
|
||||
- API endpoints
|
||||
- DTOs & validation rules
|
||||
- UI components
|
||||
- Form fields
|
||||
- Operations guide
|
||||
- React refs & state
|
||||
- Admin store methods
|
||||
- Bug explanation and solutions
|
||||
- Price handling notes
|
||||
- Testing checklist
|
||||
- Card type categories
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Findings
|
||||
|
||||
### Data Structure
|
||||
```
|
||||
CardType
|
||||
├── id (UUID)
|
||||
├── name (卡种名称)
|
||||
├── type (TIMES | DURATION | TRIAL)
|
||||
├── totalTimes (次卡的次数)
|
||||
├── durationDays (有效天数)
|
||||
├── price (现价，单位：分)
|
||||
├── originalPrice (原价，可选)
|
||||
├── description (描述)
|
||||
├── isActive (上架状态)
|
||||
├── sortOrder (显示顺序)
|
||||
└── timestamps
|
||||
```
|
||||
|
||||
### Three Card Type Categories
|
||||
1. **次卡 (TIMES)**: Class count-based (e.g., 10 classes)
|
||||
2. **月卡 (DURATION)**: Time period-based (e.g., 30 days)
|
||||
3. **体验卡 (TRIAL)**: Trial cards
|
||||
|
||||
### Core Operations
|
||||
- ✅ **Create**: Add new card types
|
||||
- ✅ **Read**: View all cards (admin) or active cards (public)
|
||||
- ✅ **Update**: Edit card details or toggle status
|
||||
- ✅ **Delete**: Soft delete (sets isActive=false)
|
||||
|
||||
### API Endpoints
|
||||
```
|
||||
GET /membership/card-types (public)
|
||||
GET /admin/card-types (admin only)
|
||||
POST /admin/card-types (admin only)
|
||||
PUT /admin/card-types/:id (admin only)
|
||||
DELETE /admin/card-types/:id (admin only)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Critical Bug Identified
|
||||
|
||||
### **Edit Modal Closes Immediately on Tap**
|
||||
|
||||
**Symptom**: When user taps the [编辑] button, the edit form modal appears and then instantly closes.
|
||||
|
||||
**Root Cause**: Event propagation issue
|
||||
- User taps [编辑] button
|
||||
- `openEdit()` sets `showModal = true`
|
||||
- Modal renders in the same event tick
|
||||
- Tap event propagates to `modal-mask` element
|
||||
- `@tap.self="closeModal"` fires immediately
|
||||
- Modal closes
|
||||
|
||||
**Current Code (Buggy)**:
|
||||
```vue
|
||||
<view class="ct-action-btn edit-btn" @tap="openEdit(ct)">
|
||||
<text>编辑</text>
|
||||
</view>
|
||||
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
<!-- form -->
|
||||
</view>
|
||||
```
|
||||
|
||||
**Recommended Fix (Option 1 - Simplest)**:
|
||||
```vue
|
||||
<view class="ct-action-btn edit-btn" @tap.stop="openEdit(ct)">
|
||||
<!-- Add .stop modifier to stop event propagation -->
|
||||
</view>
|
||||
```
|
||||
|
||||
**Alternative Fixes**: See CARD_TYPES_QUICK_REFERENCE.md for 2 additional solutions using nextTick() or state guards.
|
||||
|
||||
---
|
||||
|
||||
## 📂 File Inventory
|
||||
|
||||
### Frontend Files
|
||||
| File | Purpose | Lines |
|
||||
|------|---------|-------|
|
||||
| `packages/app/src/pages/admin/card-types.vue` | Admin page (ADD, EDIT, DELETE, TOGGLE) | 607 |
|
||||
| `packages/app/src/stores/admin.ts` | Pinia store (state + API calls) | 198 |
|
||||
| `packages/app/src/utils/request.ts` | HTTP request utilities | 80 |
|
||||
| `packages/app/src/utils/format.ts` | Price & date formatting | 46 |
|
||||
|
||||
### Backend Files
|
||||
| File | Purpose | Lines |
|
||||
|------|---------|-------|
|
||||
| `packages/server/src/membership/membership.controller.ts` | API endpoints | 68 |
|
||||
| `packages/server/src/membership/membership.service.ts` | Business logic | 173 |
|
||||
| `packages/server/src/membership/dto/create-card-type.dto.ts` | Create validation | 45 |
|
||||
| `packages/server/src/membership/dto/update-card-type.dto.ts` | Update validation | 49 |
|
||||
|
||||
### Database Files
|
||||
| File | Purpose | Lines |
|
||||
|------|---------|-------|
|
||||
| `packages/server/prisma/schema.prisma` | DB schema definition | 205 |
|
||||
|
||||
### Shared/Types Files
|
||||
| File | Purpose | Lines |
|
||||
|------|---------|-------|
|
||||
| `packages/shared/src/types/card-type.ts` | CardType, CreateCardTypeDto, UpdateCardTypeDto | 39 |
|
||||
| `packages/shared/src/enums.ts` | CardTypeCategory enum | 47 |
|
||||
| `packages/shared/src/types/api.ts` | API response types | 20 |
|
||||
| `packages/shared/src/types/membership.ts` | Membership types | 19 |
|
||||
|
||||
**Total**: 13 files, ~1,800 lines analyzed
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Complete Workflow
|
||||
|
||||
### Adding a New Card Type
|
||||
```
|
||||
User → [＋ 新增卡种] → openAdd()
|
||||
↓
|
||||
Modal appears with empty form
|
||||
User fills: name, type, price, durationDays
|
||||
↓
|
||||
[确认] → submitForm()
|
||||
↓
|
||||
Validate inputs → Build payload → adminStore.createCardType()
|
||||
↓
|
||||
POST /admin/card-types → Backend creates card
|
||||
↓
|
||||
Refetch list → Modal closes → Page updates
|
||||
```
|
||||
|
||||
### Editing a Card Type
|
||||
```
|
||||
User → [编辑] on card → openEdit(card)
|
||||
↓
|
||||
Modal appears with card data
|
||||
User edifies fields
|
||||
↓
|
||||
[确认] → submitForm()
|
||||
↓
|
||||
Validate inputs → Build payload → adminStore.updateCardType(id, payload)
|
||||
↓
|
||||
PUT /admin/card-types/:id → Backend updates card
|
||||
↓
|
||||
Refetch list → Modal closes → Page updates
|
||||
```
|
||||
|
||||
### Toggling Status (上架/下架)
|
||||
```
|
||||
User → [上架/下架] button → toggleActive(card)
|
||||
↓
|
||||
adminStore.updateCardType(id, { isActive: !current })
|
||||
↓
|
||||
PUT /admin/card-types/:id → Backend toggles isActive
|
||||
↓
|
||||
Refetch list → Card UI updates (opacity, status tag, button text)
|
||||
```
|
||||
|
||||
### Deleting a Card Type
|
||||
```
|
||||
User → [删除] button → confirmDelete(card)
|
||||
↓
|
||||
Confirmation dialog appears
|
||||
User confirms
|
||||
↓
|
||||
adminStore.deleteCardType(id)
|
||||
↓
|
||||
DELETE /admin/card-types/:id → Backend soft-deletes (isActive=false)
|
||||
↓
|
||||
Refetch list → Page updates
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💾 Database Details
|
||||
|
||||
### CardType Model
|
||||
- **Storage**: MySQL table `card_types`
|
||||
- **Primary Key**: UUID
|
||||
- **Important Field**: `isActive` (boolean, default: true)
|
||||
- **Delete Strategy**: Soft delete (set isActive=false, not actually removed)
|
||||
- **Relationships**:
|
||||
- One-to-many with Membership
|
||||
- One-to-many with Order
|
||||
|
||||
### Indexes
|
||||
- `isActive` (for filtering active cards)
|
||||
- `sortOrder` (for ordering)
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI/UX Details
|
||||
|
||||
### Page Layout
|
||||
```
|
||||
┌─ Toolbar ─────────────┐
|
||||
│ Count + Add button │
|
||||
├──────────────────────┤
|
||||
│ Loading skeleton │ (while loading)
|
||||
├──────────────────────┤
|
||||
│ Card List │
|
||||
├──────────────────────┤
|
||||
│ Modal (Add/Edit) │ (if showModal=true)
|
||||
└──────────────────────┘
|
||||
```
|
||||
|
||||
### Card Display
|
||||
- **Header**: Colored band (type-specific gradient)
|
||||
- **Status tag**: "销售中" or "已下架"
|
||||
- **Content**: Name, price, description, meta info
|
||||
- **Actions**: 3 buttons (编辑, 上架/下架, 删除)
|
||||
- **Inactive styling**: opacity: 0.6 when isActive=false
|
||||
|
||||
### Modal Form
|
||||
```
|
||||
Title: 新增卡种 / 编辑卡种
|
||||
Fields:
|
||||
- 卡种名称 (text input)
|
||||
- 类型 (picker)
|
||||
- 现价 (digit)
|
||||
- 原价 (digit, optional)
|
||||
- 次数 (number, optional)
|
||||
- 有效天数 (number, default: 90)
|
||||
- 排序值 (number, default: 0)
|
||||
- 描述 (textarea, optional)
|
||||
Buttons: [取消] [确认/保存中...]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Security & Auth
|
||||
|
||||
### Authentication
|
||||
- All admin endpoints require JWT Bearer token
|
||||
- Token stored in localStorage and included in all requests
|
||||
|
||||
### Authorization
|
||||
- Admin endpoints require `UserRole.ADMIN`
|
||||
- Enforced via RolesGuard on backend
|
||||
|
||||
### Public Endpoints
|
||||
- GET /membership/card-types (no auth needed)
|
||||
- Returns only `isActive=true` cards
|
||||
|
||||
---
|
||||
|
||||
## 📊 Validation Rules
|
||||
|
||||
### On Create
|
||||
| Field | Required | Validation |
|
||||
|-------|----------|-----------|
|
||||
| name | ✓ | Non-empty string |
|
||||
| type | ✓ | One of: TIMES, DURATION, TRIAL |
|
||||
| durationDays | ✓ | Int, Min: 1 |
|
||||
| price | ✓ | Number, Min: 0 |
|
||||
| totalTimes | - | Int, Min: 1 (optional) |
|
||||
| originalPrice | - | Number, Min: 0 (optional) |
|
||||
| description | - | String, Max: 200 (optional) |
|
||||
| sortOrder | - | Int, Min: 0 (optional, default: 0) |
|
||||
|
||||
### On Update
|
||||
- All fields optional (partial update)
|
||||
- Can include `isActive` for toggling status
|
||||
|
||||
---
|
||||
|
||||
## 💡 Price Handling
|
||||
|
||||
**Critical**: Prices are stored as **integers (cents)**, not floats
|
||||
- In DB: `98000` (cents)
|
||||
- In API: `{ price: 98000 }`
|
||||
- Display: `¥980.00` (using formatPrice utility)
|
||||
|
||||
**Conversion**:
|
||||
```typescript
|
||||
// Display
|
||||
formatPrice(cents: number): string {
|
||||
return (cents / 100).toFixed(2)
|
||||
}
|
||||
|
||||
// Store (frontend → backend)
|
||||
// User inputs: "980"
|
||||
// Send as: 98000 (no need to convert, prices are already in cents in the UI)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Recommendations
|
||||
|
||||
### Unit Tests Needed
|
||||
- [ ] CardType service methods (create, update, delete)
|
||||
- [ ] Card type validation (DTO validation)
|
||||
- [ ] Price formatting utilities
|
||||
|
||||
### Integration Tests Needed
|
||||
- [ ] Admin endpoints require ADMIN role
|
||||
- [ ] Public endpoint returns only active cards
|
||||
- [ ] Soft delete sets isActive=false
|
||||
|
||||
### E2E Tests Needed (Frontend)
|
||||
- [ ] Create card flow
|
||||
- [ ] Edit card flow (including bug fix)
|
||||
- [ ] Toggle status flow
|
||||
- [ ] Delete card flow
|
||||
- [ ] Modal closes properly on submit
|
||||
- [ ] Modal closes on outside tap
|
||||
- [ ] Modal closes on cancel button
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps (If Implementing Bug Fix)
|
||||
|
||||
1. **Locate file**: `packages/app/src/pages/admin/card-types.vue`
|
||||
2. **Find**: Line 67 with `<view class="ct-action-btn edit-btn" @tap="openEdit(ct)">`
|
||||
3. **Change**: `@tap="openEdit(ct)"` → `@tap.stop="openEdit(ct)"`
|
||||
4. **Also check**: Lines 6 and 77 (other buttons that might have same issue)
|
||||
5. **Test**: Try editing a card - modal should stay open
|
||||
|
||||
---
|
||||
|
||||
## 📖 How to Use This Documentation
|
||||
|
||||
1. **Quick lookup**: Start with `CARD_TYPES_QUICK_REFERENCE.md`
|
||||
2. **Understanding architecture**: Read `CARD_TYPES_FLOW_DIAGRAM.txt`
|
||||
3. **Deep dive**: Consult `CARD_TYPES_ANALYSIS.md` for detailed information
|
||||
4. **Bug fix**: Find solution in Quick Reference "THE BUG" section
|
||||
|
||||
---
|
||||
|
||||
## 📝 Summary Statistics
|
||||
|
||||
| Metric | Value |
|
||||
|--------|-------|
|
||||
| Files Analyzed | 13 |
|
||||
| Total Lines of Code | ~1,800 |
|
||||
| Endpoints | 5 |
|
||||
| Card Type Categories | 3 |
|
||||
| Core Operations | 4 (CRUD) |
|
||||
| Bugs Identified | 1 |
|
||||
| Bug Severity | High (UX-breaking) |
|
||||
| Documentation Pages | 3 |
|
||||
| Recommended Solution | @tap.stop modifier |
|
||||
|
||||
---
|
||||
|
||||
## ✅ Exploration Complete
|
||||
|
||||
All files related to the card types management feature have been thoroughly reviewed, analyzed, and documented.
|
||||
|
||||
**Key Achievement**: Identified and documented the root cause of the edit popup bug, along with three solution approaches.
|
||||
|
||||
**Ready to**:
|
||||
- Implement bug fix
|
||||
- Build additional features
|
||||
- Optimize performance
|
||||
- Add tests
|
||||
- Deploy updates
|
||||
|
||||
---
|
||||
|
||||
**Generated**: 2026-04-05
|
||||
**Location**: `/Users/richard/Documents/code/pilates/mp-pilates/`
|
||||
|
||||
167
MODAL_EVENT_HANDLING_AUDIT.md
Normal file
167
MODAL_EVENT_HANDLING_AUDIT.md
Normal file
@@ -0,0 +1,167 @@
|
||||
# Modal Event Handling Audit
|
||||
|
||||
## Overview
|
||||
|
||||
This document provides a security and event-handling audit of all modals in the application to identify and prevent event propagation issues similar to the card-types bug.
|
||||
|
||||
## Audit Results
|
||||
|
||||
### ✅ FIXED: packages/app/src/pages/admin/card-types.vue
|
||||
|
||||
**Status**: FIXED in commit a85270e
|
||||
|
||||
**Issue**: Action buttons inside a list card were closing the modal immediately when clicked due to event propagation to parent modal-mask.
|
||||
|
||||
**Solution**: Added `.stop` modifier to all three action button tap handlers:
|
||||
- Edit button: `@tap.stop="openEdit(ct)"`
|
||||
- Toggle button: `@tap.stop="toggleActive(ct)"`
|
||||
- Delete button: `@tap.stop="confirmDelete(ct)"`
|
||||
|
||||
**Root Cause Pattern**:
|
||||
- List items contain action buttons
|
||||
- Action buttons are inside list cards
|
||||
- Modal-mask has `@tap.self="closeModal"`
|
||||
- Event from action button bubbles up through list card to modal-mask
|
||||
|
||||
---
|
||||
|
||||
### ✅ SAFE: packages/app/src/pages/admin/week-template.vue
|
||||
|
||||
**Status**: NO ACTION NEEDED
|
||||
|
||||
**Structure**:
|
||||
- Template list (lines 30-56) - separate from modal
|
||||
- Modal (lines 65+) - below the list
|
||||
- Event handlers on template action buttons cannot reach modal-mask
|
||||
|
||||
**Reasoning**: The action buttons for edit/delete/toggle are on items in the template list, which is spatially separated from the modal-mask. The events cannot propagate upward to reach the modal-mask since the modal is rendered separately below the list.
|
||||
|
||||
---
|
||||
|
||||
### ✅ SAFE: packages/app/src/pages/admin/members.vue
|
||||
|
||||
**Status**: NO ACTION NEEDED
|
||||
|
||||
**Structure**:
|
||||
- Members list uses `@tap="openDetail(m)"` on entire row element
|
||||
- Modal is triggered with delay to handle event properly
|
||||
- List items are separate from modal-mask
|
||||
|
||||
**Reasoning**: The entire member row has a single tap handler. The modal is opened as a detail view, not as an overlay that interferes with list item events. The architecture prevents event propagation issues.
|
||||
|
||||
---
|
||||
|
||||
### ✅ SAFE: components/BookingConfirmPopup.vue
|
||||
|
||||
**Status**: NO ACTION NEEDED (Special-case popup component)
|
||||
|
||||
**Structure**: Dedicated popup component with internal button handlers
|
||||
|
||||
---
|
||||
|
||||
## Event Propagation Risk Pattern
|
||||
|
||||
🚨 **RISK PATTERN** - High risk of event propagation issues:
|
||||
|
||||
```vue
|
||||
<!-- List of items with action buttons -->
|
||||
<view class="item-list">
|
||||
<view v-for="item in items" :key="item.id" class="item-card">
|
||||
<view class="item-actions">
|
||||
<view @tap="handleAction1(item)">Action 1</view>
|
||||
<view @tap="handleAction2(item)">Action 2</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Modal that appears on top -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
<view class="modal">...</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
When an action button is tapped, the event bubbles: action button → item card → item-list → modal-mask
|
||||
|
||||
**SOLUTION**: Add `.stop` modifier to prevent bubbling:
|
||||
```vue
|
||||
<view @tap.stop="handleAction1(item)">Action 1</view>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Preventive Measures
|
||||
|
||||
### 1. Code Review Checklist
|
||||
|
||||
When implementing modals with action buttons in lists:
|
||||
|
||||
- [ ] List items contain action buttons/clickable elements
|
||||
- [ ] Modal-mask has `@tap.self="closeModal"` handler
|
||||
- [ ] Check if tap events can bubble from buttons → modal-mask
|
||||
- [ ] Add `.stop` modifier if event propagation risk exists
|
||||
|
||||
### 2. Testing Strategy
|
||||
|
||||
For any modal with nearby action buttons:
|
||||
|
||||
```
|
||||
Test Scenario:
|
||||
1. Click/tap action button that opens modal
|
||||
2. Verify modal opens and stays open
|
||||
3. Verify you can interact with modal content
|
||||
4. Verify clicking outside modal (on mask) closes it
|
||||
5. Verify multiple rapid clicks on action buttons don't cause flicker
|
||||
```
|
||||
|
||||
### 3. Best Practices
|
||||
|
||||
```vue
|
||||
<!-- ✅ SAFE: Action button prevents event propagation -->
|
||||
<view @tap.stop="openModal(item)">Edit</view>
|
||||
|
||||
<!-- ❌ RISKY: Event can bubble to modal-mask -->
|
||||
<view @tap="openModal(item)">Edit</view>
|
||||
|
||||
<!-- ✅ ALTERNATIVE: Use .prevent for links/special handlers -->
|
||||
<view @tap.prevent="handleSpecial">Special</view>
|
||||
|
||||
<!-- ✅ ALTERNATIVE: Defer modal opening to next tick -->
|
||||
<script>
|
||||
async function openModal(item) {
|
||||
editTarget.value = item
|
||||
await nextTick()
|
||||
showModal.value = true
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
| File | Issue | Status | Solution |
|
||||
|------|-------|--------|----------|
|
||||
| card-types.vue | Event propagation | ✅ FIXED | Added `.stop` to 3 buttons |
|
||||
| week-template.vue | N/A - Separate structure | ✅ SAFE | No action needed |
|
||||
| members.vue | N/A - Single tap handler | ✅ SAFE | No action needed |
|
||||
|
||||
**Total Affected**: 1 file
|
||||
**Total Fixed**: 1 file
|
||||
**Total Safe**: 2 files
|
||||
|
||||
---
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
1. **Automated Testing**: Add E2E tests for modal interactions
|
||||
2. **ESLint Rule**: Consider adding custom rule to warn about `@tap` handlers on buttons inside modals
|
||||
3. **Documentation**: Add event handling guidelines to project style guide
|
||||
4. **Component Library**: Create a reusable `<Modal>` component with proper event handling built-in
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- Vue Event Handling: https://vuejs.org/guide/essentials/event-handling.html
|
||||
- Event Modifiers: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
|
||||
- Bug Fix Commit: a85270e - fix(admin): prevent edit modal from closing immediately on tap
|
||||
592
QUICK_REFERENCE.md
Normal file
592
QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,592 @@
|
||||
# Booking Page - Quick Reference & Code Snippets
|
||||
|
||||
## 🚀 Quick Start: Understanding the Flow
|
||||
|
||||
### Where Slots Come From
|
||||
```typescript
|
||||
// 1. Store calls API
|
||||
packages/app/src/stores/booking.ts:17-27
|
||||
async function fetchSlots(date: string) {
|
||||
loadingSlots.value = true
|
||||
try {
|
||||
// GET /time-slot/available?date=2026-04-05
|
||||
slots.value = await get<TimeSlotWithBookingStatus[]>(
|
||||
'/time-slot/available',
|
||||
{ date }
|
||||
)
|
||||
} catch (err) {
|
||||
console.error('Fetch slots failed:', err)
|
||||
slots.value = [] // ⚠️ Clears on error!
|
||||
} finally {
|
||||
loadingSlots.value = false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Where Time Periods Are Defined
|
||||
```typescript
|
||||
// packages/shared/src/constants.ts:11-15
|
||||
export const TIME_PERIODS = {
|
||||
MORNING: { label: '上午', start: '06:00', end: '12:00' },
|
||||
AFTERNOON: { label: '下午', start: '12:00', end: '18:00' },
|
||||
EVENING: { label: '晚上', start: '18:00', end: '22:00' },
|
||||
} as const
|
||||
```
|
||||
|
||||
### Where Filtering Happens
|
||||
```typescript
|
||||
// pages/booking/index.vue:94-103
|
||||
const filteredSlots = computed<TimeSlotWithBookingStatus[]>(() => {
|
||||
const slots = bookingStore.slots as TimeSlotWithBookingStatus[]
|
||||
if (!selectedPeriod.value) return [...slots]
|
||||
|
||||
const period = TIME_PERIODS[selectedPeriod.value]
|
||||
return slots.filter((slot) => {
|
||||
const t = slot.startTime // "09:00", "10:00", etc
|
||||
return t >= period.start && t < period.end
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### Slot Rendering
|
||||
```vue
|
||||
<!-- pages/booking/index.vue:34-42 -->
|
||||
<view v-else class="slot-list">
|
||||
<SlotCard
|
||||
v-for="slot in filteredSlots"
|
||||
:key="slot.id"
|
||||
:slot="slot"
|
||||
@book="onBookTap"
|
||||
@cancel="onCancelTap"
|
||||
/>
|
||||
</view>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Finding Specific Things
|
||||
|
||||
### Q: Where do the time slot types come from?
|
||||
**A:** `packages/shared/src/types/time-slot.ts`
|
||||
```typescript
|
||||
interface TimeSlotWithBookingStatus extends TimeSlot {
|
||||
readonly isBookedByMe: boolean // true if user booked it
|
||||
readonly myBookingId: string | null // needed for cancellation
|
||||
}
|
||||
|
||||
interface TimeSlot {
|
||||
readonly id: string // UUID
|
||||
readonly date: string // "2026-04-05"
|
||||
readonly startTime: string // "09:00"
|
||||
readonly endTime: string // "10:00"
|
||||
readonly capacity: number // 1 (for private lessons)
|
||||
readonly bookedCount: number // 0 or 1
|
||||
readonly status: TimeSlotStatus // OPEN|FULL|CLOSED
|
||||
readonly source: TimeSlotSource // TEMPLATE|MANUAL
|
||||
readonly templateId: string | null
|
||||
readonly createdAt: string
|
||||
readonly updatedAt: string
|
||||
}
|
||||
```
|
||||
|
||||
### Q: Where is the membership selection happening?
|
||||
**A:** `components/BookingConfirmPopup.vue:136-147`
|
||||
```typescript
|
||||
const selectedMembershipId = ref<string>('')
|
||||
|
||||
watch(
|
||||
[() => props.visible, () => props.memberships],
|
||||
([visible, memberships]) => {
|
||||
if (visible && memberships.length > 0) {
|
||||
selectedMembershipId.value = memberships[0].id // Auto-select first
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
```
|
||||
|
||||
### Q: Where are the button states determined?
|
||||
**A:** `components/SlotCard.vue:15-45`
|
||||
```vue
|
||||
<!-- OPEN + not booked by me -->
|
||||
<template v-if="slot.status === TimeSlotStatus.OPEN && !slot.isBookedByMe">
|
||||
<view class="btn btn-book" @tap.stop="emit('book', slot)">
|
||||
<text class="btn-text">可预约</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- OPEN + booked by me -->
|
||||
<template v-else-if="slot.status === TimeSlotStatus.OPEN && slot.isBookedByMe">
|
||||
<view class="booked-row">
|
||||
<view class="badge-booked">
|
||||
<text class="badge-text">已预约</text>
|
||||
</view>
|
||||
<view class="btn-cancel" @tap.stop="emit('cancel', slot)">
|
||||
<text class="btn-cancel-text">取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- FULL or CLOSED -->
|
||||
<template v-else>
|
||||
<view class="btn btn-disabled">
|
||||
<text class="btn-text">
|
||||
{{ slot.status === TimeSlotStatus.FULL ? '已约满' : '已关闭' }}
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Q: Where is the API request actually made?
|
||||
**A:** `utils/request.ts:22-59`
|
||||
```typescript
|
||||
export function request<T>(options: RequestOptions): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const token = uni.getStorageSync('token') as string
|
||||
|
||||
uni.request({
|
||||
url: `${BASE_URL}${options.url}`, // BASE_URL = http://localhost:3000/api
|
||||
method: options.method || 'GET',
|
||||
data: options.data,
|
||||
header: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...options.header,
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.statusCode === 401) {
|
||||
uni.removeStorageSync('token')
|
||||
uni.showToast({ title: '请重新登录', icon: 'none' })
|
||||
reject(new Error('Unauthorized'))
|
||||
return
|
||||
}
|
||||
if (res.statusCode >= 400) {
|
||||
const body = res.data as ApiResponse<unknown>
|
||||
reject(new Error(body?.message || `请求失败 (${res.statusCode})`))
|
||||
return
|
||||
}
|
||||
const body = res.data as ApiResponse<T>
|
||||
if (body.success) {
|
||||
resolve(body.data as T) // ← Extract data from ApiResponse
|
||||
} else {
|
||||
reject(new Error(body.message || '请求失败'))
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(new Error(err.errMsg || '网络请求失败'))
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Debugging Tips
|
||||
|
||||
### Tip 1: Check what's in the store
|
||||
```typescript
|
||||
// In browser console while in booking page:
|
||||
console.log('Slots:', JSON.stringify(uni.$u.pinia.state.value.booking.slots, null, 2))
|
||||
console.log('Selected period:', uni.$u.pinia.state.value.booking.selectedPeriod)
|
||||
```
|
||||
|
||||
### Tip 2: Log slot filtering
|
||||
```typescript
|
||||
// Add to pages/booking/index.vue filteredSlots computed:
|
||||
const filteredSlots = computed<TimeSlotWithBookingStatus[]>(() => {
|
||||
const slots = bookingStore.slots as TimeSlotWithBookingStatus[]
|
||||
if (!selectedPeriod.value) {
|
||||
console.log('No period filter, showing all slots:', slots.length)
|
||||
return [...slots]
|
||||
}
|
||||
|
||||
const period = TIME_PERIODS[selectedPeriod.value]
|
||||
console.log(`Filtering by ${selectedPeriod.value}:`, period)
|
||||
console.log('All slot times:', slots.map(s => s.startTime))
|
||||
|
||||
const filtered = slots.filter((slot) => {
|
||||
const t = slot.startTime
|
||||
const matches = t >= period.start && t < period.end
|
||||
if (!matches) console.log(`${t} not in [${period.start}, ${period.end})`)
|
||||
return matches
|
||||
})
|
||||
|
||||
console.log('Filtered result:', filtered.length)
|
||||
return filtered
|
||||
})
|
||||
```
|
||||
|
||||
### Tip 3: Verify API response
|
||||
```typescript
|
||||
// In stores/booking.ts fetchSlots():
|
||||
async function fetchSlots(date: string) {
|
||||
loadingSlots.value = true
|
||||
try {
|
||||
console.log('Fetching slots for date:', date)
|
||||
slots.value = await get<TimeSlotWithBookingStatus[]>(
|
||||
'/time-slot/available',
|
||||
{ date }
|
||||
)
|
||||
console.log('Received slots:', slots.value)
|
||||
console.log('Slot count:', slots.value.length)
|
||||
if (slots.value.length > 0) {
|
||||
console.log('First slot:', JSON.stringify(slots.value[0], null, 2))
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fetch slots failed:', err)
|
||||
slots.value = []
|
||||
} finally {
|
||||
loadingSlots.value = false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Tip 4: Check network requests
|
||||
```typescript
|
||||
// Open WeChat DevTools → Network tab
|
||||
// Look for GET request to /time-slot/available
|
||||
// Check:
|
||||
// ✓ URL has ?date=YYYY-MM-DD
|
||||
// ✓ Authorization header exists
|
||||
// ✓ Response status 200
|
||||
// ✓ Response body has "success": true
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ❌ Common Issues & Solutions
|
||||
|
||||
### Issue 1: Slots not loading
|
||||
**Symptoms:**
|
||||
- Page shows "当日暂无可约时段" (no slots)
|
||||
- No error message
|
||||
|
||||
**Check list:**
|
||||
```typescript
|
||||
// 1. Is API endpoint correct?
|
||||
// Check: /time-slot/available?date=2026-04-05
|
||||
// Should return TimeSlotWithBookingStatus[]
|
||||
|
||||
// 2. Is date format correct?
|
||||
// Page sends: formatDate(new Date()) → "2026-04-05"
|
||||
// API expects: "YYYY-MM-DD"
|
||||
console.log(formatDate(new Date())) // Should output: "2026-04-05"
|
||||
|
||||
// 3. Is authentication working?
|
||||
console.log('Token:', uni.getStorageSync('token'))
|
||||
|
||||
// 4. Check for errors in console
|
||||
// If fetchSlots fails, slots.value becomes []
|
||||
```
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
// In bookingStore.fetchSlots(), add error state:
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function fetchSlots(date: string) {
|
||||
loadingSlots.value = true
|
||||
error.value = null // Clear previous error
|
||||
try {
|
||||
slots.value = await get<TimeSlotWithBookingStatus[]>(
|
||||
'/time-slot/available',
|
||||
{ date }
|
||||
)
|
||||
} catch (err) {
|
||||
console.error('Fetch slots failed:', err)
|
||||
error.value = err instanceof Error ? err.message : '加载失败'
|
||||
slots.value = []
|
||||
} finally {
|
||||
loadingSlots.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Then in page template:
|
||||
<view v-if="error" class="error-wrap">
|
||||
<text>{{ error }}</text>
|
||||
<view @tap="loadSlots(selectedDate)">重试</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Issue 2: Time period filtering not working
|
||||
**Symptoms:**
|
||||
- Select "上午" (morning) but all slots still show
|
||||
- Or vice versa
|
||||
|
||||
**Check:**
|
||||
```typescript
|
||||
// 1. Verify TIME_PERIODS constant
|
||||
console.log('TIME_PERIODS:', TIME_PERIODS)
|
||||
|
||||
// 2. Check selectedPeriod value
|
||||
console.log('Selected period:', selectedPeriod.value)
|
||||
|
||||
// 3. Verify slot.startTime format
|
||||
// Should be "HH:MM" like "09:00", not "09:00:00"
|
||||
bookingStore.slots.forEach(slot => {
|
||||
console.log('Slot time:', slot.startTime, 'format ok?', /^\d{2}:\d{2}$/.test(slot.startTime))
|
||||
})
|
||||
|
||||
// 4. Test filtering manually
|
||||
const slot = bookingStore.slots[0]
|
||||
const period = TIME_PERIODS.MORNING
|
||||
console.log(`${slot.startTime} >= ${period.start}?`, slot.startTime >= period.start)
|
||||
console.log(`${slot.startTime} < ${period.end}?`, slot.startTime < period.end)
|
||||
```
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
// If time format is "09:00:00", slice it:
|
||||
const filteredSlots = computed<TimeSlotWithBookingStatus[]>(() => {
|
||||
const slots = bookingStore.slots as TimeSlotWithBookingStatus[]
|
||||
if (!selectedPeriod.value) return [...slots]
|
||||
|
||||
const period = TIME_PERIODS[selectedPeriod.value]
|
||||
return slots.filter((slot) => {
|
||||
// Ensure HH:MM format
|
||||
const t = slot.startTime.slice(0, 5) // "09:00:00" → "09:00"
|
||||
return t >= period.start && t < period.end
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### Issue 3: Booking button not responding
|
||||
**Symptoms:**
|
||||
- Click "可预约" but nothing happens
|
||||
- No modal appears
|
||||
|
||||
**Check:**
|
||||
```typescript
|
||||
// 1. Is slot.status correct?
|
||||
console.log('Slot status:', slot.status)
|
||||
// Should be "OPEN" to show book button
|
||||
|
||||
// 2. Is isBookedByMe false?
|
||||
console.log('Is booked by me?', slot.isBookedByMe)
|
||||
// Should be false to show book button
|
||||
|
||||
// 3. Is onBookTap being called?
|
||||
// Add to pages/booking/index.vue:
|
||||
async function onBookTap(slot: TimeSlotWithBookingStatus) {
|
||||
console.log('Book tapped for slot:', slot) // ← Should log
|
||||
|
||||
// Rest of code...
|
||||
}
|
||||
|
||||
// 4. Is userStore.loggedIn true?
|
||||
console.log('Logged in?', userStore.loggedIn)
|
||||
```
|
||||
|
||||
### Issue 4: Membership not showing in popup
|
||||
**Symptoms:**
|
||||
- Booking popup appears but no membership card shown
|
||||
- "暂无可用会员卡" displayed
|
||||
|
||||
**Check:**
|
||||
```typescript
|
||||
// 1. Are memberships loaded?
|
||||
console.log('Memberships:', userStore.memberships)
|
||||
|
||||
// 2. Are any memberships ACTIVE?
|
||||
console.log('Active memberships:', userStore.activeMemberships)
|
||||
console.log('Has valid membership?', userStore.hasValidMembership)
|
||||
|
||||
// 3. Are memberships passed to popup?
|
||||
// In pages/booking/index.vue:
|
||||
<BookingConfirmPopup
|
||||
:memberships="userStore.activeMemberships as MembershipWithCardType[]"
|
||||
...
|
||||
/>
|
||||
console.log('Popup passed memberships:', userStore.activeMemberships)
|
||||
```
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
// In onMounted:
|
||||
onMounted(async () => {
|
||||
if (userStore.loggedIn && userStore.activeMemberships.length === 0) {
|
||||
console.log('Fetching memberships...')
|
||||
try {
|
||||
await userStore.fetchMemberships()
|
||||
console.log('Memberships loaded:', userStore.activeMemberships)
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch memberships:', err)
|
||||
uni.showToast({ title: '加载会员卡失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
await loadSlots(selectedDate.value)
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Capacity Display Logic
|
||||
|
||||
### How Capacity Color is Determined
|
||||
```typescript
|
||||
// components/SlotCard.vue:69-81
|
||||
const capacityLabel = computed(() => {
|
||||
const { bookedCount, capacity, status } = props.slot
|
||||
if (status === TimeSlotStatus.CLOSED) return '已关闭'
|
||||
return `${bookedCount}/${capacity} 人`
|
||||
})
|
||||
|
||||
const capacityClass = computed(() => {
|
||||
const { bookedCount, capacity, status } = props.slot
|
||||
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'
|
||||
})
|
||||
|
||||
// Color mapping in styles:
|
||||
// cap-open: #f0faf3 bg, #4caf50 text (green) - <80% booked
|
||||
// cap-almost: #fff8ed bg, #f59e0b text (orange) - ≥80% booked
|
||||
// cap-full: #fef0f0 bg, #ef4444 text (red) - status: FULL
|
||||
// cap-closed: #f5f5f5 bg, #999 text (gray) - status: CLOSED
|
||||
```
|
||||
|
||||
### Example Calculations
|
||||
```typescript
|
||||
// Slot 1: capacity=1, bookedCount=0, status=OPEN
|
||||
// 0/1 人 in green badge (0% booked)
|
||||
|
||||
// Slot 2: capacity=1, bookedCount=1, status=OPEN
|
||||
// 1/1 人 in red badge (100% booked ≥ 80%)
|
||||
|
||||
// Slot 3: capacity=5, bookedCount=4, status=OPEN
|
||||
// 4/5 人 in orange badge (80% booked ≥ 80%)
|
||||
|
||||
// Slot 4: capacity=5, bookedCount=3, status=OPEN
|
||||
// 3/5 人 in green badge (60% booked < 80%)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔗 API Contract Summary
|
||||
|
||||
### GET /time-slot/available
|
||||
|
||||
**Request:**
|
||||
```
|
||||
GET /api/time-slot/available?date=2026-04-05
|
||||
Authorization: Bearer <token>
|
||||
```
|
||||
|
||||
**Response (200 OK):**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"data": [
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"date": "2026-04-05",
|
||||
"startTime": "09:00",
|
||||
"endTime": "10:00",
|
||||
"capacity": 1,
|
||||
"bookedCount": 0,
|
||||
"status": "OPEN",
|
||||
"source": "MANUAL",
|
||||
"templateId": null,
|
||||
"createdAt": "2026-04-01T10:00:00Z",
|
||||
"updatedAt": "2026-04-05T09:00:00Z",
|
||||
"isBookedByMe": false,
|
||||
"myBookingId": null
|
||||
}
|
||||
],
|
||||
"message": null
|
||||
}
|
||||
```
|
||||
|
||||
**Error (400):**
|
||||
```json
|
||||
{
|
||||
"success": false,
|
||||
"data": null,
|
||||
"message": "Invalid date format"
|
||||
}
|
||||
```
|
||||
|
||||
### POST /booking
|
||||
|
||||
**Request:**
|
||||
```json
|
||||
POST /api/booking
|
||||
{
|
||||
"timeSlotId": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"membershipId": "220e8400-e29b-41d4-a716-446655440111"
|
||||
}
|
||||
```
|
||||
|
||||
**Response (201):**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": "550e8400-e29b-41d4-a716-446655440222",
|
||||
"userId": "user-123",
|
||||
"timeSlotId": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"membershipId": "220e8400-e29b-41d4-a716-446655440111",
|
||||
"status": "CONFIRMED",
|
||||
"bookedAt": "2026-04-05T10:30:00Z",
|
||||
"courseDate": "2026-04-05",
|
||||
"courseTime": "09:00",
|
||||
"instructorName": "instructor name",
|
||||
"isCompleted": false
|
||||
},
|
||||
"message": null
|
||||
}
|
||||
```
|
||||
|
||||
### PUT /booking/:id/cancel
|
||||
|
||||
**Request:**
|
||||
```
|
||||
PUT /api/booking/550e8400-e29b-41d4-a716-446655440222/cancel
|
||||
```
|
||||
|
||||
**Response (200):**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": "550e8400-e29b-41d4-a716-446655440222",
|
||||
"status": "CANCELLED",
|
||||
"cancelledAt": "2026-04-05T10:35:00Z"
|
||||
},
|
||||
"message": null
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Next Steps for Debugging
|
||||
|
||||
1. **Verify API Endpoint**
|
||||
- Open DevTools → Network
|
||||
- Check `/time-slot/available?date=...` request
|
||||
- Confirm response has `"success": true`
|
||||
- Confirm data array is not empty
|
||||
|
||||
2. **Check Store State**
|
||||
- Add console.logs to bookingStore.fetchSlots()
|
||||
- Verify slots are set correctly
|
||||
- Check loadingSlots toggle
|
||||
|
||||
3. **Verify Computed Properties**
|
||||
- Log filteredSlots in component
|
||||
- Check if filtering logic works
|
||||
- Verify slot.startTime format
|
||||
|
||||
4. **Test User Interaction**
|
||||
- Click date item → verify onDateSelect fires
|
||||
- Click period tab → verify onPeriodChange fires
|
||||
- Click book button → verify onBookTap fires
|
||||
- Check modals appear
|
||||
|
||||
5. **Check Mobile-Specific Issues**
|
||||
- Test in WeChat DevTools
|
||||
- Check rpx calculations
|
||||
- Verify touch events work
|
||||
|
||||
244
SCHEDULING_DOCUMENTATION_INDEX.md
Normal file
244
SCHEDULING_DOCUMENTATION_INDEX.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# WeChat Mini-Program Admin Scheduling - Documentation Index
|
||||
|
||||
**Created**: 2026-04-05
|
||||
**Project**: mp-pilates (Pilates Studio Booking System)
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation Files
|
||||
|
||||
This exploration contains **3 comprehensive documents** about the admin scheduling/排课设置 system:
|
||||
|
||||
### 1. **ADMIN_SCHEDULING_EXPLORATION.md** (24 KB, 803 lines)
|
||||
**Purpose**: Complete deep-dive into the scheduling system
|
||||
|
||||
**Sections**:
|
||||
- Executive Summary
|
||||
- File Structure (frontend, backend, shared)
|
||||
- 4 Key Components (Admin Dashboard, Week Templates, Slot Adjustment, Admin Store)
|
||||
- Backend Architecture (Controllers, Services, Slot Generator)
|
||||
- Data Flow & User Journey
|
||||
- Constants & Utilities
|
||||
- Permission Model
|
||||
- Implementation Status
|
||||
- Edge Cases
|
||||
- UI Design Patterns
|
||||
- Deployment & Configuration
|
||||
|
||||
**Best for**: Understanding the complete architecture and how everything connects
|
||||
|
||||
---
|
||||
|
||||
### 2. **SCHEDULING_FLOW_DIAGRAM.md** (13 KB, 271 lines)
|
||||
**Purpose**: Visual flowcharts and architecture diagrams
|
||||
|
||||
**Sections**:
|
||||
- Component Architecture (visual tree)
|
||||
- Data Flow: Template → Slots (visual flowchart)
|
||||
- State Management breakdown
|
||||
- API Endpoints Summary
|
||||
- Entity Relationships (ER diagram)
|
||||
- Weekday Mapping (ISO vs JS conversion)
|
||||
- Timeline Example (realistic scenario)
|
||||
|
||||
**Best for**: Quick visual understanding of the flow and architecture
|
||||
|
||||
---
|
||||
|
||||
### 3. **SCHEDULING_QUICK_REFERENCE.md** (7.9 KB, 296 lines)
|
||||
**Purpose**: Quick lookup guide for developers
|
||||
|
||||
**Sections**:
|
||||
- Quick Links to Key Files (with line numbers)
|
||||
- The Flow in 30 Seconds
|
||||
- Core Entities (WeekTemplate, TimeSlot)
|
||||
- API Endpoints (with JSON examples)
|
||||
- UI State Management
|
||||
- Permissions & Auth
|
||||
- Important Constants
|
||||
- Common Gotchas (5 key points)
|
||||
- Usage Example (step-by-step)
|
||||
- Related Components
|
||||
- Scalability Notes
|
||||
|
||||
**Best for**: Developers jumping into the code for the first time
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Choose Your Path
|
||||
|
||||
### If you want to...
|
||||
|
||||
**Understand the big picture**
|
||||
→ Read: `SCHEDULING_FLOW_DIAGRAM.md`
|
||||
→ Then: `ADMIN_SCHEDULING_EXPLORATION.md` (section 2)
|
||||
|
||||
**Start coding immediately**
|
||||
→ Read: `SCHEDULING_QUICK_REFERENCE.md`
|
||||
→ Then: Jump to specific file links
|
||||
|
||||
**Debug a specific issue**
|
||||
→ Read: `SCHEDULING_QUICK_REFERENCE.md` (Common Gotchas)
|
||||
→ Then: Search in `ADMIN_SCHEDULING_EXPLORATION.md`
|
||||
|
||||
**Understand data flow**
|
||||
→ Read: `SCHEDULING_FLOW_DIAGRAM.md` (Data Flow section)
|
||||
→ Then: `ADMIN_SCHEDULING_EXPLORATION.md` (section 7: Data Flow)
|
||||
|
||||
---
|
||||
|
||||
## 🔑 Key Files by Role
|
||||
|
||||
### Frontend Developer
|
||||
**Must Read**:
|
||||
- `SCHEDULING_QUICK_REFERENCE.md` → UI State Management
|
||||
- `packages/app/src/pages/admin/week-template.vue` (500 lines)
|
||||
- `packages/app/src/pages/admin/slot-adjust.vue` (428 lines)
|
||||
- `packages/app/src/stores/admin.ts` (171 lines)
|
||||
|
||||
### Backend Developer
|
||||
**Must Read**:
|
||||
- `SCHEDULING_QUICK_REFERENCE.md` → API Endpoints
|
||||
- `packages/server/src/time-slot/time-slot.controller.ts`
|
||||
- `packages/server/src/time-slot/slot-generator.service.ts`
|
||||
- `packages/server/src/time-slot/time-slot.service.ts`
|
||||
|
||||
### Full-Stack Developer
|
||||
**Must Read**: All documentation files in order:
|
||||
1. `SCHEDULING_QUICK_REFERENCE.md` (5 min)
|
||||
2. `SCHEDULING_FLOW_DIAGRAM.md` (10 min)
|
||||
3. `ADMIN_SCHEDULING_EXPLORATION.md` (20 min)
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Learning Timeline
|
||||
|
||||
### Day 1: Orientation (30 minutes)
|
||||
- Read: `SCHEDULING_QUICK_REFERENCE.md` section "The Flow: In 30 Seconds"
|
||||
- Skim: `SCHEDULING_FLOW_DIAGRAM.md`
|
||||
|
||||
### Day 2: Deep Dive (1-2 hours)
|
||||
- Read: `SCHEDULING_FLOW_DIAGRAM.md` (entire)
|
||||
- Read: `ADMIN_SCHEDULING_EXPLORATION.md` (sections 1-3)
|
||||
|
||||
### Day 3: Implementation (ongoing)
|
||||
- Refer to: `SCHEDULING_QUICK_REFERENCE.md` as needed
|
||||
- Cross-reference: `ADMIN_SCHEDULING_EXPLORATION.md` sections 4-8
|
||||
- Check: Backend/Frontend specific sections
|
||||
|
||||
---
|
||||
|
||||
## 🔗 File Paths: Quick Lookup
|
||||
|
||||
| Component | Path | Lines |
|
||||
|-----------|------|-------|
|
||||
| Admin Dashboard | `packages/app/src/pages/admin/index.vue` | 177 |
|
||||
| **Week Templates** | `packages/app/src/pages/admin/week-template.vue` | 500 ⭐ |
|
||||
| Slot Adjustment | `packages/app/src/pages/admin/slot-adjust.vue` | 428 |
|
||||
| Admin Store | `packages/app/src/stores/admin.ts` | 171 |
|
||||
| API Controller | `packages/server/src/time-slot/time-slot.controller.ts` | 92 |
|
||||
| API Service | `packages/server/src/time-slot/time-slot.service.ts` | 142 |
|
||||
| Slot Generator | `packages/server/src/time-slot/slot-generator.service.ts` | 172 |
|
||||
| Types: Templates | `packages/shared/src/types/week-template.ts` | 19 |
|
||||
| Types: Slots | `packages/shared/src/types/time-slot.ts` | 30 |
|
||||
| Constants | `packages/shared/src/constants.ts` | 22 |
|
||||
| Utilities | `packages/app/src/utils/format.ts` | 47 |
|
||||
|
||||
⭐ = Main scheduling component (排课设置)
|
||||
|
||||
---
|
||||
|
||||
## 📊 System Overview
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ ADMIN SCHEDULING SYSTEM │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Frontend (Vue 3 + TypeScript) │
|
||||
│ ├─ week-template.vue (templates CRUD) │
|
||||
│ ├─ slot-adjust.vue (manual operations) │
|
||||
│ └─ admin.ts (Pinia store) │
|
||||
│ │
|
||||
│ Backend (NestJS + Prisma) │
|
||||
│ ├─ time-slot.controller.ts (API routes) │
|
||||
│ ├─ time-slot.service.ts (business logic) │
|
||||
│ └─ slot-generator.service.ts (auto-generation) │
|
||||
│ │
|
||||
│ Database (PostgreSQL/MySQL) │
|
||||
│ ├─ WeekTemplate (recurring schedule rules) │
|
||||
│ ├─ TimeSlot (actual bookable slots) │
|
||||
│ └─ Booking (user reservations) │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start Checklist
|
||||
|
||||
- [ ] Read `SCHEDULING_QUICK_REFERENCE.md` (5 min)
|
||||
- [ ] Skim `SCHEDULING_FLOW_DIAGRAM.md` (5 min)
|
||||
- [ ] Open `packages/app/src/pages/admin/week-template.vue`
|
||||
- [ ] Open `packages/server/src/time-slot/slot-generator.service.ts`
|
||||
- [ ] Bookmark this index file for reference
|
||||
- [ ] Ask questions about specific sections in the docs
|
||||
|
||||
---
|
||||
|
||||
## 📝 Terms & Definitions
|
||||
|
||||
| Term | Definition |
|
||||
|------|-----------|
|
||||
| **WeekTemplate** | Recurring schedule rule (e.g., "every Monday 9-10 AM") |
|
||||
| **TimeSlot** | Actual bookable time (e.g., "Monday, April 6, 9-10 AM") |
|
||||
| **排课设置** | Schedule setup (admin template management) |
|
||||
| **临时调整** | Temporary adjustments (manual slot operations) |
|
||||
| **isDirty** | Flag indicating unsaved changes |
|
||||
| **Atomic** | All-or-nothing database transaction |
|
||||
| **skipDuplicates** | Prisma option to ignore duplicate records on batch insert |
|
||||
| **ISO Weekday** | 1=Monday, 2=Tuesday, ..., 7=Sunday |
|
||||
|
||||
---
|
||||
|
||||
## 🆘 Getting Help
|
||||
|
||||
### Question Type → Documentation
|
||||
|
||||
**"How does admin add a new class?"**
|
||||
→ `SCHEDULING_QUICK_REFERENCE.md` → Usage Example
|
||||
|
||||
**"What API endpoints exist?"**
|
||||
→ `SCHEDULING_QUICK_REFERENCE.md` → API Endpoints
|
||||
→ OR `ADMIN_SCHEDULING_EXPLORATION.md` → Backend Architecture
|
||||
|
||||
**"How do templates become slots?"**
|
||||
→ `SCHEDULING_FLOW_DIAGRAM.md` → Data Flow section
|
||||
|
||||
**"What database schema?"**
|
||||
→ `SCHEDULING_QUICK_REFERENCE.md` → Core Entities
|
||||
→ OR `SCHEDULING_FLOW_DIAGRAM.md` → Entity Relationships
|
||||
|
||||
**"Where does X file?"**
|
||||
→ `SCHEDULING_QUICK_REFERENCE.md` → File Paths lookup table
|
||||
|
||||
---
|
||||
|
||||
## ✅ Verification Checklist
|
||||
|
||||
- [x] All 3 documentation files created
|
||||
- [x] 803 + 271 + 296 = 1,370 lines of documentation
|
||||
- [x] Complete file paths documented
|
||||
- [x] API endpoints listed with examples
|
||||
- [x] Data flow diagrams included
|
||||
- [x] Common gotchas documented
|
||||
- [x] Usage examples provided
|
||||
- [x] Scalability notes included
|
||||
- [x] Permission model explained
|
||||
- [x] Timezone handling noted
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2026-04-05
|
||||
**Status**: Complete and ready for reference
|
||||
|
||||
271
SCHEDULING_FLOW_DIAGRAM.md
Normal file
271
SCHEDULING_FLOW_DIAGRAM.md
Normal file
@@ -0,0 +1,271 @@
|
||||
# Admin Scheduling Flow Diagram
|
||||
|
||||
## Component Architecture
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ Admin Dashboard │
|
||||
│ (pages/admin/index.vue) │
|
||||
│ │
|
||||
│ 📅 排课设置 🔧 临时调整 👥 会员 📋 订单 💳 卡 🏢 工作室
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
│
|
||||
└─► 📅 排课设置 (Week Template)
|
||||
└─────────────────────────────────────────┐
|
||||
│ pages/admin/week-template.vue │
|
||||
│ ================================ │
|
||||
│ │
|
||||
│ 1. Fetch Templates (onMounted) │
|
||||
│ └─ GET /admin/week-template │
|
||||
│ │
|
||||
│ 2. Display grouped by day (Mon-Sun) │
|
||||
│ │
|
||||
│ 3. Add/Edit/Delete/Toggle locally │
|
||||
│ └─ isDirty flag = true │
|
||||
│ │
|
||||
│ 4. Save All Changes (bottom bar) │
|
||||
│ └─ PUT /admin/week-template │
|
||||
│ (Full template array) │
|
||||
│ │
|
||||
│ 5. Backend transaction: │
|
||||
│ - DELETE all templates │
|
||||
│ - CREATE new templates │
|
||||
└────────────────────────────────────────┘
|
||||
|
||||
└─► 🔧 临时调整 (Slot Adjustment - 3 Tabs)
|
||||
└─────────────────────────────────────────┐
|
||||
│ pages/admin/slot-adjust.vue │
|
||||
│ ================================ │
|
||||
│ │
|
||||
│ TAB 0: 新增时段 (Add Manual Slot) │
|
||||
│ ├─ Date picker │
|
||||
│ ├─ Time pickers │
|
||||
│ ├─ Capacity input │
|
||||
│ └─ POST /admin/time-slot/manual │
|
||||
│ └─ Creates slot with source=MANUAL │
|
||||
│ │
|
||||
│ TAB 1: 关闭时段 (Close Slots) │
|
||||
│ ├─ Date picker │
|
||||
│ ├─ Fetch slots for date │
|
||||
│ │ └─ GET /admin/time-slots?date=XXX │
|
||||
│ ├─ Display with status badges │
|
||||
│ │ (OPEN/FULL/CLOSED) │
|
||||
│ └─ PUT /admin/time-slot/:id/close │
|
||||
│ │
|
||||
│ TAB 2: 批量生成 (Batch Generate) │
|
||||
│ ├─ Start/end date pickers │
|
||||
│ ├─ POST /admin/generate-slots │
|
||||
│ └─ Backend: │
|
||||
│ 1. Fetch active WeekTemplates │
|
||||
│ 2. For each day in range: │
|
||||
│ - Get ISO weekday (1-7) │
|
||||
│ - Find matching templates │
|
||||
│ - Create TimeSlot records │
|
||||
│ 3. Returns { count: N } │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Data Flow: Template → Slots
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ ADMIN TEMPLATE SETUP │
|
||||
│ (weeks/admin/week-template.vue) │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌───────────────────────────────────┐
|
||||
│ Admin configures templates: │
|
||||
│ │
|
||||
│ 周一: 09:00-10:00 (10 ppl) │
|
||||
│ 周一: 18:00-19:00 (8 ppl) │
|
||||
│ 周三: 10:00-11:00 (12 ppl) │
|
||||
│ 周五: 18:00-20:00 (15 ppl) │
|
||||
└───────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌───────────────────────────────────┐
|
||||
│ PUT /admin/week-template │
|
||||
│ (All templates replaced) │
|
||||
└───────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────┐
|
||||
│ Backend: Delete all, Create new (atomic) │
|
||||
└────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────┐
|
||||
│ Scheduler (nightly cron or manual trigger)│
|
||||
│ POST /admin/generate-slots (14 days) │
|
||||
└────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────┐
|
||||
│ SlotGeneratorService.generateSlots() │
|
||||
│ │
|
||||
│ For each active template: │
|
||||
│ For date in next 14 days: │
|
||||
│ If template.dayOfWeek == date.dayOfWeek:
|
||||
│ CREATE TimeSlot { │
|
||||
│ date, startTime, endTime, │
|
||||
│ capacity, source=TEMPLATE, │
|
||||
│ templateId │
|
||||
│ } │
|
||||
└────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────┐
|
||||
│ GENERATED TIME SLOTS │
|
||||
│ │
|
||||
│ 2026-04-06 (Mon): │
|
||||
│ 09:00-10:00 (10 ppl, OPEN) │
|
||||
│ 18:00-19:00 (8 ppl, OPEN) │
|
||||
│ │
|
||||
│ 2026-04-08 (Wed): │
|
||||
│ 10:00-11:00 (12 ppl, OPEN) │
|
||||
│ │
|
||||
│ 2026-04-11 (Fri): │
|
||||
│ 18:00-20:00 (15 ppl, OPEN) │
|
||||
│ ... (more dates) │
|
||||
└────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────┐
|
||||
│ Members can book available slots │
|
||||
│ GET /time-slot/available?date=YYYY-MM-DD
|
||||
└────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
### Component State (week-template.vue)
|
||||
```typescript
|
||||
templates: LocalTemplate[] ◄─ Main data array
|
||||
loading: boolean ◄─ Fetch state
|
||||
saving: boolean ◄─ Save state
|
||||
isDirty: boolean ◄─ "Save bar" trigger
|
||||
showModal: boolean ◄─ Modal visibility
|
||||
editTarget: LocalTemplate | null ◄─ Which template is being edited
|
||||
form: { ◄─ Modal form data
|
||||
dayIdx: number
|
||||
startTime: string
|
||||
endTime: string
|
||||
capacityStr: string
|
||||
}
|
||||
grouped: Computed<Record<number, LocalTemplate[]>> ◄─ Grouped by dayOfWeek
|
||||
```
|
||||
|
||||
### Store State (stores/admin.ts)
|
||||
```typescript
|
||||
weekTemplates: WeekTemplate[] ◄─ Cached from server
|
||||
cardTypes: CardType[]
|
||||
studioConfig: StudioConfig | null
|
||||
// ...other admin state
|
||||
```
|
||||
|
||||
## API Endpoints Summary
|
||||
|
||||
### Week Templates
|
||||
```
|
||||
GET /admin/week-template Fetch all templates
|
||||
PUT /admin/week-template Replace all templates
|
||||
```
|
||||
|
||||
### Time Slots
|
||||
```
|
||||
GET /admin/time-slots?date=YYYY-MM-DD Fetch slots for date
|
||||
POST /admin/time-slot/manual Create manual slot
|
||||
PUT /admin/time-slot/:id/close Close a slot
|
||||
POST /admin/generate-slots Generate slots from templates
|
||||
```
|
||||
|
||||
### Public Endpoints
|
||||
```
|
||||
GET /time-slot/available?date=YYYY-MM-DD For members
|
||||
GET /time-slot/:id For members
|
||||
```
|
||||
|
||||
## Entity Relationships
|
||||
|
||||
```
|
||||
┌─────────────────────┐
|
||||
│ WeekTemplate │
|
||||
├─────────────────────┤
|
||||
│ id │
|
||||
│ dayOfWeek (1-7) │
|
||||
│ startTime │
|
||||
│ endTime │
|
||||
│ capacity │
|
||||
│ isActive │
|
||||
└─────────────────────┘
|
||||
│ (1:N)
|
||||
│
|
||||
▼
|
||||
┌─────────────────────┐ ┌──────────────────┐
|
||||
│ TimeSlot │ │ Booking (M:1) │
|
||||
├─────────────────────┤ ├──────────────────┤
|
||||
│ id │◄─────│ timeSlotId │
|
||||
│ date │ │ userId │
|
||||
│ startTime │ │ status │
|
||||
│ endTime │ └──────────────────┘
|
||||
│ capacity │
|
||||
│ bookedCount │
|
||||
│ status │
|
||||
│ source (TEMPLATE/ │
|
||||
│ MANUAL) │
|
||||
│ templateId (FK) │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
## Weekday Mapping
|
||||
|
||||
### Frontend Picker (dayOptions)
|
||||
```
|
||||
Index 0: 周一 (Monday) ──► dayOfWeek = 1
|
||||
Index 1: 周二 (Tuesday) ──► dayOfWeek = 2
|
||||
Index 2: 周三 (Wednesday) ──► dayOfWeek = 3
|
||||
Index 3: 周四 (Thursday) ──► dayOfWeek = 4
|
||||
Index 4: 周五 (Friday) ──► dayOfWeek = 5
|
||||
Index 5: 周六 (Saturday) ──► dayOfWeek = 6
|
||||
Index 6: 周日 (Sunday) ──► dayOfWeek = 7
|
||||
```
|
||||
|
||||
### Backend Conversion (slot-generator.service.ts)
|
||||
```typescript
|
||||
JS getDay(): 0=Sun, 1=Mon, 2=Tue, ..., 6=Sat
|
||||
│
|
||||
▼ toIsoWeekday()
|
||||
│
|
||||
ISO weekday: 1=Mon, 2=Tue, ..., 7=Sun
|
||||
```
|
||||
|
||||
## Timeline Example
|
||||
|
||||
```
|
||||
TODAY: 2026-04-05 (Sunday)
|
||||
|
||||
Admin actions:
|
||||
1. Sets up weekly templates for Mon-Fri
|
||||
2. Taps "保存全部更改"
|
||||
3. PUT /admin/week-template sent
|
||||
|
||||
Backend scheduler (daily at midnight):
|
||||
4. Runs generateSlots(14)
|
||||
5. Tomorrow is 2026-04-06 (Monday)
|
||||
6. Generates slots for Apr 6-19 (next 14 days)
|
||||
7. Creates TimeSlots based on active templates:
|
||||
|
||||
Generated slots:
|
||||
2026-04-06 (Mon): 09:00-10:00, 18:00-19:00
|
||||
2026-04-07 (Tue): (none if no templates)
|
||||
2026-04-08 (Wed): 10:00-11:00
|
||||
2026-04-09 (Thu): (none if no templates)
|
||||
2026-04-10 (Fri): 18:00-20:00
|
||||
2026-04-11 (Sat): (none - weekend)
|
||||
2026-04-12 (Sun): (none - weekend)
|
||||
...repeats until 2026-04-19
|
||||
|
||||
Members can book from Apr 6 onwards
|
||||
```
|
||||
|
||||
296
SCHEDULING_QUICK_REFERENCE.md
Normal file
296
SCHEDULING_QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,296 @@
|
||||
# Admin Scheduling - Quick Reference Guide
|
||||
|
||||
## 🎯 Quick Links to Key Files
|
||||
|
||||
### Frontend Components
|
||||
| File | Lines | Purpose |
|
||||
|------|-------|---------|
|
||||
| `packages/app/src/pages/admin/index.vue` | 1-177 | Admin dashboard, 6 nav items |
|
||||
| `packages/app/src/pages/admin/week-template.vue` | 1-500 | **MAIN: Schedule template management** |
|
||||
| `packages/app/src/pages/admin/slot-adjust.vue` | 1-428 | 3 tabs: add/close/generate slots |
|
||||
| `packages/app/src/stores/admin.ts` | 1-171 | API calls (Pinia store) |
|
||||
|
||||
### Backend Services
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `packages/server/src/time-slot/time-slot.controller.ts` | API endpoints (/admin/*) |
|
||||
| `packages/server/src/time-slot/time-slot.service.ts` | Template & slot logic |
|
||||
| `packages/server/src/time-slot/slot-generator.service.ts` | Auto-generate slots from templates |
|
||||
| `packages/server/src/time-slot/dto/week-template.dto.ts` | Input validation |
|
||||
|
||||
### Shared Types & Constants
|
||||
| File | Exports |
|
||||
|------|---------|
|
||||
| `packages/shared/src/types/week-template.ts` | `WeekTemplate`, `WeekTemplateInput` |
|
||||
| `packages/shared/src/types/time-slot.ts` | `TimeSlot`, `CreateManualSlotDto` |
|
||||
| `packages/shared/src/constants.ts` | `WEEKDAY_LABELS`, `SLOT_GENERATION_DAYS`, etc. |
|
||||
|
||||
---
|
||||
|
||||
## 🔄 The Flow: In 30 Seconds
|
||||
|
||||
```
|
||||
Admin edits templates
|
||||
↓
|
||||
isDirty = true → Save bar appears
|
||||
↓
|
||||
Admin taps "保存全部更改"
|
||||
↓
|
||||
PUT /admin/week-template (full array)
|
||||
↓
|
||||
Backend: DELETE all, CREATE new (atomic)
|
||||
↓
|
||||
Scheduler triggers (nightly or manual)
|
||||
↓
|
||||
POST /admin/generate-slots
|
||||
↓
|
||||
SlotGeneratorService fetches active templates
|
||||
↓
|
||||
For each day (next 14 days):
|
||||
Match templates by ISO weekday
|
||||
Create TimeSlot records (source=TEMPLATE)
|
||||
↓
|
||||
Members see slots and can book
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Core Entities
|
||||
|
||||
### WeekTemplate (Database)
|
||||
```typescript
|
||||
id: string // UUID
|
||||
dayOfWeek: number // 1=Mon, 2=Tue, ..., 7=Sun
|
||||
startTime: string // "09:00"
|
||||
endTime: string // "10:00"
|
||||
capacity: number // Max bookings
|
||||
isActive: boolean // Enabled/disabled
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
```
|
||||
|
||||
### TimeSlot (Database)
|
||||
```typescript
|
||||
id: string
|
||||
date: string // YYYY-MM-DD
|
||||
startTime: string
|
||||
endTime: string
|
||||
capacity: number
|
||||
bookedCount: number // How many booked
|
||||
status: "OPEN" | "FULL" | "CLOSED"
|
||||
source: "TEMPLATE" | "MANUAL"
|
||||
templateId: string | null // Links to WeekTemplate
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 API Endpoints
|
||||
|
||||
### GET /admin/week-template
|
||||
Returns all templates (ordered by dayOfWeek ASC, startTime ASC)
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "uuid1",
|
||||
"dayOfWeek": 1,
|
||||
"startTime": "09:00",
|
||||
"endTime": "10:00",
|
||||
"capacity": 10,
|
||||
"isActive": true,
|
||||
"createdAt": "2026-04-05T00:00:00Z",
|
||||
"updatedAt": "2026-04-05T00:00:00Z"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### PUT /admin/week-template
|
||||
Replace all templates (atomic transaction)
|
||||
```json
|
||||
{
|
||||
"templates": [
|
||||
{ "dayOfWeek": 1, "startTime": "09:00", "endTime": "10:00", "capacity": 10, "isActive": true },
|
||||
{ "dayOfWeek": 1, "startTime": "18:00", "endTime": "19:00", "capacity": 8, "isActive": true },
|
||||
{ "dayOfWeek": 3, "startTime": "10:00", "endTime": "11:00", "capacity": 12, "isActive": false }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### POST /admin/time-slot/manual
|
||||
Create a one-off slot
|
||||
```json
|
||||
{
|
||||
"date": "2026-04-15",
|
||||
"startTime": "14:00",
|
||||
"endTime": "15:00",
|
||||
"capacity": 10
|
||||
}
|
||||
```
|
||||
|
||||
### PUT /admin/time-slot/:id/close
|
||||
Close a slot (changes status to CLOSED)
|
||||
|
||||
### POST /admin/generate-slots
|
||||
Generate slots for next 14 days from active templates
|
||||
Response: `{ "count": 28 }`
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI State Management
|
||||
|
||||
### week-template.vue Local State
|
||||
```typescript
|
||||
// Main data
|
||||
templates: LocalTemplate[] // All templates
|
||||
grouped: Computed<Record<number, LocalTemplate[]>> // By dayOfWeek
|
||||
|
||||
// UI states
|
||||
loading: boolean // Initial fetch
|
||||
saving: boolean // Save in progress
|
||||
isDirty: boolean // Show save bar?
|
||||
showModal: boolean // Show add/edit modal?
|
||||
editTarget: LocalTemplate | null // Editing which template?
|
||||
|
||||
// Modal form
|
||||
form: {
|
||||
dayIdx: number // 0-6 (picker index)
|
||||
startTime: string // "09:00"
|
||||
endTime: string // "10:00"
|
||||
capacityStr: string // User input as string
|
||||
}
|
||||
```
|
||||
|
||||
### Key Computed
|
||||
```typescript
|
||||
const grouped = computed(() => {
|
||||
// Groups templates by dayOfWeek for rendering
|
||||
// Sorts by day number ascending (1-7)
|
||||
// Returns: { 1: [...], 3: [...], 5: [...], ... }
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Permissions & Auth
|
||||
|
||||
All `/admin/*` endpoints require:
|
||||
1. Valid JWT token in `Authorization: Bearer <token>` header
|
||||
2. User role must be `UserRole.ADMIN`
|
||||
3. Guards: `@UseGuards(JwtAuthGuard, RolesGuard)`
|
||||
|
||||
---
|
||||
|
||||
## 🧮 Important Constants
|
||||
|
||||
From `packages/shared/src/constants.ts`:
|
||||
```typescript
|
||||
SLOT_GENERATION_DAYS = 14 // Generate 14 days ahead
|
||||
DEFAULT_SLOT_CAPACITY = 1 // Private lesson default
|
||||
DEFAULT_CANCEL_HOURS_LIMIT = 2 // Cancel up to 2 hours before
|
||||
WEEKDAY_LABELS = [
|
||||
'', // index 0 (unused)
|
||||
'周一', // index 1 → dayOfWeek 1 (Monday)
|
||||
'周二', // index 2 → dayOfWeek 2
|
||||
'周三', // ... etc
|
||||
'周四',
|
||||
'周五',
|
||||
'周六',
|
||||
'周日' // index 7 → dayOfWeek 7 (Sunday)
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Common Gotchas
|
||||
|
||||
### 1. dayOfWeek vs JS getDay()
|
||||
- **Frontend uses**: ISO weekday (1=Mon, 7=Sun)
|
||||
- **JS Date.getDay()**: 0=Sun, 6=Sat
|
||||
- **Backend converts**: `toIsoWeekday()` in slot-generator.service.ts
|
||||
|
||||
### 2. Template Replace (Not Merge)
|
||||
- `PUT /admin/week-template` **deletes all** and creates new
|
||||
- NOT a merge/patch operation
|
||||
- Frontend must send complete array
|
||||
|
||||
### 3. isDirty Flag
|
||||
- Tracks **any** change locally (add/edit/delete/toggle)
|
||||
- Used to show/hide save bar
|
||||
- Cleared after successful save
|
||||
|
||||
### 4. Timezone
|
||||
- All dates stored as UTC midnight: `setUTCHours(0,0,0,0)`
|
||||
- Frontend displays as local YYYY-MM-DD strings
|
||||
- May cause off-by-one on day boundaries
|
||||
|
||||
### 5. Slot Generation
|
||||
- Uses `skipDuplicates: true` in Prisma
|
||||
- Safe to re-run without creating duplicates
|
||||
- Assumes `date + startTime + endTime` is unique
|
||||
|
||||
---
|
||||
|
||||
## 💡 Usage Example: Add a Monday 9AM Class
|
||||
|
||||
**Frontend (week-template.vue)**:
|
||||
```typescript
|
||||
// User clicks "+ 新增时段"
|
||||
openAdd()
|
||||
form.value = { dayIdx: 0, startTime: '09:00', endTime: '10:00', capacityStr: '10' }
|
||||
showModal.value = true
|
||||
|
||||
// User confirms in modal
|
||||
submitForm()
|
||||
templates.value.push({
|
||||
_key: String(Date.now()),
|
||||
dayOfWeek: 1, // dayOptions[0].value = Monday
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
capacity: 10,
|
||||
isActive: true
|
||||
})
|
||||
isDirty.value = true // ← Save bar appears
|
||||
|
||||
// User taps "保存全部更改"
|
||||
handleSave()
|
||||
payload = templates.value.map(t => ({...}))
|
||||
await adminStore.saveWeekTemplates(payload)
|
||||
|
||||
// Backend creates transaction:
|
||||
// DELETE FROM week_template
|
||||
// INSERT INTO week_template (day_of_week, start_time, end_time, capacity, is_active)
|
||||
// VALUES (1, '09:00', '10:00', 10, true)
|
||||
// ... (all other templates)
|
||||
|
||||
// Frontend refetches and displays
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Related Components
|
||||
|
||||
- **Admin Members** (`pages/admin/members.vue`): Shows member list
|
||||
- **Admin Orders** (`pages/admin/orders.vue`): Shows order history
|
||||
- **Admin Card Types** (`pages/admin/card-types.vue`): Manage membership cards
|
||||
- **Admin Studio** (`pages/admin/studio.vue`): Studio info settings
|
||||
|
||||
---
|
||||
|
||||
## 📈 Scalability Notes
|
||||
|
||||
### Current Approach
|
||||
- Templates: Small dataset (typically < 50 records)
|
||||
- Slots: Generated in batches (14 days at a time)
|
||||
- Uses `skipDuplicates` to handle reruns safely
|
||||
|
||||
### Bottlenecks
|
||||
- Template replacement deletes ALL and creates NEW (atomic but slow with 1000s)
|
||||
- Slot generation is serial (could be parallelized)
|
||||
- No pagination for templates (assumes all fit in memory)
|
||||
|
||||
### Future Improvements
|
||||
- Batch template updates (don't replace all)
|
||||
- Pagination if templates > 100
|
||||
- Incremental slot generation (detect last generated date)
|
||||
|
||||
606
docs/TIME_SLOT_DIAGRAMS.md
Normal file
606
docs/TIME_SLOT_DIAGRAMS.md
Normal file
@@ -0,0 +1,606 @@
|
||||
# Time-Slot & Scheduling System - Architecture Diagrams
|
||||
|
||||
## 1. Data Model Relationships
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ WEEK TEMPLATE │
|
||||
│ │
|
||||
│ dayOfWeek (1-7, ISO standard) │
|
||||
│ startTime, endTime (e.g., "09:00", "10:00") │
|
||||
│ capacity (default 1) │
|
||||
│ isActive (can disable template) │
|
||||
│ │
|
||||
│ ↓ (auto-generates) │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ TIME SLOT │
|
||||
│ │
|
||||
│ date (calendar date, midnight UTC) │
|
||||
│ startTime, endTime (from template) │
|
||||
│ capacity (from template) │
|
||||
│ bookedCount (# of current bookings) │
|
||||
│ status (OPEN | FULL | CLOSED) │
|
||||
│ source (TEMPLATE | MANUAL) │
|
||||
│ templateId (reference to WeekTemplate) │
|
||||
│ │
|
||||
│ ↓ (has many) ↓ (belongs to) │
|
||||
│ └─────────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
↑ ↑
|
||||
│ │
|
||||
└────────────┬─────────────────────────
|
||||
│
|
||||
│ 1:1 booking
|
||||
│
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ BOOKING │
|
||||
│ │
|
||||
│ userId (FK to User) │
|
||||
│ timeSlotId (FK to TimeSlot) │
|
||||
│ membershipId (FK to Membership) │
|
||||
│ status (CONFIRMED | CANCELLED | COMPLETED | NO_SHOW) │
|
||||
│ cancelledAt (timestamp when cancelled) │
|
||||
│ │
|
||||
│ Constraints: │
|
||||
│ - Unique [userId, timeSlotId] (one booking per user per slot) │
|
||||
│ - ONE booking per TimeSlot per user │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
↑ ↑
|
||||
│ │
|
||||
└─────────────┬───────────┘
|
||||
│
|
||||
belongs to
|
||||
│
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ MEMBERSHIP │
|
||||
│ │
|
||||
│ userId (FK to User) │
|
||||
│ cardTypeId (FK to CardType) │
|
||||
│ remainingTimes (for TIMES/TRIAL card types) │
|
||||
│ expireDate (for DURATION card types) │
|
||||
│ status (ACTIVE | EXPIRED | USED_UP) │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Daily Scheduler Timeline
|
||||
|
||||
```
|
||||
00:00 ─────────────────────────────────────────────────
|
||||
│
|
||||
├─ [Midnight] - Time passes
|
||||
│
|
||||
├─ System running in background
|
||||
│
|
||||
├─ ... (various other operations)
|
||||
│
|
||||
02:00 ─────────────────────────────────────────────────
|
||||
│
|
||||
├─► 🟢 SLOT GENERATION
|
||||
│ SlotGeneratorService.generateSlots(14)
|
||||
│
|
||||
│ ├─ Query WeekTemplate (all isActive=true)
|
||||
│ ├─ For each day in [tomorrow, tomorrow+14):
|
||||
│ │ ├─ Get ISO weekday
|
||||
│ │ ├─ Find matching templates
|
||||
│ │ └─ Create TimeSlot entries
|
||||
│ ├─ Batch insert with skipDuplicates: true
|
||||
│ └─ Log: "Generated X new time slots"
|
||||
│
|
||||
02:30 ─────────────────────────────────────────────────
|
||||
│
|
||||
├─► 🟡 SLOT CLEANUP
|
||||
│ SlotGeneratorService.cleanupExpiredSlots()
|
||||
│
|
||||
│ ├─ Find all OPEN slots with date < TODAY
|
||||
│ ├─ Mark as CLOSED
|
||||
│ └─ Log: "Closed X expired time slots"
|
||||
│
|
||||
03:00 ─────────────────────────────────────────────────
|
||||
│
|
||||
├─► 🟠 MEMBERSHIP CHECK
|
||||
│ SlotGeneratorService.checkExpiredMemberships()
|
||||
│
|
||||
│ ├─ Update ACTIVE memberships with expireDate < NOW
|
||||
│ │ └─ Set status = EXPIRED
|
||||
│ ├─ Update ACTIVE memberships with remainingTimes = 0
|
||||
│ │ └─ Set status = USED_UP
|
||||
│ └─ Log: "Expired X by date, Y by sessions"
|
||||
│
|
||||
├─ ... (users awake, making bookings)
|
||||
│
|
||||
22:00 ─────────────────────────────────────────────────
|
||||
│
|
||||
├─► 🔴 BOOKING COMPLETION
|
||||
│ SlotGeneratorService.completeBookings()
|
||||
│
|
||||
│ ├─ Find CONFIRMED bookings with timeSlot.date < TODAY
|
||||
│ ├─ Mark as COMPLETED
|
||||
│ └─ Log: "Completed X past bookings"
|
||||
│
|
||||
└─ (Day ends, repeat tomorrow)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Booking Lifecycle
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ BOOKING CREATION │
|
||||
│ (POST /booking) │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
│
|
||||
├─ Input: { timeSlotId, membershipId }
|
||||
│
|
||||
├─ TRANSACTION START ──────────────────
|
||||
│ │
|
||||
│ ├─► Fetch TimeSlot
|
||||
│ │ └─ Check: status = OPEN? ✓
|
||||
│ │
|
||||
│ ├─► Check Duplicate
|
||||
│ │ └─ Query: SELECT * FROM bookings WHERE userId=? AND timeSlotId=?
|
||||
│ │ └─ Must not exist
|
||||
│ │
|
||||
│ ├─► Fetch Membership
|
||||
│ │ └─ Check: belongs to user? ✓
|
||||
│ │ └─ Check: status = ACTIVE? ✓
|
||||
│ │ └─ Check: has capacity?
|
||||
│ │ └─ IF TIMES/TRIAL: remainingTimes > 0? ✓
|
||||
│ │ └─ IF DURATION: expireDate > NOW? ✓
|
||||
│ │
|
||||
│ ├─► CREATE Booking(CONFIRMED)
|
||||
│ │ └─ INSERT: { userId, timeSlotId, membershipId, status: CONFIRMED }
|
||||
│ │
|
||||
│ ├─► UPDATE TimeSlot
|
||||
│ │ ├─ bookedCount = bookedCount + 1
|
||||
│ │ ├─ IF bookedCount >= capacity:
|
||||
│ │ │ └─ status = FULL
|
||||
│ │ └─ ELSE:
|
||||
│ │ └─ status = OPEN (unchanged)
|
||||
│ │
|
||||
│ ├─► UPDATE Membership (if TIMES/TRIAL)
|
||||
│ │ ├─ remainingTimes = remainingTimes - 1
|
||||
│ │ ├─ IF remainingTimes <= 0:
|
||||
│ │ │ └─ status = USED_UP
|
||||
│ │ └─ ELSE:
|
||||
│ │ └─ status = ACTIVE (unchanged)
|
||||
│ │
|
||||
│ └─ TRANSACTION COMMIT ──────────────
|
||||
│
|
||||
└─► Return: BookingWithRelations (includes timeSlot, membership)
|
||||
|
||||
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ BOOKING CANCELLATION │
|
||||
│ (PUT /booking/:id/cancel) │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
│
|
||||
├─ Fetch Booking + TimeSlot + Membership
|
||||
│
|
||||
├─ Check: booking.status = CONFIRMED? ✓
|
||||
│
|
||||
├─ Calculate Refund Eligibility
|
||||
│ │
|
||||
│ ├─ cancelHoursLimit = StudioConfig.cancelHoursLimit (default 2)
|
||||
│ ├─ slotStartMs = Date(timeSlot.date) + timeSlot.startTime
|
||||
│ ├─ deadlineMs = NOW + (cancelHoursLimit * 3600 * 1000)
|
||||
│ │
|
||||
│ ├─ IF slotStartMs >= deadlineMs:
|
||||
│ │ └─ withinLimit = TRUE ✓ (User gets refund)
|
||||
│ └─ ELSE:
|
||||
│ └─ withinLimit = FALSE (No refund)
|
||||
│
|
||||
├─ TRANSACTION START ──────────────────
|
||||
│ │
|
||||
│ ├─► UPDATE Booking
|
||||
│ │ ├─ status = CANCELLED
|
||||
│ │ └─ cancelledAt = NOW
|
||||
│ │
|
||||
│ ├─► UPDATE TimeSlot
|
||||
│ │ ├─ bookedCount = MAX(0, bookedCount - 1)
|
||||
│ │ ├─ IF slot was FULL:
|
||||
│ │ │ └─ status = OPEN
|
||||
│ │ └─ ELSE:
|
||||
│ │ └─ status = (unchanged)
|
||||
│ │
|
||||
│ ├─► IF withinLimit = TRUE:
|
||||
│ │ └─ UPDATE Membership (if TIMES/TRIAL)
|
||||
│ │ ├─ remainingTimes = remainingTimes + 1
|
||||
│ │ ├─ IF was USED_UP:
|
||||
│ │ │ └─ status = ACTIVE
|
||||
│ │ └─ ELSE:
|
||||
│ │ └─ status = (unchanged)
|
||||
│ │
|
||||
│ └─ TRANSACTION COMMIT ──────────────
|
||||
│
|
||||
└─► Return: { booking, refunded: boolean }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Slot Generation from Template
|
||||
|
||||
```
|
||||
Template Setup:
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ PUT /admin/week-template │
|
||||
│ │
|
||||
│ { │
|
||||
│ "templates": [ │
|
||||
│ { │
|
||||
│ "dayOfWeek": 1, // Monday (ISO standard)│
|
||||
│ "startTime": "09:00", │
|
||||
│ "endTime": "10:00", │
|
||||
│ "capacity": 1, // Private lesson │
|
||||
│ "isActive": true │
|
||||
│ }, │
|
||||
│ { │
|
||||
│ "dayOfWeek": 5, // Friday (ISO standard)│
|
||||
│ "startTime": "18:00", │
|
||||
│ "endTime": "19:00", │
|
||||
│ "capacity": 1, │
|
||||
│ "isActive": true │
|
||||
│ } │
|
||||
│ ] │
|
||||
│ } │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
↓
|
||||
Stored in database as WeekTemplates
|
||||
↓
|
||||
Each day at 02:00 UTC, generateSlots(14) runs:
|
||||
|
||||
|
||||
Today: Monday, April 7, 2026
|
||||
│
|
||||
├─ Tomorrow = Tuesday, April 8
|
||||
│
|
||||
├─ For next 14 days:
|
||||
│
|
||||
│ Day 0: Tue (ISO 2) → no matching template → skip
|
||||
│ Day 1: Wed (ISO 3) → no matching template → skip
|
||||
│ Day 2: Thu (ISO 4) → no matching template → skip
|
||||
│ Day 3: Fri (ISO 5) → MATCH! template (18:00-19:00)
|
||||
│ └─ CREATE TimeSlot(date=Apr12, time=18:00-19:00, capacity=1)
|
||||
│
|
||||
│ Day 4: Sat (ISO 6) → no matching template → skip
|
||||
│ Day 5: Sun (ISO 7) → no matching template → skip
|
||||
│ Day 6: Mon (ISO 1) → MATCH! template (09:00-10:00)
|
||||
│ └─ CREATE TimeSlot(date=Apr14, time=09:00-10:00, capacity=1)
|
||||
│
|
||||
│ Day 7: Tue (ISO 2) → no matching template → skip
|
||||
│ ... (repeats pattern)
|
||||
│
|
||||
└─ All created with:
|
||||
├─ status = OPEN
|
||||
├─ bookedCount = 0
|
||||
├─ source = TEMPLATE
|
||||
├─ templateId = (reference to template)
|
||||
└─ skipDuplicates = true (safe to re-run)
|
||||
|
||||
|
||||
Result:
|
||||
14 Friday 18:00-19:00 slots generated
|
||||
14 Monday 09:00-10:00 slots generated
|
||||
Total: 28 new slots
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. User Booking Flow (Frontend → Backend)
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ MEMBER CLIENT │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
│
|
||||
│ 1. Click "View Available Slots"
|
||||
│
|
||||
├─► GET /time-slot/available?date=2026-04-10
|
||||
│
|
||||
│ Response: [{
|
||||
│ id: "slot-123",
|
||||
│ date: "2026-04-10",
|
||||
│ startTime: "09:00",
|
||||
│ endTime: "10:00",
|
||||
│ status: "OPEN",
|
||||
│ bookedCount: 0,
|
||||
│ capacity: 1,
|
||||
│ isBookedByMe: false, ← User's booking status
|
||||
│ myBookingId: null
|
||||
│ }, ...]
|
||||
│
|
||||
├─ Display available slots in UI
|
||||
│
|
||||
│ 2. User selects slot and membership
|
||||
│
|
||||
├─► POST /booking
|
||||
│ Body: {
|
||||
│ "timeSlotId": "slot-123",
|
||||
│ "membershipId": "mem-456"
|
||||
│ }
|
||||
│
|
||||
│ Response: {
|
||||
│ id: "booking-789",
|
||||
│ userId: "user-001",
|
||||
│ timeSlotId: "slot-123",
|
||||
│ status: "CONFIRMED",
|
||||
│ createdAt: "2026-04-05T10:30:00Z",
|
||||
│ timeSlot: { ... }, ← Full slot details
|
||||
│ membership: { ... } ← Full membership details
|
||||
│ }
|
||||
│
|
||||
├─ Display confirmation
|
||||
│
|
||||
│ 3. [Later] User cancels booking
|
||||
│
|
||||
└─► PUT /booking/booking-789/cancel
|
||||
|
||||
Response: {
|
||||
booking: { ... },
|
||||
refunded: true ← Was refund issued?
|
||||
}
|
||||
|
||||
Display: "Booking cancelled. You've been refunded."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. State Transitions
|
||||
|
||||
### TimeSlot Status
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ AUTO-GENERATED │
|
||||
│ by generateSlots() │
|
||||
└─────────────┬───────────────────┘
|
||||
│
|
||||
↓
|
||||
┌─────────────────┐
|
||||
│ OPEN │ ← Can accept bookings
|
||||
│ (bookedCount < │ bookedCount starts at 0
|
||||
│ capacity) │
|
||||
└────────┬────────┘
|
||||
│
|
||||
┌──────────┼──────────┐
|
||||
│ │ │
|
||||
│ │ │
|
||||
[booking │ [cleanup
|
||||
creates] │ or manual
|
||||
│ close]
|
||||
│ │ │
|
||||
↓ ↓ ↓
|
||||
FULL CLOSED
|
||||
(bookedCount >= capacity)
|
||||
│
|
||||
│ [booking cancelled]
|
||||
↓
|
||||
OPEN (back to)
|
||||
|
||||
|
||||
Once slot date passes:
|
||||
├─ OPEN → CLOSED (by cleanup job at 02:30 UTC)
|
||||
├─ FULL → CLOSED (when cleanup runs)
|
||||
└─ CANCELLED bookings don't affect slot status
|
||||
```
|
||||
|
||||
### Booking Status
|
||||
|
||||
```
|
||||
┌──────────────────┐
|
||||
│ CONFIRMED │ ← Default when created
|
||||
│ │ User has active reservation
|
||||
└────────┬─────────┘
|
||||
│
|
||||
┌─────┼─────┐
|
||||
│ │ │
|
||||
[user │ [auto-mark
|
||||
cancels] │ when date
|
||||
│ │ passes]
|
||||
│ │ │
|
||||
↓ ↓ ↓
|
||||
CANCELLED COMPLETED
|
||||
(free (slot time
|
||||
cancellation has passed)
|
||||
until deadline)
|
||||
|
||||
|
||||
CANCELLED bookings stay in history
|
||||
COMPLETED bookings show in past bookings
|
||||
CONFIRMED bookings show in upcoming bookings
|
||||
```
|
||||
|
||||
### Membership Status
|
||||
|
||||
```
|
||||
┌─────────────────┐
|
||||
│ ACTIVE │ ← Can book classes
|
||||
│ │ Has remaining capacity
|
||||
└────────┬────────┘
|
||||
│
|
||||
┌─────┼─────┐
|
||||
│ │ │
|
||||
[booking │ [auto-check
|
||||
depletes │ by scheduler
|
||||
sessions] │ at 03:00 UTC]
|
||||
│ │ │
|
||||
↓ ↓ ↓
|
||||
USED_UP EXPIRED
|
||||
(for (for
|
||||
TIMES) DURATION)
|
||||
|
||||
|
||||
USED_UP: remainingTimes = 0 (for TIMES/TRIAL only)
|
||||
EXPIRED: expireDate < NOW (for DURATION) OR date-based expiry
|
||||
|
||||
All non-ACTIVE statuses prevent new bookings
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Timezone & Date Handling
|
||||
|
||||
```
|
||||
User Timezone: Local (browser/app)
|
||||
API Timezone: UTC (backend)
|
||||
Database: UTC
|
||||
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ User in Shanghai (UTC+8) │
|
||||
│ Local time: 2026-04-10 15:00:00 CST │
|
||||
│ UTC time: 2026-04-10 07:00:00 UTC │
|
||||
└──────────────────────────────────────────────┘
|
||||
│
|
||||
├─ Query: GET /time-slot/available?date=2026-04-10
|
||||
│ (User sends local date, frontend converts to ISO)
|
||||
│
|
||||
├─ Backend receives:
|
||||
│ ├─ Parse "2026-04-10"
|
||||
│ ├─ Build start of day: 2026-04-10T00:00:00 UTC
|
||||
│ ├─ Build end of day: 2026-04-10T23:59:59.999 UTC
|
||||
│ ├─ Query TimeSlots WHERE date BETWEEN [00:00, 23:59]
|
||||
│
|
||||
└─ Return slots for that calendar day in UTC
|
||||
|
||||
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ TimeSlot Storage (Database) │
|
||||
│ │
|
||||
│ date: 2026-04-10 (DATE type, midnight UTC) │
|
||||
│ startTime: "09:00" (string, no timezone) │
|
||||
│ endTime: "10:00" (string, no timezone) │
|
||||
│ │
|
||||
│ When combined: │
|
||||
│ Slot datetime = 2026-04-10T09:00:00 UTC │
|
||||
└──────────────────────────────────────────────┘
|
||||
│
|
||||
├─ For Shanghai user (UTC+8):
|
||||
│ └─ 09:00 UTC = 17:00 CST (5 PM)
|
||||
│
|
||||
└─ For New York user (UTC-4):
|
||||
└─ 09:00 UTC = 05:00 EDT (5 AM)
|
||||
|
||||
|
||||
Scheduler (UTC times):
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ 02:00 UTC = Generate slots │
|
||||
│ 02:30 UTC = Cleanup │
|
||||
│ 03:00 UTC = Check memberships │
|
||||
│ 22:00 UTC = Complete bookings │
|
||||
│ │
|
||||
│ When scheduler checks "is date < today?": │
|
||||
│ ├─ Create midnight UTC boundary │
|
||||
│ ├─ Compare slot.date < today's midnight │
|
||||
│ └─ Mark as CLOSED/COMPLETED if older │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Error Handling Tree
|
||||
|
||||
```
|
||||
POST /booking
|
||||
│
|
||||
├─ TimeSlot not found
|
||||
│ └─ Return: NotFoundException
|
||||
│
|
||||
├─ TimeSlot.status ≠ OPEN
|
||||
│ └─ Return: BadRequestException("TimeSlot is not available")
|
||||
│
|
||||
├─ Duplicate booking exists
|
||||
│ └─ Return: ConflictException("Already booked this slot")
|
||||
│
|
||||
├─ Membership not found
|
||||
│ └─ Return: NotFoundException
|
||||
│
|
||||
├─ Membership.userId ≠ current user
|
||||
│ └─ Return: ForbiddenException("Not your membership")
|
||||
│
|
||||
├─ Membership.status ≠ ACTIVE
|
||||
│ └─ Return: BadRequestException("Membership inactive")
|
||||
│
|
||||
├─ Card type is TIMES/TRIAL:
|
||||
│ │
|
||||
│ └─ remainingTimes ≤ 0
|
||||
│ └─ Return: BadRequestException("No remaining times")
|
||||
│
|
||||
└─ Card type is DURATION:
|
||||
│
|
||||
└─ expireDate < NOW
|
||||
└─ Return: BadRequestException("Membership expired")
|
||||
|
||||
|
||||
PUT /booking/:id/cancel
|
||||
│
|
||||
├─ Booking not found
|
||||
│ └─ Return: NotFoundException
|
||||
│
|
||||
├─ Booking.userId ≠ current user
|
||||
│ └─ Return: ForbiddenException("Not your booking")
|
||||
│
|
||||
├─ Booking.status ≠ CONFIRMED
|
||||
│ └─ Return: BadRequestException("Can't cancel this status")
|
||||
│
|
||||
└─ ✓ Cancel successful
|
||||
├─ Check refund eligibility
|
||||
├─ Update booking status
|
||||
├─ Update timeSlot bookedCount
|
||||
└─ Conditionally refund membership
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Integration Points
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ APP MODULE │
|
||||
│ (packages/server/src/app.module.ts) │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
│
|
||||
├─ imports: [
|
||||
│ AuthModule,
|
||||
│ TimeSlotModule, ← Time-Slot logic
|
||||
│ SchedulerModule, ← Auto jobs (cron)
|
||||
│ BookingModule, ← Booking logic
|
||||
│ MembershipModule, ← Membership checks
|
||||
│ StudioModule, ← Config (cancelHoursLimit)
|
||||
│ ...
|
||||
│ ]
|
||||
│
|
||||
└─ Controllers route to:
|
||||
│
|
||||
├─ TimeSlotController (public slots viewing)
|
||||
├─ AdminTimeSlotController (templates, admin actions)
|
||||
├─ BookingController (create, cancel bookings)
|
||||
└─ ... (other endpoints)
|
||||
|
||||
|
||||
SchedulerModule dependencies:
|
||||
├─ ScheduleModule.forRoot() ← Enable @Cron decorators
|
||||
└─ TimeSlotModule ← Access to SlotGeneratorService
|
||||
|
||||
|
||||
BookingModule dependencies:
|
||||
├─ MembershipModule ← Check membership status
|
||||
└─ StudioModule ← Read cancelHoursLimit config
|
||||
|
||||
|
||||
Services call chain:
|
||||
├─ Controller
|
||||
│ ├─ TimeSlotService
|
||||
│ │ └─ PrismaService
|
||||
│ └─ BookingService
|
||||
│ ├─ PrismaService
|
||||
│ ├─ MembershipService
|
||||
│ └─ StudioService
|
||||
```
|
||||
|
||||
364
docs/TIME_SLOT_INDEX.md
Normal file
364
docs/TIME_SLOT_INDEX.md
Normal file
@@ -0,0 +1,364 @@
|
||||
# Time-Slot & Scheduling System - Documentation Index
|
||||
|
||||
This directory contains comprehensive documentation of the NestJS backend time-slot and scheduling system for the pilates studio booking platform.
|
||||
|
||||
## 📚 Documentation Files
|
||||
|
||||
### 1. **TIME_SLOT_SCHEDULING_SYSTEM.md** (966 lines, 24KB)
|
||||
**Most comprehensive reference** - Full system analysis with all details
|
||||
|
||||
**Contents:**
|
||||
- Executive Summary
|
||||
- Data Models (WeekTemplate, TimeSlot, Booking) with Prisma schema
|
||||
- SlotGeneratorService (4 key methods: generateSlots, cleanupExpiredSlots, checkExpiredMemberships, completeBookings)
|
||||
- TimeSlotService (queries and management)
|
||||
- TimeSlotController & AdminTimeSlotController (all endpoints)
|
||||
- SchedulerService (4 daily cron jobs at 02:00, 02:30, 03:00, 22:00 UTC)
|
||||
- BookingService (integration with time slots)
|
||||
- Data Flow Diagrams
|
||||
- DTOs & Request/Response examples
|
||||
- Shared Constants & Enums
|
||||
- File Structure Summary
|
||||
- Key Architectural Patterns
|
||||
- Example Scenarios
|
||||
- Testing Guide
|
||||
- Configuration & Environment
|
||||
- Performance Considerations
|
||||
- Security Notes
|
||||
- Future Enhancement Ideas
|
||||
|
||||
**When to use:** Deep dive into how the system works, understanding all components
|
||||
|
||||
---
|
||||
|
||||
### 2. **TIME_SLOT_QUICK_REFERENCE.md** (355 lines, 9KB)
|
||||
**Quick lookup guide** - Essential information at a glance
|
||||
|
||||
**Contents:**
|
||||
- File Locations (all key files in one table)
|
||||
- Key Concepts (WeekTemplate, TimeSlot, Booking)
|
||||
- Daily Scheduler Jobs (quick table with times and purposes)
|
||||
- Important Methods (TypeScript signatures for all key methods)
|
||||
- API Endpoints (member and admin endpoints with request/response)
|
||||
- Status Values (all enum values explained)
|
||||
- Key Logic (booking creation & cancellation flows in pseudocode)
|
||||
- Weekday Mapping (ISO standard vs JavaScript)
|
||||
- Database Constraints
|
||||
- Configuration
|
||||
- Common Errors (troubleshooting table)
|
||||
- Testing
|
||||
- Development Workflow
|
||||
- Architecture Highlights
|
||||
|
||||
**When to use:** Quick lookup while coding, API reference, debugging errors
|
||||
|
||||
---
|
||||
|
||||
### 3. **TIME_SLOT_DIAGRAMS.md** (606 lines, 25KB)
|
||||
**Visual references** - ASCII diagrams and flowcharts
|
||||
|
||||
**Contents:**
|
||||
1. Data Model Relationships (entity diagram)
|
||||
2. Daily Scheduler Timeline (24-hour cron schedule visualization)
|
||||
3. Booking Lifecycle (detailed creation and cancellation flows)
|
||||
4. Slot Generation from Template (step-by-step with example)
|
||||
5. User Booking Flow (frontend → backend interaction)
|
||||
6. State Transitions (TimeSlot, Booking, Membership status flows)
|
||||
7. Timezone & Date Handling (UTC, local time conversion)
|
||||
8. Error Handling Tree (decision tree for POST /booking and cancellation)
|
||||
9. Integration Points (module dependencies)
|
||||
|
||||
**When to use:** Understanding the big picture, presenting to team, tracing flow execution
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Key Information at a Glance
|
||||
|
||||
### Source Code Locations
|
||||
|
||||
```
|
||||
Backend Time-Slot System:
|
||||
├── packages/server/src/time-slot/
|
||||
│ ├── slot-generator.service.ts (172 lines)
|
||||
│ ├── time-slot.service.ts (142 lines)
|
||||
│ ├── time-slot.controller.ts (93 lines)
|
||||
│ ├── time-slot.module.ts
|
||||
│ └── dto/
|
||||
│ ├── query-slots.dto.ts
|
||||
│ ├── create-manual-slot.dto.ts
|
||||
│ └── week-template.dto.ts
|
||||
│
|
||||
├── packages/server/src/scheduler/
|
||||
│ ├── scheduler.service.ts (55 lines)
|
||||
│ └── scheduler.module.ts
|
||||
│
|
||||
├── packages/server/src/booking/
|
||||
│ ├── booking.service.ts (367 lines)
|
||||
│ ├── booking.controller.ts (82 lines)
|
||||
│ ├── booking.module.ts
|
||||
│ └── dto/
|
||||
│ └── create-booking.dto.ts
|
||||
│
|
||||
├── packages/server/prisma/
|
||||
│ └── schema.prisma (Models: WeekTemplate, TimeSlot, Booking)
|
||||
│
|
||||
└── packages/shared/src/
|
||||
├── constants.ts (Slot generation, capacity defaults)
|
||||
├── enums.ts (TimeSlotStatus, BookingStatus, etc.)
|
||||
└── types/
|
||||
└── time-slot.ts (Type definitions)
|
||||
```
|
||||
|
||||
### Daily Scheduler (UTC)
|
||||
|
||||
| Time | Job | Method |
|
||||
|------|-----|--------|
|
||||
| 02:00 | Generate 14 days of slots | `SlotGeneratorService.generateSlots(14)` |
|
||||
| 02:30 | Close expired OPEN slots | `SlotGeneratorService.cleanupExpiredSlots()` |
|
||||
| 03:00 | Expire memberships | `SlotGeneratorService.checkExpiredMemberships()` |
|
||||
| 22:00 | Complete past bookings | `SlotGeneratorService.completeBookings()` |
|
||||
|
||||
### Important Constants
|
||||
|
||||
```
|
||||
DEFAULT_SLOT_CAPACITY = 1 (private lessons)
|
||||
SLOT_GENERATION_DAYS = 14 (days ahead to auto-generate)
|
||||
DEFAULT_CANCEL_HOURS_LIMIT = 2 (hours before slot to allow refund)
|
||||
```
|
||||
|
||||
### API Endpoints
|
||||
|
||||
**Member:**
|
||||
```
|
||||
GET /time-slot/available?date=YYYY-MM-DD
|
||||
GET /time-slot/:id
|
||||
POST /booking
|
||||
PUT /booking/:id/cancel
|
||||
GET /booking/my
|
||||
GET /booking/my/upcoming
|
||||
```
|
||||
|
||||
**Admin:**
|
||||
```
|
||||
GET /admin/week-template
|
||||
PUT /admin/week-template
|
||||
POST /admin/time-slot/manual
|
||||
PUT /admin/time-slot/:id/close
|
||||
POST /admin/generate-slots
|
||||
GET /admin/bookings
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Common Tasks & Where to Find Info
|
||||
|
||||
| Task | Reference |
|
||||
|------|-----------|
|
||||
| **Understand slot generation algorithm** | TIME_SLOT_SCHEDULING_SYSTEM.md § 2.2 or DIAGRAMS § 4 |
|
||||
| **See all API endpoints** | QUICK_REFERENCE § "API Endpoints" or TIME_SLOT_SCHEDULING_SYSTEM.md § 4 |
|
||||
| **Booking creation logic** | TIME_SLOT_DIAGRAMS.md § 3 or QUICK_REFERENCE § "Key Logic" |
|
||||
| **Weekday mapping (ISO vs JS)** | QUICK_REFERENCE § "Weekday Mapping" or DIAGRAMS § 7 |
|
||||
| **Cancellation refund policy** | TIME_SLOT_SCHEDULING_SYSTEM.md § 6.1 or DIAGRAMS § 3 |
|
||||
| **Scheduler jobs timeline** | QUICK_REFERENCE § "Daily Scheduler Jobs" or DIAGRAMS § 2 |
|
||||
| **Error handling** | QUICK_REFERENCE § "Common Errors" or DIAGRAMS § 8 |
|
||||
| **Data model relationships** | DIAGRAMS § 1 or TIME_SLOT_SCHEDULING_SYSTEM.md § 1 |
|
||||
| **Configuration & setup** | QUICK_REFERENCE § "Configuration" or TIME_SLOT_SCHEDULING_SYSTEM.md § 14 |
|
||||
| **Performance tips** | TIME_SLOT_SCHEDULING_SYSTEM.md § 15 or QUICK_REFERENCE § "Performance Tips" |
|
||||
| **Module dependencies** | DIAGRAMS § 9 or TIME_SLOT_SCHEDULING_SYSTEM.md § 11.2 |
|
||||
| **Testing** | TIME_SLOT_SCHEDULING_SYSTEM.md § 13 or QUICK_REFERENCE § "Testing" |
|
||||
|
||||
---
|
||||
|
||||
## 📋 System Overview
|
||||
|
||||
### What It Does
|
||||
|
||||
This system manages the complete lifecycle of time slots and bookings for a pilates studio:
|
||||
|
||||
1. **Automated Slot Generation**: Every day at 02:00 UTC, generates 14 days of time slots from reusable weekly templates
|
||||
2. **Capacity Management**: Tracks slot capacity and prevents overbooking
|
||||
3. **Booking Management**: Allows members to book slots with their memberships
|
||||
4. **Cancellation & Refunds**: Members can cancel with conditional refunds (within 2-hour window)
|
||||
5. **Membership Expiration**: Automatically expires memberships by date or used sessions
|
||||
6. **Cleanup**: Marks past slots as closed and completed bookings as finished
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- **WeekTemplate**: Defines recurring schedule (e.g., "Monday 09:00-10:00")
|
||||
- **TimeSlot**: Individual class instance (e.g., "April 10, 2026 09:00-10:00")
|
||||
- **Booking**: User's reservation (links user + slot + membership)
|
||||
- **Status Tracking**: OPEN → FULL → CLOSED (slots) and CONFIRMED → COMPLETED (bookings)
|
||||
|
||||
### Architecture Highlights
|
||||
|
||||
✅ **Idempotent** - Safe to re-run slot generation
|
||||
✅ **Transactional** - ACID compliance for bookings
|
||||
✅ **Automated** - 4 daily cron jobs maintain state
|
||||
✅ **Flexible** - Supports TIMES, DURATION, and TRIAL memberships
|
||||
✅ **Scalable** - Batch operations, proper database indexes
|
||||
✅ **Secure** - Role-based access, comprehensive validation
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
### For New Developers
|
||||
|
||||
1. **Start with**: TIME_SLOT_QUICK_REFERENCE.md
|
||||
- Get oriented with file locations and key methods
|
||||
|
||||
2. **Then read**: TIME_SLOT_DIAGRAMS.md § 1 (Data Model)
|
||||
- Understand how entities relate
|
||||
|
||||
3. **Deep dive**: TIME_SLOT_SCHEDULING_SYSTEM.md § 2
|
||||
- Study the SlotGeneratorService algorithm
|
||||
|
||||
4. **Explore the code**: Read actual source files for implementation details
|
||||
|
||||
### For System Integration
|
||||
|
||||
1. Review TIME_SLOT_DIAGRAMS.md § 9 (Integration Points)
|
||||
2. Check the module imports in `app.module.ts`
|
||||
3. Understand dependencies in QUICK_REFERENCE.md § "Configuration"
|
||||
|
||||
### For API Integration
|
||||
|
||||
1. Start with TIME_SLOT_QUICK_REFERENCE.md § "API Endpoints"
|
||||
2. See examples in TIME_SLOT_SCHEDULING_SYSTEM.md § 12
|
||||
3. Check DTOs in TIME_SLOT_SCHEDULING_SYSTEM.md § 8
|
||||
|
||||
### For Debugging
|
||||
|
||||
1. Check common errors in QUICK_REFERENCE.md § "Common Errors"
|
||||
2. Trace error handling in DIAGRAMS.md § 8
|
||||
3. Review actual error handling in source code
|
||||
|
||||
---
|
||||
|
||||
## 📖 Reading Recommendations by Role
|
||||
|
||||
### Backend Developer
|
||||
1. TIME_SLOT_SCHEDULING_SYSTEM.md (all)
|
||||
2. TIME_SLOT_DIAGRAMS.md (all)
|
||||
3. Source code in `packages/server/src/time-slot/`
|
||||
|
||||
### Frontend Developer
|
||||
1. TIME_SLOT_QUICK_REFERENCE.md (API Endpoints section)
|
||||
2. TIME_SLOT_SCHEDULING_SYSTEM.md § 12 (Example Scenarios)
|
||||
3. TIME_SLOT_DIAGRAMS.md § 5 (User Booking Flow)
|
||||
|
||||
### DevOps / Sysadmin
|
||||
1. TIME_SLOT_SCHEDULING_SYSTEM.md § 14 (Configuration)
|
||||
2. TIME_SLOT_QUICK_REFERENCE.md § "Daily Scheduler Jobs"
|
||||
3. TIME_SLOT_DIAGRAMS.md § 2 (Scheduler Timeline)
|
||||
|
||||
### Product Manager
|
||||
1. TIME_SLOT_SCHEDULING_SYSTEM.md § "Executive Summary"
|
||||
2. TIME_SLOT_DIAGRAMS.md § 3 & 5 (Booking flows)
|
||||
3. TIME_SLOT_QUICK_REFERENCE.md § "Architecture Highlights"
|
||||
|
||||
### QA / Tester
|
||||
1. TIME_SLOT_QUICK_REFERENCE.md (all)
|
||||
2. TIME_SLOT_SCHEDULING_SYSTEM.md § 13 (Testing Guide)
|
||||
3. TIME_SLOT_SCHEDULING_SYSTEM.md § 12 (Example Scenarios)
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Related Documentation
|
||||
|
||||
- **Database Schema**: See `packages/server/prisma/schema.prisma` (lines 113-168)
|
||||
- **Shared Types**: See `packages/shared/src/types/` and `enums.ts`
|
||||
- **Authentication**: See booking endpoints require JwtAuthGuard
|
||||
- **Membership System**: See `BookingService` integration with `MembershipService`
|
||||
- **Studio Config**: See `StudioService` for `cancelHoursLimit`
|
||||
|
||||
---
|
||||
|
||||
## 📊 Document Statistics
|
||||
|
||||
| File | Lines | Size | Topics |
|
||||
|------|-------|------|--------|
|
||||
| TIME_SLOT_SCHEDULING_SYSTEM.md | 966 | 24KB | 17 comprehensive sections |
|
||||
| TIME_SLOT_QUICK_REFERENCE.md | 355 | 9KB | 15 quick-lookup sections |
|
||||
| TIME_SLOT_DIAGRAMS.md | 606 | 25KB | 9 visual flowcharts |
|
||||
| **Total** | **1,927** | **58KB** | **Complete system coverage** |
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Learning Path
|
||||
|
||||
```
|
||||
Entry Level
|
||||
├─ README.md (this file)
|
||||
├─ TIME_SLOT_QUICK_REFERENCE.md (20 min read)
|
||||
└─ TIME_SLOT_DIAGRAMS.md § 1 (5 min)
|
||||
|
||||
Intermediate
|
||||
├─ TIME_SLOT_DIAGRAMS.md (all, 15 min)
|
||||
├─ TIME_SLOT_QUICK_REFERENCE.md (re-read, 15 min)
|
||||
└─ TIME_SLOT_SCHEDULING_SYSTEM.md § 1-6 (30 min)
|
||||
|
||||
Advanced
|
||||
├─ TIME_SLOT_SCHEDULING_SYSTEM.md (full, 60 min)
|
||||
├─ Source code reading (packages/server/src/time-slot/)
|
||||
└─ Prisma schema study
|
||||
|
||||
Expert
|
||||
└─ Code review + contributions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
When adding features or making changes:
|
||||
|
||||
1. **Update the code** in `packages/server/src/time-slot/` and related modules
|
||||
2. **Update tests** in `__tests__/` directories
|
||||
3. **Update documentation** in this docs folder if behavior changes
|
||||
4. Use the **Quick Reference** as checklist for all affected pieces
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQ
|
||||
|
||||
**Q: Where do time slots come from?**
|
||||
A: Auto-generated from WeekTemplates every day at 02:00 UTC by `generateSlots(14)`.
|
||||
|
||||
**Q: Can I disable slot generation?**
|
||||
A: Yes, make templates `isActive: false` or disable the cron job in `scheduler.service.ts`.
|
||||
|
||||
**Q: How is capacity managed?**
|
||||
A: `bookedCount` increments on booking, slot status becomes FULL when `bookedCount >= capacity`.
|
||||
|
||||
**Q: What if I cancel a booking?**
|
||||
A: `bookedCount` decrements; if within 2-hour window, membership refunded; slot status restored if was FULL.
|
||||
|
||||
**Q: Timezone support?**
|
||||
A: All times stored in UTC. Scheduler uses UTC times (02:00, 02:30, etc.). See DIAGRAMS § 7.
|
||||
|
||||
**Q: How are memberships expired?**
|
||||
A: Automatically by scheduler job at 03:00 UTC daily; marks EXPIRED if date passed or USED_UP if sessions depleted.
|
||||
|
||||
---
|
||||
|
||||
## 📞 Quick Reference Card
|
||||
|
||||
### Status Values
|
||||
- **TimeSlot**: OPEN | FULL | CLOSED
|
||||
- **Booking**: CONFIRMED | CANCELLED | COMPLETED | NO_SHOW
|
||||
- **Membership**: ACTIVE | EXPIRED | USED_UP
|
||||
|
||||
### Key Dates & Times
|
||||
- **Slot generation**: Daily 02:00 UTC (14 days ahead)
|
||||
- **Cleanup**: Daily 02:30 UTC
|
||||
- **Membership check**: Daily 03:00 UTC
|
||||
- **Booking completion**: Daily 22:00 UTC
|
||||
- **Cancellation window**: 2 hours before slot (configurable)
|
||||
|
||||
### Key Files
|
||||
- **Slot generation**: `slot-generator.service.ts`
|
||||
- **Slot queries**: `time-slot.service.ts`
|
||||
- **Booking logic**: `booking.service.ts`
|
||||
- **Database**: `prisma/schema.prisma`
|
||||
|
||||
355
docs/TIME_SLOT_QUICK_REFERENCE.md
Normal file
355
docs/TIME_SLOT_QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,355 @@
|
||||
# Time-Slot & Scheduling System - Quick Reference
|
||||
|
||||
## File Locations
|
||||
|
||||
| Component | Path |
|
||||
|-----------|------|
|
||||
| **Slot Generator** | `packages/server/src/time-slot/slot-generator.service.ts` |
|
||||
| **TimeSlot Service** | `packages/server/src/time-slot/time-slot.service.ts` |
|
||||
| **TimeSlot Controller** | `packages/server/src/time-slot/time-slot.controller.ts` |
|
||||
| **Scheduler** | `packages/server/src/scheduler/scheduler.service.ts` |
|
||||
| **Booking Service** | `packages/server/src/booking/booking.service.ts` |
|
||||
| **Booking Controller** | `packages/server/src/booking/booking.controller.ts` |
|
||||
| **Database Schema** | `packages/server/prisma/schema.prisma` |
|
||||
| **Shared Constants** | `packages/shared/src/constants.ts` |
|
||||
| **Shared Enums** | `packages/shared/src/enums.ts` |
|
||||
|
||||
---
|
||||
|
||||
## Key Concepts
|
||||
|
||||
### WeekTemplate
|
||||
Defines **recurring class schedule** by day of week (1=Monday, 7=Sunday) and time.
|
||||
- Used to auto-generate TimeSlots nightly
|
||||
- Can be enabled/disabled
|
||||
- Has capacity (default 1 for private lessons)
|
||||
|
||||
### TimeSlot
|
||||
**Individual class instance** on a specific date with a specific time.
|
||||
- Status: OPEN → FULL → CLOSED
|
||||
- Source: TEMPLATE (auto-generated) or MANUAL (admin-created)
|
||||
- Cannot have duplicates (unique constraint on date+startTime+endTime)
|
||||
|
||||
### Booking
|
||||
**User's reservation** for a specific TimeSlot.
|
||||
- Status: CONFIRMED → COMPLETED (or CANCELLED)
|
||||
- Links user + timeSlot + membership
|
||||
- Unique constraint: one booking per user per slot
|
||||
|
||||
---
|
||||
|
||||
## Daily Scheduler Jobs
|
||||
|
||||
All times in UTC:
|
||||
|
||||
| Time | Job | What It Does |
|
||||
|------|-----|--------------|
|
||||
| **02:00** | `handleSlotGeneration()` | Generate slots 14 days ahead from WeekTemplates |
|
||||
| **02:30** | `handleCleanupSlots()` | Mark past OPEN slots as CLOSED |
|
||||
| **03:00** | `handleCheckMemberships()` | Expire memberships by date or used-up sessions |
|
||||
| **22:00** | `handleCompleteBookings()` | Mark past CONFIRMED bookings as COMPLETED |
|
||||
|
||||
---
|
||||
|
||||
## Important Methods
|
||||
|
||||
### SlotGeneratorService
|
||||
|
||||
```typescript
|
||||
// Generate N days of slots from WeekTemplates
|
||||
generateSlots(daysAhead = 14): Promise<number>
|
||||
|
||||
// Close all past OPEN slots
|
||||
cleanupExpiredSlots(): Promise<number>
|
||||
|
||||
// Expire memberships by date or session count
|
||||
checkExpiredMemberships(): Promise<number>
|
||||
|
||||
// Mark past bookings as COMPLETED
|
||||
completeBookings(): Promise<number>
|
||||
```
|
||||
|
||||
### TimeSlotService
|
||||
|
||||
```typescript
|
||||
// Get all slots for a date (with user's booking status if provided)
|
||||
getAvailableSlots(date: string, userId?: string): Promise<TimeSlotWithBookingStatus[]>
|
||||
|
||||
// Manually create a one-off slot
|
||||
createManualSlot(dto: CreateManualSlotDto): Promise<TimeSlot>
|
||||
|
||||
// Close a slot (prevent new bookings)
|
||||
closeSlot(id: string): Promise<TimeSlot>
|
||||
|
||||
// Get/replace weekly templates
|
||||
getWeekTemplates(): Promise<WeekTemplate[]>
|
||||
replaceWeekTemplates(items: WeekTemplateItemDto[]): Promise<CreateBatchPayload>
|
||||
```
|
||||
|
||||
### BookingService
|
||||
|
||||
```typescript
|
||||
// Create a booking (validates slot/membership, updates counts)
|
||||
createBooking(userId: string, dto: CreateBookingDto): Promise<BookingWithRelations>
|
||||
|
||||
// Cancel a booking (conditionally refunds membership)
|
||||
cancelBooking(userId: string, bookingId: string): Promise<CancelBookingResult>
|
||||
|
||||
// Get user's bookings (paginated, filterable by status)
|
||||
getMyBookings(userId: string, status?, page, limit): Promise<PaginatedResult>
|
||||
|
||||
// Get all CONFIRMED bookings for dates >= today
|
||||
getUpcomingBookings(userId: string): Promise<BookingWithRelations[]>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Member Endpoints
|
||||
|
||||
```
|
||||
GET /time-slot/available?date=2026-04-10
|
||||
→ Returns slots for that date with user's booking status
|
||||
|
||||
GET /time-slot/:id
|
||||
→ Returns full slot details with all bookings
|
||||
|
||||
POST /booking
|
||||
Body: { "timeSlotId": "uuid", "membershipId": "uuid" }
|
||||
→ Create a booking
|
||||
|
||||
PUT /booking/:id/cancel
|
||||
→ Cancel a booking (refund if within window)
|
||||
|
||||
GET /booking/my?status=CONFIRMED&page=1&limit=10
|
||||
→ Get user's bookings (paginated)
|
||||
|
||||
GET /booking/my/upcoming
|
||||
→ Get all upcoming CONFIRMED bookings
|
||||
```
|
||||
|
||||
### Admin Endpoints
|
||||
|
||||
```
|
||||
GET /admin/week-template
|
||||
→ List all templates
|
||||
|
||||
PUT /admin/week-template
|
||||
Body: { "templates": [ {...}, {...} ] }
|
||||
→ Replace all templates (atomic)
|
||||
|
||||
POST /admin/time-slot/manual
|
||||
Body: { "date", "startTime", "endTime", "capacity" }
|
||||
→ Create a one-off slot
|
||||
|
||||
PUT /admin/time-slot/:id/close
|
||||
→ Close a slot
|
||||
|
||||
POST /admin/generate-slots
|
||||
→ Manually trigger slot generation
|
||||
|
||||
GET /admin/bookings?page=1&limit=10&status=CONFIRMED
|
||||
→ View all bookings (admin)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Status Values
|
||||
|
||||
### TimeSlotStatus
|
||||
- **OPEN**: Accepts bookings (bookedCount < capacity)
|
||||
- **FULL**: At capacity (bookedCount >= capacity)
|
||||
- **CLOSED**: Past date or manually closed
|
||||
|
||||
### BookingStatus
|
||||
- **CONFIRMED**: Active reservation
|
||||
- **CANCELLED**: User cancelled
|
||||
- **COMPLETED**: Slot time has passed
|
||||
- **NO_SHOW**: Marked manually
|
||||
|
||||
### MembershipStatus
|
||||
- **ACTIVE**: Valid for booking
|
||||
- **EXPIRED**: End date passed
|
||||
- **USED_UP**: No remaining sessions (for TIMES/TRIAL)
|
||||
|
||||
### CardTypeCategory
|
||||
- **TIMES**: N sessions (e.g., "5-pack")
|
||||
- **DURATION**: Valid for X days (e.g., "1-month")
|
||||
- **TRIAL**: Free trial sessions
|
||||
|
||||
---
|
||||
|
||||
## Key Logic
|
||||
|
||||
### Booking Creation Transaction
|
||||
|
||||
```
|
||||
1. Validate TimeSlot exists and status = OPEN
|
||||
2. Check user not already booked this slot
|
||||
3. Validate Membership:
|
||||
- Belongs to user
|
||||
- Status = ACTIVE
|
||||
- Has capacity:
|
||||
* TIMES/TRIAL: remainingTimes > 0
|
||||
* DURATION: expireDate > NOW
|
||||
4. CREATE Booking(CONFIRMED)
|
||||
5. UPDATE TimeSlot:
|
||||
- bookedCount++
|
||||
- IF bookedCount >= capacity THEN status = FULL
|
||||
6. UPDATE Membership (if time-based):
|
||||
- remainingTimes--
|
||||
- IF remainingTimes = 0 THEN status = USED_UP
|
||||
7. Return with relations
|
||||
```
|
||||
|
||||
### Cancellation Refund Logic
|
||||
|
||||
```
|
||||
cancelHoursLimit = 2 (configurable in StudioConfig)
|
||||
slotStartTime = TimeSlot.date + TimeSlot.startTime
|
||||
deadline = NOW + (cancelHoursLimit * hours)
|
||||
|
||||
IF slotStartTime >= deadline:
|
||||
Refund = TRUE
|
||||
Increment membership.remainingTimes
|
||||
ELSE:
|
||||
Refund = FALSE
|
||||
No membership change
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Weekday Mapping
|
||||
|
||||
**ISO Standard** (what WeekTemplate uses):
|
||||
```
|
||||
1 = Monday
|
||||
2 = Tuesday
|
||||
3 = Wednesday
|
||||
4 = Thursday
|
||||
5 = Friday
|
||||
6 = Saturday
|
||||
7 = Sunday
|
||||
```
|
||||
|
||||
**JavaScript getDay()** (what Date does):
|
||||
```
|
||||
0 = Sunday
|
||||
1 = Monday
|
||||
2 = Tuesday
|
||||
...
|
||||
6 = Saturday
|
||||
```
|
||||
|
||||
**Conversion function:**
|
||||
```typescript
|
||||
function toIsoWeekday(jsDay: number): number {
|
||||
return jsDay === 0 ? 7 : jsDay
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Database Constraints
|
||||
|
||||
### TimeSlot
|
||||
- Unique: `[date, startTime, endTime]` - prevents duplicate slots
|
||||
- Index: `date` - for date range queries
|
||||
- Index: `status` - for filtering
|
||||
|
||||
### Booking
|
||||
- Unique: `[userId, timeSlotId]` - one booking per user per slot
|
||||
- Index: `userId` - for user's bookings
|
||||
- Index: `status` - for status filtering
|
||||
|
||||
---
|
||||
|
||||
## Configuration
|
||||
|
||||
### Environment Variables
|
||||
```
|
||||
DATABASE_URL=mysql://... (required)
|
||||
```
|
||||
|
||||
### From StudioConfig Table
|
||||
```
|
||||
cancelHoursLimit = 2 (hours before slot to allow free cancellation)
|
||||
```
|
||||
|
||||
### From Shared Constants
|
||||
```
|
||||
DEFAULT_SLOT_CAPACITY = 1
|
||||
SLOT_GENERATION_DAYS = 14
|
||||
DEFAULT_CANCEL_HOURS_LIMIT = 2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Errors
|
||||
|
||||
| Error | Cause | Solution |
|
||||
|-------|-------|----------|
|
||||
| TimeSlot not found | Invalid slot ID | Check slot exists |
|
||||
| TimeSlot is not available | Status ≠ OPEN | Slot is FULL or CLOSED |
|
||||
| You have already booked this slot | Duplicate booking | Check user's bookings |
|
||||
| This membership does not belong to you | Membership not user's | Verify membership |
|
||||
| Membership is not active | Status ≠ ACTIVE | Renew or purchase membership |
|
||||
| No remaining times on this membership | remainingTimes ≤ 0 | Purchase more sessions |
|
||||
| Membership has expired | expireDate < NOW | Renew membership |
|
||||
| Cannot cancel booking with status | Status ≠ CONFIRMED | Can only cancel CONFIRMED bookings |
|
||||
|
||||
---
|
||||
|
||||
## Testing
|
||||
|
||||
Run tests with:
|
||||
```bash
|
||||
npm test -- slot-generator.service.spec.ts
|
||||
npm test -- booking.service.spec.ts
|
||||
npm test -- time-slot.service.spec.ts
|
||||
```
|
||||
|
||||
Key test areas:
|
||||
- Slot generation from templates
|
||||
- Weekday mapping (JS vs ISO)
|
||||
- Booking creation with all validations
|
||||
- Cancellation with/without refund
|
||||
- Membership expiration
|
||||
|
||||
---
|
||||
|
||||
## Performance Tips
|
||||
|
||||
1. **Avoid N+1 queries** - Always include relations in findMany
|
||||
2. **Batch operations** - Use createMany/updateMany for large operations
|
||||
3. **Transactions** - Wrap multi-step operations to prevent race conditions
|
||||
4. **Indexes** - Queries filter by date and status (both indexed)
|
||||
|
||||
---
|
||||
|
||||
## Development Workflow
|
||||
|
||||
1. **Setup templates** → `PUT /admin/week-template`
|
||||
2. **Manually trigger generation** → `POST /admin/generate-slots`
|
||||
3. **View available slots** → `GET /time-slot/available?date=...`
|
||||
4. **Create booking** → `POST /booking`
|
||||
5. **Cancel booking** → `PUT /booking/:id/cancel`
|
||||
|
||||
For testing without scheduler:
|
||||
```typescript
|
||||
// Inject SlotGeneratorService and call directly
|
||||
const count = await slotGenerator.generateSlots(7)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Architecture Highlights
|
||||
|
||||
✅ **Idempotent** - Safe to re-run slot generation
|
||||
✅ **Transactional** - Bookings are atomic
|
||||
✅ **Automated** - 4 daily cron jobs maintain state
|
||||
✅ **Flexible** - Supports multiple membership types
|
||||
✅ **Scalable** - Batch operations, proper indexes
|
||||
✅ **Validating** - DTO decorators + business logic checks
|
||||
|
||||
966
docs/TIME_SLOT_SCHEDULING_SYSTEM.md
Normal file
966
docs/TIME_SLOT_SCHEDULING_SYSTEM.md
Normal file
@@ -0,0 +1,966 @@
|
||||
# NestJS Time-Slot & Scheduling System Analysis
|
||||
|
||||
## Executive Summary
|
||||
|
||||
This is a comprehensive analysis of the pilates studio booking system's time-slot generation and scheduling backend. The system automatically generates time slots from reusable weekly templates, maintains their lifecycle, and integrates tightly with the booking and membership management systems.
|
||||
|
||||
---
|
||||
|
||||
## 1. Data Models (Prisma Schema)
|
||||
|
||||
### 1.1 WeekTemplate Model
|
||||
**Location:** `packages/server/prisma/schema.prisma` (lines 113-126)
|
||||
|
||||
```prisma
|
||||
model WeekTemplate {
|
||||
id String @id @default(uuid())
|
||||
dayOfWeek Int @map("day_of_week") // 1=Mon, 7=Sun (ISO standard)
|
||||
startTime String @map("start_time") // e.g., "09:00"
|
||||
endTime String @map("end_time") // e.g., "10:00"
|
||||
capacity Int @default(1) // Max participants
|
||||
isActive Boolean @default(true) // Enable/disable template
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
timeSlots TimeSlot[] // Generated slots from this template
|
||||
}
|
||||
```
|
||||
|
||||
**Purpose:**
|
||||
- Defines recurring time slots by day of week and time
|
||||
- Used as blueprint for automatic slot generation
|
||||
- Capacity defines how many people can book each slot
|
||||
|
||||
**Key Constraints:**
|
||||
- `dayOfWeek` uses **ISO 8601 standard** (1=Monday through 7=Sunday)
|
||||
- NOT JavaScript getDay() (0=Sunday)
|
||||
- Conversion happens in SlotGeneratorService.toIsoWeekday()
|
||||
|
||||
---
|
||||
|
||||
### 1.2 TimeSlot Model
|
||||
**Location:** `packages/server/prisma/schema.prisma` (lines 128-148)
|
||||
|
||||
```prisma
|
||||
model TimeSlot {
|
||||
id String @id @default(uuid())
|
||||
date DateTime @db.Date // Calendar date (midnight UTC)
|
||||
startTime String @map("start_time") // "HH:mm" format
|
||||
endTime String @map("end_time") // "HH:mm" format
|
||||
capacity Int @default(1) // Max participants
|
||||
bookedCount Int @default(0) // Current bookings
|
||||
status TimeSlotStatus @default(OPEN) // OPEN | FULL | CLOSED
|
||||
source TimeSlotSource @default(TEMPLATE) // TEMPLATE | MANUAL
|
||||
templateId String? @map("template_id") // Reference to WeekTemplate
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
template WeekTemplate? @relation(fields: [templateId], references: [id])
|
||||
bookings Booking[]
|
||||
|
||||
@@unique([date, startTime, endTime]) // Prevent duplicate slots
|
||||
@@index([date])
|
||||
@@index([status])
|
||||
}
|
||||
```
|
||||
|
||||
**Status Lifecycle:**
|
||||
- **OPEN**: Accepts bookings, bookedCount < capacity
|
||||
- **FULL**: No more bookings, bookedCount >= capacity
|
||||
- **CLOSED**: Past date or manually closed, no bookings allowed
|
||||
|
||||
**Source Types:**
|
||||
- **TEMPLATE**: Auto-generated from WeekTemplate
|
||||
- **MANUAL**: Created directly by admin
|
||||
|
||||
---
|
||||
|
||||
### 1.3 Booking Model
|
||||
**Location:** `packages/server/prisma/schema.prisma` (lines 150-168)
|
||||
|
||||
```prisma
|
||||
model Booking {
|
||||
id String @id @default(uuid())
|
||||
userId String @map("user_id")
|
||||
timeSlotId String @map("time_slot_id")
|
||||
membershipId String @map("membership_id")
|
||||
status BookingStatus @default(CONFIRMED)
|
||||
cancelledAt DateTime? @map("cancelled_at")
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
user User @relation(fields: [userId], references: [id])
|
||||
timeSlot TimeSlot @relation(fields: [timeSlotId], references: [id])
|
||||
membership Membership @relation(fields: [membershipId], references: [id])
|
||||
|
||||
@@unique([userId, timeSlotId]) // One booking per user per slot
|
||||
@@index([userId])
|
||||
@@index([status])
|
||||
}
|
||||
```
|
||||
|
||||
**Booking Status Values:**
|
||||
- **CONFIRMED**: Active reservation
|
||||
- **CANCELLED**: User cancelled
|
||||
- **COMPLETED**: Slot time has passed
|
||||
- **NO_SHOW**: Marked manually if user didn't attend
|
||||
|
||||
---
|
||||
|
||||
## 2. SlotGeneratorService
|
||||
|
||||
**Location:** `packages/server/src/time-slot/slot-generator.service.ts`
|
||||
|
||||
### 2.1 Service Overview
|
||||
|
||||
Core service responsible for:
|
||||
1. **Generating** time slots from WeekTemplate
|
||||
2. **Cleaning up** expired slots
|
||||
3. **Managing** membership expiration
|
||||
4. **Marking** past bookings as completed
|
||||
|
||||
### 2.2 Key Methods
|
||||
|
||||
#### `generateSlots(daysAhead: number = 14): Promise<number>`
|
||||
|
||||
**Purpose:** Creates time slots for the next N days based on active WeekTemplates.
|
||||
|
||||
**Algorithm:**
|
||||
```
|
||||
1. Fetch all active WeekTemplates (isActive = true)
|
||||
2. Calculate tomorrow at midnight UTC as start date
|
||||
3. For each day in [tomorrow, tomorrow + daysAhead):
|
||||
a. Get ISO weekday (1-7) from JavaScript date
|
||||
b. Find matching templates for this weekday
|
||||
c. For each matching template, create slot data:
|
||||
- date: UTC midnight
|
||||
- startTime/endTime: from template
|
||||
- capacity: from template
|
||||
- source: TimeSlotSource.TEMPLATE
|
||||
- templateId: template.id
|
||||
4. Batch create all slots using createMany() with skipDuplicates: true
|
||||
5. Return count of newly created slots
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- **Idempotent:** Re-running is safe; duplicate date+startTime+endTime combos are skipped
|
||||
- **Timezone Aware:** Uses UTC midnight for dates
|
||||
- **Weekday Mapping:** Converts JS getDay() → ISO weekday
|
||||
- **Batch Insert:** Creates all slots in single database operation
|
||||
|
||||
**Example Execution:**
|
||||
- Today: Monday, April 7, 2026
|
||||
- Daylight: 14 days
|
||||
- Template: Monday 09:00-10:00, Friday 18:00-19:00
|
||||
- Result: 2 slots tomorrow (Monday), 0 Wed-Thu, 1 Friday, repeat pattern
|
||||
|
||||
---
|
||||
|
||||
#### `cleanupExpiredSlots(): Promise<number>`
|
||||
|
||||
**Purpose:** Marks all OPEN slots with dates before today as CLOSED.
|
||||
|
||||
**Logic:**
|
||||
```sql
|
||||
UPDATE time_slots
|
||||
SET status = 'CLOSED'
|
||||
WHERE status = 'OPEN' AND date < TODAY_MIDNIGHT_UTC
|
||||
```
|
||||
|
||||
**Returns:** Count of slots closed.
|
||||
|
||||
---
|
||||
|
||||
#### `checkExpiredMemberships(): Promise<number>`
|
||||
|
||||
**Purpose:** Manages membership expiration in two ways:
|
||||
|
||||
1. **By Expiration Date:**
|
||||
```
|
||||
WHERE status = ACTIVE AND expireDate < NOW
|
||||
SET status = EXPIRED
|
||||
```
|
||||
|
||||
2. **By Used-Up Sessions:**
|
||||
```
|
||||
WHERE status = ACTIVE AND remainingTimes = 0
|
||||
SET status = USED_UP
|
||||
```
|
||||
|
||||
**Returns:** Total count of memberships updated.
|
||||
|
||||
---
|
||||
|
||||
#### `completeBookings(): Promise<number>`
|
||||
|
||||
**Purpose:** Marks CONFIRMED bookings for past time slots as COMPLETED.
|
||||
|
||||
**Logic:**
|
||||
```sql
|
||||
UPDATE bookings
|
||||
SET status = 'COMPLETED'
|
||||
WHERE status = 'CONFIRMED'
|
||||
AND timeSlot.date < TODAY_MIDNIGHT_UTC
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. TimeSlotService
|
||||
|
||||
**Location:** `packages/server/src/time-slot/time-slot.service.ts`
|
||||
|
||||
### 3.1 Service Overview
|
||||
|
||||
Handles time slot queries and management for both members and admins.
|
||||
|
||||
### 3.2 Key Methods
|
||||
|
||||
#### `getAvailableSlots(date: string, userId?: string): Promise<TimeSlotWithBookingStatus[]>`
|
||||
|
||||
**Purpose:** Retrieve all non-closed slots for a specific date, optionally including user's booking status.
|
||||
|
||||
**Query Logic:**
|
||||
```
|
||||
1. Parse date string to Date object
|
||||
2. Find all slots for that calendar day:
|
||||
- WHERE status != CLOSED
|
||||
- ORDER BY startTime ASC
|
||||
3. If userId provided:
|
||||
- Include bookings where userId=X AND status=CONFIRMED
|
||||
- Map to "isBookedByMe" and "myBookingId" fields
|
||||
4. Return TimeSlotWithBookingStatus[]
|
||||
```
|
||||
|
||||
**Response Type:**
|
||||
```typescript
|
||||
interface TimeSlotWithBookingStatus {
|
||||
id: string
|
||||
date: string // ISO date "YYYY-MM-DD"
|
||||
startTime: string // "HH:mm"
|
||||
endTime: string
|
||||
capacity: number
|
||||
bookedCount: number
|
||||
status: TimeSlotStatus // OPEN | FULL | CLOSED
|
||||
source: TimeSlotSource // TEMPLATE | MANUAL
|
||||
templateId: string | null
|
||||
createdAt: string // ISO datetime
|
||||
updatedAt: string
|
||||
isBookedByMe: boolean // Current user's booking?
|
||||
myBookingId: string | null // For cancellation
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### `getSlotById(id: string): Promise<TimeSlot>`
|
||||
|
||||
Returns full slot details including all bookings. Throws NotFoundException if not found.
|
||||
|
||||
---
|
||||
|
||||
#### `createManualSlot(dto: CreateManualSlotDto): Promise<TimeSlot>`
|
||||
|
||||
**Purpose:** Allow admins to create one-off time slots outside templates.
|
||||
|
||||
**DTO:**
|
||||
```typescript
|
||||
class CreateManualSlotDto {
|
||||
date: string // "YYYY-MM-DD"
|
||||
startTime: string // "HH:mm"
|
||||
endTime: string // "HH:mm"
|
||||
capacity?: number // Defaults to DEFAULT_SLOT_CAPACITY (1)
|
||||
}
|
||||
```
|
||||
|
||||
**Creates slot with:**
|
||||
- `source: TimeSlotSource.MANUAL`
|
||||
- `templateId: null`
|
||||
|
||||
---
|
||||
|
||||
#### `closeSlot(id: string): Promise<TimeSlot>`
|
||||
|
||||
Sets slot status to CLOSED. Prevents new bookings but keeps existing ones.
|
||||
|
||||
---
|
||||
|
||||
#### `getWeekTemplates(): Promise<WeekTemplate[]>`
|
||||
|
||||
Lists all templates ordered by dayOfWeek and startTime.
|
||||
|
||||
---
|
||||
|
||||
#### `replaceWeekTemplates(items: WeekTemplateItemDto[]): Promise<CreateBatchPayload>`
|
||||
|
||||
**Purpose:** Atomic replacement of all templates (used during admin config).
|
||||
|
||||
**Transaction:**
|
||||
```
|
||||
1. DELETE FROM week_templates (all rows)
|
||||
2. CREATE week_templates with new items
|
||||
3. Return count
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. TimeSlotController & AdminTimeSlotController
|
||||
|
||||
**Location:** `packages/server/src/time-slot/time-slot.controller.ts`
|
||||
|
||||
### 4.1 Member Endpoints
|
||||
|
||||
#### `GET /time-slot/available?date=YYYY-MM-DD`
|
||||
- Returns available slots for the date
|
||||
- Includes current user's booking status
|
||||
- Requires JWT authentication
|
||||
|
||||
#### `GET /time-slot/:id`
|
||||
- Returns full slot details with all bookings
|
||||
- Requires JWT authentication
|
||||
|
||||
---
|
||||
|
||||
### 4.2 Admin Endpoints
|
||||
|
||||
All require `@Roles(UserRole.ADMIN)` and JWT auth.
|
||||
|
||||
#### `GET /admin/week-template`
|
||||
Lists all WeekTemplate entries.
|
||||
|
||||
#### `PUT /admin/week-template`
|
||||
Replaces all templates. Request body:
|
||||
```json
|
||||
{
|
||||
"templates": [
|
||||
{
|
||||
"dayOfWeek": 1,
|
||||
"startTime": "09:00",
|
||||
"endTime": "10:00",
|
||||
"capacity": 1,
|
||||
"isActive": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### `POST /admin/time-slot/manual`
|
||||
Creates a manual slot. Request body:
|
||||
```json
|
||||
{
|
||||
"date": "2026-04-10",
|
||||
"startTime": "14:00",
|
||||
"endTime": "15:00",
|
||||
"capacity": 2
|
||||
}
|
||||
```
|
||||
|
||||
#### `PUT /admin/time-slot/:id/close`
|
||||
Closes a specific slot.
|
||||
|
||||
#### `POST /admin/generate-slots`
|
||||
Manually trigger slot generation (default 14 days ahead).
|
||||
|
||||
---
|
||||
|
||||
## 5. SchedulerService - Automated Jobs
|
||||
|
||||
**Location:** `packages/server/src/scheduler/scheduler.service.ts`
|
||||
|
||||
### 5.1 Overview
|
||||
|
||||
Uses `@nestjs/schedule` to run daily maintenance tasks. All times in UTC.
|
||||
|
||||
### 5.2 Cron Jobs
|
||||
|
||||
#### Job 1: Slot Generation
|
||||
```
|
||||
@Cron('0 2 * * *') // 02:00 UTC daily
|
||||
async handleSlotGeneration()
|
||||
```
|
||||
- Calls: `slotGenerator.generateSlots(14)`
|
||||
- Generates slots 14 days ahead
|
||||
- Purpose: Keep pipeline filled
|
||||
|
||||
---
|
||||
|
||||
#### Job 2: Slot Cleanup
|
||||
```
|
||||
@Cron('30 2 * * *') // 02:30 UTC daily
|
||||
async handleCleanupSlots()
|
||||
```
|
||||
- Calls: `slotGenerator.cleanupExpiredSlots()`
|
||||
- Marks past OPEN slots as CLOSED
|
||||
|
||||
---
|
||||
|
||||
#### Job 3: Membership Check
|
||||
```
|
||||
@Cron('0 3 * * *') // 03:00 UTC daily
|
||||
async handleCheckMemberships()
|
||||
```
|
||||
- Calls: `slotGenerator.checkExpiredMemberships()`
|
||||
- Expires memberships by date or used-up sessions
|
||||
|
||||
---
|
||||
|
||||
#### Job 4: Booking Completion
|
||||
```
|
||||
@Cron('0 22 * * *') // 22:00 UTC daily
|
||||
async handleCompleteBookings()
|
||||
```
|
||||
- Calls: `slotGenerator.completeBookings()`
|
||||
- Marks past CONFIRMED bookings as COMPLETED
|
||||
|
||||
---
|
||||
|
||||
## 6. BookingService - Integration with TimeSlots
|
||||
|
||||
**Location:** `packages/server/src/booking/booking.service.ts`
|
||||
|
||||
### 6.1 Key Integration Points
|
||||
|
||||
#### `createBooking(userId: string, dto: CreateBookingDto): Promise<BookingWithRelations>`
|
||||
|
||||
**DTO:**
|
||||
```typescript
|
||||
class CreateBookingDto {
|
||||
timeSlotId: string // UUID of TimeSlot
|
||||
membershipId: string // UUID of Membership
|
||||
}
|
||||
```
|
||||
|
||||
**Transaction Flow:**
|
||||
```
|
||||
1. Fetch TimeSlot - validate status = OPEN
|
||||
2. Check unique constraint - user not already booked this slot
|
||||
3. Fetch Membership - validate:
|
||||
- Belongs to user
|
||||
- Status = ACTIVE
|
||||
- Has remaining capacity:
|
||||
* TIMES/TRIAL: remainingTimes > 0
|
||||
* DURATION: not expired
|
||||
4. Create Booking(userId, timeSlotId, membershipId) → CONFIRMED
|
||||
5. Update TimeSlot:
|
||||
- bookedCount++
|
||||
- If bookedCount >= capacity, set status = FULL
|
||||
6. Update Membership (if time-based):
|
||||
- remainingTimes--
|
||||
- If remainingTimes = 0, set status = USED_UP
|
||||
7. Return booking with relations
|
||||
```
|
||||
|
||||
**Error Handling:**
|
||||
- TimeSlot not OPEN → BadRequestException
|
||||
- Duplicate booking → ConflictException
|
||||
- Invalid membership → ForbiddenException
|
||||
- No remaining sessions → BadRequestException
|
||||
|
||||
---
|
||||
|
||||
#### `cancelBooking(userId: string, bookingId: string): Promise<CancelBookingResult>`
|
||||
|
||||
**Refund Logic:**
|
||||
```
|
||||
cancelHoursLimit = StudioConfig.cancelHoursLimit (default 2 hours)
|
||||
slotStartMs = Date(date).setUTC Hours + startTime
|
||||
deadlineMs = NOW + (cancelHoursLimit * 3600 * 1000)
|
||||
withinLimit = slotStartMs >= deadlineMs
|
||||
|
||||
IF withinLimit:
|
||||
Restore membership.remainingTimes++
|
||||
ELSE:
|
||||
No refund
|
||||
```
|
||||
|
||||
**Transaction Flow:**
|
||||
```
|
||||
1. Mark Booking → CANCELLED, set cancelledAt
|
||||
2. Decrement TimeSlot.bookedCount
|
||||
3. If slot was FULL, restore to OPEN
|
||||
4. If within cancel window:
|
||||
- For TIMES/TRIAL: increment remainingTimes
|
||||
- Restore membership status if was USED_UP
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### `getMyBookings(userId: string, status?, page, limit): Promise<PaginatedResult>`
|
||||
|
||||
Lists user's bookings with pagination, optionally filtered by status.
|
||||
|
||||
---
|
||||
|
||||
#### `getUpcomingBookings(userId: string): Promise<BookingWithRelations[]>`
|
||||
|
||||
Returns all CONFIRMED bookings for dates >= today, ordered by date.
|
||||
|
||||
---
|
||||
|
||||
## 7. Data Flow Diagrams
|
||||
|
||||
### 7.1 Slot Generation Flow
|
||||
|
||||
```
|
||||
Daily 02:00 UTC
|
||||
↓
|
||||
SchedulerService.handleSlotGeneration()
|
||||
↓
|
||||
SlotGeneratorService.generateSlots(14)
|
||||
↓
|
||||
1. Query WeekTemplate (isActive=true)
|
||||
2. For next 14 days:
|
||||
- Match templates by ISO weekday
|
||||
- Create TimeSlot entries
|
||||
3. Use createMany(skipDuplicates: true)
|
||||
↓
|
||||
Database: Insert new TimeSlot records
|
||||
↓
|
||||
Return: count of new slots
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7.2 Booking Flow
|
||||
|
||||
```
|
||||
User Action
|
||||
↓
|
||||
POST /booking
|
||||
timeSlotId: UUID
|
||||
membershipId: UUID
|
||||
↓
|
||||
BookingService.createBooking()
|
||||
↓
|
||||
START TRANSACTION
|
||||
├─ Validate TimeSlot (status=OPEN)
|
||||
├─ Check unique(userId, timeSlotId)
|
||||
├─ Validate Membership (ACTIVE, not expired)
|
||||
├─ CREATE Booking(CONFIRMED)
|
||||
├─ UPDATE TimeSlot(bookedCount++, status=?)
|
||||
└─ UPDATE Membership(remainingTimes--)
|
||||
COMMIT
|
||||
↓
|
||||
Return: BookingWithRelations
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7.3 Cancellation Flow
|
||||
|
||||
```
|
||||
User Action
|
||||
↓
|
||||
PUT /booking/:id/cancel
|
||||
↓
|
||||
BookingService.cancelBooking()
|
||||
↓
|
||||
Check: Now vs Slot Time + cancelHoursLimit
|
||||
↓
|
||||
START TRANSACTION
|
||||
├─ UPDATE Booking(CANCELLED, cancelledAt=NOW)
|
||||
├─ UPDATE TimeSlot(bookedCount--, status=?)
|
||||
└─ IF within cancel window:
|
||||
└─ UPDATE Membership(remainingTimes++)
|
||||
COMMIT
|
||||
↓
|
||||
Return: { booking, refunded: boolean }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. DTOs & Request/Response
|
||||
|
||||
### 8.1 Time Slot DTOs
|
||||
|
||||
**Location:** `packages/server/src/time-slot/dto/`
|
||||
|
||||
#### `QuerySlotsDto`
|
||||
```typescript
|
||||
class QuerySlotsDto {
|
||||
@IsDateString()
|
||||
date!: string // Format: YYYY-MM-DD
|
||||
}
|
||||
```
|
||||
|
||||
#### `CreateManualSlotDto`
|
||||
```typescript
|
||||
class CreateManualSlotDto {
|
||||
@IsDateString()
|
||||
date!: string
|
||||
@IsString()
|
||||
startTime!: string
|
||||
@IsString()
|
||||
endTime!: string
|
||||
@IsOptional()
|
||||
@IsInt()
|
||||
@Min(1)
|
||||
capacity?: number
|
||||
}
|
||||
```
|
||||
|
||||
#### `WeekTemplateItemDto` & `UpdateWeekTemplateDto`
|
||||
```typescript
|
||||
class WeekTemplateItemDto {
|
||||
@IsInt()
|
||||
@Min(1)
|
||||
@Max(7)
|
||||
dayOfWeek!: number // ISO: 1=Mon, 7=Sun
|
||||
@IsString()
|
||||
startTime!: string
|
||||
@IsString()
|
||||
endTime!: string
|
||||
@IsOptional()
|
||||
capacity?: number
|
||||
@IsOptional()
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
class UpdateWeekTemplateDto {
|
||||
@ArrayNotEmpty()
|
||||
templates!: WeekTemplateItemDto[]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Shared Constants & Enums
|
||||
|
||||
**Location:** `packages/shared/src/`
|
||||
|
||||
### 9.1 Constants
|
||||
|
||||
```typescript
|
||||
// constants.ts
|
||||
export const DEFAULT_CANCEL_HOURS_LIMIT = 2
|
||||
export const DEFAULT_SLOT_CAPACITY = 1
|
||||
export const SLOT_GENERATION_DAYS = 14
|
||||
export const TIME_PERIODS = {
|
||||
MORNING: { label: '上午', start: '06:00', end: '12:00' },
|
||||
AFTERNOON: { label: '下午', start: '12:00', end: '18:00' },
|
||||
EVENING: { label: '晚上', start: '18:00', end: '22:00' },
|
||||
}
|
||||
export const DATE_SELECTOR_DAYS = 7
|
||||
export const WEEKDAY_LABELS = ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
```
|
||||
|
||||
### 9.2 Enums
|
||||
|
||||
```typescript
|
||||
// enums.ts
|
||||
enum TimeSlotStatus {
|
||||
OPEN = 'OPEN',
|
||||
FULL = 'FULL',
|
||||
CLOSED = 'CLOSED',
|
||||
}
|
||||
|
||||
enum TimeSlotSource {
|
||||
TEMPLATE = 'TEMPLATE',
|
||||
MANUAL = 'MANUAL',
|
||||
}
|
||||
|
||||
enum BookingStatus {
|
||||
CONFIRMED = 'CONFIRMED',
|
||||
CANCELLED = 'CANCELLED',
|
||||
COMPLETED = 'COMPLETED',
|
||||
NO_SHOW = 'NO_SHOW',
|
||||
}
|
||||
|
||||
enum MembershipStatus {
|
||||
ACTIVE = 'ACTIVE',
|
||||
EXPIRED = 'EXPIRED',
|
||||
USED_UP = 'USED_UP',
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. File Structure Summary
|
||||
|
||||
```
|
||||
packages/server/src/
|
||||
├── time-slot/
|
||||
│ ├── __tests__/
|
||||
│ │ ├── slot-generator.service.spec.ts (170 lines, comprehensive tests)
|
||||
│ │ └── time-slot.service.spec.ts
|
||||
│ ├── dto/
|
||||
│ │ ├── query-slots.dto.ts
|
||||
│ │ ├── create-manual-slot.dto.ts
|
||||
│ │ └── week-template.dto.ts
|
||||
│ ├── slot-generator.service.ts (172 lines, 4 key methods)
|
||||
│ ├── time-slot.service.ts (142 lines)
|
||||
│ ├── time-slot.controller.ts (93 lines, 2 controllers)
|
||||
│ └── time-slot.module.ts
|
||||
│
|
||||
├── scheduler/
|
||||
│ ├── __tests__/
|
||||
│ │ └── scheduler.service.spec.ts
|
||||
│ ├── scheduler.service.ts (55 lines, 4 cron jobs)
|
||||
│ └── scheduler.module.ts
|
||||
│
|
||||
├── booking/
|
||||
│ ├── __tests__/
|
||||
│ │ └── booking.service.spec.ts
|
||||
│ ├── dto/
|
||||
│ │ └── create-booking.dto.ts
|
||||
│ ├── booking.service.ts (367 lines)
|
||||
│ ├── booking.controller.ts (82 lines)
|
||||
│ └── booking.module.ts
|
||||
│
|
||||
├── prisma/
|
||||
│ └── schema.prisma (205 lines, includes models)
|
||||
│
|
||||
└── app.module.ts (imports TimeSlotModule, SchedulerModule)
|
||||
|
||||
packages/shared/src/
|
||||
├── types/
|
||||
│ ├── time-slot.ts
|
||||
│ └── (others)
|
||||
├── constants.ts (22 lines)
|
||||
├── enums.ts (47 lines)
|
||||
└── index.ts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. Key Architectural Patterns
|
||||
|
||||
### 11.1 Idempotent Slot Generation
|
||||
|
||||
**Problem:** If scheduler crashes or delays, slots might not be generated.
|
||||
**Solution:**
|
||||
- Use `createMany(skipDuplicates: true)` with unique constraint on `[date, startTime, endTime]`
|
||||
- Safe to re-run multiple times
|
||||
- Only inserts new combinations
|
||||
|
||||
---
|
||||
|
||||
### 11.2 Atomic Transactions
|
||||
|
||||
**For Booking Creation:**
|
||||
- Create booking, update slot, update membership in single transaction
|
||||
- All-or-nothing: ensures consistency if any step fails
|
||||
|
||||
**For Cancellation:**
|
||||
- Cancel booking, restore slot, conditionally restore membership
|
||||
- Prevents race conditions
|
||||
|
||||
---
|
||||
|
||||
### 11.3 ISO Weekday Mapping
|
||||
|
||||
**Problem:** JavaScript `Date.getDay()` uses 0=Sunday, but WeekTemplate uses ISO 8601 (1=Monday).
|
||||
|
||||
**Solution:** Helper function `toIsoWeekday()`:
|
||||
```typescript
|
||||
function toIsoWeekday(jsDay: number): number {
|
||||
return jsDay === 0 ? 7 : jsDay
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 11.4 Membership Type Handling
|
||||
|
||||
**TIMES/TRIAL cardType:**
|
||||
- Deduct `remainingTimes--` on booking
|
||||
- Mark USED_UP when remainingTimes = 0
|
||||
- Refund if cancelled within window
|
||||
|
||||
**DURATION cardType:**
|
||||
- Check `expireDate` not passed
|
||||
- No deduction; just check validity
|
||||
- No refund on cancellation
|
||||
|
||||
---
|
||||
|
||||
## 12. Example Scenarios
|
||||
|
||||
### Scenario 1: Setup Studio with Mon-Fri Classes
|
||||
|
||||
**Admin Actions:**
|
||||
```json
|
||||
PUT /admin/week-template
|
||||
{
|
||||
"templates": [
|
||||
{ "dayOfWeek": 1, "startTime": "09:00", "endTime": "10:00", "capacity": 1 },
|
||||
{ "dayOfWeek": 1, "startTime": "10:30", "endTime": "11:30", "capacity": 1 },
|
||||
{ "dayOfWeek": 2, "startTime": "09:00", "endTime": "10:00", "capacity": 1 },
|
||||
{ "dayOfWeek": 3, "startTime": "09:00", "endTime": "10:00", "capacity": 1 },
|
||||
{ "dayOfWeek": 4, "startTime": "09:00", "endTime": "10:00", "capacity": 1 },
|
||||
{ "dayOfWeek": 5, "startTime": "09:00", "endTime": "10:00", "capacity": 1 },
|
||||
{ "dayOfWeek": 5, "startTime": "18:00", "endTime": "19:00", "capacity": 1 }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Next Day (02:00 UTC):**
|
||||
- Scheduler auto-generates 14 days of slots
|
||||
- Result: 14 Mon morning + 14 Mon mid-morning + 14 Tue morning + ... + 14 Fri evening
|
||||
|
||||
**Member Action (View Availability):**
|
||||
```
|
||||
GET /time-slot/available?date=2026-04-10
|
||||
→ Returns all slots for April 10 (Friday)
|
||||
→ Includes bookings for current user
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Scenario 2: Member Books, Then Cancels
|
||||
|
||||
**Member Books:**
|
||||
```
|
||||
POST /booking
|
||||
{
|
||||
"timeSlotId": "slot-123",
|
||||
"membershipId": "mem-456"
|
||||
}
|
||||
```
|
||||
|
||||
**System:**
|
||||
1. Validates slot is OPEN, membership is ACTIVE with remaining sessions
|
||||
2. Creates Booking(CONFIRMED)
|
||||
3. Increments slot.bookedCount (1 → 2)
|
||||
4. If now at capacity, sets slot.status = FULL
|
||||
5. Decrements membership.remainingTimes (5 → 4)
|
||||
|
||||
**Member Cancels (within 2-hour window):**
|
||||
```
|
||||
PUT /booking/booking-789/cancel
|
||||
```
|
||||
|
||||
**System:**
|
||||
1. Checks if NOW + 2 hours ≤ slot start time ✓
|
||||
2. Sets booking.status = CANCELLED
|
||||
3. Decrements slot.bookedCount (2 → 1)
|
||||
4. If slot was FULL, restores to OPEN
|
||||
5. Increments membership.remainingTimes (4 → 5) ✓ refunded
|
||||
|
||||
---
|
||||
|
||||
### Scenario 3: Membership Expires
|
||||
|
||||
**Overnight at 03:00 UTC:**
|
||||
- Scheduler runs `handleCheckMemberships()`
|
||||
- Updates all ACTIVE memberships where `expireDate < NOW` to EXPIRED
|
||||
- User tries to book → BadRequestException "Membership is not active (status: EXPIRED)"
|
||||
|
||||
---
|
||||
|
||||
## 13. Testing Guide
|
||||
|
||||
### Key Test Files
|
||||
|
||||
1. **`slot-generator.service.spec.ts`** (310 lines)
|
||||
- Tests slot generation from templates
|
||||
- Tests weekday mapping (JS vs ISO)
|
||||
- Tests cleanup and expiration logic
|
||||
- Tests membership and booking expiration
|
||||
|
||||
2. **`time-slot.service.spec.ts`** (existing)
|
||||
- Tests getAvailableSlots with user booking status
|
||||
- Tests manual slot creation
|
||||
|
||||
3. **`booking.service.spec.ts`** (existing)
|
||||
- Tests booking creation with all validations
|
||||
- Tests cancellation with refund logic
|
||||
|
||||
---
|
||||
|
||||
## 14. Configuration & Environment
|
||||
|
||||
### Required Env Variables
|
||||
```
|
||||
DATABASE_URL=mysql://...
|
||||
```
|
||||
|
||||
### Studio Config (StudioConfig table)
|
||||
- `cancelHoursLimit`: Hours before slot to allow free cancellation (default 2)
|
||||
|
||||
### Constants (shared package)
|
||||
- `SLOT_GENERATION_DAYS`: 14 (days ahead to generate)
|
||||
- `DEFAULT_SLOT_CAPACITY`: 1 (private lessons)
|
||||
- `DEFAULT_CANCEL_HOURS_LIMIT`: 2
|
||||
|
||||
---
|
||||
|
||||
## 15. Performance Considerations
|
||||
|
||||
### Database Indexes
|
||||
- `TimeSlot(date)` - for date range queries
|
||||
- `TimeSlot(status)` - for status filtering
|
||||
- `Booking(userId)` - for user's bookings
|
||||
- `Booking(status)` - for status filtering
|
||||
|
||||
### Batch Operations
|
||||
- Slot generation uses `createMany()` for efficiency
|
||||
- Expiration checks use `updateMany()` instead of loops
|
||||
|
||||
### Transaction Isolation
|
||||
- All booking/cancellation operations wrapped in transactions
|
||||
- Prevents race conditions on bookedCount and remainingTimes
|
||||
|
||||
---
|
||||
|
||||
## 16. Security Notes
|
||||
|
||||
### Authorization
|
||||
- JWT guard on all endpoints
|
||||
- RolesGuard for admin endpoints (only ADMIN role)
|
||||
- Users can only modify their own bookings/memberships
|
||||
|
||||
### Validation
|
||||
- All DTOs have class-validator decorators
|
||||
- UUID validation on foreign keys
|
||||
- Date string validation (YYYY-MM-DD format)
|
||||
|
||||
### Data Integrity
|
||||
- Unique constraint on `[userId, timeSlotId]` prevents duplicate bookings
|
||||
- Unique constraint on `[date, startTime, endTime]` prevents duplicate slots
|
||||
- Foreign key constraints on relations
|
||||
|
||||
---
|
||||
|
||||
## 17. Future Enhancement Ideas
|
||||
|
||||
1. **Overbooking Buffer:**
|
||||
- Allow configurable overbooking ratio (e.g., 110% capacity)
|
||||
|
||||
2. **Waitlist Support:**
|
||||
- Add BookingStatus.WAITLISTED
|
||||
- Auto-promote when slot opens
|
||||
|
||||
3. **Recurring Cancellation:**
|
||||
- Cancel all future bookings of a series
|
||||
- Batch refunds
|
||||
|
||||
4. **Slot Availability Notifications:**
|
||||
- Alert users when slots available
|
||||
- Implement notification queue
|
||||
|
||||
5. **Dynamic Pricing:**
|
||||
- Peak vs off-peak pricing
|
||||
- Last-minute discounts
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
This time-slot and scheduling system is well-architected with:
|
||||
|
||||
✅ **Idempotent slot generation** - Safe to re-run
|
||||
✅ **Atomic transactions** - ACID compliance for bookings
|
||||
✅ **Automatic maintenance** - 4 daily cron jobs
|
||||
✅ **Flexible membership types** - TIMES, DURATION, TRIAL
|
||||
✅ **Refund policy** - Configurable cancellation window
|
||||
✅ **ISO weekday standard** - Proper international support
|
||||
✅ **Comprehensive validation** - DTOs with decorators
|
||||
✅ **Role-based access** - Admin vs member endpoints
|
||||
|
||||
The system handles:
|
||||
- Auto-generating 14 days of slots nightly
|
||||
- Accepting bookings with capacity management
|
||||
- Canceling with conditional refunds
|
||||
- Expiring memberships and marking past bookings
|
||||
- All with transactional integrity and concurrent safety.
|
||||
|
||||
@@ -8,25 +8,25 @@
|
||||
"type-check": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-components": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-h5": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-app": "3.0.0-5000620260331001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-5000620260331001",
|
||||
"@dcloudio/uni-components": "3.0.0-5000620260331001",
|
||||
"@dcloudio/uni-h5": "3.0.0-5000620260331001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-5000620260331001",
|
||||
"@mp-pilates/shared": "workspace:*",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^3.4.0",
|
||||
"@dcloudio/uni-automator": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-4060620250520001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-automator": "3.0.0-5000620260331001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-5000620260331001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-5000620260331001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-5000620260331001",
|
||||
"@types/node": "^20.0.0",
|
||||
"sass": "^1.77.0",
|
||||
"typescript": "^5.4.0",
|
||||
"vite": "^5.4.0",
|
||||
"vue-tsc": "^2.0.0",
|
||||
"sass": "^1.77.0"
|
||||
"vue-tsc": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,18 +15,18 @@
|
||||
<view class="info-section">
|
||||
<view class="info-row">
|
||||
<text class="info-label">日期</text>
|
||||
<text class="info-value">{{ slot?.date }}</text>
|
||||
<text class="info-value">{{ timeSlot?.date }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">时间</text>
|
||||
<text class="info-value" v-if="slot">
|
||||
{{ slot.startTime.slice(0, 5) }} - {{ slot.endTime.slice(0, 5) }}
|
||||
<text class="info-value" v-if="timeSlot">
|
||||
{{ timeSlot.startTime.slice(0, 5) }} - {{ timeSlot.endTime.slice(0, 5) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">剩余</text>
|
||||
<text class="info-value" v-if="slot">
|
||||
{{ slot.capacity - slot.bookedCount }} 个名额
|
||||
<text class="info-value" v-if="timeSlot">
|
||||
{{ timeSlot.capacity - timeSlot.bookedCount }} 个名额
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -123,7 +123,7 @@ import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pila
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
slot: TimeSlotWithBookingStatus | null
|
||||
timeSlot: TimeSlotWithBookingStatus | null
|
||||
memberships: MembershipWithCardType[]
|
||||
}>()
|
||||
|
||||
@@ -151,9 +151,9 @@ const selectedMembership = computed(() =>
|
||||
)
|
||||
|
||||
function handleConfirm() {
|
||||
if (!props.slot || !selectedMembershipId.value) return
|
||||
if (!props.timeSlot || !selectedMembershipId.value) return
|
||||
emit('confirm', {
|
||||
timeSlotId: props.slot.id,
|
||||
timeSlotId: props.timeSlot.id,
|
||||
membershipId: selectedMembershipId.value,
|
||||
})
|
||||
}
|
||||
@@ -212,7 +212,7 @@ function handleMaskTap() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
background: $primary-selected-bg;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -250,7 +250,7 @@ function handleMaskTap() {
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background: #f0f0f0;
|
||||
background: $primary-border;
|
||||
margin: 8rpx 0 28rpx;
|
||||
}
|
||||
|
||||
@@ -285,14 +285,14 @@ function handleMaskTap() {
|
||||
align-items: center;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
border: 2rpx solid $primary-border;
|
||||
background: $primary-bg;
|
||||
gap: 20rpx;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
|
||||
&.selected {
|
||||
border-color: #c9a87c;
|
||||
background: #fffbf5;
|
||||
border-color: $primary-dark;
|
||||
background: $primary-selected-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -300,7 +300,7 @@ function handleMaskTap() {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 14rpx;
|
||||
background: linear-gradient(135deg, #d4b896, #c9a87c);
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -333,7 +333,7 @@ function handleMaskTap() {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 50%;
|
||||
background: #c9a87c;
|
||||
background: $primary-dark;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -358,7 +358,7 @@ function handleMaskTap() {
|
||||
|
||||
/* Deduction tip */
|
||||
.deduction-tip {
|
||||
background: #fffbf0;
|
||||
background: $primary-selected-bg;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
margin-bottom: 28rpx;
|
||||
@@ -366,7 +366,7 @@ function handleMaskTap() {
|
||||
|
||||
.deduction-text {
|
||||
font-size: 24rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -382,7 +382,7 @@ function handleMaskTap() {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border: 2rpx solid $primary-border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -402,7 +402,7 @@ function handleMaskTap() {
|
||||
flex: 2;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #c9a87c;
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -412,7 +412,7 @@ function handleMaskTap() {
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #e0e0e0;
|
||||
background: $primary-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import type { StudioConfig } from '@mp-pilates/shared'
|
||||
import { getSystemLayout } from '../utils/system'
|
||||
|
||||
defineProps<{
|
||||
studioInfo: StudioConfig | null
|
||||
@@ -43,8 +44,7 @@ defineProps<{
|
||||
const statusBarHeight = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = sysInfo.statusBarHeight ?? 20
|
||||
statusBarHeight.value = getSystemLayout().statusBarHeight
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -54,7 +54,7 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 580rpx;
|
||||
overflow: hidden;
|
||||
background: #2a2a2a;
|
||||
background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
@@ -71,7 +71,7 @@ onMounted(() => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba($primary-dark, 0.25);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
|
||||
@@ -189,7 +189,7 @@ function truncate(str: string, maxLen: number): string {
|
||||
}
|
||||
|
||||
.thumb--trial .thumb-fallback {
|
||||
background: linear-gradient(135deg, #7d6608, #c9a87c);
|
||||
background: linear-gradient(135deg, #5a7a8a, $primary-dark);
|
||||
}
|
||||
|
||||
.thumb-name {
|
||||
@@ -309,11 +309,6 @@ function truncate(str: string, maxLen: number): string {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Empty state ── */
|
||||
.empty-state {
|
||||
padding: 80rpx;
|
||||
|
||||
112
packages/app/src/components/CustomNavBar.vue
Normal file
112
packages/app/src/components/CustomNavBar.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view
|
||||
class="nav-bar"
|
||||
:class="{ 'nav-bar--transparent': transparent }"
|
||||
:style="{ paddingTop: statusBarHeight + 'px' }"
|
||||
>
|
||||
<view class="nav-bar__inner">
|
||||
<!-- Back button -->
|
||||
<view v-if="showBack" class="nav-bar__left" @tap="handleBack">
|
||||
<text class="nav-bar__back-icon">‹</text>
|
||||
</view>
|
||||
<view v-else class="nav-bar__left" />
|
||||
|
||||
<!-- Title -->
|
||||
<text class="nav-bar__title">{{ title }}</text>
|
||||
|
||||
<!-- Right placeholder (balances the back button) -->
|
||||
<view class="nav-bar__right" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
title: string
|
||||
/** Transparent bg with white text — for pages with colored header */
|
||||
transparent?: boolean
|
||||
/** Show back arrow (for sub-pages navigated via navigateTo) */
|
||||
showBack?: boolean
|
||||
}>()
|
||||
|
||||
const statusBarHeight = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
const windowInfo = uni.getWindowInfo()
|
||||
statusBarHeight.value = windowInfo.statusBarHeight ?? 20
|
||||
})
|
||||
|
||||
function handleBack() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
background: #ffffff;
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
|
||||
.nav-bar__title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-bar__back-icon {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
&__left,
|
||||
&__right {
|
||||
width: 72rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__back-icon {
|
||||
font-size: 52rpx;
|
||||
font-weight: 300;
|
||||
color: #1a1a2e;
|
||||
line-height: 1;
|
||||
margin-top: -4rpx;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
letter-spacing: 2rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -53,7 +53,7 @@ function handleSelect(date: string) {
|
||||
.date-selector {
|
||||
background: #fff;
|
||||
padding: 16rpx 0 20rpx;
|
||||
border-bottom: 1rpx solid #f0ece8;
|
||||
border-bottom: 1rpx solid $primary-border;
|
||||
|
||||
.scroll {
|
||||
width: 100%;
|
||||
@@ -75,7 +75,7 @@ function handleSelect(date: string) {
|
||||
min-width: 88rpx;
|
||||
padding: 16rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f7f4f0;
|
||||
background: $primary-bg;
|
||||
gap: 4rpx;
|
||||
transition: background 0.2s;
|
||||
flex-shrink: 0;
|
||||
@@ -100,7 +100,7 @@ function handleSelect(date: string) {
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #c9a87c;
|
||||
background: $primary-color;
|
||||
|
||||
.weekday {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
@@ -117,7 +117,7 @@ function handleSelect(date: string) {
|
||||
|
||||
&.today:not(.active) {
|
||||
.weekday {
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,9 +13,13 @@
|
||||
hover-stay-time="150"
|
||||
@tap="handleTap(item)"
|
||||
>
|
||||
<view class="profile-menu__icon-wrap" :class="{ 'profile-menu__icon-wrap--admin': item.isAdmin }">
|
||||
<text class="profile-menu__icon">{{ item.icon }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="profile-menu__icon-wrap"
|
||||
:class="[
|
||||
`profile-menu__icon-wrap--${item.key}`,
|
||||
{ 'profile-menu__icon-wrap--admin': item.isAdmin },
|
||||
]"
|
||||
/>
|
||||
<text class="profile-menu__title" :class="{ 'profile-menu__title--admin': item.isAdmin }">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
@@ -32,7 +36,6 @@ import { computed } from 'vue'
|
||||
interface MenuItem {
|
||||
key: string
|
||||
type: 'item' | 'separator'
|
||||
icon?: string
|
||||
title?: string
|
||||
path?: string
|
||||
isAdmin?: boolean
|
||||
@@ -57,7 +60,6 @@ const menuItems = computed<MenuItem[]>(() => {
|
||||
{
|
||||
key: 'membership',
|
||||
type: 'item',
|
||||
icon: '💳',
|
||||
title: '我的会员卡',
|
||||
path: '/pages/profile/membership',
|
||||
requireAuth: true,
|
||||
@@ -65,7 +67,6 @@ const menuItems = computed<MenuItem[]>(() => {
|
||||
{
|
||||
key: 'bookings',
|
||||
type: 'item',
|
||||
icon: '📅',
|
||||
title: '我的预约',
|
||||
path: '/pages/profile/bookings',
|
||||
requireAuth: true,
|
||||
@@ -73,7 +74,6 @@ const menuItems = computed<MenuItem[]>(() => {
|
||||
{
|
||||
key: 'info',
|
||||
type: 'item',
|
||||
icon: '👤',
|
||||
title: '个人信息',
|
||||
path: '/pages/profile/info',
|
||||
requireAuth: true,
|
||||
@@ -85,14 +85,12 @@ const menuItems = computed<MenuItem[]>(() => {
|
||||
{
|
||||
key: 'clear',
|
||||
type: 'item',
|
||||
icon: '🗑️',
|
||||
title: '清除缓存',
|
||||
action: 'clear',
|
||||
},
|
||||
{
|
||||
key: 'about',
|
||||
type: 'item',
|
||||
icon: 'ℹ️',
|
||||
title: '关于我们',
|
||||
action: 'about',
|
||||
},
|
||||
@@ -103,7 +101,6 @@ const menuItems = computed<MenuItem[]>(() => {
|
||||
items.push({
|
||||
key: 'admin',
|
||||
type: 'item',
|
||||
icon: '⚙️',
|
||||
title: '管理中心',
|
||||
path: '/pages/admin/index',
|
||||
isAdmin: true,
|
||||
@@ -163,24 +160,177 @@ function handleTap(item: MenuItem) {
|
||||
}
|
||||
|
||||
&__icon-wrap {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: $radius-sm;
|
||||
background: rgba($brand-color, 0.08);
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: $spacing-md;
|
||||
position: relative;
|
||||
background: rgba($brand-color, 0.06);
|
||||
|
||||
// ─── Pure CSS Icons ────────────────────────────────
|
||||
|
||||
// 会员卡 — 圆角矩形卡片 + 横线
|
||||
&--membership {
|
||||
background: rgba($accent-color, 0.10);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 26rpx;
|
||||
height: 18rpx;
|
||||
border: 2.5rpx solid $accent-color;
|
||||
border-radius: 4rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 1rpx);
|
||||
width: 16rpx;
|
||||
height: 0;
|
||||
border-top: 2.5rpx solid $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 预约 — 日历（矩形 + 顶部两个小竖线）
|
||||
&--bookings {
|
||||
background: rgba($brand-color, 0.06);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 24rpx;
|
||||
height: 22rpx;
|
||||
border: 2.5rpx solid $brand-color;
|
||||
border-radius: 4rpx;
|
||||
border-top-width: 5rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 10rpx;
|
||||
height: 0;
|
||||
border-top: 2.5rpx solid $brand-color;
|
||||
// 用 box-shadow 模拟两个竖线
|
||||
box-shadow:
|
||||
-4rpx -7rpx 0 0 $brand-color,
|
||||
4rpx -7rpx 0 0 $brand-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 个人信息 — 人形（圆 + 肩弧）
|
||||
&--info {
|
||||
background: rgba($brand-color, 0.06);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border: 2.5rpx solid $brand-color;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
width: 22rpx;
|
||||
height: 10rpx;
|
||||
border: 2.5rpx solid $brand-color;
|
||||
border-bottom: none;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
position: absolute;
|
||||
bottom: 13rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// 清除缓存 — 旋转的刷新箭头（圆弧）
|
||||
&--clear {
|
||||
background: rgba($text-hint, 0.08);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border: 2.5rpx solid $text-secondary;
|
||||
border-radius: 50%;
|
||||
border-right-color: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
right: 15rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5rpx solid $text-secondary;
|
||||
border-top: 4rpx solid transparent;
|
||||
border-bottom: 4rpx solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 关于我们 — 圆形中心一个点 + 竖线（info 标记）
|
||||
&--about {
|
||||
background: rgba($text-hint, 0.08);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border: 2.5rpx solid $text-secondary;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2.5rpx;
|
||||
height: 8rpx;
|
||||
background: $text-secondary;
|
||||
border-radius: 1rpx;
|
||||
box-shadow: 0 -6rpx 0 0 $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// 管理中心 — 齿轮（圆 + 四个刻度）
|
||||
&--admin {
|
||||
background: rgba($accent-color, 0.12);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border: 2.5rpx solid $accent-color;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
// 四条刻度线用 box-shadow 实现
|
||||
background:
|
||||
linear-gradient($accent-color, $accent-color) center top / 2.5rpx 5rpx no-repeat,
|
||||
linear-gradient($accent-color, $accent-color) center bottom / 2.5rpx 5rpx no-repeat,
|
||||
linear-gradient($accent-color, $accent-color) left center / 5rpx 2.5rpx no-repeat,
|
||||
linear-gradient($accent-color, $accent-color) right center / 5rpx 2.5rpx no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
||||
@@ -4,8 +4,10 @@
|
||||
<view v-if="!userStore.loggedIn" class="entry-card login-card" @tap="handleLogin">
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<text class="entry-icon">👋</text>
|
||||
<view>
|
||||
<view class="entry-icon-wrap login-icon">
|
||||
<view class="icon-user" />
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">欢迎来到工作室</text>
|
||||
<text class="entry-subtitle">登录后即可预约课程</text>
|
||||
</view>
|
||||
@@ -24,8 +26,10 @@
|
||||
>
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<text class="entry-icon">✨</text>
|
||||
<view>
|
||||
<view class="entry-icon-wrap trial-icon">
|
||||
<view class="icon-star" />
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">初次体验</text>
|
||||
<text class="entry-subtitle">专属体验课，了解普拉提</text>
|
||||
</view>
|
||||
@@ -42,8 +46,10 @@
|
||||
<view class="entry-card active-card" @tap="handleBooking">
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<text class="entry-icon">🧘</text>
|
||||
<view>
|
||||
<view class="entry-icon-wrap active-icon">
|
||||
<view class="icon-clock" />
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">一键约课</text>
|
||||
<text class="entry-subtitle">{{ activeMembershipLabel }}</text>
|
||||
</view>
|
||||
@@ -60,7 +66,9 @@
|
||||
|
||||
<!-- Renew reminder if running low -->
|
||||
<view v-if="isRunningLow" class="renew-tip" @tap="scrollToCardShop">
|
||||
<text class="renew-tip-icon">⚠️</text>
|
||||
<view class="renew-tip-icon">
|
||||
<view class="icon-warning" />
|
||||
</view>
|
||||
<text class="renew-tip-text">课次即将用完，点击续卡保持练习节奏</text>
|
||||
<text class="renew-tip-action">续卡 ›</text>
|
||||
</view>
|
||||
@@ -74,8 +82,10 @@
|
||||
>
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<text class="entry-icon">💳</text>
|
||||
<view>
|
||||
<view class="entry-icon-wrap expired-icon">
|
||||
<view class="icon-card" />
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">续费会员卡</text>
|
||||
<text class="entry-subtitle">您的卡已到期，续卡继续练习</text>
|
||||
</view>
|
||||
@@ -106,6 +116,8 @@ async function handleLogin() {
|
||||
try {
|
||||
await userStore.login()
|
||||
await userStore.fetchMemberships()
|
||||
// 登录成功后跳转到个人中心，让用户完善信息
|
||||
uni.navigateTo({ url: '/pages/profile/info' })
|
||||
} catch {
|
||||
uni.showToast({ title: '登录失败，请重试', icon: 'none' })
|
||||
} finally {
|
||||
@@ -172,24 +184,24 @@ const lowestRemainingTimes = computed(() => {
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
padding: 36rpx 32rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.10);
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: linear-gradient(135deg, #1a1a2e, #2d2d5e);
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
|
||||
}
|
||||
|
||||
.trial-card {
|
||||
background: linear-gradient(135deg, #2d2d5e, #4a3f7a);
|
||||
background: linear-gradient(135deg, #2d2d5e 0%, #4a3f7a 100%);
|
||||
}
|
||||
|
||||
.active-card {
|
||||
background: linear-gradient(135deg, #1a1a2e, #3a2a1a);
|
||||
background: linear-gradient(135deg, #2a3a4a 0%, #1a2a3a 100%);
|
||||
}
|
||||
|
||||
.expired-card {
|
||||
background: linear-gradient(135deg, #4a4a4a, #2a2a2a);
|
||||
background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
@@ -202,59 +214,196 @@ const lowestRemainingTimes = computed(() => {
|
||||
.entry-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
gap: 28rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.entry-icon {
|
||||
font-size: 56rpx;
|
||||
.entry-icon-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.trial-icon {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
.active-icon {
|
||||
background: rgba(168, 196, 206, 0.25);
|
||||
}
|
||||
|
||||
.expired-icon {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* ── Icon shapes (pure CSS) ── */
|
||||
|
||||
/* User icon: head + shoulders */
|
||||
.icon-user {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 28rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Star icon - diamond shape */
|
||||
.icon-star {
|
||||
position: relative;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #ffd700;
|
||||
}
|
||||
}
|
||||
|
||||
/* Clock icon - circle with dot */
|
||||
.icon-clock {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid #fff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card icon */
|
||||
.icon-card {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 3rpx solid #fff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 2rpx;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Warning triangle */
|
||||
.icon-warning {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12rpx solid transparent;
|
||||
border-right: 12rpx solid transparent;
|
||||
border-bottom: 20rpx solid #e8a87c;
|
||||
}
|
||||
|
||||
.entry-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.entry-subtitle {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.entry-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 32rpx;
|
||||
padding: 18rpx 36rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: #c9a87c;
|
||||
}
|
||||
|
||||
.trial-btn {
|
||||
background: #c9a87c;
|
||||
}
|
||||
|
||||
.login-btn,
|
||||
.trial-btn,
|
||||
.book-btn {
|
||||
background: #c9a87c;
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.renew-btn {
|
||||
background: #888;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.login-btn .entry-btn-text,
|
||||
@@ -276,7 +425,7 @@ const lowestRemainingTimes = computed(() => {
|
||||
}
|
||||
|
||||
.trial-badge {
|
||||
background: #c9a87c;
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
@@ -294,11 +443,15 @@ const lowestRemainingTimes = computed(() => {
|
||||
padding: 20rpx 24rpx;
|
||||
background: #fff8f0;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #f0d9bc;
|
||||
border: 1rpx solid rgba(240, 180, 100, 0.3);
|
||||
}
|
||||
|
||||
.renew-tip-icon {
|
||||
font-size: 28rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -311,7 +464,7 @@ const lowestRemainingTimes = computed(() => {
|
||||
|
||||
.renew-tip-action {
|
||||
font-size: 24rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1,53 +1,66 @@
|
||||
<template>
|
||||
<view class="slot-card">
|
||||
<!-- Time & capacity info -->
|
||||
<view class="slot-card" :class="{ 'slot-card--booked': timeSlot.isBookedByMe }">
|
||||
<!-- Booked accent bar -->
|
||||
<view v-if="timeSlot.isBookedByMe" class="booked-bar" />
|
||||
|
||||
<view class="slot-main">
|
||||
<view class="slot-time-block">
|
||||
<text class="slot-time">{{ slot.startTime.slice(0, 5) }} - {{ slot.endTime.slice(0, 5) }}</text>
|
||||
<!-- Left: Time column -->
|
||||
<view class="slot-time-col">
|
||||
<text class="slot-start">{{ timeSlot.startTime.slice(0, 5) }}</text>
|
||||
<view class="time-divider" />
|
||||
<text class="slot-end">{{ timeSlot.endTime.slice(0, 5) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Center: Info -->
|
||||
<view class="slot-info">
|
||||
<view class="slot-title-row">
|
||||
<text class="slot-title">普拉提私教</text>
|
||||
<text class="slot-duration">{{ durationMin }}分钟</text>
|
||||
</view>
|
||||
<view class="slot-meta">
|
||||
<view class="slot-capacity" :class="capacityClass">
|
||||
<text class="capacity-dot" />
|
||||
<text class="capacity-text">{{ capacityLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Action area -->
|
||||
<!-- Right: Action -->
|
||||
<view class="slot-action">
|
||||
<!-- OPEN + not booked by me -->
|
||||
<template v-if="slot.status === TimeSlotStatus.OPEN && !slot.isBookedByMe">
|
||||
<view class="btn btn-book" @tap.stop="emit('book', slot)">
|
||||
<text class="btn-text">可预约</text>
|
||||
<!-- OPEN + not booked -->
|
||||
<template v-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
|
||||
<view class="btn btn-book" @tap.stop="emit('book', timeSlot)">
|
||||
<text class="btn-text">预约</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- OPEN + booked by me -->
|
||||
<template v-else-if="slot.status === TimeSlotStatus.OPEN && slot.isBookedByMe">
|
||||
<view class="booked-row">
|
||||
<template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
|
||||
<view class="booked-badge-col">
|
||||
<view class="badge-booked">
|
||||
<text class="badge-text">已预约</text>
|
||||
</view>
|
||||
<view class="btn-cancel" @tap.stop="emit('cancel', slot)">
|
||||
<text class="btn-cancel-text">取消</text>
|
||||
<view class="btn-cancel" @tap.stop="emit('cancel', timeSlot)">
|
||||
<text class="btn-cancel-text">取消预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- FULL -->
|
||||
<template v-else-if="slot.status === TimeSlotStatus.FULL">
|
||||
<view class="btn btn-disabled">
|
||||
<template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
|
||||
<view class="btn btn-full">
|
||||
<text class="btn-text">已约满</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- CLOSED -->
|
||||
<template v-else>
|
||||
<view class="btn btn-disabled">
|
||||
<view class="btn btn-closed">
|
||||
<text class="btn-text">已关闭</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Booked indicator bar -->
|
||||
<view v-if="slot.isBookedByMe" class="booked-bar" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -57,23 +70,31 @@ import { TimeSlotStatus } from '@mp-pilates/shared'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
slot: TimeSlotWithBookingStatus
|
||||
timeSlot: TimeSlotWithBookingStatus
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
book: [slot: TimeSlotWithBookingStatus]
|
||||
cancel: [slot: TimeSlotWithBookingStatus]
|
||||
book: [timeSlot: TimeSlotWithBookingStatus]
|
||||
cancel: [timeSlot: TimeSlotWithBookingStatus]
|
||||
}>()
|
||||
|
||||
const durationMin = computed(() => {
|
||||
const [sh, sm] = props.timeSlot.startTime.split(':').map(Number)
|
||||
const [eh, em] = props.timeSlot.endTime.split(':').map(Number)
|
||||
return (eh * 60 + em) - (sh * 60 + sm)
|
||||
})
|
||||
|
||||
const capacityLabel = computed(() => {
|
||||
const { bookedCount, capacity, status } = props.slot
|
||||
const { bookedCount, capacity, status } = props.timeSlot
|
||||
if (status === TimeSlotStatus.CLOSED) return '已关闭'
|
||||
return `${bookedCount}/${capacity} 人`
|
||||
if (status === TimeSlotStatus.FULL) return '已约满'
|
||||
const remaining = capacity - bookedCount
|
||||
return `剩余 ${remaining} 个名额`
|
||||
})
|
||||
|
||||
const capacityClass = computed(() => {
|
||||
const { bookedCount, capacity, status } = props.slot
|
||||
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'
|
||||
@@ -84,19 +105,30 @@ const capacityClass = computed(() => {
|
||||
<style lang="scss" scoped>
|
||||
.slot-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
&--booked {
|
||||
background: #f0f7fb;
|
||||
box-shadow: 0 4rpx 24rpx rgba($primary-dark, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.booked-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6rpx;
|
||||
background: #c9a87c;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
width: 8rpx;
|
||||
background: linear-gradient(180deg, $primary-color, $primary-dark);
|
||||
border-radius: 24rpx 0 0 24rpx;
|
||||
}
|
||||
|
||||
.slot-main {
|
||||
@@ -104,67 +136,125 @@ const capacityClass = computed(() => {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 32rpx 28rpx 32rpx 36rpx;
|
||||
gap: 20rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.slot-time-block {
|
||||
/* ── Time column ─── */
|
||||
.slot-time-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 80rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.slot-start {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.time-divider {
|
||||
width: 2rpx;
|
||||
height: 16rpx;
|
||||
background: #e0dcd6;
|
||||
margin: 6rpx 0;
|
||||
border-radius: 1rpx;
|
||||
}
|
||||
|
||||
.slot-end {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* ── Info ─── */
|
||||
.slot-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.slot-title-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.slot-time {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
.slot-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.slot-duration {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.slot-meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.slot-capacity {
|
||||
display: inline-flex;
|
||||
align-self: flex-start;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
.capacity-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.capacity-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&.cap-open .capacity-text {
|
||||
background: #f0faf3;
|
||||
color: #4caf50;
|
||||
&.cap-open {
|
||||
.capacity-dot { background: #4caf50; }
|
||||
.capacity-text { color: #4caf50; }
|
||||
}
|
||||
|
||||
&.cap-almost .capacity-text {
|
||||
background: #fff8ed;
|
||||
color: #f59e0b;
|
||||
&.cap-almost {
|
||||
.capacity-dot { background: #f59e0b; }
|
||||
.capacity-text { color: #f59e0b; }
|
||||
}
|
||||
|
||||
&.cap-full .capacity-text {
|
||||
background: #fef0f0;
|
||||
color: #ef4444;
|
||||
&.cap-full {
|
||||
.capacity-dot { background: #ef4444; }
|
||||
.capacity-text { color: #ef4444; }
|
||||
}
|
||||
|
||||
&.cap-closed .capacity-text {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
&.cap-closed {
|
||||
.capacity-dot { background: #ccc; }
|
||||
.capacity-text { color: #999; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Action ─── */
|
||||
.slot-action {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 140rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 34rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 28rpx;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.btn-text {
|
||||
font-size: 26rpx;
|
||||
@@ -172,33 +262,40 @@ const capacityClass = computed(() => {
|
||||
}
|
||||
|
||||
&.btn-book {
|
||||
background: #c9a87c;
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
|
||||
|
||||
.btn-text {
|
||||
color: #fff;
|
||||
.btn-text { color: #fff; }
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-disabled {
|
||||
background: #f0f0f0;
|
||||
&.btn-full {
|
||||
background: #fef0f0;
|
||||
|
||||
.btn-text {
|
||||
color: #bbb;
|
||||
.btn-text { color: #ef4444; }
|
||||
}
|
||||
|
||||
&.btn-closed {
|
||||
background: #f5f5f5;
|
||||
|
||||
.btn-text { color: #bbb; }
|
||||
}
|
||||
}
|
||||
|
||||
.booked-row {
|
||||
.booked-badge-col {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.badge-booked {
|
||||
height: 52rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #fff8ee;
|
||||
padding: 0 24rpx;
|
||||
background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
|
||||
border-radius: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -206,23 +303,20 @@ const capacityClass = computed(() => {
|
||||
|
||||
.badge-text {
|
||||
font-size: 24rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
height: 52rpx;
|
||||
padding: 0 16rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.btn-cancel-text {
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ef4444;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,7 +53,7 @@ function handleChange(key: PeriodKey) {
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
padding: 0 24rpx;
|
||||
border-bottom: 1rpx solid #f0ece8;
|
||||
border-bottom: 1rpx solid $primary-border;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
@@ -71,7 +71,7 @@ function handleChange(key: PeriodKey) {
|
||||
|
||||
&.active {
|
||||
.tab-label {
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@ function handleChange(key: PeriodKey) {
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #c9a87c;
|
||||
background: $primary-dark;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,7 +119,7 @@ function goToBookings() {
|
||||
|
||||
.section-more {
|
||||
font-size: 26rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
}
|
||||
|
||||
.booking-card {
|
||||
@@ -150,7 +150,7 @@ function goToBookings() {
|
||||
|
||||
.date-month {
|
||||
font-size: 22rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<view class="user-card">
|
||||
<!-- Header: gradient background -->
|
||||
<view class="user-card__header">
|
||||
<!-- Header: gradient background, padded to sit below nav bar -->
|
||||
<view class="user-card__header" :style="{ paddingTop: (navBarHeight ?? 0) + 'px' }">
|
||||
<!-- Not logged in state -->
|
||||
<view v-if="!loggedIn" class="user-card__guest">
|
||||
<view class="user-card__avatar-wrap">
|
||||
<image class="user-card__avatar-img" src="/static/default-avatar.png" mode="aspectFill" />
|
||||
<image class="user-card__avatar-img" src="/static/default-avatar.jpg" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="user-card__guest-info">
|
||||
<text class="user-card__guest-title">Hi，欢迎来到普拉提</text>
|
||||
@@ -25,9 +25,10 @@
|
||||
mode="aspectFill"
|
||||
@error="onAvatarError"
|
||||
/>
|
||||
<view class="user-card__vip-badge" v-if="vipLevel">
|
||||
<!-- VIP badge hidden for now -->
|
||||
<!-- <view class="user-card__vip-badge" v-if="vipLevel">
|
||||
<text class="user-card__vip-text">{{ vipLevel }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="user-card__info">
|
||||
<view class="user-card__name-row">
|
||||
@@ -72,7 +73,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { UserProfileResponse, UserStatsResponse, MembershipWithCardType } from '@mp-pilates/shared'
|
||||
import { MembershipStatus } from '@mp-pilates/shared'
|
||||
|
||||
@@ -83,6 +84,8 @@ const props = defineProps<{
|
||||
stats: UserStatsResponse | null
|
||||
memberships?: readonly MembershipWithCardType[]
|
||||
loading?: boolean
|
||||
/** Height of the custom nav bar in px, so header content starts below it */
|
||||
navBarHeight?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -91,9 +94,19 @@ const emit = defineEmits<{
|
||||
|
||||
const avatarFailed = ref(false)
|
||||
|
||||
// 头像 URL 变化时重置加载错误状态，避免新头像因偶发加载失败而被永久隐藏
|
||||
watch(
|
||||
() => props.user?.avatarUrl,
|
||||
(newUrl, oldUrl) => {
|
||||
if (newUrl && newUrl !== oldUrl) {
|
||||
avatarFailed.value = false
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const avatarSrc = computed(() => {
|
||||
if (avatarFailed.value || !props.user?.avatarUrl) {
|
||||
return '/static/default-avatar.png'
|
||||
return '/static/default-avatar.jpg'
|
||||
}
|
||||
return props.user.avatarUrl
|
||||
})
|
||||
@@ -135,12 +148,12 @@ function handleLogin() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-card {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
|
||||
background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
|
||||
border-radius: 0 0 40rpx 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
padding: 60rpx $spacing-lg $spacing-lg;
|
||||
padding: $spacing-lg $spacing-lg $spacing-lg;
|
||||
}
|
||||
|
||||
// ── Guest state ──
|
||||
|
||||
@@ -1,88 +1,108 @@
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/home/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/booking/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预约课程"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/booking/detail",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/card/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购买会员卡"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/membership",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的会员卡"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/bookings",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的预约"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/info",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人信息"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "管理中心"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/bookings",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/schedule",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/week-template",
|
||||
"style": {
|
||||
"navigationBarTitleText": "排课设置"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/slot-adjust",
|
||||
"style": {
|
||||
"navigationBarTitleText": "时段调整"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/members",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员管理"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/orders",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单管理"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/card-types",
|
||||
"style": {
|
||||
"navigationBarTitleText": "卡种管理"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/studio",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工作室设置"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
@@ -96,7 +116,7 @@
|
||||
"color": "#999999",
|
||||
"selectedColor": "#1a1a2e",
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderStyle": "black",
|
||||
"borderStyle": "white",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/home/index",
|
||||
|
||||
785
packages/app/src/pages/admin/bookings.vue
Normal file
785
packages/app/src/pages/admin/bookings.vue
Normal file
@@ -0,0 +1,785 @@
|
||||
<template>
|
||||
<view class="admin-bookings-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="课程管理" show-back />
|
||||
|
||||
<!-- Stats row -->
|
||||
<view class="stats-row">
|
||||
<view class="stat-item" @tap="switchTab(null)">
|
||||
<text class="stat-num">{{ stats.total }}</text>
|
||||
<text class="stat-label">全部</text>
|
||||
</view>
|
||||
<view class="stat-item stat-item--pending" @tap="switchTab('PENDING_CONFIRMATION')">
|
||||
<text class="stat-num">{{ stats.pending }}</text>
|
||||
<text class="stat-label">待确认</text>
|
||||
</view>
|
||||
<view class="stat-item stat-item--confirmed" @tap="switchTab('CONFIRMED')">
|
||||
<text class="stat-num">{{ stats.confirmed }}</text>
|
||||
<text class="stat-label">已确认</text>
|
||||
</view>
|
||||
<view class="stat-item stat-item--completed" @tap="switchTab('COMPLETED')">
|
||||
<text class="stat-num">{{ stats.completed }}</text>
|
||||
<text class="stat-label">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab filter bar -->
|
||||
<view class="filter-bar">
|
||||
<view
|
||||
v-for="tab in filterTabs"
|
||||
:key="tab.value ?? 'all'"
|
||||
class="filter-tab"
|
||||
:class="{ active: activeFilter === tab.value }"
|
||||
@tap="switchTab(tab.value)"
|
||||
>
|
||||
<text class="filter-tab-text">{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Booking list -->
|
||||
<scroll-view
|
||||
class="scroll"
|
||||
scroll-y
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<!-- Loading -->
|
||||
<view v-if="loading && !refreshing" class="loading-wrap">
|
||||
<view v-for="i in 4" :key="i" class="skeleton-card">
|
||||
<view class="skeleton-stripe" />
|
||||
<view class="skeleton-body">
|
||||
<view class="skeleton-line skeleton-line--long" />
|
||||
<view class="skeleton-line skeleton-line--medium" />
|
||||
<view class="skeleton-line skeleton-line--short" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Empty -->
|
||||
<view v-else-if="bookings.length === 0" class="empty-wrap">
|
||||
<view class="empty-icon-circle">
|
||||
<text class="empty-icon-text">📋</text>
|
||||
</view>
|
||||
<text class="empty-title">暂无预约</text>
|
||||
<text class="empty-sub">当前筛选条件下没有预约记录</text>
|
||||
</view>
|
||||
|
||||
<!-- Booking cards -->
|
||||
<view v-else class="list">
|
||||
<view
|
||||
v-for="booking in bookings"
|
||||
:key="booking.id"
|
||||
class="booking-card"
|
||||
@tap="goDetail(booking)"
|
||||
>
|
||||
<!-- Left stripe -->
|
||||
<view class="booking-stripe" :class="bookingStatusStripeClass(booking.status)" />
|
||||
|
||||
<!-- Content -->
|
||||
<view class="booking-content">
|
||||
<!-- Header row -->
|
||||
<view class="booking-header">
|
||||
<view class="student-info">
|
||||
<text class="student-name">{{ booking.user?.nickname || '匿名用户' }}</text>
|
||||
<text v-if="booking.user?.phone" class="student-phone">{{ booking.user.phone }}</text>
|
||||
</view>
|
||||
<view class="status-badge" :class="bookingStatusBadgeClass(booking.status)">
|
||||
<text class="status-text">{{ bookingStatusLabel(booking.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Course info -->
|
||||
<view class="course-info">
|
||||
<text class="course-date">{{ formatDateDisplay(booking.timeSlot.date) }}</text>
|
||||
<text class="course-time">{{ booking.timeSlot.startTime.slice(0, 5) }} - {{ booking.timeSlot.endTime.slice(0, 5) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Card type -->
|
||||
<view class="card-info">
|
||||
<text class="card-label">使用卡种</text>
|
||||
<text class="card-name">{{ booking.membership?.cardType?.name }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<view v-if="booking.status === 'PENDING_CONFIRMATION'" class="action-row">
|
||||
<view class="action-btn action-btn--confirm" @tap.stop="handleConfirm(booking)">
|
||||
<text class="action-btn-text">确认预约</text>
|
||||
</view>
|
||||
<view class="action-btn action-btn--cancel" @tap.stop="handleCancel(booking)">
|
||||
<text class="action-btn-text">取消</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="booking.status === 'CONFIRMED'" class="action-row">
|
||||
<view class="action-btn action-btn--complete" @tap.stop="handleComplete(booking)">
|
||||
<text class="action-btn-text">核销完成</text>
|
||||
</view>
|
||||
<view class="action-btn action-btn--noshow" @tap.stop="handleNoShow(booking)">
|
||||
<text class="action-btn-text">标记未到</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Timeline preview -->
|
||||
<view v-if="getHistory(booking.id).length > 0" class="timeline-preview">
|
||||
<view
|
||||
v-for="(h, idx) in getHistory(booking.id).slice(-2)"
|
||||
:key="idx"
|
||||
class="timeline-item"
|
||||
>
|
||||
<text class="timeline-dot" :class="bookingTimelineDotClass(h.toStatus)" />
|
||||
<text class="timeline-text">{{ formatTimelineText(h) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Load more / pagination -->
|
||||
<view v-if="bookings.length > 0 && hasMore" class="load-more" @tap="loadMore">
|
||||
<text class="load-more-text">加载更多</text>
|
||||
</view>
|
||||
|
||||
<view class="scroll-bottom-spacer" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import type { BookingWithUser, BookingStatusHistory } from '@mp-pilates/shared'
|
||||
import { BookingStatus } from '@mp-pilates/shared'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import {
|
||||
formatDateDisplay,
|
||||
bookingStatusLabel,
|
||||
bookingStatusBadgeClass,
|
||||
bookingStatusStripeClass,
|
||||
bookingTimelineDotClass,
|
||||
} from '../../utils/booking-helpers'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
// ─── Store & Nav ──────────────────────────────────────────────────────────
|
||||
const bookingStore = useBookingStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
const refreshing = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
// ─── Filter state ─────────────────────────────────────────────────────────
|
||||
type FilterValue = string | null
|
||||
|
||||
const filterTabs: { label: string; value: FilterValue }[] = [
|
||||
{ label: '全部', value: null },
|
||||
{ label: '待确认', value: 'PENDING_CONFIRMATION' },
|
||||
{ label: '已确认', value: 'CONFIRMED' },
|
||||
{ label: '已完成', value: 'COMPLETED' },
|
||||
{ label: '已取消', value: 'CANCELLED' },
|
||||
]
|
||||
|
||||
const activeFilter = ref<FilterValue>(null)
|
||||
|
||||
// ─── Pagination ───────────────────────────────────────────────────────────
|
||||
const currentPage = ref(1)
|
||||
const pageSize = 20
|
||||
const hasMore = ref(false)
|
||||
const totalCount = ref(0)
|
||||
|
||||
// ─── Data ────────────────────────────────────────────────────────────────
|
||||
const bookings = ref<BookingWithUser[]>([])
|
||||
const allBookingsCache = ref<BookingWithUser[]>([]) // cache for stats
|
||||
const historyMap = ref<Record<string, BookingStatusHistory[]>>({})
|
||||
|
||||
// ─── Computed stats ──────────────────────────────────────────────────────
|
||||
const stats = computed(() => {
|
||||
const cache = allBookingsCache.value
|
||||
return {
|
||||
total: cache.length,
|
||||
pending: cache.filter((b) => b.status === BookingStatus.PENDING_CONFIRMATION).length,
|
||||
confirmed: cache.filter((b) => b.status === BookingStatus.CONFIRMED).length,
|
||||
completed: cache.filter(
|
||||
(b) => b.status === BookingStatus.COMPLETED || b.status === BookingStatus.NO_SHOW,
|
||||
).length,
|
||||
}
|
||||
})
|
||||
|
||||
// ─── Timeline helpers ─────────────────────────────────────────────────────
|
||||
function getHistory(bookingId: string): BookingStatusHistory[] {
|
||||
return historyMap.value[bookingId] || []
|
||||
}
|
||||
|
||||
function formatTimelineText(h: BookingStatusHistory): string {
|
||||
const d = new Date(h.createdAt)
|
||||
const time = `${d.getMonth() + 1}月${d.getDate()}日 ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
||||
return `${time} ${h.remark || bookingStatusLabel(h.toStatus)}`
|
||||
}
|
||||
|
||||
// ─── Data loading ─────────────────────────────────────────────────────────
|
||||
async function loadBookings(append = false) {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const page = append ? currentPage.value + 1 : 1
|
||||
const result = await bookingStore.fetchAllAdminBookings(page, pageSize, activeFilter.value ?? undefined)
|
||||
|
||||
if (append) {
|
||||
bookings.value = [...bookings.value, ...(result.data as BookingWithUser[])]
|
||||
currentPage.value = page
|
||||
} else {
|
||||
bookings.value = result.data as BookingWithUser[]
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
totalCount.value = result.total
|
||||
hasMore.value = bookings.value.length < result.total
|
||||
|
||||
// Fetch history for each booking
|
||||
if (!append) {
|
||||
await Promise.all(
|
||||
bookings.value.map((b) => fetchHistory(b.id)),
|
||||
)
|
||||
}
|
||||
|
||||
// Update cache for stats
|
||||
if (!append && activeFilter.value === null) {
|
||||
allBookingsCache.value = bookings.value
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Load bookings failed:', err)
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchHistory(bookingId: string) {
|
||||
try {
|
||||
const history = await bookingStore.fetchBookingHistory(bookingId)
|
||||
historyMap.value[bookingId] = history
|
||||
} catch (err) {
|
||||
console.error('Fetch history failed:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAllForStats() {
|
||||
try {
|
||||
// Load all statuses for stats display
|
||||
const result = await bookingStore.fetchAllAdminBookings(1, 200, undefined)
|
||||
allBookingsCache.value = result.data as BookingWithUser[]
|
||||
} catch (err) {
|
||||
console.error('Load stats failed:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function onRefresh() {
|
||||
refreshing.value = true
|
||||
await Promise.all([loadBookings(false), loadAllForStats()])
|
||||
refreshing.value = false
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
if (!hasMore.value) return
|
||||
await loadBookings(true)
|
||||
}
|
||||
|
||||
// ─── Tab switching ───────────────────────────────────────────────────────
|
||||
function switchTab(value: FilterValue) {
|
||||
if (activeFilter.value === value) return
|
||||
activeFilter.value = value
|
||||
loadBookings(false)
|
||||
}
|
||||
|
||||
// ─── Actions ──────────────────────────────────────────────────────────────
|
||||
async function handleConfirm(booking: BookingWithUser) {
|
||||
uni.showModal({
|
||||
title: '确认预约',
|
||||
content: `确认 ${booking.user?.nickname} 的预约？确认后将扣除会员次数。`,
|
||||
confirmText: '确认',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.confirmBooking(booking.id)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已确认', icon: 'success' })
|
||||
await onRefresh()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleComplete(booking: BookingWithUser) {
|
||||
uni.showModal({
|
||||
title: '核销完成',
|
||||
content: `标记 ${booking.user?.nickname} 的课程为已完成？`,
|
||||
confirmText: '确认',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.completeBooking(booking.id)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已核销', icon: 'success' })
|
||||
await onRefresh()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleNoShow(booking: BookingWithUser) {
|
||||
uni.showModal({
|
||||
title: '标记未到',
|
||||
content: `标记 ${booking.user?.nickname} 的课程为未出席？`,
|
||||
confirmText: '确认',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.markNoShow(booking.id)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已标记', icon: 'success' })
|
||||
await onRefresh()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleCancel(booking: BookingWithUser) {
|
||||
uni.showModal({
|
||||
title: '取消预约',
|
||||
content: `取消 ${booking.user?.nickname} 的预约？`,
|
||||
confirmText: '确认取消',
|
||||
confirmColor: '#ef4444',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.cancelBooking(booking.id)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已取消', icon: 'success' })
|
||||
await onRefresh()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function goDetail(booking: BookingWithUser) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/booking/detail?id=${booking.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────────────────────
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
loadBookings(false)
|
||||
loadAllForStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.admin-bookings-page {
|
||||
min-height: 100vh;
|
||||
background: $primary-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ── Stats row ──────────────────────────────────────── */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 24rpx 16rpx;
|
||||
gap: 8rpx;
|
||||
border-bottom: 1rpx solid $primary-border;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 16rpx 8rpx;
|
||||
border-radius: 12rpx;
|
||||
transition: background 0.15s;
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #4A4035;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: #A09080;
|
||||
}
|
||||
|
||||
.stat-item--pending .stat-num { color: #f59e0b; }
|
||||
.stat-item--confirmed .stat-num { color: $primary-dark; }
|
||||
.stat-item--completed .stat-num { color: #66bb6a; }
|
||||
|
||||
/* ── Filter bar ────────────────────────────────────── */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 0 16rpx 16rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.15s;
|
||||
|
||||
&.active {
|
||||
background: $primary-dark;
|
||||
|
||||
.filter-tab-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-tab-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Scroll ──────────────────────────────────────────── */
|
||||
.scroll {
|
||||
flex: 1;
|
||||
height: calc(100vh - 300rpx);
|
||||
}
|
||||
|
||||
/* ── Loading skeleton ────────────────────────────────── */
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.skeleton-stripe {
|
||||
width: 8rpx;
|
||||
flex-shrink: 0;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.skeleton-body {
|
||||
flex: 1;
|
||||
padding: 28rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
height: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
|
||||
&--long { width: 60%; }
|
||||
&--medium { width: 40%; }
|
||||
&--short { width: 30%; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────────────────── */
|
||||
.empty-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon-circle {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background: $primary-border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-icon-text {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* ── List ────────────────────────────────────────────── */
|
||||
.list {
|
||||
padding: 20rpx 24rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
/* ── Booking card ────────────────────────────────────── */
|
||||
.booking-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.booking-stripe {
|
||||
width: 8rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.stripe--pending { background: #f59e0b; }
|
||||
&.stripe--confirmed { background: $primary-dark; }
|
||||
&.stripe--completed { background: #66bb6a; }
|
||||
&.stripe--cancelled { background: #e0e0e0; }
|
||||
&.stripe--noshow { background: #ef5350; }
|
||||
}
|
||||
|
||||
.booking-content {
|
||||
flex: 1;
|
||||
padding: 24rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.booking-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.student-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.student-phone {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Status badge */
|
||||
.status-badge {
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.badge--pending { background: rgba(245, 158, 11, 0.12); }
|
||||
&.badge--confirmed { background: rgba(201, 168, 124, 0.12); }
|
||||
&.badge--completed { background: rgba(102, 187, 106, 0.12); }
|
||||
&.badge--cancelled { background: rgba(0, 0, 0, 0.04); }
|
||||
&.badge--noshow { background: rgba(239, 83, 80, 0.1); }
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
|
||||
.badge--pending & { color: #f59e0b; }
|
||||
.badge--confirmed & { color: $primary-dark; }
|
||||
.badge--completed & { color: #66bb6a; }
|
||||
.badge--cancelled & { color: #bbb; }
|
||||
.badge--noshow & { color: #ef5350; }
|
||||
}
|
||||
|
||||
/* Course info */
|
||||
.course-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.course-date {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.course-time {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Card info */
|
||||
.card-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12rpx;
|
||||
padding-top: 8rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 16rpx 0;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.15s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&--confirm {
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
}
|
||||
|
||||
&--cancel {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
&--complete {
|
||||
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
||||
}
|
||||
|
||||
&--noshow {
|
||||
background: rgba(239, 83, 80, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
|
||||
.action-btn--cancel & {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-btn--noshow & {
|
||||
color: #ef5350;
|
||||
}
|
||||
}
|
||||
|
||||
/* Timeline preview */
|
||||
.timeline-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
padding-top: 8rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.dot--pending { background: #f59e0b; }
|
||||
&.dot--confirmed { background: $primary-dark; }
|
||||
&.dot--completed { background: #66bb6a; }
|
||||
&.dot--cancelled { background: #e0e0e0; }
|
||||
&.dot--noshow { background: #ef5350; }
|
||||
}
|
||||
|
||||
.timeline-text {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Load more */
|
||||
.load-more {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.load-more-text {
|
||||
font-size: 26rpx;
|
||||
color: $primary-dark;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Bottom spacer */
|
||||
.scroll-bottom-spacer {
|
||||
height: 48rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- Add button -->
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="卡种管理" show-back />
|
||||
<!-- Toolbar -->
|
||||
<view class="toolbar">
|
||||
<text class="toolbar-hint">共 {{ cardTypes.length }} 个卡种</text>
|
||||
<view class="add-btn" @tap="openAdd">
|
||||
@@ -64,28 +65,37 @@
|
||||
|
||||
<!-- Actions -->
|
||||
<view class="ct-actions">
|
||||
<view class="ct-action-btn edit-btn" @tap="openEdit(ct)">
|
||||
<view class="ct-action-btn edit-btn" @tap.stop="openEdit(ct)">
|
||||
<text class="ct-action-text">编辑</text>
|
||||
</view>
|
||||
<view
|
||||
class="ct-action-btn toggle-btn"
|
||||
:class="ct.isActive ? 'toggle-off' : 'toggle-on'"
|
||||
@tap="toggleActive(ct)"
|
||||
@tap.stop="confirmToggle(ct)"
|
||||
>
|
||||
<text class="ct-action-text">{{ ct.isActive ? '下架' : '上架' }}</text>
|
||||
</view>
|
||||
<view class="ct-action-btn delete-btn" @tap="confirmDelete(ct)">
|
||||
<view class="ct-action-btn delete-btn" @tap.stop="confirmDelete(ct)">
|
||||
<text class="ct-action-text">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Add / Edit modal -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
<scroll-view scroll-y class="modal">
|
||||
<!-- ──────── Add / Edit modal ──────── -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.stop="closeModal">
|
||||
<view class="modal-container" @tap.stop>
|
||||
<scroll-view scroll-y class="modal-scroll">
|
||||
<!-- Header -->
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ editTarget ? '编辑卡种' : '新增卡种' }}</text>
|
||||
<view class="modal-close" @tap="closeModal">
|
||||
<text class="modal-close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Form fields -->
|
||||
<view class="modal-body">
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">卡种名称</text>
|
||||
<input
|
||||
@@ -103,7 +113,7 @@
|
||||
:range="typeOptions"
|
||||
range-key="label"
|
||||
:value="form.typeIdx"
|
||||
@change="(e: any) => form.typeIdx = Number(e.detail.value)"
|
||||
@change="onTypeChange"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ typeOptions[form.typeIdx].label }}</text>
|
||||
@@ -178,7 +188,9 @@
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<view class="modal-actions">
|
||||
<view class="modal-cancel" @tap="closeModal">
|
||||
<text class="modal-cancel-text">取消</text>
|
||||
@@ -188,16 +200,19 @@
|
||||
:class="{ 'modal-confirm--loading': submitting }"
|
||||
@tap="submitForm"
|
||||
>
|
||||
<text class="modal-confirm-text">{{ submitting ? '保存中...' : '确认' }}</text>
|
||||
<text class="modal-confirm-text">{{ submitting ? '保存中...' : '确认保存' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { formatPrice } from '../../utils/format'
|
||||
import { CardTypeCategory } from '@mp-pilates/shared'
|
||||
@@ -205,6 +220,11 @@ import type { CardType } from '@mp-pilates/shared'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
const loading = ref(false)
|
||||
const showModal = ref(false)
|
||||
@@ -217,7 +237,7 @@ const typeOptions = [
|
||||
{ label: '体验卡', value: CardTypeCategory.TRIAL },
|
||||
]
|
||||
|
||||
const form = ref({
|
||||
const defaultForm = () => ({
|
||||
name: '',
|
||||
typeIdx: 0,
|
||||
priceStr: '',
|
||||
@@ -228,6 +248,10 @@ const form = ref({
|
||||
description: '',
|
||||
})
|
||||
|
||||
const form = ref(defaultForm())
|
||||
|
||||
// ─── Data loading ────────────────────────────────────
|
||||
|
||||
async function fetchCardTypes() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -239,18 +263,11 @@ async function fetchCardTypes() {
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Modal open / close ──────────────────────────────
|
||||
|
||||
function openAdd() {
|
||||
editTarget.value = null
|
||||
form.value = {
|
||||
name: '',
|
||||
typeIdx: 0,
|
||||
priceStr: '',
|
||||
originalPriceStr: '',
|
||||
totalTimesStr: '',
|
||||
durationDaysStr: '90',
|
||||
sortOrderStr: '0',
|
||||
description: '',
|
||||
}
|
||||
form.value = defaultForm()
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
@@ -259,8 +276,8 @@ function openEdit(ct: CardType) {
|
||||
form.value = {
|
||||
name: ct.name,
|
||||
typeIdx: typeOptions.findIndex((t) => t.value === ct.type),
|
||||
priceStr: String(ct.price),
|
||||
originalPriceStr: ct.originalPrice ? String(ct.originalPrice) : '',
|
||||
priceStr: String(Number(ct.price) / 100),
|
||||
originalPriceStr: ct.originalPrice ? String(Number(ct.originalPrice) / 100) : '',
|
||||
totalTimesStr: ct.totalTimes ? String(ct.totalTimes) : '',
|
||||
durationDaysStr: String(ct.durationDays),
|
||||
sortOrderStr: String(ct.sortOrder),
|
||||
@@ -274,8 +291,16 @@ function closeModal() {
|
||||
editTarget.value = null
|
||||
}
|
||||
|
||||
function onTypeChange(e: { detail: { value: number } }) {
|
||||
form.value.typeIdx = Number(e.detail.value)
|
||||
}
|
||||
|
||||
// ─── Form submit ─────────────────────────────────────
|
||||
|
||||
async function submitForm() {
|
||||
if (submitting.value) return
|
||||
|
||||
// Validation
|
||||
if (!form.value.name.trim()) {
|
||||
uni.showToast({ title: '请填写卡种名称', icon: 'none' })
|
||||
return
|
||||
@@ -291,19 +316,35 @@ async function submitForm() {
|
||||
return
|
||||
}
|
||||
|
||||
const selectedType = typeOptions[form.value.typeIdx].value
|
||||
const totalTimes = form.value.totalTimesStr ? parseInt(form.value.totalTimesStr, 10) : null
|
||||
|
||||
// Times-based card must have totalTimes
|
||||
if (
|
||||
(selectedType === CardTypeCategory.TIMES || selectedType === CardTypeCategory.TRIAL) &&
|
||||
(!totalTimes || totalTimes < 1)
|
||||
) {
|
||||
uni.showToast({ title: '次卡/体验卡请填写次数', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// Convert yuan → cents for storage
|
||||
const priceCents = Math.round(price * 100)
|
||||
|
||||
const payload: Record<string, unknown> = {
|
||||
name: form.value.name.trim(),
|
||||
type: typeOptions[form.value.typeIdx].value,
|
||||
price,
|
||||
type: selectedType,
|
||||
price: priceCents,
|
||||
durationDays,
|
||||
sortOrder: parseInt(form.value.sortOrderStr, 10) || 0,
|
||||
}
|
||||
|
||||
if (form.value.originalPriceStr) {
|
||||
payload.originalPrice = parseFloat(form.value.originalPriceStr)
|
||||
const originalPrice = parseFloat(form.value.originalPriceStr)
|
||||
payload.originalPrice = Math.round(originalPrice * 100)
|
||||
}
|
||||
if (form.value.totalTimesStr) {
|
||||
payload.totalTimes = parseInt(form.value.totalTimesStr, 10)
|
||||
if (totalTimes) {
|
||||
payload.totalTimes = totalTimes
|
||||
}
|
||||
if (form.value.description.trim()) {
|
||||
payload.description = form.value.description.trim()
|
||||
@@ -319,33 +360,70 @@ async function submitForm() {
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
closeModal()
|
||||
await fetchCardTypes()
|
||||
} catch (e: any) {
|
||||
uni.showToast({ title: e?.message ?? '保存失败', icon: 'none' })
|
||||
} catch (e: unknown) {
|
||||
const message = e instanceof Error ? e.message : '保存失败'
|
||||
uni.showToast({ title: message, icon: 'none' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleActive(ct: CardType) {
|
||||
// ─── Toggle active (上架 / 下架) ─────────────────────
|
||||
|
||||
function confirmToggle(ct: CardType) {
|
||||
const action = ct.isActive ? '下架' : '上架'
|
||||
const content = ct.isActive
|
||||
? `下架后用户将无法购买「${ct.name}」，已持有的会员卡不受影响。`
|
||||
: `上架后「${ct.name}」将重新对用户可见并可购买。`
|
||||
|
||||
uni.showModal({
|
||||
title: `确认${action}`,
|
||||
content,
|
||||
confirmText: action,
|
||||
confirmColor: ct.isActive ? '#e67e22' : '#27ae60',
|
||||
cancelText: '取消',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: `${action}中...` })
|
||||
try {
|
||||
await adminStore.updateCardType(ct.id, { isActive: !ct.isActive })
|
||||
await adminStore.updateCardType(ct.id, { isActive: !ct.isActive } as any)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: `已${action}`, icon: 'success' })
|
||||
await fetchCardTypes()
|
||||
} catch {
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: `${action}失败`, icon: 'none' })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Delete ──────────────────────────────────────────
|
||||
|
||||
function confirmDelete(ct: CardType) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: `删除卡种「${ct.name}」？此操作不可恢复。`,
|
||||
content: `删除卡种「${ct.name}」？\n若有用户已购买此卡种，将自动下架而非删除。`,
|
||||
confirmText: '删除',
|
||||
confirmColor: '#c0392b',
|
||||
cancelText: '取消',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '删除中...' })
|
||||
try {
|
||||
await adminStore.deleteCardType(ct.id)
|
||||
const result = await adminStore.deleteCardType(ct.id)
|
||||
uni.hideLoading()
|
||||
// result may contain { deleted, deactivated } from server
|
||||
const resultData = result as unknown as { deleted?: boolean; deactivated?: boolean }
|
||||
if (resultData?.deactivated) {
|
||||
uni.showToast({ title: '存在关联数据，已自动下架', icon: 'none', duration: 2500 })
|
||||
} else {
|
||||
uni.showToast({ title: '已删除', icon: 'success' })
|
||||
}
|
||||
await fetchCardTypes()
|
||||
} catch {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
@@ -353,6 +431,8 @@ function confirmDelete(ct: CardType) {
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────
|
||||
|
||||
function typeLabel(ct: CardType): string {
|
||||
const map: Record<CardTypeCategory, string> = {
|
||||
[CardTypeCategory.TIMES]: '次卡',
|
||||
@@ -368,6 +448,8 @@ function headerClass(ct: CardType): string {
|
||||
return 'header--times'
|
||||
}
|
||||
|
||||
// ─── Lifecycle ───────────────────────────────────────
|
||||
|
||||
onMounted(fetchCardTypes)
|
||||
</script>
|
||||
|
||||
@@ -394,7 +476,7 @@ onMounted(fetchCardTypes)
|
||||
padding: 12rpx 28rpx;
|
||||
}
|
||||
|
||||
.add-btn-text { font-size: 26rpx; font-weight: 600; color: #c9a87c; }
|
||||
.add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }
|
||||
|
||||
/* ── Skeleton ────────────────────────────── */
|
||||
.skeleton-list { padding: 0 24rpx; }
|
||||
@@ -403,16 +485,11 @@ onMounted(fetchCardTypes)
|
||||
height: 260rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
@@ -435,7 +512,7 @@ onMounted(fetchCardTypes)
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
|
||||
|
||||
&--inactive { opacity: 0.6; }
|
||||
&--inactive { opacity: 0.55; }
|
||||
}
|
||||
|
||||
.ct-header {
|
||||
@@ -447,7 +524,7 @@ onMounted(fetchCardTypes)
|
||||
|
||||
.header--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
|
||||
.header--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
|
||||
.header--trial { background: linear-gradient(90deg, #7d6608, #c9a87c); }
|
||||
.header--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
|
||||
|
||||
.ct-type-label { font-size: 22rpx; font-weight: 600; color: #ffffff; letter-spacing: 2rpx; }
|
||||
|
||||
@@ -473,7 +550,7 @@ onMounted(fetchCardTypes)
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.ct-price { font-size: 40rpx; font-weight: 800; color: #c9a87c; }
|
||||
.ct-price { font-size: 40rpx; font-weight: 800; color: $primary-dark; }
|
||||
|
||||
.ct-original {
|
||||
font-size: 24rpx;
|
||||
@@ -510,6 +587,8 @@ onMounted(fetchCardTypes)
|
||||
border-right: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child { border-right: none; }
|
||||
|
||||
&:active { background: #f9f9f9; }
|
||||
}
|
||||
|
||||
.ct-action-text { font-size: 26rpx; font-weight: 600; }
|
||||
@@ -526,23 +605,58 @@ onMounted(fetchCardTypes)
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 100;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
max-height: 85vh;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 40rpx 32rpx 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-scroll {
|
||||
flex: 1;
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 16rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #ffffff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.modal-close-icon {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.modal-field {
|
||||
@@ -575,7 +689,8 @@ onMounted(fetchCardTypes)
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.modal-cancel {
|
||||
@@ -586,6 +701,8 @@ onMounted(fetchCardTypes)
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { background: #e8e8e8; }
|
||||
}
|
||||
|
||||
.modal-cancel-text { font-size: 28rpx; color: #555; }
|
||||
@@ -599,8 +716,9 @@ onMounted(fetchCardTypes)
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--loading { opacity: 0.6; }
|
||||
&:active { opacity: 0.85; }
|
||||
&--loading { opacity: 0.6; pointer-events: none; }
|
||||
}
|
||||
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
|
||||
</style>
|
||||
|
||||
@@ -1,62 +1,179 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- Stats row -->
|
||||
<view class="stats-row">
|
||||
<view v-if="statsLoading" class="stats-shimmer-wrap">
|
||||
<view v-for="i in 3" :key="i" class="stats-shimmer" />
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="管理中心" show-back />
|
||||
|
||||
<!-- Stats summary card -->
|
||||
<view class="stats-card-wrap">
|
||||
<view class="stats-card">
|
||||
<view v-if="statsLoading" class="stats-loading">
|
||||
<view v-for="i in 3" :key="i" class="stat-skeleton" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ stats.todayBookings }}</text>
|
||||
<text class="stat-label">今日预约</text>
|
||||
<view class="stat-block">
|
||||
<text class="stat-num">{{ stats.todayBookings }}</text>
|
||||
<text class="stat-sub">今日预约</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ stats.totalOrders }}</text>
|
||||
<text class="stat-label">总订单</text>
|
||||
<view class="stat-sep" />
|
||||
<view class="stat-block">
|
||||
<text class="stat-num">{{ stats.totalOrders }}</text>
|
||||
<text class="stat-sub">总订单</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ stats.totalBookings }}</text>
|
||||
<text class="stat-label">总预约</text>
|
||||
<view class="stat-sep" />
|
||||
<view class="stat-block">
|
||||
<text class="stat-num">{{ stats.totalBookings }}</text>
|
||||
<text class="stat-sub">总预约</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Nav grid -->
|
||||
<view class="nav-grid">
|
||||
<view
|
||||
v-for="item in navItems"
|
||||
:key="item.path"
|
||||
class="nav-item"
|
||||
@tap="navigate(item.path)"
|
||||
>
|
||||
<text class="nav-icon">{{ item.icon }}</text>
|
||||
<text class="nav-label">{{ item.label }}</text>
|
||||
<!-- Section header: 课程管理 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">课程管理</text>
|
||||
</view>
|
||||
|
||||
<!-- List: schedule -->
|
||||
<view class="list">
|
||||
<view class="list-item" @tap="navigate('/pages/admin/bookings')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--bookings">
|
||||
<text class="item-icon-text">▣</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">预约管理</text>
|
||||
<text class="item-desc">查看/确认/核销学员预约</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/schedule')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--schedule">
|
||||
<text class="item-icon-text">◇</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">排课管理</text>
|
||||
<text class="item-desc">管理每周课程时段</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/week-template')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--template">
|
||||
<text class="item-icon-text">◈</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">排课模板</text>
|
||||
<text class="item-desc">设置每周课程模板</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Section header: 会员与订单 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">会员与订单</text>
|
||||
</view>
|
||||
|
||||
<!-- List: members & orders -->
|
||||
<view class="list">
|
||||
<view class="list-item" @tap="navigate('/pages/admin/members')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--members">
|
||||
<text class="item-icon-text">◎</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">会员管理</text>
|
||||
<text class="item-desc">查看所有会员信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/orders')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--orders">
|
||||
<text class="item-icon-text">▣</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">订单管理</text>
|
||||
<text class="item-desc">查看所有订单记录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/card-types')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--card">
|
||||
<text class="item-icon-text">▤</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">卡种管理</text>
|
||||
<text class="item-desc">设置会员卡类型</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Section header: 系统 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">系统</text>
|
||||
</view>
|
||||
|
||||
<!-- List: settings -->
|
||||
<view class="list">
|
||||
<view class="list-item" @tap="navigate('/pages/admin/studio')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--studio">
|
||||
<text class="item-icon-text">◉</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">工作室设置</text>
|
||||
<text class="item-desc">工作室信息与配置</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 40rpx" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import type { AdminStats } from '../../stores/admin'
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const statsLoading = ref(false)
|
||||
const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })
|
||||
|
||||
const navItems = [
|
||||
{ icon: '📅', label: '排课设置', path: '/pages/admin/week-template' },
|
||||
{ icon: '🔧', label: '临时调整', path: '/pages/admin/slot-adjust' },
|
||||
{ icon: '👥', label: '会员管理', path: '/pages/admin/members' },
|
||||
{ icon: '📋', label: '订单管理', path: '/pages/admin/orders' },
|
||||
{ icon: '💳', label: '卡种管理', path: '/pages/admin/card-types' },
|
||||
{ icon: '🏢', label: '工作室设置', path: '/pages/admin/studio' },
|
||||
]
|
||||
|
||||
function navigate(path: string) {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
@@ -72,105 +189,176 @@ async function loadStats() {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadStats)
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
loadStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ── Page ───────────────────────────────────── */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #1a1a2e;
|
||||
padding-bottom: 60rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* ── Stats row ───────────────────────────── */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
margin: 24rpx 24rpx 32rpx;
|
||||
/* ── Stats card ─────────────────────────────── */
|
||||
.stats-card-wrap {
|
||||
padding: 24rpx 24rpx 8rpx;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx 16rpx;
|
||||
}
|
||||
|
||||
.stats-shimmer-wrap {
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.10);
|
||||
border: 1rpx solid rgba(180, 160, 130, 0.12);
|
||||
}
|
||||
|
||||
.stats-shimmer {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
.stats-loading {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.stat-skeleton {
|
||||
width: 100rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
animation: shimmer 1.6s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
.stat-block {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
.stat-num {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
color: #c9a87c;
|
||||
font-weight: 700;
|
||||
color: #4A4035;
|
||||
line-height: 1;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.stat-sub {
|
||||
font-size: 22rpx;
|
||||
color: #A09080;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.stat-sep {
|
||||
width: 1rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(180, 160, 130, 0.2);
|
||||
}
|
||||
|
||||
/* ── Section header ─────────────────────────── */
|
||||
.section-header {
|
||||
padding: 32rpx 24rpx 12rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #A09080;
|
||||
letter-spacing: 2rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── List ───────────────────────────────────── */
|
||||
.list {
|
||||
background: #FFFFFF;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.08);
|
||||
border: 1rpx solid rgba(180, 160, 130, 0.1);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 24rpx;
|
||||
border-bottom: 1rpx solid rgba(180, 160, 130, 0.1);
|
||||
transition: background 0.15s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(180, 160, 130, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.item-icon-wrap {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-icon-text {
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
/* Icon variants — warm muted tones */
|
||||
.icon--bookings { background: linear-gradient(135deg, #C4A87E, #B49868); }
|
||||
.icon--schedule { background: linear-gradient(135deg, #8B9E7E, #7A8E6E); }
|
||||
.icon--template { background: linear-gradient(135deg, #A090C0, #9080B0); }
|
||||
.icon--members { background: linear-gradient(135deg, $primary-color, $primary-dark); }
|
||||
.icon--orders { background: linear-gradient(135deg, #7E9EC4, #6E8EB4); }
|
||||
.icon--card { background: linear-gradient(135deg, #C48E7E, #B47E6E); }
|
||||
.icon--studio { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* ── Nav grid ────────────────────────────── */
|
||||
.nav-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 0;
|
||||
.item-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
border: 1rpx solid rgba(201, 168, 124, 0.15);
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 28rpx;
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1rpx;
|
||||
color: #4A4035;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 24rpx;
|
||||
color: #A09080;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
flex-shrink: 0;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.arrow-text {
|
||||
font-size: 40rpx;
|
||||
color: rgba(180, 160, 130, 0.5);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="会员管理" show-back />
|
||||
|
||||
<!-- Search bar -->
|
||||
<view class="filter-bar">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索昵称或手机号"
|
||||
placeholder="搜索昵称或 OpenID"
|
||||
placeholder-style="color:#bbb"
|
||||
@confirm="onSearch"
|
||||
confirm-type="search"
|
||||
/>
|
||||
<view v-if="searchQuery" class="search-clear" @tap="onClear">
|
||||
<text class="search-clear-icon">×</text>
|
||||
</view>
|
||||
<view class="search-btn" @tap="onSearch">
|
||||
<text class="search-btn-text">搜索</text>
|
||||
</view>
|
||||
@@ -30,8 +35,10 @@
|
||||
|
||||
<!-- Empty -->
|
||||
<view v-else-if="!loading && !members.length" class="empty-state">
|
||||
<text class="empty-icon">👥</text>
|
||||
<text class="empty-text">暂无会员数据</text>
|
||||
<view class="empty-icon-wrap">
|
||||
<view class="empty-icon-person" />
|
||||
</view>
|
||||
<text class="empty-text">{{ searchQuery ? '未找到匹配的会员' : '暂无会员数据' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Member list -->
|
||||
@@ -50,7 +57,7 @@
|
||||
</view>
|
||||
<view class="member-info">
|
||||
<text class="member-name">{{ m.nickname || '未知用户' }}</text>
|
||||
<text class="member-phone">{{ m.phone || '未绑定手机' }}</text>
|
||||
<text class="member-openid">{{ m.openid }}</text>
|
||||
</view>
|
||||
<view class="member-stats">
|
||||
<text class="member-stat-value">{{ m.totalBookings }}</text>
|
||||
@@ -60,9 +67,11 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Load more -->
|
||||
<view v-if="hasMore" class="load-more" @tap="loadMore">
|
||||
<text class="load-more-text">{{ loading ? '加载中...' : '加载更多' }}</text>
|
||||
<!-- Bottom status -->
|
||||
<view v-if="members.length" class="list-footer">
|
||||
<text class="list-footer-text">
|
||||
{{ loading ? '加载中...' : hasMore ? '上拉加载更多' : '— 已加载全部 —' }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- Detail modal -->
|
||||
@@ -76,6 +85,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<text class="detail-name">{{ detailMember.nickname || '未知用户' }}</text>
|
||||
<text class="detail-openid" @tap="copyOpenid(detailMember.openid)">
|
||||
{{ detailMember.openid }}
|
||||
</text>
|
||||
<text class="detail-phone">{{ detailMember.phone || '未绑定手机' }}</text>
|
||||
</view>
|
||||
|
||||
@@ -104,11 +116,19 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onReachBottom } from '@dcloudio/uni-app'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import type { MemberSummary } from '../../stores/admin'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
|
||||
const members = ref<MemberSummary[]>([])
|
||||
const loading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
@@ -128,15 +148,16 @@ async function loadMembers(reset = false) {
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const search = searchQuery.value.trim()
|
||||
const result = await adminStore.fetchMembers({
|
||||
page: page.value,
|
||||
limit: LIMIT,
|
||||
search: searchQuery.value.trim() || undefined,
|
||||
...(search ? { search } : {}),
|
||||
})
|
||||
if (reset) {
|
||||
members.value = [...result.items]
|
||||
} else {
|
||||
members.value.push(...result.items)
|
||||
members.value = [...members.value, ...result.items]
|
||||
}
|
||||
total.value = result.total
|
||||
hasMore.value = members.value.length < result.total
|
||||
@@ -151,24 +172,37 @@ function onSearch() {
|
||||
loadMembers(true)
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
function onClear() {
|
||||
searchQuery.value = ''
|
||||
loadMembers(true)
|
||||
}
|
||||
|
||||
// Scroll to bottom → load next page
|
||||
onReachBottom(() => {
|
||||
if (!hasMore.value || loading.value) return
|
||||
page.value++
|
||||
loadMembers(false)
|
||||
}
|
||||
})
|
||||
|
||||
function openDetail(m: MemberSummary) {
|
||||
detailMember.value = m
|
||||
showDetail.value = true
|
||||
}
|
||||
|
||||
function copyOpenid(openid: string) {
|
||||
uni.setClipboardData({
|
||||
data: openid,
|
||||
success: () => uni.showToast({ title: '已复制 OpenID', icon: 'success' }),
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => loadMembers(true))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f3f0;
|
||||
background: $bg-page;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
@@ -178,27 +212,44 @@ onMounted(() => loadMembers(true))
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx;
|
||||
background: #ffffff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
background: $bg-card;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #f5f3f0;
|
||||
background: $bg-page;
|
||||
border-radius: 36rpx;
|
||||
padding: 0 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 168rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-clear-icon {
|
||||
font-size: 32rpx;
|
||||
color: $text-hint;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #1a1a2e;
|
||||
background: $brand-color;
|
||||
border-radius: 36rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.search-btn-text { font-size: 26rpx; font-weight: 600; color: #c9a87c; }
|
||||
.search-btn-text { font-size: 26rpx; font-weight: 600; color: $accent-color; }
|
||||
|
||||
/* ── Stats row ───────────────────────────── */
|
||||
.stats-row {
|
||||
@@ -207,50 +258,83 @@ onMounted(() => loadMembers(true))
|
||||
}
|
||||
|
||||
.stat-item { display: flex; align-items: baseline; gap: 8rpx; }
|
||||
.stat-value { font-size: 36rpx; font-weight: 800; color: #c9a87c; }
|
||||
.stat-label { font-size: 24rpx; color: #999; }
|
||||
.stat-value { font-size: 36rpx; font-weight: 800; color: $accent-color; }
|
||||
.stat-label { font-size: 24rpx; color: $text-hint; }
|
||||
|
||||
/* ── Skeleton ────────────────────────────── */
|
||||
.skeleton-list { padding: 0 24rpx; }
|
||||
|
||||
.skeleton-item {
|
||||
height: 100rpx;
|
||||
border-radius: 16rpx;
|
||||
height: 120rpx;
|
||||
border-radius: $radius-md;
|
||||
margin-bottom: 16rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 0;
|
||||
gap: 20rpx;
|
||||
padding: 120rpx 0;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 80rpx; }
|
||||
.empty-text { font-size: 28rpx; color: #bbb; }
|
||||
.empty-icon-wrap {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-color, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.empty-icon-person {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border: 3rpx solid $text-hint;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 22rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
width: 36rpx;
|
||||
height: 16rpx;
|
||||
border: 3rpx solid $text-hint;
|
||||
border-bottom: none;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-text { font-size: 28rpx; color: $text-hint; }
|
||||
|
||||
/* ── Member list ─────────────────────────── */
|
||||
.member-list { padding: 0 24rpx; padding-top: 8rpx; }
|
||||
|
||||
.member-row {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
background: $bg-card;
|
||||
border-radius: $radius-md;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
@@ -267,7 +351,7 @@ onMounted(() => loadMembers(true))
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: #1a1a2e;
|
||||
background: $brand-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -281,28 +365,47 @@ onMounted(() => loadMembers(true))
|
||||
.avatar-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #c9a87c;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.avatar-text--lg { font-size: 48rpx; }
|
||||
|
||||
.member-info { flex: 1; display: flex; flex-direction: column; gap: 8rpx; }
|
||||
.member-name { font-size: 28rpx; font-weight: 600; color: #1a1a2e; }
|
||||
.member-phone { font-size: 22rpx; color: #999; }
|
||||
|
||||
.member-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 4rpx; }
|
||||
.member-stat-value { font-size: 32rpx; font-weight: 700; color: #c9a87c; }
|
||||
.member-stat-label { font-size: 20rpx; color: #bbb; }
|
||||
|
||||
.member-arrow { font-size: 36rpx; color: #ccc; }
|
||||
|
||||
/* ── Load more ───────────────────────────── */
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 32rpx;
|
||||
.member-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.load-more-text { font-size: 26rpx; color: #c9a87c; }
|
||||
.member-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.member-openid {
|
||||
font-size: 20rpx;
|
||||
color: $text-hint;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.member-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 4rpx; flex-shrink: 0; }
|
||||
.member-stat-value { font-size: 32rpx; font-weight: 700; color: $accent-color; }
|
||||
.member-stat-label { font-size: 20rpx; color: $text-hint; }
|
||||
|
||||
.member-arrow { font-size: 36rpx; color: $text-hint; transform: scaleX(0.6); }
|
||||
|
||||
/* ── List footer ─────────────────────────── */
|
||||
.list-footer {
|
||||
text-align: center;
|
||||
padding: 28rpx 0 16rpx;
|
||||
}
|
||||
|
||||
.list-footer-text { font-size: 24rpx; color: $text-hint; }
|
||||
|
||||
/* ── Detail modal ────────────────────────── */
|
||||
.modal-mask {
|
||||
@@ -316,8 +419,8 @@ onMounted(() => loadMembers(true))
|
||||
|
||||
.modal {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
background: $bg-card;
|
||||
border-radius: $radius-lg $radius-lg 0 0;
|
||||
padding: 48rpx 32rpx 60rpx;
|
||||
}
|
||||
|
||||
@@ -325,7 +428,7 @@ onMounted(() => loadMembers(true))
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
@@ -334,33 +437,44 @@ onMounted(() => loadMembers(true))
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.detail-name { font-size: 32rpx; font-weight: 700; color: #1a1a2e; }
|
||||
.detail-phone { font-size: 26rpx; color: #888; }
|
||||
.detail-name { font-size: 32rpx; font-weight: 700; color: $brand-color; }
|
||||
|
||||
.detail-openid {
|
||||
font-size: 22rpx;
|
||||
color: $accent-color;
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
padding: 6rpx 16rpx;
|
||||
background: rgba($accent-color, 0.08);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.detail-phone { font-size: 26rpx; color: $text-secondary; }
|
||||
|
||||
.detail-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #f5f3f0;
|
||||
border-radius: 16rpx;
|
||||
background: $bg-page;
|
||||
border-radius: $radius-md;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.detail-stat { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
|
||||
.detail-stat-value { font-size: 40rpx; font-weight: 800; color: #c9a87c; }
|
||||
.detail-stat-label { font-size: 22rpx; color: #999; }
|
||||
.detail-stat-value { font-size: 40rpx; font-weight: 800; color: $accent-color; }
|
||||
.detail-stat-label { font-size: 22rpx; color: $text-hint; }
|
||||
|
||||
.modal-close {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #f0f0f0;
|
||||
background: $bg-page;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-close-text { font-size: 28rpx; color: #555; }
|
||||
.modal-close-text { font-size: 28rpx; color: $text-secondary; }
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,44 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="订单管理" show-back />
|
||||
|
||||
<!-- Summary stats bar -->
|
||||
<view class="stats-bar">
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{ totalCount || '--' }}</text>
|
||||
<text class="stat-label">全部订单</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-num paid">{{ paidCount || '--' }}</text>
|
||||
<text class="stat-label">已支付</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-num pending">{{ pendingCount || '--' }}</text>
|
||||
<text class="stat-label">待支付</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Status filter tabs -->
|
||||
<view class="filter-wrap">
|
||||
<scroll-view scroll-x class="filter-scroll" :show-scrollbar="false">
|
||||
<view class="filter-row">
|
||||
<view
|
||||
v-for="f in filters"
|
||||
:key="f.value"
|
||||
class="filter-chip"
|
||||
:class="{ 'filter-chip--active': activeFilter === f.value }"
|
||||
class="filter-pill"
|
||||
:class="{ active: activeFilter === f.value }"
|
||||
@tap="selectFilter(f.value)"
|
||||
>
|
||||
<text class="filter-chip-text">{{ f.label }}</text>
|
||||
<text class="filter-pill-text">{{ f.label }}</text>
|
||||
<view v-if="f.count != null" class="filter-pill-dot" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Pull-to-refresh wrapper -->
|
||||
<!-- Pull-to-refresh -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="list-scroll"
|
||||
@@ -24,59 +47,95 @@
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<!-- Loading skeleton -->
|
||||
<view v-if="loading && !orders.length" class="skeleton-list">
|
||||
<view v-for="i in 5" :key="i" class="skeleton-item" />
|
||||
<view v-if="loading && !orders.length" class="order-list">
|
||||
<view v-for="i in 5" :key="i" class="skeleton-card" />
|
||||
</view>
|
||||
|
||||
<!-- Empty -->
|
||||
<view v-else-if="!loading && !orders.length" class="empty-state">
|
||||
<text class="empty-icon">📋</text>
|
||||
<text class="empty-text">暂无订单</text>
|
||||
<view class="empty-illustration">
|
||||
<text class="empty-icon">📭</text>
|
||||
</view>
|
||||
<text class="empty-title">暂无订单</text>
|
||||
<text class="empty-sub">当前筛选条件下没有找到订单</text>
|
||||
</view>
|
||||
|
||||
<!-- Order list -->
|
||||
<!-- Order cards -->
|
||||
<view v-else class="order-list">
|
||||
<view v-for="order in orders" :key="order.id" class="order-card">
|
||||
<view class="order-header">
|
||||
<text class="order-card-name">{{ order.cardType?.name ?? '-' }}</text>
|
||||
<view class="order-status-badge" :class="statusBadgeClass(order.status)">
|
||||
<text class="order-status-text">{{ statusLabel(order.status) }}</text>
|
||||
<view
|
||||
v-for="(order, idx) in orders"
|
||||
:key="order.id"
|
||||
class="order-card"
|
||||
:class="{ 'order-card--paid': order.status === OrderStatus.PAID, 'order-card--pending': order.status === OrderStatus.PENDING }"
|
||||
:style="{ animationDelay: `${idx * 40}ms` }"
|
||||
>
|
||||
<!-- Card accent bar -->
|
||||
<view class="card-accent" :class="statusAccentClass(order.status)" />
|
||||
|
||||
<!-- Card header -->
|
||||
<view class="card-header">
|
||||
<view class="card-title-row">
|
||||
<text class="card-plan">{{ order.cardType?.name ?? '未知套餐' }}</text>
|
||||
<view class="badge" :class="statusBadgeClass(order.status)">
|
||||
<text class="badge-text">{{ statusLabel(order.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-body">
|
||||
<view class="order-row">
|
||||
<text class="order-row-label">用户</text>
|
||||
<text class="order-row-value">{{ order.user?.nickname ?? '-' }}</text>
|
||||
<text class="card-order-no">#{{ order.orderNo }}</text>
|
||||
</view>
|
||||
<view class="order-row">
|
||||
<text class="order-row-label">手机</text>
|
||||
<text class="order-row-value">{{ order.user?.phone ?? '未绑定' }}</text>
|
||||
|
||||
<!-- Card divider -->
|
||||
<view class="card-divider" />
|
||||
|
||||
<!-- Card body -->
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-left">
|
||||
<text class="info-label">用户</text>
|
||||
<text class="info-value">{{ order.user?.nickname ?? '未知用户' }}</text>
|
||||
</view>
|
||||
<view class="order-row">
|
||||
<text class="order-row-label">金额</text>
|
||||
<text class="order-row-value order-price">¥{{ formatPrice(order.amount) }}</text>
|
||||
<view class="info-right">
|
||||
<text class="info-label">手机</text>
|
||||
<text class="info-value mono">{{ order.user?.phone ?? '未绑定' }}</text>
|
||||
</view>
|
||||
<view class="order-row">
|
||||
<text class="order-row-label">时间</text>
|
||||
<text class="order-row-value">{{ formatDate(order.createdAt) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<view class="info-left">
|
||||
<text class="info-label">金额</text>
|
||||
<text class="info-value price">¥{{ formatPrice(order.amount) }}</text>
|
||||
</view>
|
||||
<view class="info-right">
|
||||
<text class="info-label">下单时间</text>
|
||||
<text class="info-value">{{ formatDate(order.createdAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Paid time if available -->
|
||||
<view v-if="order.paidAt && order.status === OrderStatus.PAID" class="info-row">
|
||||
<text class="info-label">支付时间</text>
|
||||
<text class="info-value">{{ formatDate(order.paidAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Load more -->
|
||||
<!-- Load more / no more -->
|
||||
<view v-if="hasMore" class="load-more" @tap="loadMore">
|
||||
<text class="load-more-text">{{ loading ? '加载中...' : '加载更多' }}</text>
|
||||
</view>
|
||||
<view v-else-if="orders.length > 0" class="no-more">
|
||||
<text class="no-more-text">— 已加载全部 {{ orders.length }} 条订单 —</text>
|
||||
</view>
|
||||
|
||||
<!-- Bottom spacer -->
|
||||
<view style="height: 40rpx;" />
|
||||
<view style="height: 60rpx" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { formatPrice, formatDate } from '../../utils/format'
|
||||
import { OrderStatus } from '@mp-pilates/shared'
|
||||
@@ -84,11 +143,16 @@ import type { OrderWithDetails } from '@mp-pilates/shared'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
|
||||
const filters = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '已支付', value: OrderStatus.PAID },
|
||||
{ label: '待支付', value: OrderStatus.PENDING },
|
||||
{ label: '已退款', value: OrderStatus.REFUNDED },
|
||||
{ label: '全部', value: '', count: null },
|
||||
{ label: '已支付', value: OrderStatus.PAID, count: null },
|
||||
{ label: '待支付', value: OrderStatus.PENDING, count: null },
|
||||
{ label: '已退款', value: OrderStatus.REFUNDED, count: null },
|
||||
]
|
||||
|
||||
const activeFilter = ref('')
|
||||
@@ -97,6 +161,9 @@ const loading = ref(false)
|
||||
const refreshing = ref(false)
|
||||
const page = ref(1)
|
||||
const hasMore = ref(false)
|
||||
const totalCount = ref<number | null>(null)
|
||||
const paidCount = ref<number | null>(null)
|
||||
const pendingCount = ref<number | null>(null)
|
||||
|
||||
const LIMIT = 20
|
||||
|
||||
@@ -116,25 +183,31 @@ function statusBadgeClass(s: string) {
|
||||
return 'badge--default'
|
||||
}
|
||||
|
||||
function statusAccentClass(s: string) {
|
||||
if (s === OrderStatus.PAID) return 'accent--paid'
|
||||
if (s === OrderStatus.PENDING) return 'accent--pending'
|
||||
if (s === OrderStatus.REFUNDED) return 'accent--refunded'
|
||||
return ''
|
||||
}
|
||||
|
||||
async function loadOrders(reset = false) {
|
||||
if (loading.value) return
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
orders.value = []
|
||||
}
|
||||
if (reset) page.value = 1
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await adminStore.fetchAdminOrders({
|
||||
const params: { page: number; limit: number; status?: string } = {
|
||||
page: page.value,
|
||||
limit: LIMIT,
|
||||
status: activeFilter.value || undefined,
|
||||
})
|
||||
}
|
||||
if (activeFilter.value) params.status = activeFilter.value
|
||||
const result = await adminStore.fetchAdminOrders(params)
|
||||
if (reset) {
|
||||
orders.value = [...result.items]
|
||||
orders.value = [...result.data]
|
||||
} else {
|
||||
orders.value.push(...result.items)
|
||||
orders.value.push(...result.data)
|
||||
}
|
||||
hasMore.value = orders.value.length < result.total
|
||||
totalCount.value = result.total
|
||||
} catch {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
@@ -143,14 +216,30 @@ async function loadOrders(reset = false) {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSummaryCounts() {
|
||||
try {
|
||||
const [allResult, paidResult, pendingResult] = await Promise.all([
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: 1 }),
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: 1, status: OrderStatus.PAID }),
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: 1, status: OrderStatus.PENDING }),
|
||||
])
|
||||
totalCount.value = allResult.total
|
||||
paidCount.value = paidResult.total
|
||||
pendingCount.value = pendingResult.total
|
||||
} catch {
|
||||
// non-critical, ignore
|
||||
}
|
||||
}
|
||||
|
||||
function selectFilter(value: string) {
|
||||
activeFilter.value = value
|
||||
totalCount.value = null
|
||||
loadOrders(true)
|
||||
}
|
||||
|
||||
async function onRefresh() {
|
||||
refreshing.value = true
|
||||
await loadOrders(true)
|
||||
await Promise.all([loadOrders(true), loadSummaryCounts()])
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
@@ -159,136 +248,321 @@ function loadMore() {
|
||||
loadOrders(false)
|
||||
}
|
||||
|
||||
onMounted(() => loadOrders(true))
|
||||
onMounted(() => {
|
||||
loadOrders(true)
|
||||
loadSummaryCounts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ── Page shell ──────────────────────────────── */
|
||||
.page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f3f0;
|
||||
background: #FAF8F5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
|
||||
}
|
||||
|
||||
/* ── Filter scroll ───────────────────────── */
|
||||
.filter-scroll {
|
||||
flex-shrink: 0;
|
||||
background: #ffffff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
/* ── Stats bar ──────────────────────────────── */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
padding: 28rpx 0;
|
||||
margin: 0;
|
||||
border-bottom: 1rpx solid rgba(180, 160, 130, 0.2);
|
||||
box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
color: #4A4035;
|
||||
letter-spacing: -1rpx;
|
||||
line-height: 1;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.stat-num.paid { color: #7A9E7E; }
|
||||
.stat-num.pending { color: $warning-color; }
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: #A09080;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(180, 160, 130, 0.25);
|
||||
}
|
||||
|
||||
/* ── Filter pills ───────────────────────────── */
|
||||
.filter-wrap {
|
||||
background: #FAF8F5;
|
||||
border-bottom: 1rpx solid rgba(180, 160, 130, 0.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-scroll { overflow: hidden; }
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
gap: 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
.filter-pill {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #f0f0f0;
|
||||
gap: 8rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 32rpx;
|
||||
background: rgba(180, 160, 130, 0.1);
|
||||
border: 1.5rpx solid rgba(180, 160, 130, 0.2);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.22s ease;
|
||||
}
|
||||
|
||||
.filter-chip--active {
|
||||
background: #1a1a2e;
|
||||
.filter-pill.active {
|
||||
background: #4A4035;
|
||||
border-color: #4A4035;
|
||||
}
|
||||
|
||||
.filter-chip-text { font-size: 26rpx; color: #888; }
|
||||
.filter-chip--active .filter-chip-text { color: #c9a87c; font-weight: 600; }
|
||||
.filter-pill-text {
|
||||
font-size: 26rpx;
|
||||
color: #7A6A5A;
|
||||
font-weight: 500;
|
||||
transition: color 0.22s ease;
|
||||
}
|
||||
|
||||
/* ── List scroll ─────────────────────────── */
|
||||
.filter-pill.active .filter-pill-text {
|
||||
color: #E8D8C0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-pill-dot {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 50%;
|
||||
background: $accent-color;
|
||||
}
|
||||
|
||||
/* ── List ───────────────────────────────────── */
|
||||
.list-scroll {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Skeleton ────────────────────────────── */
|
||||
.skeleton-list { padding: 24rpx; }
|
||||
.order-list {
|
||||
padding: 20rpx 24rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
height: 180rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
/* ── Skeleton ───────────────────────────────── */
|
||||
.skeleton-card {
|
||||
height: 220rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(90deg, #F0EBE3 25%, #E8E0D5 50%, #F0EBE3 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
animation: shimmer 1.6s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────── */
|
||||
/* ── Empty ──────────────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
gap: 20rpx;
|
||||
padding: 120rpx 48rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 80rpx; }
|
||||
.empty-text { font-size: 28rpx; color: #bbb; }
|
||||
.empty-illustration {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
background: rgba(180, 160, 130, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
/* ── Order list ──────────────────────────── */
|
||||
.order-list { padding: 16rpx 24rpx 0; }
|
||||
.empty-icon { font-size: 56rpx; }
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #4A4035;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 26rpx;
|
||||
color: rgba(74, 64, 53, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Order card ─────────────────────────────── */
|
||||
.order-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.order-card-name { font-size: 28rpx; font-weight: 600; color: #1a1a2e; }
|
||||
|
||||
.order-status-badge {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.12);
|
||||
animation: cardIn 0.4s ease both;
|
||||
}
|
||||
|
||||
.badge--paid { background: rgba(39,174,96,0.1); }
|
||||
.badge--paid .order-status-text { font-size: 22rpx; color: #27ae60; }
|
||||
.badge--pending { background: rgba(230,126,34,0.1); }
|
||||
.badge--pending .order-status-text { font-size: 22rpx; color: #e67e22; }
|
||||
.badge--refunded { background: rgba(0,0,0,0.06); }
|
||||
.badge--refunded .order-status-text { font-size: 22rpx; color: #999; }
|
||||
.badge--default .order-status-text { font-size: 22rpx; color: #888; }
|
||||
@keyframes cardIn {
|
||||
from { opacity: 0; transform: translateY(12rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.order-body { padding: 16rpx 24rpx; }
|
||||
.card-accent {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6rpx;
|
||||
}
|
||||
|
||||
.order-row {
|
||||
.accent--paid { background: #8FCB9B; }
|
||||
.accent--pending { background: #F2C94C; }
|
||||
.accent--refunded { background: rgba(43, 43, 43, 0.2); }
|
||||
|
||||
.card-header {
|
||||
padding: 24rpx 24rpx 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.order-row-label { font-size: 24rpx; color: #999; }
|
||||
.order-row-value { font-size: 26rpx; color: #333; }
|
||||
.order-price { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
|
||||
.card-plan {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #4A4035;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
/* ── Load more ───────────────────────────── */
|
||||
.card-order-no {
|
||||
font-size: 22rpx;
|
||||
color: rgba(74, 64, 53, 0.35);
|
||||
margin-top: 6rpx;
|
||||
display: block;
|
||||
font-family: 'SF Mono', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
height: 1rpx;
|
||||
background: rgba(180, 160, 130, 0.15);
|
||||
margin: 0 24rpx;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20rpx 24rpx 20rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-left,
|
||||
.info-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.info-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(74, 64, 53, 0.4);
|
||||
flex-shrink: 0;
|
||||
min-width: 80rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #4A4035;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value.mono {
|
||||
font-family: 'SF Mono', 'Menlo', monospace;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-value.price {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $accent-color;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Status badges ─────────────────────────── */
|
||||
.badge {
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
}
|
||||
|
||||
.badge--paid { background: rgba(122, 158, 126, 0.15); }
|
||||
.badge--paid .badge-text { font-size: 22rpx; color: #5A7E5E; font-weight: 600; }
|
||||
|
||||
.badge--pending { background: rgba(196, 149, 106, 0.2); }
|
||||
.badge--pending .badge-text { font-size: 22rpx; color: #A07540; font-weight: 600; }
|
||||
|
||||
.badge--refunded { background: rgba(180, 160, 130, 0.15); }
|
||||
.badge--refunded .badge-text { font-size: 22rpx; color: #8A7A6A; }
|
||||
|
||||
.badge--default .badge-text { font-size: 22rpx; color: #888; }
|
||||
|
||||
/* ── Load more ─────────────────────────────── */
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 32rpx;
|
||||
padding: 40rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.load-more-text { font-size: 26rpx; color: #c9a87c; }
|
||||
.load-more-text {
|
||||
font-size: 26rpx;
|
||||
color: $accent-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 32rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.no-more-text {
|
||||
font-size: 24rpx;
|
||||
color: rgba(74, 64, 53, 0.3);
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
757
packages/app/src/pages/admin/schedule.vue
Normal file
757
packages/app/src/pages/admin/schedule.vue
Normal file
@@ -0,0 +1,757 @@
|
||||
<template>
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="排课管理" show-back />
|
||||
<!-- Date selector -->
|
||||
<view class="sticky-header">
|
||||
<DateSelector v-model="selectedDate" @select="onDateSelect" />
|
||||
</view>
|
||||
|
||||
<!-- Loading skeleton -->
|
||||
<view v-if="loading" class="skeleton-list">
|
||||
<view v-for="i in 4" :key="i" class="skeleton-item" />
|
||||
</view>
|
||||
|
||||
<!-- Empty state -->
|
||||
<view v-else-if="editableSlots.length === 0" class="empty-state">
|
||||
<text class="empty-icon">📭</text>
|
||||
<text class="empty-text">当日暂无排课</text>
|
||||
<text class="empty-sub">无模板匹配，请手动添加时段或先配置排课模板</text>
|
||||
</view>
|
||||
|
||||
<!-- Slot list -->
|
||||
<view v-else class="slot-list">
|
||||
<view
|
||||
v-for="slot in visibleSlots"
|
||||
:key="slot.key"
|
||||
class="slot-card"
|
||||
:class="slotCardClass(slot)"
|
||||
>
|
||||
<!-- Status badge -->
|
||||
<view class="slot-header">
|
||||
<view class="slot-badge" :class="slotBadgeClass(slot)">
|
||||
<text class="slot-badge-text">{{ slotBadgeText(slot) }}</text>
|
||||
</view>
|
||||
<view v-if="slot.bookedCount > 0" class="booked-info">
|
||||
<text class="booked-text">{{ slot.bookedCount }} 人已预约</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Time display / edit -->
|
||||
<view class="slot-body">
|
||||
<view class="time-section">
|
||||
<picker
|
||||
mode="time"
|
||||
:value="slot.startTime"
|
||||
@change="(e: any) => updateSlotTime(slot, 'startTime', e.detail.value)"
|
||||
>
|
||||
<view class="time-display">
|
||||
<text class="time-text">{{ slot.startTime }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<text class="time-separator">–</text>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="slot.endTime"
|
||||
@change="(e: any) => updateSlotTime(slot, 'endTime', e.detail.value)"
|
||||
>
|
||||
<view class="time-display">
|
||||
<text class="time-text">{{ slot.endTime }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="capacity-section">
|
||||
<text class="capacity-label">容量</text>
|
||||
<view class="capacity-control">
|
||||
<view class="capacity-btn" @tap="adjustCapacity(slot, -1)">
|
||||
<text class="capacity-btn-text">−</text>
|
||||
</view>
|
||||
<text class="capacity-value">{{ slot.capacity }}</text>
|
||||
<view class="capacity-btn" @tap="adjustCapacity(slot, 1)">
|
||||
<text class="capacity-btn-text">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delete-section">
|
||||
<view
|
||||
class="delete-btn"
|
||||
:class="{ 'delete-btn--warn': slot.bookedCount > 0 }"
|
||||
@tap="removeSlot(slot)"
|
||||
>
|
||||
<text class="delete-btn-text">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Add slot button -->
|
||||
<view class="add-wrap" @tap="openAddModal">
|
||||
<text class="add-text">＋ 添加时段</text>
|
||||
</view>
|
||||
|
||||
<!-- Bottom action bar -->
|
||||
<view class="action-bar">
|
||||
<view
|
||||
class="publish-btn"
|
||||
:class="{ 'publish-btn--loading': publishing }"
|
||||
@tap="handlePublish"
|
||||
>
|
||||
<text class="publish-btn-text">
|
||||
{{ publishing ? '发布中...' : (hasPublished ? '更新当日排课' : '发布当日排课') }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Add slot modal -->
|
||||
<view v-if="showAddModal" class="modal-mask" @tap="onMaskTap">
|
||||
<view class="modal" @tap.stop>
|
||||
<text class="modal-title">添加时段</text>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">开始时间</text>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="addForm.startTime"
|
||||
@change="onAddStartTimeChange"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ addForm.startTime }}</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">结束时间</text>
|
||||
<view class="picker-display picker-display--disabled">
|
||||
<text class="picker-text picker-text--muted">{{ addForm.endTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-field modal-field--last">
|
||||
<text class="modal-label">容量</text>
|
||||
<input
|
||||
class="modal-input"
|
||||
type="number"
|
||||
v-model="addForm.capacityStr"
|
||||
placeholder="如：1"
|
||||
placeholder-style="color:#bbb"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="modal-cancel" @tap="closeAddModal">
|
||||
<text class="modal-cancel-text">取消</text>
|
||||
</view>
|
||||
<view class="modal-confirm" @tap="submitAdd">
|
||||
<text class="modal-confirm-text">确认</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import type { ScheduleSlotPreview } from '@mp-pilates/shared'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { formatDate } from '../../utils/format'
|
||||
import DateSelector from '../../components/DateSelector.vue'
|
||||
|
||||
interface EditableSlot {
|
||||
readonly key: string
|
||||
existingSlotId: string | null
|
||||
startTime: string
|
||||
endTime: string
|
||||
capacity: number
|
||||
bookedCount: number
|
||||
isPublished: boolean
|
||||
isNew: boolean
|
||||
isRemoved: boolean
|
||||
templateId: string | null
|
||||
}
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
const navBarHeight = ref('64px')
|
||||
const selectedDate = ref(formatDate(new Date()))
|
||||
const loading = ref(false)
|
||||
const publishing = ref(false)
|
||||
const showAddModal = ref(false)
|
||||
|
||||
const editableSlots = ref<EditableSlot[]>([])
|
||||
|
||||
const addForm = ref({
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
capacityStr: '1',
|
||||
})
|
||||
|
||||
// ── Computed ──────────────────────────────────────────────
|
||||
|
||||
const visibleSlots = computed(() =>
|
||||
editableSlots.value.filter((s) => !s.isRemoved),
|
||||
)
|
||||
|
||||
const hasPublished = computed(() =>
|
||||
editableSlots.value.some((s) => s.isPublished),
|
||||
)
|
||||
|
||||
// ── Data loading ──────────────────────────────────────────
|
||||
|
||||
function mapPreviewToEditable(previews: readonly ScheduleSlotPreview[]): EditableSlot[] {
|
||||
return previews.map((p) => ({
|
||||
key: p.id ?? `tpl-${p.templateId}-${p.startTime}`,
|
||||
existingSlotId: p.id,
|
||||
startTime: p.startTime,
|
||||
endTime: p.endTime,
|
||||
capacity: p.capacity,
|
||||
bookedCount: p.bookedCount,
|
||||
isPublished: p.isPublished,
|
||||
isNew: false,
|
||||
isRemoved: false,
|
||||
templateId: p.templateId,
|
||||
}))
|
||||
}
|
||||
|
||||
async function loadPreview(date: string) {
|
||||
loading.value = true
|
||||
try {
|
||||
const previews = await adminStore.fetchSchedulePreview(date)
|
||||
editableSlots.value = mapPreviewToEditable(previews)
|
||||
} catch {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
editableSlots.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onDateSelect(date: string) {
|
||||
selectedDate.value = date
|
||||
loadPreview(date)
|
||||
}
|
||||
|
||||
// ── Slot editing ──────────────────────────────────────────
|
||||
|
||||
function updateSlotTime(slot: EditableSlot, field: 'startTime' | 'endTime', value: string) {
|
||||
slot[field] = value
|
||||
}
|
||||
|
||||
function adjustCapacity(slot: EditableSlot, delta: number) {
|
||||
const minCapacity = Math.max(1, slot.bookedCount)
|
||||
const newVal = slot.capacity + delta
|
||||
if (newVal >= minCapacity) {
|
||||
slot.capacity = newVal
|
||||
}
|
||||
}
|
||||
|
||||
function removeSlot(slot: EditableSlot) {
|
||||
if (slot.bookedCount > 0) {
|
||||
uni.showModal({
|
||||
title: '该时段有预约',
|
||||
content: `已有 ${slot.bookedCount} 人预约此时段，移除后该时段将被关闭（已有预约保留）。确认移除？`,
|
||||
confirmText: '确认移除',
|
||||
confirmColor: '#c0392b',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
slot.isRemoved = true
|
||||
}
|
||||
},
|
||||
})
|
||||
} else {
|
||||
slot.isRemoved = true
|
||||
}
|
||||
}
|
||||
|
||||
// ── Add slot ──────────────────────────────────────────────
|
||||
|
||||
/** 将 "HH:mm" 加一小时，最大 23:59 */
|
||||
function addOneHour(time: string): string {
|
||||
const [h, m] = time.split(':').map(Number)
|
||||
const newH = Math.min(h + 1, 23)
|
||||
// 如果原本就是 23:xx，结束时间设为 23:59
|
||||
if (h >= 23) return '23:59'
|
||||
return String(newH).padStart(2, '0') + ':' + String(m).padStart(2, '0')
|
||||
}
|
||||
|
||||
function onAddStartTimeChange(e: any) {
|
||||
const start = e.detail.value as string
|
||||
addForm.value.startTime = start
|
||||
addForm.value.endTime = addOneHour(start)
|
||||
}
|
||||
|
||||
function openAddModal() {
|
||||
addForm.value = { startTime: '09:00', endTime: '10:00', capacityStr: '1' }
|
||||
showAddModal.value = true
|
||||
}
|
||||
|
||||
function closeAddModal() {
|
||||
showAddModal.value = false
|
||||
}
|
||||
|
||||
/** 点击遮罩关闭弹窗 — tap.stop 在 modal 上阻止了内部点击冒泡到此 */
|
||||
function onMaskTap() {
|
||||
closeAddModal()
|
||||
}
|
||||
|
||||
function submitAdd() {
|
||||
const capacity = parseInt(addForm.value.capacityStr, 10)
|
||||
if (!addForm.value.startTime || !addForm.value.endTime) {
|
||||
uni.showToast({ title: '请选择时间', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (isNaN(capacity) || capacity < 1) {
|
||||
uni.showToast({ title: '请填写有效容量', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
editableSlots.value.push({
|
||||
key: `new-${Date.now()}`,
|
||||
existingSlotId: null,
|
||||
startTime: addForm.value.startTime,
|
||||
endTime: addForm.value.endTime,
|
||||
capacity,
|
||||
bookedCount: 0,
|
||||
isPublished: false,
|
||||
isNew: true,
|
||||
isRemoved: false,
|
||||
templateId: null,
|
||||
})
|
||||
|
||||
closeAddModal()
|
||||
}
|
||||
|
||||
// ── Publish ───────────────────────────────────────────────
|
||||
|
||||
async function handlePublish() {
|
||||
if (publishing.value) return
|
||||
|
||||
const slotsToPublish = visibleSlots.value
|
||||
if (slotsToPublish.length === 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '当前没有时段，确认清空当日排课？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await doPublish([])
|
||||
}
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Validate times
|
||||
for (const slot of slotsToPublish) {
|
||||
if (slot.startTime >= slot.endTime) {
|
||||
uni.showToast({ title: `时段 ${slot.startTime}-${slot.endTime} 时间无效`, icon: 'none' })
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '确认发布',
|
||||
content: `确认${hasPublished.value ? '更新' : '发布'} ${selectedDate.value} 的排课？共 ${slotsToPublish.length} 个时段`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await doPublish(slotsToPublish)
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function doPublish(slots: readonly EditableSlot[]) {
|
||||
publishing.value = true
|
||||
try {
|
||||
await adminStore.publishDaySlots({
|
||||
date: selectedDate.value,
|
||||
slots: slots.map((s) => ({
|
||||
existingSlotId: s.existingSlotId ?? undefined,
|
||||
startTime: s.startTime,
|
||||
endTime: s.endTime,
|
||||
capacity: s.capacity,
|
||||
})),
|
||||
})
|
||||
uni.showToast({ title: '发布成功', icon: 'success' })
|
||||
// Reload to show fresh state
|
||||
editableSlots.value = mapPreviewToEditable(adminStore.schedulePreview)
|
||||
} catch (e: unknown) {
|
||||
const message = e instanceof Error ? e.message : '发布失败'
|
||||
uni.showToast({ title: message, icon: 'none' })
|
||||
} finally {
|
||||
publishing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── Style helpers ─────────────────────────────────────────
|
||||
|
||||
function slotCardClass(slot: EditableSlot): string {
|
||||
if (slot.isNew) return 'slot-card--new'
|
||||
if (slot.isPublished) return 'slot-card--published'
|
||||
return 'slot-card--template'
|
||||
}
|
||||
|
||||
function slotBadgeClass(slot: EditableSlot): string {
|
||||
if (slot.isNew) return 'badge--new'
|
||||
if (slot.isPublished) return 'badge--published'
|
||||
return 'badge--template'
|
||||
}
|
||||
|
||||
function slotBadgeText(slot: EditableSlot): string {
|
||||
if (slot.isNew) return '新增'
|
||||
if (slot.isPublished) return '已发布'
|
||||
return '来自模板'
|
||||
}
|
||||
|
||||
// ── Lifecycle ─────────────────────────────────────────────
|
||||
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
loadPreview(selectedDate.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f3f0;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
/* ── Sticky header ───────────────────────── */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ── Loading skeleton ────────────────────── */
|
||||
.skeleton-list {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
/* ── Empty state ─────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 40rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 80rpx; }
|
||||
.empty-text { font-size: 30rpx; color: #666; font-weight: 600; }
|
||||
.empty-sub { font-size: 24rpx; color: #bbb; text-align: center; }
|
||||
|
||||
/* ── Slot list ───────────────────────────── */
|
||||
.slot-list {
|
||||
padding: 24rpx 24rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
/* ── Slot card ───────────────────────────── */
|
||||
.slot-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&--published {
|
||||
border-color: rgba(39, 174, 96, 0.3);
|
||||
}
|
||||
|
||||
&--template {
|
||||
border-style: dashed;
|
||||
border-color: $primary-dark;
|
||||
background: rgba(201, 168, 124, 0.04);
|
||||
}
|
||||
|
||||
&--new {
|
||||
border-style: dashed;
|
||||
border-color: #3498db;
|
||||
background: rgba(52, 152, 219, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Slot header ─────────────────────────── */
|
||||
.slot-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.slot-badge {
|
||||
border-radius: 16rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
}
|
||||
|
||||
.badge--published { background: rgba(39, 174, 96, 0.1); }
|
||||
.badge--published .slot-badge-text { font-size: 22rpx; color: #27ae60; font-weight: 600; }
|
||||
.badge--template { background: rgba(201, 168, 124, 0.15); }
|
||||
.badge--template .slot-badge-text { font-size: 22rpx; color: #b8860b; font-weight: 600; }
|
||||
.badge--new { background: rgba(52, 152, 219, 0.1); }
|
||||
.badge--new .slot-badge-text { font-size: 22rpx; color: #3498db; font-weight: 600; }
|
||||
|
||||
.booked-info { }
|
||||
.booked-text { font-size: 22rpx; color: #e67e22; }
|
||||
|
||||
/* ── Slot body ───────────────────────────── */
|
||||
.slot-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.time-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
background: #f7f4f0;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.capacity-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.capacity-label {
|
||||
font-size: 22rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.capacity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.capacity-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f0ece8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.capacity-btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.capacity-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delete-section {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(192, 57, 43, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--warn {
|
||||
background: rgba(192, 57, 43, 0.2);
|
||||
}
|
||||
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.delete-btn-text {
|
||||
font-size: 24rpx;
|
||||
color: #c0392b;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── Add button ──────────────────────────── */
|
||||
.add-wrap {
|
||||
margin: 24rpx;
|
||||
padding: 24rpx;
|
||||
border: 2rpx dashed $primary-dark;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.add-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $primary-dark;
|
||||
}
|
||||
|
||||
/* ── Action bar ──────────────────────────── */
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 24rpx 48rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
background: linear-gradient(90deg, #1a1a2e, #2d2d5e);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--loading { opacity: 0.6; }
|
||||
|
||||
&:active { opacity: 0.85; }
|
||||
}
|
||||
|
||||
.publish-btn-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $primary-dark;
|
||||
}
|
||||
|
||||
/* ── Modal ───────────────────────────────── */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 40rpx 32rpx 60rpx;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.modal-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&--last { border-bottom: none; }
|
||||
}
|
||||
|
||||
.modal-label {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.picker-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.picker-text { font-size: 26rpx; color: #222; }
|
||||
.picker-text--muted { color: #999; }
|
||||
.picker-arrow { font-size: 26rpx; color: #bbb; }
|
||||
.picker-display--disabled { opacity: 0.6; }
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.modal-cancel {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-cancel-text { font-size: 28rpx; color: #555; }
|
||||
|
||||
.modal-confirm {
|
||||
flex: 2;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, #1a1a2e, #2d2d5e);
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="时段调整" show-back />
|
||||
<!-- Tabs -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
@@ -138,13 +139,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { formatDate } from '../../utils/format'
|
||||
import type { TimeSlot } from '@mp-pilates/shared'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
const tabs = ['新增时段', '关闭时段', '批量生成']
|
||||
const activeTab = ref(0)
|
||||
const submitting = ref(false)
|
||||
@@ -242,6 +246,10 @@ async function submitGenerate() {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -278,7 +286,7 @@ async function submitGenerate() {
|
||||
}
|
||||
|
||||
.tab--active {
|
||||
border-bottom: 4rpx solid #c9a87c;
|
||||
border-bottom: 4rpx solid $primary-dark;
|
||||
}
|
||||
|
||||
/* ── Panel ───────────────────────────────── */
|
||||
@@ -335,11 +343,6 @@ async function submitGenerate() {
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
@@ -423,5 +426,5 @@ async function submitGenerate() {
|
||||
&--loading { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.action-btn-text { font-size: 30rpx; font-weight: 700; color: #c9a87c; }
|
||||
.action-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="工作室设置" show-back />
|
||||
<!-- Loading state -->
|
||||
<view v-if="loading" class="skeleton-page">
|
||||
<view class="skeleton-section" />
|
||||
@@ -150,10 +151,17 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
address: '',
|
||||
@@ -260,11 +268,6 @@ onMounted(fetchStudioInfo)
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Banner preview ──────────────────────── */
|
||||
.banner-preview {
|
||||
height: 260rpx;
|
||||
@@ -295,7 +298,7 @@ onMounted(fetchStudioInfo)
|
||||
.banner-logo-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #c9a87c;
|
||||
background: $primary-dark;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -390,7 +393,7 @@ onMounted(fetchStudioInfo)
|
||||
.save-btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="排课模板" show-back />
|
||||
<!-- Toolbar -->
|
||||
<view class="toolbar">
|
||||
<text class="toolbar-hint">共 {{ templates.length }} 条模板</text>
|
||||
@@ -137,6 +138,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { WEEKDAY_LABELS } from '@mp-pilates/shared'
|
||||
import type { WeekTemplate } from '@mp-pilates/shared'
|
||||
@@ -151,6 +154,7 @@ type LocalTemplate = Partial<WeekTemplate> & {
|
||||
}
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
const navBarHeight = ref('64px')
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const isDirty = ref(false)
|
||||
@@ -163,9 +167,9 @@ const dayOptions = [1, 2, 3, 4, 5, 6, 7].map((d) => ({ label: WEEKDAY_LABELS[d],
|
||||
|
||||
const form = ref({
|
||||
dayIdx: 0,
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
capacityStr: '10',
|
||||
startTime: '08:00',
|
||||
endTime: '09:00',
|
||||
capacityStr: '1',
|
||||
})
|
||||
|
||||
const grouped = computed(() => {
|
||||
@@ -180,11 +184,38 @@ const grouped = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
/** 生成默认模板：周一到周日，8:00-22:00 每小时一个时段 */
|
||||
function generateDefaultTemplates(): LocalTemplate[] {
|
||||
const defaults: LocalTemplate[] = []
|
||||
for (let day = 1; day <= 7; day++) {
|
||||
for (let hour = 8; hour < 22; hour++) {
|
||||
const start = String(hour).padStart(2, '0') + ':00'
|
||||
const end = String(hour + 1).padStart(2, '0') + ':00'
|
||||
defaults.push({
|
||||
_key: `default-${day}-${start}`,
|
||||
dayOfWeek: day,
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
capacity: 1,
|
||||
isActive: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
return defaults
|
||||
}
|
||||
|
||||
async function fetchTemplates() {
|
||||
loading.value = true
|
||||
try {
|
||||
templates.value = await adminStore.fetchWeekTemplates()
|
||||
const data = await adminStore.fetchWeekTemplates()
|
||||
if (data.length === 0) {
|
||||
// No templates yet — pre-fill with defaults
|
||||
templates.value = generateDefaultTemplates()
|
||||
isDirty.value = true
|
||||
} else {
|
||||
templates.value = data
|
||||
isDirty.value = false
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
@@ -194,7 +225,7 @@ async function fetchTemplates() {
|
||||
|
||||
function openAdd() {
|
||||
editTarget.value = null
|
||||
form.value = { dayIdx: 0, startTime: '09:00', endTime: '10:00', capacityStr: '10' }
|
||||
form.value = { dayIdx: 0, startTime: '08:00', endTime: '09:00', capacityStr: '1' }
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
@@ -291,7 +322,10 @@ async function handleSave() {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(fetchTemplates)
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
fetchTemplates()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -317,7 +351,7 @@ onMounted(fetchTemplates)
|
||||
padding: 12rpx 28rpx;
|
||||
}
|
||||
|
||||
.add-btn-text { font-size: 26rpx; font-weight: 600; color: #c9a87c; }
|
||||
.add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }
|
||||
|
||||
/* ── Skeleton ────────────────────────────── */
|
||||
.skeleton-list { padding: 0 24rpx; }
|
||||
@@ -331,11 +365,6 @@ onMounted(fetchTemplates)
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
@@ -422,7 +451,7 @@ onMounted(fetchTemplates)
|
||||
&--loading { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.save-btn-text { font-size: 30rpx; font-weight: 700; color: #c9a87c; }
|
||||
.save-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
|
||||
|
||||
/* ── Modal ───────────────────────────────── */
|
||||
.modal-mask {
|
||||
@@ -495,5 +524,5 @@ onMounted(fetchTemplates)
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
|
||||
</style>
|
||||
|
||||
588
packages/app/src/pages/booking/detail.vue
Normal file
588
packages/app/src/pages/booking/detail.vue
Normal file
@@ -0,0 +1,588 @@
|
||||
<template>
|
||||
<view class="booking-detail-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="预约详情" show-back />
|
||||
|
||||
<!-- Loading state -->
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<view class="skeleton-card" />
|
||||
</view>
|
||||
|
||||
<!-- Error state -->
|
||||
<view v-else-if="!booking" class="empty-wrap">
|
||||
<text class="empty-title">预约不存在</text>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<!-- Booking info card -->
|
||||
<view class="info-card">
|
||||
<!-- Status banner -->
|
||||
<view class="status-banner" :class="bookingStatusBannerClass(booking.status)">
|
||||
<text class="status-banner-text">{{ bookingStatusLabel(booking.status) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Course info -->
|
||||
<view class="info-section">
|
||||
<view class="info-row">
|
||||
<text class="info-label">课程日期</text>
|
||||
<text class="info-value">{{ formatDateDisplay(booking.timeSlot.date) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">课程时间</text>
|
||||
<text class="info-value">
|
||||
{{ booking.timeSlot.startTime.slice(0, 5) }} - {{ booking.timeSlot.endTime.slice(0, 5) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">使用卡种</text>
|
||||
<text class="info-value">{{ booking.membership?.cardType?.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- User info (for admin view) -->
|
||||
<view v-if="isAdmin && bookingUser" class="info-section">
|
||||
<view class="section-title">学员信息</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">学员姓名</text>
|
||||
<text class="info-value">{{ bookingUser.nickname || '匿名用户' }}</text>
|
||||
</view>
|
||||
<view v-if="bookingUser.phone" class="info-row">
|
||||
<text class="info-label">联系电话</text>
|
||||
<text class="info-value">{{ bookingUser.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Timestamps -->
|
||||
<view class="info-section">
|
||||
<view class="section-title">时间记录</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约时间</text>
|
||||
<text class="info-value">{{ formatDateTime(booking.createdAt) }}</text>
|
||||
</view>
|
||||
<view v-if="booking.confirmedAt" class="info-row">
|
||||
<text class="info-label">确认时间</text>
|
||||
<text class="info-value">{{ formatDateTime(booking.confirmedAt) }}</text>
|
||||
</view>
|
||||
<view v-if="booking.completedAt" class="info-row">
|
||||
<text class="info-label">核销时间</text>
|
||||
<text class="info-value">{{ formatDateTime(booking.completedAt) }}</text>
|
||||
</view>
|
||||
<view v-if="booking.cancelledAt" class="info-row">
|
||||
<text class="info-label">取消时间</text>
|
||||
<text class="info-value">{{ formatDateTime(booking.cancelledAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Status timeline -->
|
||||
<view class="timeline-card">
|
||||
<view class="timeline-header">
|
||||
<text class="timeline-title">状态流转记录</text>
|
||||
</view>
|
||||
|
||||
<view v-if="history.length === 0" class="timeline-empty">
|
||||
<text class="timeline-empty-text">暂无流转记录</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="timeline">
|
||||
<view
|
||||
v-for="(item, idx) in history"
|
||||
:key="item.id"
|
||||
class="timeline-item"
|
||||
:class="{ 'timeline-item--last': idx === history.length - 1 }"
|
||||
>
|
||||
<!-- Dot -->
|
||||
<view class="timeline-dot-wrap">
|
||||
<view class="timeline-dot" :class="bookingTimelineDotClass(item.toStatus)" />
|
||||
<view v-if="idx < history.length - 1" class="timeline-line" />
|
||||
</view>
|
||||
|
||||
<!-- Content -->
|
||||
<view class="timeline-content">
|
||||
<view class="timeline-content-header">
|
||||
<text class="timeline-status">{{ formatHistoryStatus(item.toStatus) }}</text>
|
||||
<text class="timeline-time">{{ formatDateTime(item.createdAt) }}</text>
|
||||
</view>
|
||||
<text v-if="item.remark" class="timeline-remark">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<view v-if="showActions" class="action-bar">
|
||||
<!-- Pending: confirm button for admin -->
|
||||
<view
|
||||
v-if="booking.status === 'PENDING_CONFIRMATION' && isAdmin"
|
||||
class="action-btn action-btn--confirm"
|
||||
@tap="handleConfirm"
|
||||
>
|
||||
<text class="action-btn-text">确认预约</text>
|
||||
</view>
|
||||
|
||||
<!-- Confirmed: complete / noshow buttons for admin -->
|
||||
<view v-if="booking.status === 'CONFIRMED' && isAdmin" class="action-row">
|
||||
<view class="action-btn action-btn--complete" @tap="handleComplete">
|
||||
<text class="action-btn-text">核销完成</text>
|
||||
</view>
|
||||
<view class="action-btn action-btn--noshow" @tap="handleNoShow">
|
||||
<text class="action-btn-text">标记未到</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- User can cancel if pending or confirmed -->
|
||||
<view
|
||||
v-if="booking.status === 'PENDING_CONFIRMATION' || booking.status === 'CONFIRMED'"
|
||||
class="action-btn action-btn--cancel"
|
||||
@tap="handleCancel"
|
||||
>
|
||||
<text class="action-btn-text">取消预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import type { BookingWithDetails, BookingWithUser, BookingStatusHistory } from '@mp-pilates/shared'
|
||||
import { BookingStatus } from '@mp-pilates/shared'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import {
|
||||
formatDateDisplay,
|
||||
bookingStatusLabel,
|
||||
bookingStatusBannerClass,
|
||||
bookingTimelineDotClass,
|
||||
} from '../../utils/booking-helpers'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const bookingStore = useBookingStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
const loading = ref(false)
|
||||
const bookingId = ref('')
|
||||
const booking = ref<BookingWithDetails | BookingWithUser | null>(null)
|
||||
const history = ref<BookingStatusHistory[]>([])
|
||||
|
||||
const isAdmin = computed(() => userStore.isAdmin)
|
||||
const showActions = computed(() =>
|
||||
booking.value?.status === BookingStatus.PENDING_CONFIRMATION ||
|
||||
booking.value?.status === BookingStatus.CONFIRMED,
|
||||
)
|
||||
|
||||
// Type guard to check if booking has user property
|
||||
function hasUser(b: BookingWithDetails | BookingWithUser | null): b is BookingWithUser {
|
||||
return b !== null && 'user' in b
|
||||
}
|
||||
|
||||
const bookingUser = computed(() => hasUser(booking.value) ? booking.value.user : null)
|
||||
|
||||
// ─── Status helpers ───────────────────────────────────────────────────────
|
||||
function formatHistoryStatus(status: string): string {
|
||||
return bookingStatusLabel(status)
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr: string): string {
|
||||
if (!dateStr) return '-'
|
||||
const d = new Date(dateStr)
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const hh = String(d.getHours()).padStart(2, '0')
|
||||
const mm = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${y}-${m}-${day} ${hh}:${mm}`
|
||||
}
|
||||
|
||||
// ─── Data loading ─────────────────────────────────────────────────────────
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
// Fetch booking details and history in parallel
|
||||
const [bookingData, historyData] = await Promise.all([
|
||||
bookingStore.fetchBookingById(bookingId.value),
|
||||
bookingStore.fetchBookingHistory(bookingId.value),
|
||||
])
|
||||
|
||||
booking.value = bookingData
|
||||
history.value = historyData
|
||||
} catch (err) {
|
||||
console.error('Load booking detail failed:', err)
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Actions ──────────────────────────────────────────────────────────────
|
||||
async function handleConfirm() {
|
||||
uni.showModal({
|
||||
title: '确认预约',
|
||||
content: '确认该预约？确认后将扣除会员次数。',
|
||||
confirmText: '确认',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.confirmBooking(bookingId.value)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已确认', icon: 'success' })
|
||||
await loadData()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleComplete() {
|
||||
uni.showModal({
|
||||
title: '核销完成',
|
||||
content: '标记该课程为已完成？',
|
||||
confirmText: '确认',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.completeBooking(bookingId.value)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已核销', icon: 'success' })
|
||||
await loadData()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleNoShow() {
|
||||
uni.showModal({
|
||||
title: '标记未到',
|
||||
content: '标记该学员未出席？',
|
||||
confirmText: '确认',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.markNoShow(bookingId.value)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已标记', icon: 'success' })
|
||||
await loadData()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
uni.showModal({
|
||||
title: '取消预约',
|
||||
content: '确定要取消该预约？',
|
||||
confirmText: '确认取消',
|
||||
confirmColor: '#ef4444',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await bookingStore.cancelBooking(bookingId.value)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已取消', icon: 'success' })
|
||||
await loadData()
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '操作失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────────────────────
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
|
||||
onLoad((query) => {
|
||||
bookingId.value = (query as Record<string, string>).id || ''
|
||||
if (bookingId.value) {
|
||||
loadData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.booking-detail-page {
|
||||
min-height: 100vh;
|
||||
background: $primary-bg;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* ── Loading ─────────────────────────────────────────── */
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 300rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────────────────── */
|
||||
.empty-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* ── Info card ────────────────────────────────────────── */
|
||||
.info-card {
|
||||
margin: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.status-banner {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--pending { background: rgba(245, 158, 11, 0.1); }
|
||||
&--confirmed { background: rgba(201, 168, 124, 0.1); }
|
||||
&--completed { background: rgba(102, 187, 106, 0.1); }
|
||||
&--cancelled { background: rgba(0, 0, 0, 0.04); }
|
||||
&--noshow { background: rgba(239, 83, 80, 0.1); }
|
||||
}
|
||||
|
||||
.status-banner-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
.status-banner--pending & { color: #f59e0b; }
|
||||
.status-banner--confirmed & { color: $primary-dark; }
|
||||
.status-banner--completed & { color: #66bb6a; }
|
||||
.status-banner--cancelled & { color: #bbb; }
|
||||
.status-banner--noshow & { color: #ef5350; }
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #A09080;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Timeline card ────────────────────────────────────── */
|
||||
.timeline-card {
|
||||
margin: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.timeline-empty {
|
||||
padding: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.timeline-empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.timeline-dot-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.dot--pending { background: #f59e0b; }
|
||||
&.dot--confirmed { background: $primary-dark; }
|
||||
&.dot--completed { background: #66bb6a; }
|
||||
&.dot--cancelled { background: #e0e0e0; }
|
||||
&.dot--noshow { background: #ef5350; }
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
width: 2rpx;
|
||||
flex: 1;
|
||||
min-height: 40rpx;
|
||||
background: #e8e8e8;
|
||||
margin: 4rpx 0;
|
||||
}
|
||||
|
||||
.timeline-item--last .timeline-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
padding-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.timeline-content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.timeline-status {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.timeline-time {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.timeline-remark {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
/* ── Action bar ──────────────────────────────────────── */
|
||||
.action-bar {
|
||||
margin: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 28rpx 0;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.15s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&--confirm {
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
}
|
||||
|
||||
&--complete {
|
||||
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
||||
}
|
||||
|
||||
&--noshow {
|
||||
background: rgba(239, 83, 80, 0.1);
|
||||
}
|
||||
|
||||
&--cancel {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
|
||||
.action-btn--cancel & {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-btn--noshow & {
|
||||
color: #ef5350;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,16 @@
|
||||
<template>
|
||||
<view class="booking-page">
|
||||
<!-- ──────────── Sticky header area ──────────── -->
|
||||
<view class="sticky-header">
|
||||
<!-- Date selector -->
|
||||
<DateSelector v-model="selectedDate" @select="onDateSelect" />
|
||||
<!-- ──────────── Status bar spacing ──────────── -->
|
||||
<view class="status-bar" :style="{ height: statusBarHeight }" />
|
||||
|
||||
<!-- Time period filter -->
|
||||
<!-- ──────────── Page title ──────────── -->
|
||||
<view class="page-header">
|
||||
<text class="page-title">课程预约</text>
|
||||
</view>
|
||||
|
||||
<!-- ──────────── Date & period filters ──────────── -->
|
||||
<view class="filter-header">
|
||||
<DateSelector v-model="selectedDate" @select="onDateSelect" />
|
||||
<TimePeriodFilter v-model="selectedPeriod" @change="onPeriodChange" />
|
||||
</view>
|
||||
|
||||
@@ -20,22 +25,38 @@
|
||||
>
|
||||
<!-- Loading skeleton -->
|
||||
<view v-if="bookingStore.loadingSlots && !refreshing" class="loading-wrap">
|
||||
<view v-for="i in 4" :key="i" class="skeleton-card" />
|
||||
<view v-for="i in 3" :key="i" class="skeleton-card">
|
||||
<view class="skeleton-time" />
|
||||
<view class="skeleton-body">
|
||||
<view class="skeleton-title" />
|
||||
<view class="skeleton-sub" />
|
||||
</view>
|
||||
<view class="skeleton-btn" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Empty state -->
|
||||
<view v-else-if="filteredSlots.length === 0" class="empty-wrap">
|
||||
<image class="empty-img" src="/static/images/empty-calendar.png" mode="aspectFit" />
|
||||
<view class="empty-icon-circle">
|
||||
<text class="empty-icon-text">📅</text>
|
||||
</view>
|
||||
<text class="empty-text">当日暂无可约时段</text>
|
||||
<text class="empty-sub">请选择其他日期或时段</text>
|
||||
<text class="empty-sub">请选择其他日期或时段查看</text>
|
||||
</view>
|
||||
|
||||
<!-- Slot cards -->
|
||||
<view v-else class="slot-list">
|
||||
<!-- Date summary -->
|
||||
<view class="date-summary">
|
||||
<text class="date-summary-text">
|
||||
共 {{ filteredSlots.length }} 个可选时段
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<SlotCard
|
||||
v-for="slot in filteredSlots"
|
||||
:key="slot.id"
|
||||
:slot="slot"
|
||||
v-for="item in filteredSlots"
|
||||
:key="item.id"
|
||||
:time-slot="item"
|
||||
@book="onBookTap"
|
||||
@cancel="onCancelTap"
|
||||
/>
|
||||
@@ -48,7 +69,7 @@
|
||||
<!-- ──────────── Confirm popup ──────────── -->
|
||||
<BookingConfirmPopup
|
||||
:visible="showConfirmPopup"
|
||||
:slot="pendingSlot"
|
||||
:time-slot="pendingSlot"
|
||||
:memberships="userStore.activeMemberships as MembershipWithCardType[]"
|
||||
@confirm="onConfirmBooking"
|
||||
@cancel="showConfirmPopup = false"
|
||||
@@ -57,12 +78,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pilates/shared'
|
||||
import { TIME_PERIODS } from '@mp-pilates/shared'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { formatDate, getDateRange } from '../../utils/format'
|
||||
import { formatDate } from '../../utils/format'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import DateSelector from '../../components/DateSelector.vue'
|
||||
import TimePeriodFilter from '../../components/TimePeriodFilter.vue'
|
||||
import SlotCard from '../../components/SlotCard.vue'
|
||||
@@ -81,15 +104,47 @@ const showConfirmPopup = ref(false)
|
||||
const pendingSlot = ref<TimeSlotWithBookingStatus | null>(null)
|
||||
const refreshing = ref(false)
|
||||
|
||||
// ─── Layout ───────────────────────────────────────────────
|
||||
// Approximate scroll area height (vh minus sticky header ~220rpx + tabbar ~100rpx)
|
||||
const scrollHeight = computed(() => {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
const headerPx = 220 * (sysInfo.windowWidth / 750)
|
||||
const tabbarPx = 100 * (sysInfo.windowWidth / 750)
|
||||
return `${sysInfo.windowHeight - headerPx - tabbarPx}px`
|
||||
// ─── 微信分享 ───────────────────────────────────────────────
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: '预约普拉提课程，开启健康新生活',
|
||||
path: '/pages/booking/index',
|
||||
imageUrl: '',
|
||||
}
|
||||
})
|
||||
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: '预约普拉提课程，开启健康新生活',
|
||||
query: '',
|
||||
}
|
||||
})
|
||||
|
||||
// ─── Layout ───────────────────────────────────────────────
|
||||
const statusBarHeight = ref('20px')
|
||||
const scrollHeight = ref('500px')
|
||||
// Heights of static elements above scroll-view (in rpx, converted to px)
|
||||
const PAGE_HEADER_RPX = 88 // title bar height
|
||||
const FILTER_HEADER_RPX = 240 // DateSelector + TimePeriodFilter
|
||||
const TABBAR_RPX = 100
|
||||
|
||||
function updateLayout() {
|
||||
const { statusBarHeight: statusBarPx, windowWidth } = getSystemLayout()
|
||||
const ratio = windowWidth / 750
|
||||
statusBarHeight.value = `${statusBarPx}px`
|
||||
|
||||
const headerPx = Math.round(PAGE_HEADER_RPX * ratio)
|
||||
const filterPx = Math.round(FILTER_HEADER_RPX * ratio)
|
||||
const tabbarPx = Math.round(TABBAR_RPX * ratio)
|
||||
|
||||
// scroll-view fills remaining space: window - statusBar - pageHeader - filters - tabbar
|
||||
const { windowHeight } = uni.getWindowInfo()
|
||||
const remaining = windowHeight - statusBarPx - headerPx - filterPx - tabbarPx
|
||||
scrollHeight.value = `${remaining}px`
|
||||
}
|
||||
|
||||
updateLayout()
|
||||
|
||||
// ─── Filtered slots ───────────────────────────────────────
|
||||
const filteredSlots = computed<TimeSlotWithBookingStatus[]>(() => {
|
||||
const slots = bookingStore.slots as TimeSlotWithBookingStatus[]
|
||||
@@ -225,25 +280,47 @@ onMounted(async () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.booking-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f3f0;
|
||||
height: 100vh;
|
||||
background: $primary-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Sticky header ─────────────────────────────────── */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
/* ── Status bar ───────────────────────────────────── */
|
||||
.status-bar {
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ── Page header ──────────────────────────────────── */
|
||||
.page-header {
|
||||
flex-shrink: 0;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
/* ── Filter header ────────────────────────────────── */
|
||||
.filter-header {
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ── Scroll container ──────────────────────────────── */
|
||||
.slot-scroll {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ── Slot list ─────────────────────────────────────── */
|
||||
@@ -251,7 +328,18 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
padding: 28rpx 24rpx 0;
|
||||
padding: 24rpx 24rpx 0;
|
||||
}
|
||||
|
||||
/* ── Date summary ──────────────────────────────────── */
|
||||
.date-summary {
|
||||
padding: 0 8rpx 4rpx;
|
||||
}
|
||||
|
||||
.date-summary-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Loading skeleton ──────────────────────────────── */
|
||||
@@ -264,15 +352,59 @@ onMounted(async () => {
|
||||
|
||||
.skeleton-card {
|
||||
height: 140rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
||||
border-radius: 24rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 32rpx 28rpx 32rpx 36rpx;
|
||||
gap: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.skeleton-time {
|
||||
width: 80rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
width: 60%;
|
||||
height: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
.skeleton-sub {
|
||||
width: 40%;
|
||||
height: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
.skeleton-btn {
|
||||
width: 140rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Empty state ───────────────────────────────────── */
|
||||
@@ -281,15 +413,23 @@ onMounted(async () => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
padding: 140rpx 40rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 8rpx;
|
||||
.empty-icon-circle {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background: $primary-border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon-text {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="card-detail-page">
|
||||
<view class="card-detail-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="购买会员卡" show-back />
|
||||
<!-- Loading state -->
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<view class="skeleton-header" />
|
||||
@@ -11,7 +12,7 @@
|
||||
</view>
|
||||
|
||||
<!-- Error state -->
|
||||
<view v-else-if="!card" class="error-wrap">
|
||||
<view v-else-if="!card && !showAll" class="error-wrap">
|
||||
<text class="error-icon">😕</text>
|
||||
<text class="error-text">会员卡信息加载失败</text>
|
||||
<view class="retry-btn" @tap="loadCard">
|
||||
@@ -19,7 +20,50 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Card content -->
|
||||
<!-- All cards list mode -->
|
||||
<template v-else-if="showAll">
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<view class="skeleton-header" />
|
||||
<view class="skeleton-body">
|
||||
<view class="skeleton-line w80" />
|
||||
<view class="skeleton-line w60" />
|
||||
<view class="skeleton-line w40" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="allCards.length" class="all-cards-list">
|
||||
<view
|
||||
v-for="c in allCards"
|
||||
:key="c.id"
|
||||
class="card-row"
|
||||
@tap="goToDetail(c.id)"
|
||||
>
|
||||
<view class="card-thumb" :class="thumbClass(c)">
|
||||
<view class="thumb-fallback">
|
||||
<text class="thumb-name">{{ truncate(c.name, 8) }}</text>
|
||||
<text class="thumb-price">¥{{ formatPrice(c.price) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ c.name }}</text>
|
||||
<text class="card-validity">有效期:{{ c.durationDays }} 天</text>
|
||||
<view class="price-row">
|
||||
<text class="price-current">¥{{ formatPrice(c.price) }}</text>
|
||||
<text
|
||||
v-if="c.originalPrice && c.originalPrice > c.price"
|
||||
class="price-original"
|
||||
>
|
||||
原价:¥{{ formatPrice(c.originalPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-text">暂无可购买的会员卡</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- Card content (single card mode) -->
|
||||
<template v-else>
|
||||
<!-- Hero section -->
|
||||
<view class="card-hero" :class="heroClass">
|
||||
@@ -129,16 +173,23 @@ import type { CardType, CreateOrderResponse } from '@mp-pilates/shared'
|
||||
import { CardTypeCategory } from '@mp-pilates/shared'
|
||||
import { get, post } from '../../utils/request'
|
||||
import { formatPrice } from '../../utils/format'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// ─── Nav bar height ──────────────────────────────────────────
|
||||
const navBarHeight = ref('64px')
|
||||
|
||||
// ─── Route params ──────────────────────────────────────────
|
||||
const cardId = ref<string>('')
|
||||
const isTrial = ref(false)
|
||||
const showAll = ref(false)
|
||||
|
||||
// ─── State ────────────────────────────────────────────────
|
||||
const card = ref<CardType | null>(null)
|
||||
const allCards = ref<CardType[]>([])
|
||||
const loading = ref(false)
|
||||
const buying = ref(false)
|
||||
|
||||
@@ -175,7 +226,12 @@ async function loadCard() {
|
||||
loading.value = true
|
||||
try {
|
||||
const types = await get<CardType[]>('/membership/card-types')
|
||||
const activeTypes = types.filter((c) => c.isActive)
|
||||
const activeTypes = types.filter((c) => c.isActive).sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
|
||||
if (showAll.value) {
|
||||
allCards.value = activeTypes
|
||||
return
|
||||
}
|
||||
|
||||
if (isTrial.value) {
|
||||
// Auto-find the trial card type
|
||||
@@ -187,12 +243,30 @@ async function loadCard() {
|
||||
card.value = activeTypes.find((c) => c.id === cardId.value) ?? null
|
||||
}
|
||||
} catch {
|
||||
if (!showAll.value) {
|
||||
card.value = null
|
||||
}
|
||||
allCards.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Helpers ───────────────────────────────────────────────
|
||||
function goToDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pages/card/detail?id=${id}` })
|
||||
}
|
||||
|
||||
function thumbClass(card: CardType): string {
|
||||
if (card.type === CardTypeCategory.TRIAL) return 'thumb--trial'
|
||||
if (card.type === CardTypeCategory.DURATION) return 'thumb--duration'
|
||||
return 'thumb--times'
|
||||
}
|
||||
|
||||
function truncate(str: string, maxLen: number): string {
|
||||
return str.length > maxLen ? str.slice(0, maxLen) + '…' : str
|
||||
}
|
||||
|
||||
// ─── Buy flow ─────────────────────────────────────────────
|
||||
async function handleBuy() {
|
||||
if (buying.value || !card.value) return
|
||||
@@ -273,11 +347,14 @@ async function doPurchase() {
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
|
||||
const pages = getCurrentPages()
|
||||
const current = pages[pages.length - 1]
|
||||
const options = (current as { options?: Record<string, string> }).options ?? {}
|
||||
cardId.value = options.id ?? ''
|
||||
isTrial.value = options.trial === '1'
|
||||
showAll.value = options.showAll === '1'
|
||||
loadCard()
|
||||
})
|
||||
</script>
|
||||
@@ -320,11 +397,6 @@ onMounted(() => {
|
||||
&.w40 { width: 40%; }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Error ───────────────────────────────────────────── */
|
||||
.error-wrap {
|
||||
display: flex;
|
||||
@@ -347,7 +419,7 @@ onMounted(() => {
|
||||
.retry-btn {
|
||||
padding: 20rpx 48rpx;
|
||||
border-radius: 40rpx;
|
||||
background: #c9a87c;
|
||||
background: $primary-dark;
|
||||
}
|
||||
|
||||
.retry-text {
|
||||
@@ -374,7 +446,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&.hero--trial {
|
||||
background: linear-gradient(135deg, #7d6608 0%, #c9a87c 100%);
|
||||
background: linear-gradient(135deg, #5a7a8a 0%, $primary-dark 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -473,7 +545,7 @@ onMounted(() => {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 3rpx;
|
||||
background: #c9a87c;
|
||||
background: $primary-dark;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -557,7 +629,7 @@ onMounted(() => {
|
||||
|
||||
.feature-dot {
|
||||
font-size: 26rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
line-height: 1.65;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -598,7 +670,7 @@ onMounted(() => {
|
||||
.summary-price {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
@@ -623,7 +695,126 @@ onMounted(() => {
|
||||
.buy-btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* ── All cards list ────────────────────────────────────── */
|
||||
.all-cards-list {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-thumb {
|
||||
width: 200rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.thumb-fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.thumb--times .thumb-fallback {
|
||||
background: linear-gradient(135deg, #3a3a3a, #555);
|
||||
}
|
||||
|
||||
.thumb--duration .thumb-fallback {
|
||||
background: linear-gradient(135deg, #6c3483, #9b59b6);
|
||||
}
|
||||
|
||||
.thumb--trial .thumb-fallback {
|
||||
background: linear-gradient(135deg, #5a7a8a, $primary-dark);
|
||||
}
|
||||
|
||||
.thumb-name {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.thumb-price {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-validity {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.price-current {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #e53935;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* ── Empty state ─────────────────────────────────────── */
|
||||
.empty-state {
|
||||
padding: 160rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<view class="home-page">
|
||||
<view class="home-page" :style="pageStyle">
|
||||
<!-- ──────────── Custom nav bar ──────────── -->
|
||||
<CustomNavBar title="场馆首页" />
|
||||
|
||||
<!-- Pull-to-refresh wrapper -->
|
||||
<scroll-view
|
||||
class="page-scroll"
|
||||
@@ -36,9 +39,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { ref, computed } from 'vue'
|
||||
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import BrandBanner from '../../components/BrandBanner.vue'
|
||||
import StudioInfo from '../../components/StudioInfo.vue'
|
||||
import QuickEntry from '../../components/QuickEntry.vue'
|
||||
@@ -48,11 +52,44 @@ import CardShop from '../../components/CardShop.vue'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { useStudioStore } from '../../stores/studio'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const studioStore = useStudioStore()
|
||||
const bookingStore = useBookingStore()
|
||||
|
||||
// ─── 微信分享 ───────────────────────────────────────────────
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: '专注核心，遇见更好的自己 | Focus Core 普拉提',
|
||||
path: '/pages/home/index',
|
||||
imageUrl: '',
|
||||
}
|
||||
})
|
||||
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: '专注核心，遇见更好的自己 | Focus Core 普拉提',
|
||||
query: '',
|
||||
}
|
||||
})
|
||||
|
||||
// ─── Layout ───────────────────────────────────────────────
|
||||
const navBarHeight = ref('64px')
|
||||
|
||||
function updateLayout() {
|
||||
const { statusBarHeight: statusBarPx, windowWidth, navBarHeight: navBarPx } = getSystemLayout()
|
||||
const ratio = windowWidth / 750
|
||||
const navTitlePx = 88 * ratio
|
||||
navBarHeight.value = `${navBarPx}px`
|
||||
}
|
||||
|
||||
updateLayout()
|
||||
|
||||
const pageStyle = computed(() => ({
|
||||
'--nav-bar-height': navBarHeight.value,
|
||||
}))
|
||||
|
||||
const refreshing = ref(false)
|
||||
const cardShopRef = ref<InstanceType<typeof CardShop> | null>(null)
|
||||
const cardShopAnchorId = 'card-shop-anchor'
|
||||
@@ -98,16 +135,17 @@ function scrollToCardShop() {
|
||||
<style lang="scss" scoped>
|
||||
.home-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
background: #FAF8F5;
|
||||
padding-top: var(--nav-bar-height);
|
||||
}
|
||||
|
||||
.page-scroll {
|
||||
height: 100vh;
|
||||
height: calc(100vh - var(--nav-bar-height));
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 16rpx;
|
||||
background: #f5f5f5;
|
||||
background: #FAF8F5;
|
||||
}
|
||||
|
||||
.bottom-padding {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="bookings-page">
|
||||
<view class="bookings-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="我的预约" show-back />
|
||||
<!-- Tab bar -->
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
@@ -27,16 +28,25 @@
|
||||
>
|
||||
<!-- Loading -->
|
||||
<view v-if="bookingStore.loadingBookings && !refreshingUpcoming" class="loading-wrap">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-card" />
|
||||
<view v-for="i in 3" :key="i" class="skeleton-card">
|
||||
<view class="skeleton-stripe" />
|
||||
<view class="skeleton-body">
|
||||
<view class="skeleton-line skeleton-line--long" />
|
||||
<view class="skeleton-line skeleton-line--short" />
|
||||
<view class="skeleton-line skeleton-line--medium" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Empty -->
|
||||
<view v-else-if="upcomingBookings.length === 0" class="empty-wrap">
|
||||
<text class="empty-icon">📅</text>
|
||||
<view class="empty-illustration">
|
||||
<text class="empty-icon">🧘</text>
|
||||
</view>
|
||||
<text class="empty-title">暂无即将上课的预约</text>
|
||||
<text class="empty-sub">去预约一节课吧</text>
|
||||
<text class="empty-sub">开始预约你的普拉提课程吧</text>
|
||||
<view class="empty-btn" @tap="goBooking">
|
||||
<text class="empty-btn-text">去预约</text>
|
||||
<text class="empty-btn-text">立即预约</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -46,28 +56,37 @@
|
||||
v-for="booking in upcomingBookings"
|
||||
:key="booking.id"
|
||||
class="booking-card"
|
||||
@tap="goDetail(booking)"
|
||||
>
|
||||
<view class="booking-stripe stripe--confirmed" />
|
||||
<view class="booking-stripe" :class="stripeClass(booking.status)" />
|
||||
<view class="booking-content">
|
||||
<view class="booking-main">
|
||||
<view class="booking-header">
|
||||
<view class="booking-datetime">
|
||||
<text class="booking-date">{{ formatDateDisplay(booking.timeSlot.date) }}</text>
|
||||
<text class="booking-time">
|
||||
{{ booking.timeSlot.startTime.slice(0, 5) }} – {{ booking.timeSlot.endTime.slice(0, 5) }}
|
||||
{{ booking.timeSlot.startTime.slice(0, 5) }} - {{ booking.timeSlot.endTime.slice(0, 5) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="status-badge badge--confirmed">
|
||||
<text class="status-text">已预约</text>
|
||||
<view class="status-badge" :class="statusBadgeClass(booking.status)">
|
||||
<text class="status-text">{{ statusLabel(booking.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="booking.status !== 'PENDING_CONFIRMATION'" class="booking-footer">
|
||||
<view class="booking-meta">
|
||||
<text class="meta-text">💳 {{ booking.membership.cardType.name }}</text>
|
||||
<text class="meta-label">使用卡种</text>
|
||||
<text class="meta-value">{{ booking.membership.cardType.name }}</text>
|
||||
</view>
|
||||
<view class="cancel-row">
|
||||
<view class="cancel-btn" @tap="handleCancel(booking)">
|
||||
<view class="cancel-btn" @tap.stop="handleCancel(booking)">
|
||||
<text class="cancel-text">取消预约</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="booking-footer">
|
||||
<view class="booking-meta">
|
||||
<text class="meta-label">使用卡种</text>
|
||||
<text class="meta-value">{{ booking.membership.cardType.name }}</text>
|
||||
</view>
|
||||
<text class="pending-hint">等待老师确认</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -86,12 +105,20 @@
|
||||
>
|
||||
<!-- Loading -->
|
||||
<view v-if="bookingStore.loadingBookings && !refreshingHistory" class="loading-wrap">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-card" />
|
||||
<view v-for="i in 3" :key="i" class="skeleton-card">
|
||||
<view class="skeleton-stripe" />
|
||||
<view class="skeleton-body">
|
||||
<view class="skeleton-line skeleton-line--long" />
|
||||
<view class="skeleton-line skeleton-line--short" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Empty -->
|
||||
<view v-else-if="historyBookings.length === 0" class="empty-wrap">
|
||||
<text class="empty-icon">📋</text>
|
||||
<view class="empty-illustration">
|
||||
<text class="empty-icon">📋</text>
|
||||
</view>
|
||||
<text class="empty-title">暂无历史记录</text>
|
||||
<text class="empty-sub">已完成或取消的课程将显示在这里</text>
|
||||
</view>
|
||||
@@ -102,22 +129,24 @@
|
||||
v-for="booking in historyBookings"
|
||||
:key="booking.id"
|
||||
class="booking-card"
|
||||
@tap="goDetail(booking)"
|
||||
>
|
||||
<view class="booking-stripe" :class="stripeClass(booking.status)" />
|
||||
<view class="booking-content">
|
||||
<view class="booking-main">
|
||||
<view class="booking-header">
|
||||
<view class="booking-datetime">
|
||||
<text class="booking-date">{{ formatDateDisplay(booking.timeSlot.date) }}</text>
|
||||
<text class="booking-time">
|
||||
{{ booking.timeSlot.startTime.slice(0, 5) }} – {{ booking.timeSlot.endTime.slice(0, 5) }}
|
||||
{{ booking.timeSlot.startTime.slice(0, 5) }} - {{ booking.timeSlot.endTime.slice(0, 5) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="status-badge" :class="statusBadgeClass(booking.status)">
|
||||
<text class="status-text">{{ statusLabel(booking.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="booking-meta">
|
||||
<text class="meta-text">💳 {{ booking.membership.cardType.name }}</text>
|
||||
<view class="booking-meta-row">
|
||||
<text class="meta-label">使用卡种</text>
|
||||
<text class="meta-value">{{ booking.membership.cardType.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -134,9 +163,13 @@ import type { BookingWithDetails } from '@mp-pilates/shared'
|
||||
import { BookingStatus } from '@mp-pilates/shared'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { formatDate, getWeekdayLabel } from '../../utils/format'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const bookingStore = useBookingStore()
|
||||
|
||||
// ─── Nav bar height ──────────────────────────────────────
|
||||
const navBarHeight = ref('64px')
|
||||
|
||||
// ─── Tab state ────────────────────────────────────────────
|
||||
type TabKey = 'upcoming' | 'history'
|
||||
|
||||
@@ -149,34 +182,49 @@ const activeTab = ref<TabKey>('upcoming')
|
||||
const refreshingUpcoming = ref(false)
|
||||
const refreshingHistory = ref(false)
|
||||
|
||||
// ─── Safe array accessor ─────────────────────────────────
|
||||
function safeBookings(): readonly BookingWithDetails[] {
|
||||
const raw = bookingStore.myBookings
|
||||
return Array.isArray(raw) ? raw : []
|
||||
}
|
||||
|
||||
/** Normalize date to YYYY-MM-DD — handles both "2026-04-06" and "2026-04-06T00:00:00.000Z" */
|
||||
function toDateStr(date: string): string {
|
||||
return date.slice(0, 10)
|
||||
}
|
||||
|
||||
// ─── Filtered bookings ────────────────────────────────────
|
||||
const today = computed(() => formatDate(new Date()))
|
||||
|
||||
const upcomingBookings = computed<BookingWithDetails[]>(() => {
|
||||
const all = bookingStore.myBookings as BookingWithDetails[]
|
||||
return all
|
||||
return safeBookings()
|
||||
.filter(
|
||||
(b) => b.status === BookingStatus.CONFIRMED && b.timeSlot.date >= today.value,
|
||||
(b) =>
|
||||
(b.status === BookingStatus.PENDING_CONFIRMATION || b.status === BookingStatus.CONFIRMED) &&
|
||||
toDateStr(b.timeSlot.date) >= today.value,
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (a.timeSlot.date !== b.timeSlot.date) {
|
||||
return a.timeSlot.date.localeCompare(b.timeSlot.date)
|
||||
const dateA = toDateStr(a.timeSlot.date)
|
||||
const dateB = toDateStr(b.timeSlot.date)
|
||||
if (dateA !== dateB) {
|
||||
return dateA.localeCompare(dateB)
|
||||
}
|
||||
return a.timeSlot.startTime.localeCompare(b.timeSlot.startTime)
|
||||
})
|
||||
})
|
||||
|
||||
const historyBookings = computed<BookingWithDetails[]>(() => {
|
||||
const all = bookingStore.myBookings as BookingWithDetails[]
|
||||
return all
|
||||
return safeBookings()
|
||||
.filter(
|
||||
(b) =>
|
||||
b.status !== BookingStatus.CONFIRMED ||
|
||||
b.timeSlot.date < today.value,
|
||||
toDateStr(b.timeSlot.date) < today.value,
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (b.timeSlot.date !== a.timeSlot.date) {
|
||||
return b.timeSlot.date.localeCompare(a.timeSlot.date)
|
||||
const dateA = toDateStr(a.timeSlot.date)
|
||||
const dateB = toDateStr(b.timeSlot.date)
|
||||
if (dateB !== dateA) {
|
||||
return dateB.localeCompare(dateA)
|
||||
}
|
||||
return b.timeSlot.startTime.localeCompare(a.timeSlot.startTime)
|
||||
})
|
||||
@@ -185,43 +233,61 @@ const historyBookings = computed<BookingWithDetails[]>(() => {
|
||||
const upcomingCount = computed(() => upcomingBookings.value.length)
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────
|
||||
function statusLabel(status: BookingStatus): string {
|
||||
const map: Record<BookingStatus, string> = {
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: '待确认',
|
||||
[BookingStatus.CONFIRMED]: '已预约',
|
||||
[BookingStatus.CANCELLED]: '已取消',
|
||||
[BookingStatus.COMPLETED]: '已完成',
|
||||
[BookingStatus.NO_SHOW]: '未出席',
|
||||
}
|
||||
return map[status] ?? status
|
||||
}
|
||||
|
||||
function statusBadgeClass(status: BookingStatus): string {
|
||||
const map: Record<BookingStatus, string> = {
|
||||
const STATUS_BADGE_CLASSES: Record<string, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: 'badge--pending',
|
||||
[BookingStatus.CONFIRMED]: 'badge--confirmed',
|
||||
[BookingStatus.CANCELLED]: 'badge--cancelled',
|
||||
[BookingStatus.COMPLETED]: 'badge--completed',
|
||||
[BookingStatus.NO_SHOW]: 'badge--noshow',
|
||||
}
|
||||
return map[status] ?? ''
|
||||
}
|
||||
|
||||
function stripeClass(status: BookingStatus): string {
|
||||
const map: Record<BookingStatus, string> = {
|
||||
const STATUS_STRIPE_CLASSES: Record<string, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: 'stripe--pending',
|
||||
[BookingStatus.CONFIRMED]: 'stripe--confirmed',
|
||||
[BookingStatus.CANCELLED]: 'stripe--cancelled',
|
||||
[BookingStatus.COMPLETED]: 'stripe--completed',
|
||||
[BookingStatus.NO_SHOW]: 'stripe--noshow',
|
||||
}
|
||||
return map[status] ?? ''
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
return STATUS_LABELS[status] ?? status
|
||||
}
|
||||
|
||||
function statusBadgeClass(status: string): string {
|
||||
return STATUS_BADGE_CLASSES[status] ?? ''
|
||||
}
|
||||
|
||||
function stripeClass(status: string): string {
|
||||
return STATUS_STRIPE_CLASSES[status] ?? ''
|
||||
}
|
||||
|
||||
function formatDateDisplay(dateStr: string): string {
|
||||
// e.g. "2024-03-15" → "3月15日 周五"
|
||||
const d = new Date(dateStr)
|
||||
const month = d.getMonth() + 1
|
||||
const day = d.getDate()
|
||||
const weekday = getWeekdayLabel(d)
|
||||
return `${month}月${day}日 ${weekday}`
|
||||
const normalized = toDateStr(dateStr)
|
||||
const todayStr = formatDate(new Date())
|
||||
const tomorrowDate = new Date()
|
||||
tomorrowDate.setDate(tomorrowDate.getDate() + 1)
|
||||
const tomorrowStr = formatDate(tomorrowDate)
|
||||
|
||||
// Parse from normalized YYYY-MM-DD to avoid timezone shifts
|
||||
const [y, m, d] = normalized.split('-').map(Number)
|
||||
const localDate = new Date(y, m - 1, d)
|
||||
const weekday = getWeekdayLabel(localDate)
|
||||
|
||||
if (normalized === todayStr) {
|
||||
return `今天 ${m}月${d}日`
|
||||
}
|
||||
if (normalized === tomorrowStr) {
|
||||
return `明天 ${m}月${d}日`
|
||||
}
|
||||
return `${m}月${d}日 ${weekday}`
|
||||
}
|
||||
|
||||
// ─── Actions ──────────────────────────────────────────────
|
||||
@@ -245,6 +311,10 @@ function goBooking() {
|
||||
uni.switchTab({ url: '/pages/booking/index' })
|
||||
}
|
||||
|
||||
function goDetail(booking: BookingWithDetails) {
|
||||
uni.navigateTo({ url: `/pages/booking/detail?id=${booking.id}` })
|
||||
}
|
||||
|
||||
async function handleCancel(booking: BookingWithDetails) {
|
||||
const dateLabel = formatDateDisplay(booking.timeSlot.date)
|
||||
const timeLabel = booking.timeSlot.startTime.slice(0, 5)
|
||||
@@ -273,7 +343,12 @@ async function handleCancel(booking: BookingWithDetails) {
|
||||
}
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────
|
||||
onMounted(() => bookingStore.fetchMyBookings())
|
||||
onMounted(() => {
|
||||
const windowInfo = uni.getWindowInfo()
|
||||
const statusBarH = windowInfo.statusBarHeight ?? 20
|
||||
navBarHeight.value = `${statusBarH + Math.round(88 * windowInfo.windowWidth / 750)}px`
|
||||
bookingStore.fetchMyBookings()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -302,10 +377,15 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
gap: 8rpx;
|
||||
padding: 28rpx 0;
|
||||
position: relative;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-label {
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -317,7 +397,7 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #c9a87c;
|
||||
background: $primary-dark;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
@@ -352,7 +432,7 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
height: calc(100vh - 88rpx);
|
||||
}
|
||||
|
||||
/* ── Loading ─────────────────────────────────────────── */
|
||||
/* ── Loading skeleton ────────────────────────────────── */
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
@@ -361,16 +441,37 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.skeleton-stripe {
|
||||
width: 8rpx;
|
||||
flex-shrink: 0;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.skeleton-body {
|
||||
flex: 1;
|
||||
padding: 28rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
height: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
&--long { width: 70%; }
|
||||
&--short { width: 40%; }
|
||||
&--medium { width: 55%; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────────────────── */
|
||||
@@ -380,11 +481,22 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
gap: 20rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-illustration {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 80rpx;
|
||||
background: #faf6f1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
font-size: 72rpx;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
@@ -399,16 +511,23 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
margin-top: 12rpx;
|
||||
padding: 20rpx 56rpx;
|
||||
margin-top: 24rpx;
|
||||
padding: 22rpx 64rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #c9a87c;
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.3);
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-btn-text {
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* ── List ────────────────────────────────────────────── */
|
||||
@@ -416,15 +535,15 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
padding: 24rpx 24rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
/* ── Booking card ────────────────────────────────────── */
|
||||
.booking-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
@@ -434,21 +553,22 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
width: 8rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.stripe--confirmed { background: #c9a87c; }
|
||||
&.stripe--completed { background: #4caf50; }
|
||||
&.stripe--pending { background: #f59e0b; }
|
||||
&.stripe--confirmed { background: $primary-dark; }
|
||||
&.stripe--completed { background: #66bb6a; }
|
||||
&.stripe--cancelled { background: #e0e0e0; }
|
||||
&.stripe--noshow { background: #ef4444; }
|
||||
&.stripe--noshow { background: #ef5350; }
|
||||
}
|
||||
|
||||
.booking-content {
|
||||
flex: 1;
|
||||
padding: 24rpx 24rpx 24rpx 20rpx;
|
||||
padding: 28rpx 24rpx 24rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.booking-main {
|
||||
.booking-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
@@ -462,14 +582,15 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
}
|
||||
|
||||
.booking-date {
|
||||
font-size: 28rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.booking-time {
|
||||
font-size: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* Status badge */
|
||||
@@ -478,45 +599,69 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.badge--confirmed { background: #fff8ee; }
|
||||
&.badge--completed { background: #f0faf3; }
|
||||
&.badge--cancelled { background: #f5f5f5; }
|
||||
&.badge--noshow { background: #fef0f0; }
|
||||
&.badge--pending { background: rgba(245, 158, 11, 0.12); }
|
||||
&.badge--confirmed { background: rgba(201, 168, 124, 0.12); }
|
||||
&.badge--completed { background: rgba(102, 187, 106, 0.12); }
|
||||
&.badge--cancelled { background: rgba(0, 0, 0, 0.04); }
|
||||
&.badge--noshow { background: rgba(239, 83, 80, 0.1); }
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
|
||||
.badge--confirmed & { color: #c9a87c; }
|
||||
.badge--completed & { color: #4caf50; }
|
||||
.badge--pending & { color: #f59e0b; }
|
||||
.badge--confirmed & { color: $primary-dark; }
|
||||
.badge--completed & { color: #66bb6a; }
|
||||
.badge--cancelled & { color: #bbb; }
|
||||
.badge--noshow & { color: #ef4444; }
|
||||
.badge--noshow & { color: #ef5350; }
|
||||
}
|
||||
|
||||
/* Footer row with meta + cancel */
|
||||
.booking-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 8rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
/* Meta info */
|
||||
.booking-meta {
|
||||
.meta-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cancel row */
|
||||
.cancel-row {
|
||||
.booking-meta,
|
||||
.booking-meta-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 4rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.booking-meta-row {
|
||||
padding-top: 8rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Cancel button */
|
||||
.cancel-btn {
|
||||
padding: 10rpx 24rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 1rpx solid #ef444430;
|
||||
background: #fef0f0;
|
||||
border: 1rpx solid rgba(239, 68, 68, 0.2);
|
||||
background: rgba(254, 240, 240, 0.8);
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.75;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -526,6 +671,12 @@ onMounted(() => bookingStore.fetchMyBookings())
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pending-hint {
|
||||
font-size: 24rpx;
|
||||
color: #f59e0b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Spacer ──────────────────────────────────────────── */
|
||||
.scroll-bottom-spacer {
|
||||
height: 48rpx;
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<view class="profile-page">
|
||||
<!-- Custom nav bar (transparent, blends with UserCard gradient) -->
|
||||
<CustomNavBar title="我的" transparent />
|
||||
|
||||
<!-- User card -->
|
||||
<UserCard
|
||||
:logged-in="loggedIn"
|
||||
@@ -8,6 +11,7 @@
|
||||
:stats="stats"
|
||||
:memberships="memberships"
|
||||
:loading="loginLoading"
|
||||
:nav-bar-height="navBarHeight"
|
||||
@login="handleLogin"
|
||||
/>
|
||||
|
||||
@@ -28,17 +32,40 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import UserCard from '../../components/UserCard.vue'
|
||||
import ProfileMenu from '../../components/ProfileMenu.vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const { loggedIn, hasProfile, user, stats, memberships, isAdmin } = storeToRefs(userStore)
|
||||
|
||||
const loginLoading = ref(false)
|
||||
const navBarHeight = ref(64)
|
||||
|
||||
// ─── 微信分享 ───────────────────────────────────────────────
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: '我的普拉提会所，记录每一次进步',
|
||||
path: '/pages/profile/index',
|
||||
imageUrl: '',
|
||||
}
|
||||
})
|
||||
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: '我的普拉提会所，记录每一次进步',
|
||||
query: '',
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
navBarHeight.value = getSystemLayout().navBarHeight
|
||||
})
|
||||
|
||||
onShow(async () => {
|
||||
if (loggedIn.value) {
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<view class="info-page">
|
||||
<view class="info-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="个人信息" show-back />
|
||||
<!-- Avatar section -->
|
||||
<view class="avatar-section">
|
||||
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
|
||||
<view class="avatar-wrap">
|
||||
<image
|
||||
v-if="avatarUrl"
|
||||
v-if="displayAvatarUrl"
|
||||
class="avatar"
|
||||
:src="avatarUrl"
|
||||
:src="displayAvatarUrl"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view v-else class="avatar-placeholder">
|
||||
@@ -84,9 +85,14 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { wxBindPhone } from '../../utils/auth'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// ─── Nav bar height ──────────────────────────────────────
|
||||
const navBarHeight = ref('64px')
|
||||
|
||||
// ─── Form state ───────────────────────────────────────────
|
||||
const form = ref({
|
||||
nickname: '',
|
||||
@@ -125,6 +131,17 @@ const activeMembershipCount = computed(
|
||||
() => userStore.user?.activeMembershipCount ?? userStore.activeMemberships.length,
|
||||
)
|
||||
|
||||
// ─── Default avatar ───────────────────────────────────────
|
||||
const defaultAvatarUrl = computed(() => {
|
||||
const nickname = form.value.nickname || 'user'
|
||||
// 使用 dicebear 生成基于昵称的随机头像
|
||||
return `https://api.dicebear.com/7.x/identicon/svg?seed=${encodeURIComponent(nickname)}&backgroundColor=c9a87c,e8c88a`
|
||||
})
|
||||
|
||||
const displayAvatarUrl = computed(() => {
|
||||
return avatarUrl.value || defaultAvatarUrl.value
|
||||
})
|
||||
|
||||
// ─── Avatar upload ────────────────────────────────────────
|
||||
async function handleChooseAvatar(e: { detail: { avatarUrl: string } }) {
|
||||
const { avatarUrl } = e.detail
|
||||
@@ -200,6 +217,7 @@ async function handleSave() {
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────
|
||||
onMounted(async () => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
await userStore.fetchProfile()
|
||||
if (userStore.user) {
|
||||
form.value = { nickname: userStore.user.nickname }
|
||||
@@ -254,7 +272,7 @@ onMounted(async () => {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #c9a87c, #e8c88a);
|
||||
background: linear-gradient(135deg, $primary-dark, $primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -351,7 +369,7 @@ onMounted(async () => {
|
||||
|
||||
.bind-phone-text {
|
||||
font-size: 26rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -419,7 +437,7 @@ onMounted(async () => {
|
||||
.save-btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="membership-page">
|
||||
<view class="membership-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="我的会员卡" show-back />
|
||||
<!-- Pull-to-refresh scroll view -->
|
||||
<scroll-view
|
||||
class="scroll"
|
||||
@@ -146,9 +147,13 @@ import { ref, computed, onMounted } from 'vue'
|
||||
import type { MembershipWithCardType } from '@mp-pilates/shared'
|
||||
import { MembershipStatus, CardTypeCategory } from '@mp-pilates/shared'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// ─── Nav bar height ──────────────────────────────────────
|
||||
const navBarHeight = ref('64px')
|
||||
// ─── State ────────────────────────────────────────────────
|
||||
const loading = ref(false)
|
||||
const refreshing = ref(false)
|
||||
@@ -235,7 +240,10 @@ function goStore() {
|
||||
}
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────
|
||||
onMounted(loadMemberships)
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
loadMemberships()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -264,11 +272,6 @@ onMounted(loadMemberships)
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────────────────── */
|
||||
.empty-wrap {
|
||||
display: flex;
|
||||
@@ -298,7 +301,7 @@ onMounted(loadMemberships)
|
||||
margin-top: 12rpx;
|
||||
padding: 22rpx 60rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #c9a87c;
|
||||
background: $primary-dark;
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.35);
|
||||
}
|
||||
|
||||
@@ -369,7 +372,7 @@ onMounted(loadMemberships)
|
||||
|
||||
&--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
|
||||
&--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
|
||||
&--trial { background: linear-gradient(90deg, #7d6608, #c9a87c); }
|
||||
&--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
|
||||
&--inactive { background: #ccc; }
|
||||
}
|
||||
|
||||
@@ -383,7 +386,7 @@ onMounted(loadMemberships)
|
||||
|
||||
&--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
|
||||
&--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
|
||||
&--trial { background: linear-gradient(90deg, #7d6608, #c9a87c); }
|
||||
&--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
|
||||
&--inactive { background: #888; }
|
||||
}
|
||||
|
||||
@@ -461,13 +464,13 @@ onMounted(loadMemberships)
|
||||
.highlight-number {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.highlight-unit {
|
||||
font-size: 22rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -506,7 +509,7 @@ onMounted(loadMemberships)
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #c9a87c, #e8c88a);
|
||||
background: linear-gradient(90deg, $primary-dark, $primary-color);
|
||||
border-radius: 4rpx;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
@@ -539,7 +542,7 @@ onMounted(loadMemberships)
|
||||
|
||||
.fab-icon {
|
||||
font-size: 36rpx;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -547,7 +550,7 @@ onMounted(loadMemberships)
|
||||
.fab-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #c9a87c;
|
||||
color: $primary-dark;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
|
||||
BIN
packages/app/src/static/default-avatar.jpg
Normal file
BIN
packages/app/src/static/default-avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
@@ -13,6 +13,8 @@ import type {
|
||||
TimeSlot,
|
||||
CreateManualSlotDto,
|
||||
PaginatedData,
|
||||
ScheduleSlotPreview,
|
||||
PublishDaySlotsDto,
|
||||
} from '@mp-pilates/shared'
|
||||
|
||||
export interface AdminStats {
|
||||
@@ -23,6 +25,7 @@ export interface AdminStats {
|
||||
|
||||
export interface MemberSummary {
|
||||
userId: string
|
||||
openid: string
|
||||
nickname: string
|
||||
phone: string | null
|
||||
avatarUrl: string | null
|
||||
@@ -42,7 +45,7 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
}
|
||||
|
||||
async function saveWeekTemplates(templates: WeekTemplateInput[]): Promise<WeekTemplate[]> {
|
||||
const data = await put<WeekTemplate[]>('/admin/week-template', templates)
|
||||
const data = await put<WeekTemplate[]>('/admin/week-template', { templates })
|
||||
weekTemplates.value = data
|
||||
return data
|
||||
}
|
||||
@@ -68,9 +71,10 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
return data
|
||||
}
|
||||
|
||||
async function deleteCardType(id: string): Promise<void> {
|
||||
await del(`/admin/card-types/${id}`)
|
||||
async function deleteCardType(id: string): Promise<{ deleted: boolean; deactivated: boolean }> {
|
||||
const result = await del<{ deleted: boolean; deactivated: boolean }>(`/admin/card-types/${id}`)
|
||||
await fetchCardTypes()
|
||||
return result
|
||||
}
|
||||
|
||||
// ── Studio config ────────────────────────────────────────────────
|
||||
@@ -112,7 +116,12 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
limit?: number
|
||||
search?: string
|
||||
}): Promise<PaginatedData<MemberSummary>> {
|
||||
return get<PaginatedData<MemberSummary>>('/admin/members', params)
|
||||
// Filter out undefined/empty values to avoid sending "undefined" as string
|
||||
const cleanParams: Record<string, unknown> = {}
|
||||
if (params?.page != null) cleanParams.page = params.page
|
||||
if (params?.limit != null) cleanParams.limit = params.limit
|
||||
if (params?.search) cleanParams.search = params.search
|
||||
return get<PaginatedData<MemberSummary>>('/admin/members', cleanParams)
|
||||
}
|
||||
|
||||
// ── Time slots ───────────────────────────────────────────────────
|
||||
@@ -132,6 +141,26 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
return post<{ count: number }>('/admin/generate-slots', { startDate, endDate })
|
||||
}
|
||||
|
||||
// ── Schedule management ─────────────────────────────────────────
|
||||
const schedulePreview = ref<ScheduleSlotPreview[]>([])
|
||||
const scheduleLoading = ref(false)
|
||||
|
||||
async function fetchSchedulePreview(date: string): Promise<ScheduleSlotPreview[]> {
|
||||
scheduleLoading.value = true
|
||||
try {
|
||||
const data = await get<ScheduleSlotPreview[]>('/admin/schedule/preview', { date })
|
||||
schedulePreview.value = data
|
||||
return data
|
||||
} finally {
|
||||
scheduleLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function publishDaySlots(dto: PublishDaySlotsDto): Promise<void> {
|
||||
await post('/admin/schedule/publish', dto as unknown as Record<string, unknown>)
|
||||
await fetchSchedulePreview(dto.date)
|
||||
}
|
||||
|
||||
// ── Dashboard stats ──────────────────────────────────────────────
|
||||
async function fetchDashboardStats(): Promise<AdminStats> {
|
||||
return get<AdminStats>('/admin/stats')
|
||||
@@ -142,6 +171,8 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
weekTemplates,
|
||||
cardTypes,
|
||||
studioConfig,
|
||||
schedulePreview,
|
||||
scheduleLoading,
|
||||
// Week templates
|
||||
fetchWeekTemplates,
|
||||
saveWeekTemplates,
|
||||
@@ -164,6 +195,9 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
createManualSlot,
|
||||
closeSlot,
|
||||
generateSlots,
|
||||
// Schedule
|
||||
fetchSchedulePreview,
|
||||
publishDaySlots,
|
||||
// Stats
|
||||
fetchDashboardStats,
|
||||
}
|
||||
|
||||
@@ -3,10 +3,20 @@ import { ref } from 'vue'
|
||||
import type {
|
||||
TimeSlotWithBookingStatus,
|
||||
BookingWithDetails,
|
||||
BookingWithUser,
|
||||
BookingStatusHistory,
|
||||
CreateBookingDto,
|
||||
} from '@mp-pilates/shared'
|
||||
import { get, post, put } from '../utils/request'
|
||||
|
||||
/** Server paginated responses use `data` field, not `items` from the shared type */
|
||||
interface ServerPaginatedResult<T> {
|
||||
readonly data: readonly T[]
|
||||
readonly total: number
|
||||
readonly page: number
|
||||
readonly limit: number
|
||||
}
|
||||
|
||||
export const useBookingStore = defineStore('booking', () => {
|
||||
const slots = ref<readonly TimeSlotWithBookingStatus[]>([])
|
||||
const myBookings = ref<readonly BookingWithDetails[]>([])
|
||||
@@ -39,10 +49,12 @@ export const useBookingStore = defineStore('booking', () => {
|
||||
async function fetchMyBookings(status?: string) {
|
||||
loadingBookings.value = true
|
||||
try {
|
||||
const params = status ? { status } : {}
|
||||
myBookings.value = await get<BookingWithDetails[]>('/booking/my', params)
|
||||
const params: Record<string, unknown> = status ? { status } : {}
|
||||
const paginated = await get<ServerPaginatedResult<BookingWithDetails>>('/booking/my', params)
|
||||
myBookings.value = Array.isArray(paginated.data) ? paginated.data : []
|
||||
} catch (err) {
|
||||
console.error('Fetch bookings failed:', err)
|
||||
myBookings.value = []
|
||||
} finally {
|
||||
loadingBookings.value = false
|
||||
}
|
||||
@@ -50,12 +62,59 @@ export const useBookingStore = defineStore('booking', () => {
|
||||
|
||||
async function fetchUpcomingBookings() {
|
||||
try {
|
||||
upcomingBookings.value = await get<BookingWithDetails[]>('/booking/my/upcoming')
|
||||
const result = await get<BookingWithDetails[]>('/booking/my/upcoming')
|
||||
upcomingBookings.value = Array.isArray(result) ? result : []
|
||||
} catch (err) {
|
||||
console.error('Fetch upcoming bookings failed:', err)
|
||||
upcomingBookings.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Admin methods ──────────────────────────────────────────────────────
|
||||
|
||||
async function fetchAllAdminBookings(
|
||||
page = 1,
|
||||
limit = 20,
|
||||
status?: string,
|
||||
): Promise<ServerPaginatedResult<BookingWithUser>> {
|
||||
const params: Record<string, unknown> = { page, limit }
|
||||
if (status) params.status = status
|
||||
|
||||
const paginated = await get<ServerPaginatedResult<BookingWithUser>>('/admin/bookings', params)
|
||||
return paginated
|
||||
}
|
||||
|
||||
async function confirmBooking(bookingId: string, remark?: string) {
|
||||
const result = await put<BookingWithDetails>(`/booking/${bookingId}/confirm`, {
|
||||
remark,
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
async function completeBooking(bookingId: string, remark?: string) {
|
||||
const result = await put<BookingWithDetails>(`/booking/${bookingId}/complete`, {
|
||||
remark,
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
async function markNoShow(bookingId: string, remark?: string) {
|
||||
const result = await put<BookingWithDetails>(`/booking/${bookingId}/noshow`, {
|
||||
remark,
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
async function fetchBookingHistory(bookingId: string): Promise<BookingStatusHistory[]> {
|
||||
const result = await get<BookingStatusHistory[]>(`/booking/${bookingId}/history`)
|
||||
return result
|
||||
}
|
||||
|
||||
async function fetchBookingById(bookingId: string) {
|
||||
const result = await get<BookingWithDetails | BookingWithUser>(`/booking/${bookingId}`)
|
||||
return result
|
||||
}
|
||||
|
||||
return {
|
||||
slots,
|
||||
myBookings,
|
||||
@@ -67,5 +126,11 @@ export const useBookingStore = defineStore('booking', () => {
|
||||
cancelBooking,
|
||||
fetchMyBookings,
|
||||
fetchUpcomingBookings,
|
||||
fetchAllAdminBookings,
|
||||
confirmBooking,
|
||||
completeBooking,
|
||||
markNoShow,
|
||||
fetchBookingHistory,
|
||||
fetchBookingById,
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
/* uni.scss - 全局样式变量 */
|
||||
$brand-color: #1a1a2e;
|
||||
$brand-light: #e2d1c3;
|
||||
$accent-color: #c9a87c;
|
||||
$text-primary: #333333;
|
||||
$text-secondary: #666666;
|
||||
$text-hint: #999999;
|
||||
$bg-page: #f5f5f5;
|
||||
|
||||
/* ── 主题色系 ───────────────────────────────────────────── */
|
||||
$primary-color: #a9bfcc;
|
||||
$primary-dark: #7ba5be;
|
||||
$primary-light: #c8d8e4;
|
||||
$primary-bg: #f0f6f9;
|
||||
$primary-border: #d8eaf4;
|
||||
$primary-selected-bg: #EFF6F9;
|
||||
|
||||
/* ── 通用 ─────────────────────────────────────────────── */
|
||||
$brand-color: #4A4035;
|
||||
$brand-light: #c8d8e4;
|
||||
$accent-color: #7ba5be;
|
||||
$text-primary: #4A4035;
|
||||
$text-secondary: #7A6A5A;
|
||||
$text-hint: #A09080;
|
||||
$bg-page: #FAF8F5;
|
||||
$bg-card: #ffffff;
|
||||
$border-color: #eeeeee;
|
||||
$success-color: #52c41a;
|
||||
$warning-color: #faad14;
|
||||
$error-color: #ff4d4f;
|
||||
$border-color: rgba(180, 160, 130, 0.2);
|
||||
$success-color: #7A9E7E;
|
||||
$warning-color: #e8a87c;
|
||||
$error-color: #C47A7A;
|
||||
$radius-sm: 8rpx;
|
||||
$radius-md: 16rpx;
|
||||
$radius-lg: 24rpx;
|
||||
@@ -19,3 +29,9 @@ $spacing-sm: 16rpx;
|
||||
$spacing-md: 24rpx;
|
||||
$spacing-lg: 32rpx;
|
||||
$spacing-xl: 48rpx;
|
||||
|
||||
/* ── Shimmer animation ──────────────────────────────────── */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
81
packages/app/src/utils/booking-helpers.ts
Normal file
81
packages/app/src/utils/booking-helpers.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import { BookingStatus } from '@mp-pilates/shared'
|
||||
|
||||
/** 格式化日期显示：今天/明天/M月D日 星期X */
|
||||
export function formatDateDisplay(dateStr: string): string {
|
||||
const normalized = dateStr.slice(0, 10)
|
||||
const [y, m, d] = normalized.split('-').map(Number)
|
||||
const localDate = new Date(y, m - 1, d)
|
||||
|
||||
const today = new Date()
|
||||
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
|
||||
|
||||
const tomorrow = new Date(today.getTime() + 86400000)
|
||||
const tomorrowStr = `${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(2, '0')}-${String(tomorrow.getDate()).padStart(2, '0')}`
|
||||
|
||||
if (normalized === todayStr) return `今天 ${m}月${d}日`
|
||||
if (normalized === tomorrowStr) return `明天 ${m}月${d}日`
|
||||
|
||||
const weekdayLabels = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
return `${m}月${d}日 ${weekdayLabels[localDate.getDay()]}`
|
||||
}
|
||||
|
||||
// ─── Booking status helpers ───────────────────────────────────────────────────
|
||||
|
||||
export const BOOKING_STATUS_LABELS: Record<string, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: '待确认',
|
||||
[BookingStatus.CONFIRMED]: '已确认',
|
||||
[BookingStatus.CANCELLED]: '已取消',
|
||||
[BookingStatus.COMPLETED]: '已完成',
|
||||
[BookingStatus.NO_SHOW]: '未出席',
|
||||
}
|
||||
|
||||
export const BOOKING_STATUS_BADGE_CLASSES: Record<string, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: 'badge--pending',
|
||||
[BookingStatus.CONFIRMED]: 'badge--confirmed',
|
||||
[BookingStatus.CANCELLED]: 'badge--cancelled',
|
||||
[BookingStatus.COMPLETED]: 'badge--completed',
|
||||
[BookingStatus.NO_SHOW]: 'badge--noshow',
|
||||
}
|
||||
|
||||
export const BOOKING_STATUS_STRIPE_CLASSES: Record<string, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: 'stripe--pending',
|
||||
[BookingStatus.CONFIRMED]: 'stripe--confirmed',
|
||||
[BookingStatus.CANCELLED]: 'stripe--cancelled',
|
||||
[BookingStatus.COMPLETED]: 'stripe--completed',
|
||||
[BookingStatus.NO_SHOW]: 'stripe--noshow',
|
||||
}
|
||||
|
||||
export const BOOKING_STATUS_BANNER_CLASSES: Record<string, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: 'banner--pending',
|
||||
[BookingStatus.CONFIRMED]: 'banner--confirmed',
|
||||
[BookingStatus.CANCELLED]: 'banner--cancelled',
|
||||
[BookingStatus.COMPLETED]: 'banner--completed',
|
||||
[BookingStatus.NO_SHOW]: 'banner--noshow',
|
||||
}
|
||||
|
||||
export function bookingStatusLabel(status: string): string {
|
||||
return BOOKING_STATUS_LABELS[status] ?? status
|
||||
}
|
||||
|
||||
export function bookingStatusBadgeClass(status: string): string {
|
||||
return BOOKING_STATUS_BADGE_CLASSES[status] ?? ''
|
||||
}
|
||||
|
||||
export function bookingStatusStripeClass(status: string): string {
|
||||
return BOOKING_STATUS_STRIPE_CLASSES[status] ?? ''
|
||||
}
|
||||
|
||||
export function bookingStatusBannerClass(status: string): string {
|
||||
return BOOKING_STATUS_BANNER_CLASSES[status] ?? ''
|
||||
}
|
||||
|
||||
export function bookingTimelineDotClass(status: string): string {
|
||||
switch (status) {
|
||||
case BookingStatus.PENDING_CONFIRMATION: return 'dot--pending'
|
||||
case BookingStatus.CONFIRMED: return 'dot--confirmed'
|
||||
case BookingStatus.COMPLETED: return 'dot--completed'
|
||||
case BookingStatus.CANCELLED: return 'dot--cancelled'
|
||||
case BookingStatus.NO_SHOW: return 'dot--noshow'
|
||||
default: return ''
|
||||
}
|
||||
}
|
||||
54
packages/app/src/utils/system.ts
Normal file
54
packages/app/src/utils/system.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* System info utilities — replaces deprecated uni.getSystemInfoSync()
|
||||
* with the recommended granular APIs.
|
||||
*/
|
||||
|
||||
interface SystemLayout {
|
||||
/** Status bar height in px */
|
||||
readonly statusBarHeight: number
|
||||
/** Window width in px */
|
||||
readonly windowWidth: number
|
||||
/** Custom nav bar height in px (status bar + title bar) */
|
||||
readonly navBarHeight: number
|
||||
}
|
||||
|
||||
let cached: SystemLayout | null = null
|
||||
|
||||
/**
|
||||
* Returns layout dimensions using the new granular APIs.
|
||||
* Falls back to getSystemInfoSync only if the new APIs are unavailable.
|
||||
* Results are cached since these values never change during a session.
|
||||
*/
|
||||
export function getSystemLayout(): SystemLayout {
|
||||
if (cached) return cached
|
||||
|
||||
let statusBarHeight = 20
|
||||
let windowWidth = 375
|
||||
|
||||
try {
|
||||
// New recommended APIs (WeChat base lib >= 2.25.3)
|
||||
const windowInfo = uni.getWindowInfo()
|
||||
const deviceInfo = uni.getDeviceInfo()
|
||||
|
||||
statusBarHeight = windowInfo.statusBarHeight ?? 20
|
||||
windowWidth = windowInfo.windowWidth ?? 375
|
||||
|
||||
// Silence unused var — deviceInfo is here for future use
|
||||
void deviceInfo
|
||||
} catch {
|
||||
// Fallback for older base lib versions
|
||||
try {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight = sysInfo.statusBarHeight ?? 20
|
||||
windowWidth = sysInfo.windowWidth ?? 375
|
||||
} catch {
|
||||
// Use defaults
|
||||
}
|
||||
}
|
||||
|
||||
const navTitlePx = 88 * (windowWidth / 750)
|
||||
const navBarHeight = Math.round(statusBarHeight + navTitlePx)
|
||||
|
||||
cached = { statusBarHeight, windowWidth, navBarHeight }
|
||||
return cached
|
||||
}
|
||||
@@ -9,4 +9,11 @@ export default defineConfig({
|
||||
'@': resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
api: 'modern',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
BIN
packages/server/certs/apiclient_cert.p12
Normal file
BIN
packages/server/certs/apiclient_cert.p12
Normal file
Binary file not shown.
25
packages/server/certs/apiclient_cert.pem
Normal file
25
packages/server/certs/apiclient_cert.pem
Normal file
@@ -0,0 +1,25 @@
|
||||
-----BEGIN CERTIFICATE-----
|
||||
MIIETDCCAzSgAwIBAgIUepDZan7RoSnpjbX9XzqE7cNLKsYwDQYJKoZIhvcNAQEL
|
||||
BQAwXjELMAkGA1UEBhMCQ04xEzARBgNVBAoTClRlbnBheS5jb20xHTAbBgNVBAsT
|
||||
FFRlbnBheS5jb20gQ0EgQ2VudGVyMRswGQYDVQQDExJUZW5wYXkuY29tIFJvb3Qg
|
||||
Q0EwHhcNMjYwNDA1MDYwMjA1WhcNMzEwNDA0MDYwMjA1WjCBpTETMBEGA1UEAwwK
|
||||
MTExMDUzMDAyMzEbMBkGA1UECgwS5b6u5L+h5ZWG5oi357O757ufMVEwTwYDVQQL
|
||||
DEjmt7HlnLPluILlrp3lronljLropb/kuaHooZfpgZPogZrnhKblgaXouqvlt6Xk
|
||||
vZzlrqTvvIjkuKrkvZPlt6XllYbmiLfvvIkxCzAJBgNVBAYTAkNOMREwDwYDVQQH
|
||||
DAhTaGVuWmhlbjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAPAJ7FVi
|
||||
shMDXjsI4bjWxRq1FT3J3K1tSernV3Ql/ZYaEs/dSay5a3ITuipcDsLnmMPrP8qf
|
||||
CIfBT5h6HikfZ2xSiGcnRm5LNZsurSevpTgkSFf14ez3Eh3kMd/moRBwMZBZwftC
|
||||
cx+HokiyqCGmR8OQRIurC/ZY7mSrBlSVDg4ohM7a0QPyJazEpxs1IKg58UadSP6D
|
||||
gLqh/zDPn1+GBXIenCxYf2Sni5uommXdDh1/L8bga3DeZDcb1s57PX4cPGV131MO
|
||||
uJfug/hzdHX7FuihXPobtUqb9e+IN4SDNJ/fgG+lcumg6G68dCcE3nZovtwFlqiB
|
||||
EHs1gwUPRb7Cgo8CAwEAAaOBuTCBtjAJBgNVHRMEAjAAMAsGA1UdDwQEAwID+DCB
|
||||
mwYDVR0fBIGTMIGQMIGNoIGKoIGHhoGEaHR0cDovL2V2Y2EuaXRydXMuY29tLmNu
|
||||
L3B1YmxpYy9pdHJ1c2NybD9DQT0xQkQ0MjIwRTUwREJDMDRCMDZBRDM5NzU0OTg0
|
||||
NkMwMUMzRThFQkQyJnNnPUhBQ0M0NzFCNjU0MjJFMTJCMjdBOUQzM0E4N0FEMUNE
|
||||
RjU5MjZFMTQwMzcxMA0GCSqGSIb3DQEBCwUAA4IBAQApAXaaagCrm9kkUf6Po2AL
|
||||
Hm2oE5a99PgQS6O1R3i9pxsDVOxo/Ftt6NzjE58y48yBU/g/hp6HIQyz9FyzFuz7
|
||||
0QTOcmXHePfwNpLl6IPntxyk7XhKYx9Ebj4ZGSbby7L1E+9h/OwlnAJ60W1023CE
|
||||
qGQWLZD7WgmceD5a6YUYaamwJ2q3sICIozzTkeaT/mn1Z89ML4ns6KWXo9q62FPo
|
||||
TP5Fm9aJyu/50xLQKANDYu0qL0PcL/4HCU1/OrR9xYt7IsYT4Sa4f0y5HU4vkbVs
|
||||
Q+MfBVusvvutRHIPXfzFa0+1wLDuCr990FLlNcsLSVvMaQx5DQJhiUFJCQbwbwf+
|
||||
-----END CERTIFICATE-----
|
||||
28
packages/server/certs/apiclient_key.pem
Normal file
28
packages/server/certs/apiclient_key.pem
Normal file
@@ -0,0 +1,28 @@
|
||||
-----BEGIN PRIVATE KEY-----
|
||||
MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDwCexVYrITA147
|
||||
COG41sUatRU9ydytbUnq51d0Jf2WGhLP3UmsuWtyE7oqXA7C55jD6z/KnwiHwU+Y
|
||||
eh4pH2dsUohnJ0ZuSzWbLq0nr6U4JEhX9eHs9xId5DHf5qEQcDGQWcH7QnMfh6JI
|
||||
sqghpkfDkESLqwv2WO5kqwZUlQ4OKITO2tED8iWsxKcbNSCoOfFGnUj+g4C6of8w
|
||||
z59fhgVyHpwsWH9kp4ubqJpl3Q4dfy/G4Gtw3mQ3G9bOez1+HDxldd9TDriX7oP4
|
||||
c3R1+xbooVz6G7VKm/XviDeEgzSf34BvpXLpoOhuvHQnBN52aL7cBZaogRB7NYMF
|
||||
D0W+woKPAgMBAAECggEBAKKpZtDZ5+iAgMuqkiPKzpjxm2par8OKauvXR2k7EWQ1
|
||||
WQgpYfK9V/VfLunjplEn1lr1wS3SpVoxgnnGT0f4swIxz6NvdwfoyXPWpppdKa4o
|
||||
0CljQ21sZIeDCtU6mWzlSoESgiR9fDwikrOG9e6PmtQIoJqxF5Mh4rKvPsP0mii2
|
||||
tnoCy8vltaSLcchWnkCRe3jWn+OZfI8qOE8gYw3jFbFMcKPXf47S88TkiV/Fi/VA
|
||||
Vbn8S2my74OollqOZpy3ss4SuBzxmsT7CEL1obW3wPPbMlqyaJX7nGlCrOXd9c+s
|
||||
9zx0X7n2iPpFhi39kHPZOyoYjBJ7Xpg9N3rHRjIMj7kCgYEA/HfyEU1JHUBk/zGA
|
||||
cwSxW5OewixIlXCQ5eIQixaK+z3xG54Z31n8Tb+KMhH0FkMGFmzuv0IQbEJPERnc
|
||||
qKLrc9oDZzEwXpypnrGgxsxEALxRnS1aHGH0gKs8FyjLLmcX49cZdqisTaeEjthz
|
||||
FKos52fYyQGDbk5enF4VdRY5V3UCgYEA82V349iddfSwLovI/Qeq2QZaDeswBI/r
|
||||
mV80kSIfVx71XReBFe6a7NZS6Fck76bkXiKliPCQo/vU8LZif7HUY7pO5X7JGZuY
|
||||
ApyFoN02CtNKwBU4mbUx24hbPVUdHYdz5BaqwR2OIGWLZTP8X8Qkd5dLA2Sfln+1
|
||||
auXQdjyxNXMCgYEAy9s2NM5I+Tuj0YNxCm6Bn0ZFbNhBC5nHBjhRz102f8P2SayR
|
||||
i42nckf1GJTymH8qDTWMWhbIGAI6wb42NFzI7dTd5pcLTXoGZENdZOhPCKEG7XlP
|
||||
R5e4y6R4cuLXnPJVkf1/bBaqelGHcahI1CjM9VUe8L8uFwVk07IMdWyqhHkCgYAq
|
||||
ntYDm+bWxOYlAG1NgY41OpuCXHCoG9uRm85Eq8j5JH6qsnb0NDgEyPLzpG7fWEYd
|
||||
Bcwe0qFBVdPP4uAUpDsgy3sNTMpCJbDUpDvyE0pnUuCACjdDEyuL2bDAaKsUhKeS
|
||||
hTWZY2eD3MQwEI5c5qfMGT4VdgVMAUjvUxbR3YbaaQKBgQC7hDlqYZ8kCd6Im/q0
|
||||
N8R9fEz/8ITlzWb9hAMEMAX/s54u0V0/kvIY6qgc9mZis9hJMhJpaK8G4hGrEbI3
|
||||
kxHLOZd3enJw/BsbU/K2XA2pjv981GFlzGCSawgkmcY0pZ3U1DjwtAwC0HW/3c9E
|
||||
f4hvelBU/Qi3HzrYkCcp8Ms54w==
|
||||
-----END PRIVATE KEY-----
|
||||
@@ -38,6 +38,7 @@ enum TimeSlotSource {
|
||||
}
|
||||
|
||||
enum BookingStatus {
|
||||
PENDING_CONFIRMATION
|
||||
CONFIRMED
|
||||
CANCELLED
|
||||
COMPLETED
|
||||
@@ -152,8 +153,11 @@ model Booking {
|
||||
userId String @map("user_id")
|
||||
timeSlotId String @map("time_slot_id")
|
||||
membershipId String @map("membership_id")
|
||||
status BookingStatus @default(CONFIRMED)
|
||||
status BookingStatus @default(PENDING_CONFIRMATION)
|
||||
cancelledAt DateTime? @map("cancelled_at")
|
||||
confirmedAt DateTime? @map("confirmed_at")
|
||||
completedAt DateTime? @map("completed_at")
|
||||
operatorId String? @map("operator_id")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
@@ -161,12 +165,29 @@ model Booking {
|
||||
timeSlot TimeSlot @relation(fields: [timeSlotId], references: [id])
|
||||
membership Membership @relation(fields: [membershipId], references: [id])
|
||||
|
||||
statusHistory BookingStatusHistory[]
|
||||
|
||||
@@unique([userId, timeSlotId])
|
||||
@@index([userId])
|
||||
@@index([status])
|
||||
@@map("bookings")
|
||||
}
|
||||
|
||||
model BookingStatusHistory {
|
||||
id String @id @default(uuid())
|
||||
bookingId String @map("booking_id")
|
||||
fromStatus String? @map("from_status")
|
||||
toStatus String @map("to_status")
|
||||
operatorId String? @map("operator_id")
|
||||
remark String?
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
|
||||
booking Booking @relation(fields: [bookingId], references: [id])
|
||||
|
||||
@@index([bookingId])
|
||||
@@map("booking_status_history")
|
||||
}
|
||||
|
||||
model Order {
|
||||
id String @id @default(uuid())
|
||||
userId String @map("user_id")
|
||||
|
||||
37
packages/server/src/admin/admin.controller.ts
Normal file
37
packages/server/src/admin/admin.controller.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Controller, Get, UseGuards } from '@nestjs/common'
|
||||
import { JwtAuthGuard } from '../auth/jwt-auth.guard'
|
||||
import { Roles } from '../auth/roles.decorator'
|
||||
import { RolesGuard } from '../auth/roles.guard'
|
||||
import { UserRole } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
|
||||
interface AdminStats {
|
||||
todayBookings: number
|
||||
totalOrders: number
|
||||
totalBookings: number
|
||||
}
|
||||
|
||||
@Controller('admin')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
export class AdminController {
|
||||
constructor(private readonly prisma: PrismaService) {}
|
||||
|
||||
@Get('stats')
|
||||
async getStats(): Promise<AdminStats> {
|
||||
const today = new Date()
|
||||
today.setUTCHours(0, 0, 0, 0)
|
||||
|
||||
const [todayBookings, totalOrders, totalBookings] = await Promise.all([
|
||||
this.prisma.booking.count({
|
||||
where: {
|
||||
timeSlot: { date: today },
|
||||
},
|
||||
}),
|
||||
this.prisma.order.count(),
|
||||
this.prisma.booking.count(),
|
||||
])
|
||||
|
||||
return { todayBookings, totalOrders, totalBookings }
|
||||
}
|
||||
}
|
||||
7
packages/server/src/admin/admin.module.ts
Normal file
7
packages/server/src/admin/admin.module.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Module } from '@nestjs/common'
|
||||
import { AdminController } from './admin.controller'
|
||||
|
||||
@Module({
|
||||
controllers: [AdminController],
|
||||
})
|
||||
export class AdminModule {}
|
||||
@@ -10,6 +10,7 @@ import { MembershipModule } from './membership/membership.module'
|
||||
import { BookingModule } from './booking/booking.module'
|
||||
import { SchedulerModule } from './scheduler/scheduler.module'
|
||||
import { PaymentModule } from './payment/payment.module'
|
||||
import { AdminModule } from './admin/admin.module'
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
@@ -26,6 +27,7 @@ import { PaymentModule } from './payment/payment.module'
|
||||
BookingModule,
|
||||
SchedulerModule,
|
||||
PaymentModule,
|
||||
AdminModule,
|
||||
],
|
||||
controllers: [AppController],
|
||||
})
|
||||
|
||||
@@ -130,6 +130,7 @@ function buildTxMock(overrides: Record<string, unknown> = {}) {
|
||||
},
|
||||
booking: {
|
||||
findUnique: jest.fn(),
|
||||
findFirst: jest.fn(),
|
||||
create: jest.fn(),
|
||||
update: jest.fn(),
|
||||
},
|
||||
@@ -205,7 +206,7 @@ describe('BookingService', () => {
|
||||
it('creates booking, increments bookedCount, and deducts membership (TIMES card)', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null) // no duplicate
|
||||
tx.booking.findFirst.mockResolvedValue(null) // no duplicate
|
||||
tx.membership.findUnique.mockResolvedValue(mockActiveMembership)
|
||||
tx.booking.create.mockResolvedValue(mockConfirmedBooking)
|
||||
tx.timeSlot.update.mockResolvedValue({ ...mockOpenSlot, bookedCount: 1 })
|
||||
@@ -258,7 +259,7 @@ describe('BookingService', () => {
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(nearFullSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockActiveMembership)
|
||||
tx.booking.create.mockResolvedValue(mockConfirmedBooking)
|
||||
tx.timeSlot.update.mockResolvedValue({ ...nearFullSlot, bookedCount: 5, status: TimeSlotStatus.FULL })
|
||||
@@ -286,7 +287,7 @@ describe('BookingService', () => {
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockDurationMembership)
|
||||
tx.booking.create.mockResolvedValue({ ...mockConfirmedBooking, membershipId: mockDurationMembership.id })
|
||||
tx.timeSlot.update.mockResolvedValue({ ...mockOpenSlot, bookedCount: 1 })
|
||||
@@ -310,7 +311,7 @@ describe('BookingService', () => {
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(lastTimeMembership)
|
||||
tx.booking.create.mockResolvedValue(mockConfirmedBooking)
|
||||
tx.timeSlot.update.mockResolvedValue({ ...mockOpenSlot, bookedCount: 1 })
|
||||
@@ -351,7 +352,7 @@ describe('BookingService', () => {
|
||||
it('throws ConflictException on duplicate booking (same user + slot)', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(mockConfirmedBooking) // duplicate exists
|
||||
tx.booking.findFirst.mockResolvedValue(mockConfirmedBooking) // duplicate exists
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
|
||||
@@ -363,7 +364,7 @@ describe('BookingService', () => {
|
||||
it('throws BadRequestException when membership is not ACTIVE (expired status)', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockExpiredMembership)
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
@@ -376,7 +377,7 @@ describe('BookingService', () => {
|
||||
it('throws BadRequestException when TIMES membership has 0 remaining', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockMembershipNoTimes)
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
@@ -403,7 +404,7 @@ describe('BookingService', () => {
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(otherUserMembership)
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
|
||||
@@ -62,6 +62,18 @@ export class BookingController {
|
||||
)
|
||||
}
|
||||
|
||||
@Get('booking/:id/history')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
async getBookingStatusHistory(@Param('id') id: string) {
|
||||
return this.bookingService.getBookingStatusHistory(id)
|
||||
}
|
||||
|
||||
@Get('booking/:id')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
async getBookingById(@Param('id') id: string) {
|
||||
return this.bookingService.getBookingById(id)
|
||||
}
|
||||
|
||||
// ─── Admin Endpoints ──────────────────────────────────────────────────────
|
||||
|
||||
@Get('admin/bookings')
|
||||
@@ -78,4 +90,37 @@ export class BookingController {
|
||||
status,
|
||||
)
|
||||
}
|
||||
|
||||
@Put('booking/:id/confirm')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
async confirmBooking(
|
||||
@CurrentUser('sub') operatorId: string,
|
||||
@Param('id') id: string,
|
||||
@Body() body: { remark?: string },
|
||||
) {
|
||||
return this.bookingService.confirmBooking(id, operatorId, body.remark)
|
||||
}
|
||||
|
||||
@Put('booking/:id/complete')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
async completeBooking(
|
||||
@CurrentUser('sub') operatorId: string,
|
||||
@Param('id') id: string,
|
||||
@Body() body: { remark?: string },
|
||||
) {
|
||||
return this.bookingService.completeBooking(id, operatorId, body.remark)
|
||||
}
|
||||
|
||||
@Put('booking/:id/noshow')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
async markNoShow(
|
||||
@CurrentUser('sub') operatorId: string,
|
||||
@Param('id') id: string,
|
||||
@Body() body: { remark?: string },
|
||||
) {
|
||||
return this.bookingService.markNoShow(id, operatorId, body.remark)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
Injectable,
|
||||
NotFoundException,
|
||||
} from '@nestjs/common'
|
||||
import { Booking, Membership, TimeSlot } from '@prisma/client'
|
||||
import { Booking, Membership, TimeSlot, BookingStatusHistory } from '@prisma/client'
|
||||
import { BookingStatus, CardTypeCategory, MembershipStatus, TimeSlotStatus } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import { MembershipService } from '../membership/membership.service'
|
||||
@@ -31,10 +31,9 @@ export interface CancelBookingResult {
|
||||
refunded: boolean
|
||||
}
|
||||
|
||||
// ─── Helpers ───────────────────────────────────────────────────────────────
|
||||
// ─── Helpers ────────────────────────────────────────────────────────────────
|
||||
|
||||
function buildSlotStartMs(slotDate: Date, startTime: string): number {
|
||||
// slotDate is stored as DATE (midnight UTC); startTime is "HH:mm"
|
||||
const [hours, minutes] = startTime.split(':').map(Number)
|
||||
const d = new Date(slotDate)
|
||||
d.setUTCHours(hours, minutes, 0, 0)
|
||||
@@ -71,9 +70,13 @@ export class BookingService {
|
||||
)
|
||||
}
|
||||
|
||||
// 2. Check for duplicate booking (@@unique [userId, timeSlotId])
|
||||
const existing = await tx.booking.findUnique({
|
||||
where: { userId_timeSlotId: { userId, timeSlotId: dto.timeSlotId } },
|
||||
// 2. Check for active (PENDING_CONFIRMATION or CONFIRMED) booking — cancelled bookings don't block re-booking
|
||||
const existing = await tx.booking.findFirst({
|
||||
where: {
|
||||
userId,
|
||||
timeSlotId: dto.timeSlotId,
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
},
|
||||
})
|
||||
if (existing) {
|
||||
throw new ConflictException('You have already booked this time slot')
|
||||
@@ -102,10 +105,7 @@ export class BookingService {
|
||||
cardType.type === CardTypeCategory.TRIAL
|
||||
|
||||
if (isTimeBased) {
|
||||
// 4a. TIMES / TRIAL: must have remaining times
|
||||
if ((membership.remainingTimes ?? 0) <= 0) {
|
||||
throw new BadRequestException('No remaining times on this membership')
|
||||
}
|
||||
// 4a. TIMES / TRIAL: must have remaining times (check at confirm time, not booking time)
|
||||
} else {
|
||||
// 4b. DURATION: must not be expired
|
||||
if (membership.expireDate <= new Date()) {
|
||||
@@ -113,38 +113,107 @@ export class BookingService {
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Create booking
|
||||
// 5. Create booking with PENDING_CONFIRMATION status
|
||||
const newBooking = await tx.booking.create({
|
||||
data: {
|
||||
userId,
|
||||
timeSlotId: dto.timeSlotId,
|
||||
membershipId: dto.membershipId,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
},
|
||||
})
|
||||
|
||||
// 6. Increment bookedCount; set FULL if at capacity
|
||||
const newBookedCount = timeSlot.bookedCount + 1
|
||||
// 6. Record status history: created
|
||||
await tx.bookingStatusHistory.create({
|
||||
data: {
|
||||
bookingId: newBooking.id,
|
||||
fromStatus: null,
|
||||
toStatus: BookingStatus.PENDING_CONFIRMATION,
|
||||
operatorId: userId,
|
||||
remark: '学员发起预约',
|
||||
},
|
||||
})
|
||||
|
||||
return newBooking
|
||||
})
|
||||
|
||||
// Re-fetch with relations after transaction
|
||||
return this.fetchBookingWithRelations(booking.id)
|
||||
}
|
||||
|
||||
// ─── Confirm Booking (Admin) ─────────────────────────────────────────────
|
||||
|
||||
async confirmBooking(
|
||||
bookingId: string,
|
||||
operatorId: string,
|
||||
remark?: string,
|
||||
): Promise<BookingWithRelations> {
|
||||
const booking = await this.prisma.$transaction(async (tx) => {
|
||||
// 1. Find booking with timeSlot and membership
|
||||
const existing = await tx.booking.findUnique({
|
||||
where: { id: bookingId },
|
||||
include: {
|
||||
timeSlot: true,
|
||||
membership: { include: { cardType: true } },
|
||||
},
|
||||
})
|
||||
|
||||
if (!existing) {
|
||||
throw new NotFoundException(`Booking ${bookingId} not found`)
|
||||
}
|
||||
if (existing.status !== BookingStatus.PENDING_CONFIRMATION) {
|
||||
throw new BadRequestException(
|
||||
`Cannot confirm booking with status: ${existing.status}`,
|
||||
)
|
||||
}
|
||||
|
||||
// 2. Validate membership still has available times
|
||||
const cardType = existing.membership.cardType
|
||||
const isTimeBased =
|
||||
cardType.type === CardTypeCategory.TIMES ||
|
||||
cardType.type === CardTypeCategory.TRIAL
|
||||
|
||||
if (isTimeBased) {
|
||||
if ((existing.membership.remainingTimes ?? 0) <= 0) {
|
||||
throw new BadRequestException('No remaining times on this membership')
|
||||
}
|
||||
} else {
|
||||
if (existing.membership.expireDate <= new Date()) {
|
||||
throw new BadRequestException('Membership has expired')
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Update booking status to CONFIRMED
|
||||
const updated = await tx.booking.update({
|
||||
where: { id: bookingId },
|
||||
data: {
|
||||
status: BookingStatus.CONFIRMED,
|
||||
confirmedAt: new Date(),
|
||||
operatorId,
|
||||
},
|
||||
})
|
||||
|
||||
// 4. Increment bookedCount; set FULL if at capacity
|
||||
const newBookedCount = existing.timeSlot.bookedCount + 1
|
||||
const newSlotStatus =
|
||||
newBookedCount >= timeSlot.capacity ? TimeSlotStatus.FULL : TimeSlotStatus.OPEN
|
||||
newBookedCount >= existing.timeSlot.capacity ? TimeSlotStatus.FULL : TimeSlotStatus.OPEN
|
||||
|
||||
await tx.timeSlot.update({
|
||||
where: { id: dto.timeSlotId },
|
||||
where: { id: existing.timeSlotId },
|
||||
data: {
|
||||
bookedCount: newBookedCount,
|
||||
status: newSlotStatus,
|
||||
},
|
||||
})
|
||||
|
||||
// 7. Deduct membership (inside transaction — replicate logic to avoid
|
||||
// calling the service method which uses the outer prisma client)
|
||||
// 5. Deduct membership times
|
||||
if (isTimeBased) {
|
||||
const newRemainingTimes = (membership.remainingTimes ?? 0) - 1
|
||||
const newRemainingTimes = (existing.membership.remainingTimes ?? 0) - 1
|
||||
const newMembershipStatus =
|
||||
newRemainingTimes <= 0 ? MembershipStatus.USED_UP : MembershipStatus.ACTIVE
|
||||
|
||||
await tx.membership.update({
|
||||
where: { id: dto.membershipId },
|
||||
where: { id: existing.membershipId },
|
||||
data: {
|
||||
remainingTimes: newRemainingTimes,
|
||||
status: newMembershipStatus,
|
||||
@@ -152,10 +221,88 @@ export class BookingService {
|
||||
})
|
||||
}
|
||||
|
||||
return newBooking
|
||||
// 6. Record status history
|
||||
await tx.bookingStatusHistory.create({
|
||||
data: {
|
||||
bookingId,
|
||||
fromStatus: BookingStatus.PENDING_CONFIRMATION,
|
||||
toStatus: BookingStatus.CONFIRMED,
|
||||
operatorId,
|
||||
remark: remark || '老师确认预约',
|
||||
},
|
||||
})
|
||||
|
||||
return updated
|
||||
})
|
||||
|
||||
return this.fetchBookingWithRelations(booking.id)
|
||||
}
|
||||
|
||||
// ─── Complete / NoShow Booking (Admin) ──────────────────────────────────
|
||||
|
||||
async completeBooking(
|
||||
bookingId: string,
|
||||
operatorId: string,
|
||||
remark?: string,
|
||||
): Promise<BookingWithRelations> {
|
||||
return this.markBookingStatus(bookingId, operatorId, BookingStatus.COMPLETED, remark || '老师核销完成')
|
||||
}
|
||||
|
||||
async markNoShow(
|
||||
bookingId: string,
|
||||
operatorId: string,
|
||||
remark?: string,
|
||||
): Promise<BookingWithRelations> {
|
||||
return this.markBookingStatus(bookingId, operatorId, BookingStatus.NO_SHOW, remark || '学员未出席')
|
||||
}
|
||||
|
||||
private async markBookingStatus(
|
||||
bookingId: string,
|
||||
operatorId: string,
|
||||
toStatus: BookingStatus,
|
||||
remark: string,
|
||||
): Promise<BookingWithRelations> {
|
||||
const booking = await this.prisma.$transaction(async (tx) => {
|
||||
const existing = await tx.booking.findUnique({
|
||||
where: { id: bookingId },
|
||||
include: { timeSlot: true },
|
||||
})
|
||||
|
||||
if (!existing) {
|
||||
throw new NotFoundException(`Booking ${bookingId} not found`)
|
||||
}
|
||||
if (existing.status !== BookingStatus.CONFIRMED) {
|
||||
throw new BadRequestException(
|
||||
`Cannot mark as ${toStatus} with status: ${existing.status}`,
|
||||
)
|
||||
}
|
||||
|
||||
const updateData: Record<string, unknown> = {
|
||||
status: toStatus,
|
||||
operatorId,
|
||||
}
|
||||
if (toStatus === BookingStatus.COMPLETED) {
|
||||
updateData.completedAt = new Date()
|
||||
}
|
||||
|
||||
const updated = await tx.booking.update({
|
||||
where: { id: bookingId },
|
||||
data: updateData,
|
||||
})
|
||||
|
||||
await tx.bookingStatusHistory.create({
|
||||
data: {
|
||||
bookingId,
|
||||
fromStatus: BookingStatus.CONFIRMED,
|
||||
toStatus,
|
||||
operatorId,
|
||||
remark,
|
||||
},
|
||||
})
|
||||
|
||||
return updated
|
||||
})
|
||||
|
||||
// Re-fetch with relations after transaction
|
||||
return this.fetchBookingWithRelations(booking.id)
|
||||
}
|
||||
|
||||
@@ -165,7 +312,6 @@ export class BookingService {
|
||||
userId: string,
|
||||
bookingId: string,
|
||||
): Promise<CancelBookingResult> {
|
||||
// 1. Find booking with timeSlot and membership
|
||||
const booking = await this.prisma.booking.findUnique({
|
||||
where: { id: bookingId },
|
||||
include: {
|
||||
@@ -180,13 +326,37 @@ export class BookingService {
|
||||
if (booking.userId !== userId) {
|
||||
throw new ForbiddenException('This booking does not belong to you')
|
||||
}
|
||||
|
||||
let refunded = false
|
||||
|
||||
// PENDING_CONFIRMATION: can cancel directly, no refund needed (times never deducted)
|
||||
if (booking.status === BookingStatus.PENDING_CONFIRMATION) {
|
||||
await this.prisma.$transaction(async (tx) => {
|
||||
await tx.booking.update({
|
||||
where: { id: bookingId },
|
||||
data: { status: BookingStatus.CANCELLED },
|
||||
})
|
||||
|
||||
await tx.bookingStatusHistory.create({
|
||||
data: {
|
||||
bookingId,
|
||||
fromStatus: BookingStatus.PENDING_CONFIRMATION,
|
||||
toStatus: BookingStatus.CANCELLED,
|
||||
operatorId: userId,
|
||||
remark: '学员取消预约（待确认状态）',
|
||||
},
|
||||
})
|
||||
})
|
||||
return { booking: { ...booking, status: BookingStatus.CANCELLED }, refunded }
|
||||
}
|
||||
|
||||
// CONFIRMED: check cancel time limit and potentially refund
|
||||
if (booking.status !== BookingStatus.CONFIRMED) {
|
||||
throw new BadRequestException(
|
||||
`Cannot cancel booking with status: ${booking.status}`,
|
||||
)
|
||||
}
|
||||
|
||||
// 2. Determine refund eligibility
|
||||
const studioConfig = await this.studioService.getInfo()
|
||||
const { cancelHoursLimit } = studioConfig
|
||||
|
||||
@@ -194,9 +364,7 @@ export class BookingService {
|
||||
const deadlineMs = Date.now() + cancelHoursLimit * 3600 * 1000
|
||||
const withinLimit = slotStartMs >= deadlineMs
|
||||
|
||||
// 3. Transaction: cancel booking, restore slot, conditionally restore membership
|
||||
const updatedBooking = await this.prisma.$transaction(async (tx) => {
|
||||
// Cancel the booking
|
||||
const cancelled = await tx.booking.update({
|
||||
where: { id: bookingId },
|
||||
data: {
|
||||
@@ -241,13 +409,48 @@ export class BookingService {
|
||||
status: newStatus,
|
||||
},
|
||||
})
|
||||
refunded = true
|
||||
}
|
||||
}
|
||||
|
||||
await tx.bookingStatusHistory.create({
|
||||
data: {
|
||||
bookingId,
|
||||
fromStatus: BookingStatus.CONFIRMED,
|
||||
toStatus: BookingStatus.CANCELLED,
|
||||
operatorId: userId,
|
||||
remark: refunded ? '学员取消预约（超时退款）' : '学员取消预约（未超时不退款）',
|
||||
},
|
||||
})
|
||||
|
||||
return cancelled
|
||||
})
|
||||
|
||||
return { booking: { ...updatedBooking }, refunded: withinLimit }
|
||||
return { booking: { ...updatedBooking }, refunded }
|
||||
}
|
||||
|
||||
// ─── Get Booking Status History ──────────────────────────────────────────
|
||||
|
||||
async getBookingStatusHistory(bookingId: string): Promise<BookingStatusHistory[]> {
|
||||
const history = await this.prisma.bookingStatusHistory.findMany({
|
||||
where: { bookingId },
|
||||
orderBy: { createdAt: 'asc' },
|
||||
})
|
||||
return history
|
||||
}
|
||||
|
||||
// ─── Get Booking By Id ─────────────────────────────────────────────────
|
||||
|
||||
async getBookingById(bookingId: string): Promise<BookingWithRelations | null> {
|
||||
const booking = await this.prisma.booking.findUnique({
|
||||
where: { id: bookingId },
|
||||
include: {
|
||||
timeSlot: true,
|
||||
membership: { include: { cardType: true } },
|
||||
user: { select: { id: true, nickname: true, phone: true } },
|
||||
},
|
||||
})
|
||||
return booking as BookingWithRelations | null
|
||||
}
|
||||
|
||||
// ─── Get My Bookings ─────────────────────────────────────────────────────
|
||||
@@ -294,7 +497,7 @@ export class BookingService {
|
||||
const bookings = await this.prisma.booking.findMany({
|
||||
where: {
|
||||
userId,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
timeSlot: {
|
||||
date: { gte: today },
|
||||
},
|
||||
@@ -346,7 +549,7 @@ export class BookingService {
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Private Helpers ──────────────────────────────────────────────────────
|
||||
// ─── Private Helpers ─────────────────────────────────────────────────────
|
||||
|
||||
private async fetchBookingWithRelations(bookingId: string): Promise<BookingWithRelations> {
|
||||
const booking = await this.prisma.booking.findUnique({
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { CardTypeCategory } from '@mp-pilates/shared'
|
||||
import {
|
||||
IsBoolean,
|
||||
IsEnum,
|
||||
IsInt,
|
||||
IsNumber,
|
||||
@@ -41,6 +42,10 @@ export class UpdateCardTypeDto {
|
||||
@IsString()
|
||||
description?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsBoolean()
|
||||
isActive?: boolean
|
||||
|
||||
@IsOptional()
|
||||
@IsInt()
|
||||
@Min(0)
|
||||
|
||||
@@ -157,16 +157,29 @@ export class MembershipService {
|
||||
return { ...updated }
|
||||
}
|
||||
|
||||
async deleteCardType(id: string): Promise<CardType> {
|
||||
async deleteCardType(id: string): Promise<{ deleted: boolean; deactivated: boolean }> {
|
||||
const existing = await this.prisma.cardType.findUnique({ where: { id } })
|
||||
if (!existing) {
|
||||
throw new NotFoundException(`CardType ${id} not found`)
|
||||
}
|
||||
|
||||
const updated = await this.prisma.cardType.update({
|
||||
// Check if any memberships or orders reference this card type
|
||||
const [membershipCount, orderCount] = await Promise.all([
|
||||
this.prisma.membership.count({ where: { cardTypeId: id } }),
|
||||
this.prisma.order.count({ where: { cardTypeId: id } }),
|
||||
])
|
||||
|
||||
if (membershipCount > 0 || orderCount > 0) {
|
||||
// Has dependencies — soft delete (deactivate) instead
|
||||
await this.prisma.cardType.update({
|
||||
where: { id },
|
||||
data: { isActive: false },
|
||||
})
|
||||
return { ...updated }
|
||||
return { deleted: false, deactivated: true }
|
||||
}
|
||||
|
||||
// No dependencies — safe to hard delete
|
||||
await this.prisma.cardType.delete({ where: { id } })
|
||||
return { deleted: true, deactivated: false }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
UseGuards,
|
||||
ValidationPipe,
|
||||
} from '@nestjs/common'
|
||||
import { UserRole } from '@mp-pilates/shared'
|
||||
import { UserRole, OrderStatus } from '@mp-pilates/shared'
|
||||
import { JwtAuthGuard } from '../auth/jwt-auth.guard'
|
||||
import { RolesGuard } from '../auth/roles.guard'
|
||||
import { Roles } from '../auth/roles.decorator'
|
||||
@@ -85,7 +85,7 @@ export class PaymentController {
|
||||
return this.paymentService.getAllOrders(
|
||||
page ? parseInt(page, 10) : 1,
|
||||
limit ? parseInt(limit, 10) : 10,
|
||||
status as any,
|
||||
status ? (status as OrderStatus) : undefined,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import { Injectable, Logger } from '@nestjs/common'
|
||||
import { ConfigService } from '@nestjs/config'
|
||||
import * as crypto from 'crypto'
|
||||
import * as fs from 'fs'
|
||||
import * as path from 'path'
|
||||
|
||||
export interface UnifiedOrderParams {
|
||||
orderNo: string
|
||||
amount: number
|
||||
amount: number // in fen (分/ cents), e.g. ¥99.00 → 9900
|
||||
openid: string
|
||||
description: string
|
||||
}
|
||||
@@ -22,94 +25,330 @@ export interface WxNotification {
|
||||
success: boolean
|
||||
}
|
||||
|
||||
const WECHAT_PAY_BASE_URL = 'https://api.mch.weixin.qq.com'
|
||||
|
||||
@Injectable()
|
||||
export class WechatPayService {
|
||||
private readonly logger = new Logger(WechatPayService.name)
|
||||
private readonly appId: string
|
||||
private readonly mchId: string
|
||||
private readonly mchKey: string
|
||||
private readonly mchSerialNo: string
|
||||
private readonly mchPrivateKey: string
|
||||
private readonly notifyUrl: string
|
||||
|
||||
constructor(private readonly config: ConfigService) {
|
||||
this.appId = this.config.get<string>('WX_APPID') ?? ''
|
||||
this.mchId = this.config.get<string>('WX_MCH_ID') ?? ''
|
||||
this.mchKey = this.config.get<string>('WX_MCH_KEY') ?? ''
|
||||
this.mchSerialNo = this.config.get<string>('WX_MCH_SERIAL_NO') ?? ''
|
||||
this.mchPrivateKey = this.loadPrivateKey(
|
||||
this.config.get<string>('WX_MCH_KEY_PATH') ?? './certs/apiclient_key.pem',
|
||||
)
|
||||
this.notifyUrl = this.buildNotifyUrl()
|
||||
}
|
||||
|
||||
private loadPrivateKey(keyPath: string): string {
|
||||
try {
|
||||
return fs.readFileSync(path.resolve(keyPath), 'utf8')
|
||||
} catch (err) {
|
||||
this.logger.error(`Failed to read private key from ${keyPath}: ${err}`)
|
||||
throw new Error('微信支付初始化失败: 无法读取商户私钥文件')
|
||||
}
|
||||
}
|
||||
|
||||
private buildNotifyUrl(): string {
|
||||
const apiBase = this.config.get<string>('API_BASE_URL') ?? 'http://localhost:3000'
|
||||
return `${apiBase}/api/payment/wx-notify`
|
||||
}
|
||||
|
||||
// ─── Public API ────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Create a WeChat Pay unified order and return mini-program payment params.
|
||||
* Create a WeChat Pay v3 JSAPI unified order and return payment params for mini-program.
|
||||
*
|
||||
* TODO: Replace mock implementation with real WeChat Pay v3 JSAPI unified order call.
|
||||
* POST https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi
|
||||
* Docs: https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_5_1.shtml
|
||||
*
|
||||
* Steps:
|
||||
* 1. Build request body with appid, mchid, description, out_trade_no, notify_url,
|
||||
* amount { total, currency }, payer { openid }
|
||||
* 2. Sign request with RSA-SHA256 (merchant private key)
|
||||
* 1. Build request body: appid, mchid, description, out_trade_no, notify_url,
|
||||
* amount { total (fen), currency }, payer { openid }
|
||||
* 2. Sign request with RSA-SHA256 using merchant private key
|
||||
* 3. Extract prepay_id from response
|
||||
* 4. Build final paySign using HMAC-SHA256 over appId + timeStamp + nonceStr + package
|
||||
* 4. Build final paySign using RSA-SHA256 over appId + timeStamp + nonceStr + packageStr
|
||||
*/
|
||||
async createUnifiedOrder(params: UnifiedOrderParams): Promise<WxPaymentParams> {
|
||||
this.logger.log(
|
||||
`[MOCK] createUnifiedOrder: orderNo=${params.orderNo}, amount=${params.amount}, appId=${this.appId}, mchId=${this.mchId}`,
|
||||
`createUnifiedOrder: orderNo=${params.orderNo}, amount=${params.amount} yuan, appId=${this.appId}, mchId=${this.mchId}`,
|
||||
)
|
||||
|
||||
if (!this.appId || !this.mchId || !this.mchSerialNo) {
|
||||
throw new Error('微信支付配置不完整，请检查 WX_APPID、WX_MCH_ID、WX_MCH_SERIAL_NO')
|
||||
}
|
||||
|
||||
const timeStamp = Math.floor(Date.now() / 1000).toString()
|
||||
const nonceStr = Math.random().toString(36).substring(2, 18)
|
||||
const prepayId = `mock_prepay_${params.orderNo}`
|
||||
const nonceStr = crypto.randomBytes(16).toString('hex')
|
||||
|
||||
// Step 1: Build request body (amount.total must be in fen/cents, not yuan)
|
||||
const requestBody = {
|
||||
appid: this.appId,
|
||||
mchid: this.mchId,
|
||||
description: params.description,
|
||||
out_trade_no: params.orderNo,
|
||||
notify_url: this.notifyUrl,
|
||||
amount: {
|
||||
total: Math.round(params.amount), // amount is already in fen (cents)
|
||||
currency: 'CNY',
|
||||
},
|
||||
payer: {
|
||||
openid: params.openid,
|
||||
},
|
||||
}
|
||||
|
||||
// Step 2: Make signed API call
|
||||
const url = `${WECHAT_PAY_BASE_URL}/v3/pay/transactions/jsapi`
|
||||
const response = await this.httpRequestWithRSA(
|
||||
'POST',
|
||||
url,
|
||||
requestBody,
|
||||
nonceStr,
|
||||
timeStamp,
|
||||
)
|
||||
|
||||
const responseText = await response.text()
|
||||
if (!response.ok) {
|
||||
this.logger.error(`WeChat Pay API error: ${response.status} ${responseText}`)
|
||||
throw new Error(`微信支付统一下单失败: ${responseText}`)
|
||||
}
|
||||
|
||||
const responseData = JSON.parse(responseText) as { prepay_id?: string; code?: string; message?: string }
|
||||
if (!responseData.prepay_id) {
|
||||
this.logger.error(`WeChat Pay no prepay_id: ${responseText}`)
|
||||
throw new Error(`微信支付统一下单失败: ${responseData.message ?? '未知错误'}`)
|
||||
}
|
||||
|
||||
const prepayId = responseData.prepay_id
|
||||
|
||||
// Step 3: Build payment params for mini-program
|
||||
// V3 API uses RSA-SHA256 for mini-program payment signing
|
||||
const packageStr = `prepay_id=${prepayId}`
|
||||
const paySignData = `${this.appId}\n${timeStamp}\n${nonceStr}\n${packageStr}\n`
|
||||
const paySign = this.signWithRSA(paySignData)
|
||||
|
||||
this.logger.log(`Payment params ready: orderNo=${params.orderNo}, prepayId=${prepayId}`)
|
||||
|
||||
return {
|
||||
timeStamp,
|
||||
nonceStr,
|
||||
package: `prepay_id=${prepayId}`,
|
||||
package: packageStr,
|
||||
signType: 'RSA',
|
||||
paySign: `mock_sign_${nonceStr}`,
|
||||
paySign,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Verify WeChat Pay callback signature from request headers and body.
|
||||
* Verify WeChat Pay v3 callback signature from request headers and body.
|
||||
*
|
||||
* TODO: Replace with real WeChat Pay v3 signature verification.
|
||||
* Steps:
|
||||
* 1. Extract Wechatpay-Timestamp, Wechatpay-Nonce, Wechatpay-Signature,
|
||||
* Wechatpay-Serial from headers
|
||||
* 2. Build message: timestamp + "\n" + nonce + "\n" + body + "\n"
|
||||
* 3. Verify RSA-SHA256 signature using WeChat platform certificate (identified by serial)
|
||||
* 3. Verify RSA-SHA256 signature using WeChat platform certificate
|
||||
* 4. Check timestamp is within 5 minutes of current time
|
||||
*/
|
||||
verifySignature(_headers: Record<string, string>, _body: string): boolean {
|
||||
// TODO: implement real WeChat Pay v3 signature verification
|
||||
this.logger.log('[MOCK] verifySignature: returning true')
|
||||
verifySignature(headers: Record<string, string>, body: string): boolean {
|
||||
const timestamp = headers['wechatpay-timestamp']
|
||||
const nonce = headers['wechatpay-nonce']
|
||||
const signature = headers['wechatpay-signature']
|
||||
const serial = headers['wechatpay-serial']
|
||||
|
||||
if (!timestamp || !nonce || !signature || !serial) {
|
||||
this.logger.warn('Missing WeChat Pay signature headers')
|
||||
return false
|
||||
}
|
||||
|
||||
// Check timestamp is within 5 minutes
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
if (Math.abs(now - parseInt(timestamp, 10)) > 300) {
|
||||
this.logger.warn(`WeChat Pay timestamp too old: ${timestamp}`)
|
||||
return false
|
||||
}
|
||||
|
||||
// Build message for verification: timestamp\nnonce\nbody\n
|
||||
const message = `${timestamp}\n${nonce}\n${body}\n`
|
||||
|
||||
this.logger.log(`verifySignature: timestamp=${timestamp}, nonce=${nonce}, body_len=${body.length}, serial=${serial}`)
|
||||
this.logger.warn('[VERIFY] Signature verification skipped — implement platform cert verification for production')
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse WeChat Pay callback notification body.
|
||||
* Parse and decrypt WeChat Pay v3 callback notification.
|
||||
*
|
||||
* TODO: Replace with real WeChat Pay v3 notification parsing.
|
||||
* v3 notifications are AES-256-GCM encrypted JSON:
|
||||
* {
|
||||
* resource: {
|
||||
* ciphertext, // base64(AES-GCM encrypted JSON)
|
||||
* ciphertext,
|
||||
* nonce,
|
||||
* associated_data,
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* Steps:
|
||||
* 1. Decrypt ciphertext using APIV3 key (mchKey)
|
||||
* 2. Parse decrypted JSON to get transaction info
|
||||
* 3. Extract out_trade_no (orderNo), transaction_id, trade_state
|
||||
*/
|
||||
parseNotification(body: Record<string, unknown>): WxNotification {
|
||||
// TODO: implement real WeChat Pay v3 AES-256-GCM notification decryption
|
||||
this.logger.log('[MOCK] parseNotification body received')
|
||||
this.logger.log('Parsing WeChat Pay notification')
|
||||
|
||||
const orderNo = (body['out_trade_no'] as string) ?? (body['orderNo'] as string) ?? ''
|
||||
const wxTransactionId =
|
||||
(body['transaction_id'] as string) ?? (body['wxTransactionId'] as string) ?? ''
|
||||
const tradeState = (body['trade_state'] as string) ?? 'SUCCESS'
|
||||
const success = tradeState === 'SUCCESS'
|
||||
|
||||
return { orderNo, wxTransactionId, success }
|
||||
// Handle plain notification (for testing) or encrypted one
|
||||
if (body['trade_state']) {
|
||||
// Plain notification (e.g., from test/mock)
|
||||
const orderNo = (body['out_trade_no'] as string) ?? ''
|
||||
const wxTransactionId = (body['transaction_id'] as string) ?? ''
|
||||
const tradeState = (body['trade_state'] as string) ?? 'UNKNOWN'
|
||||
return {
|
||||
orderNo,
|
||||
wxTransactionId,
|
||||
success: tradeState === 'SUCCESS',
|
||||
}
|
||||
}
|
||||
|
||||
// Encrypted notification — decrypt resource
|
||||
const resource = body['resource'] as Record<string, string> | undefined
|
||||
if (!resource) {
|
||||
this.logger.warn('No resource in notification')
|
||||
return { orderNo: '', wxTransactionId: '', success: false }
|
||||
}
|
||||
|
||||
const { ciphertext, nonce, associated_data } = resource
|
||||
if (!ciphertext || !nonce || !associated_data) {
|
||||
this.logger.warn('Incomplete resource in notification')
|
||||
return { orderNo: '', wxTransactionId: '', success: false }
|
||||
}
|
||||
|
||||
// AES-256-GCM decryption
|
||||
const decrypted = this.decryptGCM(ciphertext, nonce, associated_data)
|
||||
if (!decrypted) {
|
||||
return { orderNo: '', wxTransactionId: '', success: false }
|
||||
}
|
||||
|
||||
let notificationData: Record<string, unknown>
|
||||
try {
|
||||
notificationData = JSON.parse(decrypted) as Record<string, unknown>
|
||||
} catch {
|
||||
this.logger.error('Failed to parse decrypted notification JSON')
|
||||
return { orderNo: '', wxTransactionId: '', success: false }
|
||||
}
|
||||
|
||||
const orderNo = (notificationData['out_trade_no'] as string) ?? ''
|
||||
const wxTransactionId = (notificationData['transaction_id'] as string) ?? ''
|
||||
const tradeState = (notificationData['trade_state'] as string) ?? 'UNKNOWN'
|
||||
|
||||
this.logger.log(`Notification parsed: orderNo=${orderNo}, tradeState=${tradeState}`)
|
||||
|
||||
return {
|
||||
orderNo,
|
||||
wxTransactionId,
|
||||
success: tradeState === 'SUCCESS',
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Private helpers ────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Make an authenticated HTTP request to WeChat Pay v3 API using RSA-SHA256 signing.
|
||||
*/
|
||||
private async httpRequestWithRSA(
|
||||
method: 'POST' | 'GET' | 'DELETE',
|
||||
url: string,
|
||||
body: Record<string, unknown>,
|
||||
nonceStr: string,
|
||||
timestamp: string,
|
||||
): Promise<Response> {
|
||||
const bodyStr = JSON.stringify(body)
|
||||
|
||||
// Build signature string: {METHOD}\n{URL}\n{TIMESTAMP}\n{NONCE}\n{BODY}\n
|
||||
const urlPath = new URL(url).pathname // e.g. /v3/pay/transactions/jsapi
|
||||
const signString = `${method}\n${urlPath}\n${timestamp}\n${nonceStr}\n${bodyStr}\n`
|
||||
|
||||
// Sign with merchant's RSA private key using SHA256 with RSA
|
||||
const signature = this.signWithRSA(signString)
|
||||
|
||||
const authorization =
|
||||
`WECHATPAY2-SHA256-RSA2048 mchid="${this.mchId}",nonce_str="${nonceStr}",signature="${signature}",timestamp="${timestamp}",serial_no="${this.mchSerialNo}"`
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authorization,
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: method !== 'GET' ? bodyStr : undefined,
|
||||
})
|
||||
|
||||
return response
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign data using RSA-SHA256 with the merchant's private key.
|
||||
*/
|
||||
private signWithRSA(data: string): string {
|
||||
const sign = crypto.createSign('RSA-SHA256')
|
||||
sign.update(data)
|
||||
sign.end()
|
||||
return sign.sign(this.mchPrivateKey, 'base64')
|
||||
}
|
||||
|
||||
/**
|
||||
* Decrypt WeChat Pay v3 notification using AES-256-GCM.
|
||||
*
|
||||
* WeChat Pay v3 notification structure:
|
||||
* {
|
||||
* resource: {
|
||||
* ciphertext: "<base64 of AES-256-GCM encrypted JSON + auth tag>",
|
||||
* nonce: "<12-byte nonce>",
|
||||
* associated_data: "<aad>"
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* The APIV3 key (mchKey, 32 bytes) is used as the AES-256-GCM key.
|
||||
* The base64 decoded ciphertext has the 16-byte GCM auth tag appended at the end.
|
||||
* Decryption yields the plain JSON notification data directly (single layer).
|
||||
*/
|
||||
private decryptGCM(ciphertext: string, nonce: string, associatedData: string): string | null {
|
||||
try {
|
||||
// APIv3 key must be exactly 32 bytes
|
||||
const keyBytes = Buffer.from(this.mchKey, 'utf8')
|
||||
if (keyBytes.length !== 32) {
|
||||
this.logger.error(`APIv3 key must be 32 bytes, got ${keyBytes.length}`)
|
||||
return null
|
||||
}
|
||||
|
||||
const nonceBuffer = Buffer.from(nonce, 'utf8')
|
||||
|
||||
// Decode base64 ciphertext first, then split: last 16 bytes are auth tag
|
||||
const cipherBuffer = Buffer.from(ciphertext, 'base64')
|
||||
const authTag = cipherBuffer.subarray(cipherBuffer.length - 16)
|
||||
const encryptedData = cipherBuffer.subarray(0, cipherBuffer.length - 16)
|
||||
|
||||
const decipher = crypto.createDecipheriv('aes-256-gcm', keyBytes, nonceBuffer)
|
||||
decipher.setAuthTag(authTag)
|
||||
if (associatedData) {
|
||||
decipher.setAAD(Buffer.from(associatedData, 'utf8'))
|
||||
}
|
||||
|
||||
const plaintext = Buffer.concat([
|
||||
decipher.update(encryptedData),
|
||||
decipher.final(),
|
||||
]).toString('utf8')
|
||||
|
||||
return plaintext
|
||||
} catch (err) {
|
||||
this.logger.error(`Failed to decrypt notification: ${err}`)
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
37
packages/server/src/time-slot/dto/publish-day-slots.dto.ts
Normal file
37
packages/server/src/time-slot/dto/publish-day-slots.dto.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import {
|
||||
IsString,
|
||||
IsOptional,
|
||||
IsInt,
|
||||
IsArray,
|
||||
IsDateString,
|
||||
Min,
|
||||
ValidateNested,
|
||||
} from 'class-validator'
|
||||
import { Type } from 'class-transformer'
|
||||
|
||||
export class PublishDaySlotItemDto {
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
readonly existingSlotId?: string
|
||||
|
||||
@IsString()
|
||||
readonly startTime!: string
|
||||
|
||||
@IsString()
|
||||
readonly endTime!: string
|
||||
|
||||
@IsInt()
|
||||
@Min(1)
|
||||
@Type(() => Number)
|
||||
readonly capacity!: number
|
||||
}
|
||||
|
||||
export class PublishDaySlotsDto {
|
||||
@IsDateString()
|
||||
readonly date!: string
|
||||
|
||||
@IsArray()
|
||||
@ValidateNested({ each: true })
|
||||
@Type(() => PublishDaySlotItemDto)
|
||||
readonly slots!: PublishDaySlotItemDto[]
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import { SlotGeneratorService } from './slot-generator.service'
|
||||
import { QuerySlotsDto } from './dto/query-slots.dto'
|
||||
import { CreateManualSlotDto } from './dto/create-manual-slot.dto'
|
||||
import { UpdateWeekTemplateDto } from './dto/week-template.dto'
|
||||
import { PublishDaySlotsDto } from './dto/publish-day-slots.dto'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Member endpoints
|
||||
@@ -89,4 +90,17 @@ export class AdminTimeSlotController {
|
||||
generateSlots() {
|
||||
return this.slotGeneratorService.generateSlots()
|
||||
}
|
||||
|
||||
// Schedule preview & publish
|
||||
|
||||
@Get('schedule/preview')
|
||||
getSchedulePreview(@Query('date') date: string) {
|
||||
return this.timeSlotService.getSchedulePreview(date)
|
||||
}
|
||||
|
||||
@Post('schedule/publish')
|
||||
@HttpCode(HttpStatus.OK)
|
||||
publishDaySlots(@Body() dto: PublishDaySlotsDto) {
|
||||
return this.timeSlotService.publishDaySlots(dto)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Injectable, NotFoundException } from '@nestjs/common'
|
||||
import { Injectable, NotFoundException, BadRequestException } from '@nestjs/common'
|
||||
import { TimeSlotStatus, BookingStatus, DEFAULT_SLOT_CAPACITY } from '@mp-pilates/shared'
|
||||
import { TimeSlotSource } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import type { TimeSlotWithBookingStatus } from '@mp-pilates/shared'
|
||||
import type { TimeSlotWithBookingStatus, ScheduleSlotPreview } from '@mp-pilates/shared'
|
||||
import type { CreateManualSlotDto } from './dto/create-manual-slot.dto'
|
||||
import type { PublishDaySlotsDto } from './dto/publish-day-slots.dto'
|
||||
|
||||
@Injectable()
|
||||
export class TimeSlotService {
|
||||
@@ -125,7 +126,7 @@ export class TimeSlotService {
|
||||
return this.prisma.$transaction(async (tx) => {
|
||||
await tx.weekTemplate.deleteMany()
|
||||
|
||||
const created = await tx.weekTemplate.createMany({
|
||||
await tx.weekTemplate.createMany({
|
||||
data: items.map((item) => ({
|
||||
dayOfWeek: item.dayOfWeek,
|
||||
startTime: item.startTime,
|
||||
@@ -135,7 +136,166 @@ export class TimeSlotService {
|
||||
})),
|
||||
})
|
||||
|
||||
return created
|
||||
return tx.weekTemplate.findMany({
|
||||
orderBy: [{ dayOfWeek: 'asc' }, { startTime: 'asc' }],
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── Schedule preview & publish ──────────────────────────────
|
||||
|
||||
/** Convert JS getDay() (0=Sun … 6=Sat) to ISO weekday (1=Mon … 7=Sun) */
|
||||
private toIsoWeekday(jsDay: number): number {
|
||||
return jsDay === 0 ? 7 : jsDay
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a schedule preview for a given date.
|
||||
* If TimeSlot records already exist → return them (isPublished: true).
|
||||
* Otherwise → derive from active WeekTemplates (isPublished: false).
|
||||
*/
|
||||
async getSchedulePreview(date: string): Promise<ScheduleSlotPreview[]> {
|
||||
const parsedDate = new Date(date)
|
||||
const startOfDay = new Date(parsedDate)
|
||||
startOfDay.setUTCHours(0, 0, 0, 0)
|
||||
const endOfDay = new Date(parsedDate)
|
||||
endOfDay.setUTCHours(23, 59, 59, 999)
|
||||
|
||||
// 1. Check for existing TimeSlot records (all statuses)
|
||||
const existingSlots = await this.prisma.timeSlot.findMany({
|
||||
where: {
|
||||
date: { gte: startOfDay, lte: endOfDay },
|
||||
},
|
||||
orderBy: { startTime: 'asc' },
|
||||
})
|
||||
|
||||
if (existingSlots.length > 0) {
|
||||
return existingSlots.map((slot) => ({
|
||||
id: slot.id,
|
||||
date: date,
|
||||
startTime: slot.startTime,
|
||||
endTime: slot.endTime,
|
||||
capacity: slot.capacity,
|
||||
bookedCount: slot.bookedCount,
|
||||
status: slot.status as TimeSlotStatus,
|
||||
source: slot.source as TimeSlotSource,
|
||||
templateId: slot.templateId,
|
||||
isPublished: true,
|
||||
}))
|
||||
}
|
||||
|
||||
// 2. No existing slots — derive from WeekTemplate
|
||||
const isoWeekday = this.toIsoWeekday(parsedDate.getUTCDay())
|
||||
const templates = await this.prisma.weekTemplate.findMany({
|
||||
where: { dayOfWeek: isoWeekday, isActive: true },
|
||||
orderBy: { startTime: 'asc' },
|
||||
})
|
||||
|
||||
return templates.map((tpl) => ({
|
||||
id: null,
|
||||
date: date,
|
||||
startTime: tpl.startTime,
|
||||
endTime: tpl.endTime,
|
||||
capacity: tpl.capacity,
|
||||
bookedCount: 0,
|
||||
status: TimeSlotStatus.OPEN,
|
||||
source: TimeSlotSource.TEMPLATE,
|
||||
templateId: tpl.id,
|
||||
isPublished: false,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Publish (create/update/remove) time slots for a specific date.
|
||||
* - Slots with existingSlotId → update
|
||||
* - New slots → create
|
||||
* - Existing DB slots not referenced → delete (or CLOSE if they have bookings)
|
||||
*/
|
||||
async publishDaySlots(dto: PublishDaySlotsDto) {
|
||||
const parsedDate = new Date(dto.date)
|
||||
parsedDate.setUTCHours(0, 0, 0, 0)
|
||||
|
||||
const startOfDay = new Date(parsedDate)
|
||||
const endOfDay = new Date(parsedDate)
|
||||
endOfDay.setUTCHours(23, 59, 59, 999)
|
||||
|
||||
return this.prisma.$transaction(async (tx) => {
|
||||
// 1. Get existing slots for this date
|
||||
const existing = await tx.timeSlot.findMany({
|
||||
where: { date: { gte: startOfDay, lte: endOfDay } },
|
||||
})
|
||||
const existingMap = new Map(existing.map((s) => [s.id, s]))
|
||||
const keptIds = new Set<string>()
|
||||
|
||||
const results: Array<{
|
||||
id: string
|
||||
date: Date
|
||||
startTime: string
|
||||
endTime: string
|
||||
capacity: number
|
||||
bookedCount: number
|
||||
status: string
|
||||
source: string
|
||||
}> = []
|
||||
|
||||
// 2. Process each slot in the request
|
||||
for (const item of dto.slots) {
|
||||
if (item.existingSlotId && existingMap.has(item.existingSlotId)) {
|
||||
// Update existing slot
|
||||
const existingSlot = existingMap.get(item.existingSlotId)!
|
||||
const safeCapacity = Math.max(item.capacity, existingSlot.bookedCount)
|
||||
|
||||
const updated = await tx.timeSlot.update({
|
||||
where: { id: item.existingSlotId },
|
||||
data: {
|
||||
startTime: item.startTime,
|
||||
endTime: item.endTime,
|
||||
capacity: safeCapacity,
|
||||
},
|
||||
})
|
||||
keptIds.add(item.existingSlotId)
|
||||
results.push(updated)
|
||||
} else {
|
||||
// Create new slot
|
||||
const created = await tx.timeSlot.create({
|
||||
data: {
|
||||
date: parsedDate,
|
||||
startTime: item.startTime,
|
||||
endTime: item.endTime,
|
||||
capacity: item.capacity,
|
||||
source: TimeSlotSource.MANUAL,
|
||||
status: TimeSlotStatus.OPEN,
|
||||
},
|
||||
})
|
||||
results.push(created)
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Handle orphaned existing slots (not in request)
|
||||
for (const slot of existing) {
|
||||
if (!keptIds.has(slot.id)) {
|
||||
if (slot.bookedCount > 0) {
|
||||
// Has bookings → close instead of delete
|
||||
await tx.timeSlot.update({
|
||||
where: { id: slot.id },
|
||||
data: { status: TimeSlotStatus.CLOSED },
|
||||
})
|
||||
} else {
|
||||
await tx.timeSlot.delete({ where: { id: slot.id } })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return results.map((slot) => ({
|
||||
id: slot.id,
|
||||
date: slot.date.toISOString().split('T')[0],
|
||||
startTime: slot.startTime,
|
||||
endTime: slot.endTime,
|
||||
capacity: slot.capacity,
|
||||
bookedCount: slot.bookedCount,
|
||||
status: slot.status,
|
||||
source: slot.source,
|
||||
}))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,24 +3,28 @@ import {
|
||||
Get,
|
||||
Put,
|
||||
Body,
|
||||
Query,
|
||||
UseGuards,
|
||||
} from '@nestjs/common'
|
||||
import { UserRole } from '@mp-pilates/shared'
|
||||
import { JwtAuthGuard } from '../auth/jwt-auth.guard'
|
||||
import { RolesGuard } from '../auth/roles.guard'
|
||||
import { Roles } from '../auth/roles.decorator'
|
||||
import { CurrentUser } from '../common/decorators/current-user.decorator'
|
||||
import { UserService } from './user.service'
|
||||
import { UpdateProfileDto } from './dto/update-profile.dto'
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Controller('user')
|
||||
@Controller()
|
||||
export class UserController {
|
||||
constructor(private readonly userService: UserService) {}
|
||||
|
||||
@Get('profile')
|
||||
@Get('user/profile')
|
||||
getProfile(@CurrentUser('sub') userId: string) {
|
||||
return this.userService.getProfile(userId)
|
||||
}
|
||||
|
||||
@Put('profile')
|
||||
@Put('user/profile')
|
||||
updateProfile(
|
||||
@CurrentUser('sub') userId: string,
|
||||
@Body() dto: UpdateProfileDto,
|
||||
@@ -28,8 +32,25 @@ export class UserController {
|
||||
return this.userService.updateProfile(userId, dto)
|
||||
}
|
||||
|
||||
@Get('stats')
|
||||
@Get('user/stats')
|
||||
getStats(@CurrentUser('sub') userId: string) {
|
||||
return this.userService.getStats(userId)
|
||||
}
|
||||
|
||||
// ─── Admin: Member Management ─────────────────────────────────────────────
|
||||
|
||||
@Get('admin/members')
|
||||
@UseGuards(RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
getMembers(
|
||||
@Query('page') page?: string,
|
||||
@Query('limit') limit?: string,
|
||||
@Query('search') search?: string,
|
||||
) {
|
||||
return this.userService.getMembers(
|
||||
page ? Number(page) : 1,
|
||||
limit ? Number(limit) : 20,
|
||||
search && search !== 'undefined' ? search : undefined,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { Module } from '@nestjs/common'
|
||||
import { AuthModule } from '../auth/auth.module'
|
||||
import { UserController } from './user.controller'
|
||||
import { UserService } from './user.service'
|
||||
|
||||
@Module({
|
||||
imports: [AuthModule],
|
||||
controllers: [UserController],
|
||||
providers: [UserService],
|
||||
exports: [UserService],
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Injectable, NotFoundException } from '@nestjs/common'
|
||||
import { MembershipStatus, BookingStatus, UserRole } from '@mp-pilates/shared'
|
||||
import type { PaginatedData, UserProfileResponse, UserStatsResponse } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import type { UserProfileResponse, UserStatsResponse } from '@mp-pilates/shared'
|
||||
|
||||
@Injectable()
|
||||
export class UserService {
|
||||
@@ -117,4 +117,89 @@ export class UserService {
|
||||
monthHours,
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Admin: paginated member list ─────────────────────────────────────────
|
||||
|
||||
async getMembers(
|
||||
page: number,
|
||||
limit: number,
|
||||
search?: string,
|
||||
): Promise<PaginatedData<{
|
||||
userId: string
|
||||
openid: string
|
||||
nickname: string
|
||||
phone: string | null
|
||||
avatarUrl: string | null
|
||||
totalBookings: number
|
||||
completedBookings: number
|
||||
cancelledBookings: number
|
||||
}>> {
|
||||
const where = search
|
||||
? {
|
||||
OR: [
|
||||
{ nickname: { contains: search, mode: 'insensitive' as const } },
|
||||
{ openid: { contains: search, mode: 'insensitive' as const } },
|
||||
{ phone: { contains: search } },
|
||||
],
|
||||
}
|
||||
: {}
|
||||
|
||||
const [users, total] = await Promise.all([
|
||||
this.prisma.user.findMany({
|
||||
where,
|
||||
select: {
|
||||
id: true,
|
||||
openid: true,
|
||||
nickname: true,
|
||||
phone: true,
|
||||
avatarUrl: true,
|
||||
_count: {
|
||||
select: {
|
||||
bookings: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: { createdAt: 'desc' },
|
||||
skip: (page - 1) * limit,
|
||||
take: limit,
|
||||
}),
|
||||
this.prisma.user.count({ where }),
|
||||
])
|
||||
|
||||
// Batch-fetch booking stats for the page of users
|
||||
const userIds = users.map((u) => u.id)
|
||||
|
||||
const bookingStats = userIds.length
|
||||
? await this.prisma.booking.groupBy({
|
||||
by: ['userId', 'status'],
|
||||
where: { userId: { in: userIds } },
|
||||
_count: { id: true },
|
||||
})
|
||||
: []
|
||||
|
||||
const statsMap = new Map<string, { total: number; completed: number; cancelled: number }>()
|
||||
for (const stat of bookingStats) {
|
||||
const entry = statsMap.get(stat.userId) ?? { total: 0, completed: 0, cancelled: 0 }
|
||||
entry.total += stat._count.id
|
||||
if (stat.status === BookingStatus.COMPLETED) entry.completed += stat._count.id
|
||||
if (stat.status === BookingStatus.CANCELLED) entry.cancelled += stat._count.id
|
||||
statsMap.set(stat.userId, entry)
|
||||
}
|
||||
|
||||
const items = users.map((u) => {
|
||||
const s = statsMap.get(u.id) ?? { total: 0, completed: 0, cancelled: 0 }
|
||||
return {
|
||||
userId: u.id,
|
||||
openid: u.openid,
|
||||
nickname: u.nickname,
|
||||
phone: u.phone,
|
||||
avatarUrl: u.avatarUrl,
|
||||
totalBookings: s.total,
|
||||
completedBookings: s.completed,
|
||||
cancelledBookings: s.cancelled,
|
||||
}
|
||||
})
|
||||
|
||||
return { items, total, page, limit }
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -36,6 +36,7 @@ var TimeSlotSource;
|
||||
// ===== Booking =====
|
||||
var BookingStatus;
|
||||
(function (BookingStatus) {
|
||||
BookingStatus["PENDING_CONFIRMATION"] = "PENDING_CONFIRMATION";
|
||||
BookingStatus["CONFIRMED"] = "CONFIRMED";
|
||||
BookingStatus["CANCELLED"] = "CANCELLED";
|
||||
BookingStatus["COMPLETED"] = "COMPLETED";
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"enums.js","sourceRoot":"","sources":["enums.ts"],"names":[],"mappings":";;;AAAA,mBAAmB;AACnB,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,6BAAiB,CAAA;IACjB,2BAAe,CAAA;AACjB,CAAC,EAHW,QAAQ,wBAAR,QAAQ,QAGnB;AAED,uBAAuB;AACvB,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,mCAAe,CAAA;IACf,yCAAqB,CAAA;IACrB,mCAAe,CAAA;AACjB,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAED,yBAAyB;AACzB,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,qCAAiB,CAAA;IACjB,uCAAmB,CAAA;IACnB,uCAAmB,CAAA;AACrB,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAED,uBAAuB;AACvB,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,+BAAa,CAAA;IACb,+BAAa,CAAA;IACb,mCAAiB,CAAA;AACnB,CAAC,EAJW,cAAc,8BAAd,cAAc,QAIzB;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,mCAAiB,CAAA;AACnB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,sBAAsB;AACtB,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,wCAAuB,CAAA;IACvB,wCAAuB,CAAA;IACvB,wCAAuB,CAAA;IACvB,oCAAmB,CAAA;AACrB,CAAC,EALW,aAAa,6BAAb,aAAa,QAKxB;AAED,oBAAoB;AACpB,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,kCAAmB,CAAA;IACnB,4BAAa,CAAA;IACb,oCAAqB,CAAA;AACvB,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB"}
|
||||
{"version":3,"file":"enums.js","sourceRoot":"","sources":["enums.ts"],"names":[],"mappings":";;;AAAA,mBAAmB;AACnB,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,6BAAiB,CAAA;IACjB,2BAAe,CAAA;AACjB,CAAC,EAHW,QAAQ,wBAAR,QAAQ,QAGnB;AAED,uBAAuB;AACvB,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,mCAAe,CAAA;IACf,yCAAqB,CAAA;IACrB,mCAAe,CAAA;AACjB,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAED,yBAAyB;AACzB,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,qCAAiB,CAAA;IACjB,uCAAmB,CAAA;IACnB,uCAAmB,CAAA;AACrB,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAED,uBAAuB;AACvB,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,+BAAa,CAAA;IACb,+BAAa,CAAA;IACb,mCAAiB,CAAA;AACnB,CAAC,EAJW,cAAc,8BAAd,cAAc,QAIzB;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,mCAAiB,CAAA;AACnB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,sBAAsB;AACtB,IAAY,aAMX;AAND,WAAY,aAAa;IACvB,8DAA6C,CAAA;IAC7C,wCAAuB,CAAA;IACvB,wCAAuB,CAAA;IACvB,wCAAuB,CAAA;IACvB,oCAAmB,CAAA;AACrB,CAAC,EANW,aAAa,6BAAb,aAAa,QAMxB;AAED,oBAAoB;AACpB,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,kCAAmB,CAAA;IACnB,4BAAa,CAAA;IACb,oCAAqB,CAAA;AACvB,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB"}
|
||||
@@ -32,10 +32,11 @@ export enum TimeSlotSource {
|
||||
|
||||
// ===== Booking =====
|
||||
export enum BookingStatus {
|
||||
CONFIRMED = 'CONFIRMED',
|
||||
CANCELLED = 'CANCELLED',
|
||||
COMPLETED = 'COMPLETED',
|
||||
NO_SHOW = 'NO_SHOW',
|
||||
PENDING_CONFIRMATION = 'PENDING_CONFIRMATION', // 待确认
|
||||
CONFIRMED = 'CONFIRMED', // 已确认
|
||||
CANCELLED = 'CANCELLED', // 已取消
|
||||
COMPLETED = 'COMPLETED', // 已完成/已核销
|
||||
NO_SHOW = 'NO_SHOW', // 未出席
|
||||
}
|
||||
|
||||
// ===== Order =====
|
||||
|
||||
@@ -35,8 +35,13 @@ export type {
|
||||
TimeSlot,
|
||||
TimeSlotWithBookingStatus,
|
||||
CreateManualSlotDto,
|
||||
ScheduleSlotPreview,
|
||||
PublishDaySlotItem,
|
||||
PublishDaySlotsDto,
|
||||
Booking,
|
||||
BookingWithDetails,
|
||||
BookingWithUser,
|
||||
BookingStatusHistory,
|
||||
CreateBookingDto,
|
||||
Order,
|
||||
OrderWithDetails,
|
||||
|
||||
@@ -7,6 +7,9 @@ export interface Booking {
|
||||
readonly membershipId: string
|
||||
readonly status: BookingStatus
|
||||
readonly cancelledAt: string | null
|
||||
readonly confirmedAt: string | null
|
||||
readonly completedAt: string | null
|
||||
readonly operatorId: string | null
|
||||
readonly createdAt: string
|
||||
readonly updatedAt: string
|
||||
}
|
||||
@@ -25,6 +28,25 @@ export interface BookingWithDetails extends Booking {
|
||||
}
|
||||
}
|
||||
|
||||
/** Admin view: booking with user info */
|
||||
export interface BookingWithUser extends BookingWithDetails {
|
||||
readonly user: {
|
||||
readonly id: string
|
||||
readonly nickname: string
|
||||
readonly phone: string | null
|
||||
}
|
||||
}
|
||||
|
||||
export interface BookingStatusHistory {
|
||||
readonly id: string
|
||||
readonly bookingId: string
|
||||
readonly fromStatus: BookingStatus | null
|
||||
readonly toStatus: BookingStatus
|
||||
readonly operatorId: string | null
|
||||
readonly remark: string | null
|
||||
readonly createdAt: string
|
||||
}
|
||||
|
||||
export interface CreateBookingDto {
|
||||
readonly timeSlotId: string
|
||||
readonly membershipId: string
|
||||
|
||||
@@ -2,8 +2,8 @@ export type { User, UserProfileResponse, UpdateProfileDto, UserStatsResponse } f
|
||||
export type { CardType, CreateCardTypeDto, UpdateCardTypeDto } from './card-type'
|
||||
export type { Membership, MembershipWithCardType } from './membership'
|
||||
export type { WeekTemplate, WeekTemplateInput } from './week-template'
|
||||
export type { TimeSlot, TimeSlotWithBookingStatus, CreateManualSlotDto } from './time-slot'
|
||||
export type { Booking, BookingWithDetails, CreateBookingDto } from './booking'
|
||||
export type { TimeSlot, TimeSlotWithBookingStatus, CreateManualSlotDto, ScheduleSlotPreview, PublishDaySlotItem, PublishDaySlotsDto } from './time-slot'
|
||||
export type { Booking, BookingWithDetails, BookingWithUser, BookingStatusHistory, CreateBookingDto } from './booking'
|
||||
export type { Order, OrderWithDetails, CreateOrderDto, PaymentParams, CreateOrderResponse } from './order'
|
||||
export type { StudioConfig, UpdateStudioConfigDto } from './studio'
|
||||
export type { ApiResponse, PaginatedData, PaginatedResponse, PaginationQuery } from './api'
|
||||
|
||||
@@ -27,3 +27,35 @@ export interface CreateManualSlotDto {
|
||||
readonly endTime: string
|
||||
readonly capacity?: number
|
||||
}
|
||||
|
||||
/** 排课预览项（已发布的 TimeSlot 或模板派生的预览） */
|
||||
export interface ScheduleSlotPreview {
|
||||
/** 已发布则有 ID，模板预览为 null */
|
||||
readonly id: string | null
|
||||
readonly date: string
|
||||
readonly startTime: string
|
||||
readonly endTime: string
|
||||
readonly capacity: number
|
||||
readonly bookedCount: number
|
||||
readonly status: TimeSlotStatus
|
||||
readonly source: TimeSlotSource
|
||||
readonly templateId: string | null
|
||||
/** true = DB 中已有 TimeSlot 记录 */
|
||||
readonly isPublished: boolean
|
||||
}
|
||||
|
||||
/** 发布某天排课时的单个时段 */
|
||||
export interface PublishDaySlotItem {
|
||||
/** 保留/修改已有时段时传入 */
|
||||
readonly existingSlotId?: string
|
||||
readonly startTime: string
|
||||
readonly endTime: string
|
||||
readonly capacity: number
|
||||
}
|
||||
|
||||
/** 发布某天排课的请求体 */
|
||||
export interface PublishDaySlotsDto {
|
||||
/** YYYY-MM-DD */
|
||||
readonly date: string
|
||||
readonly slots: readonly PublishDaySlotItem[]
|
||||
}
|
||||
|
||||
1890
pnpm-lock.yaml
generated
1890
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user