feat: 订场页改为网格时间表，支持多场地多时段选择

- private/index.vue 重写为场地×时间网格，双向滚动，sticky表头
- 当前时间红线指示，已过时灰块/已占用浅红/已选中蓝色
- 支持多场地连续时段选择，非连续会提示
- 日期改为近7天，Tab栏样式与约课页统一
- 底部按钮：未选时全宽长条，选中后显示摘要+小按钮
- privateBooking.js 新增 getPrivateBookingGrid API
- quote/create 改为 items[] 格式，每场地独立时间段
- confirm.vue 按 items 逐条展示
- pages/private/index.vue onShow 自动刷新
- .env 冰场馆URL修正

miniprogram/.env

@@ -1,2 +1,2 @@
-VITE_ICE_API_BASE_URL=https://8002.frp.chatgqt.top
+VITE_ICE_API_BASE_URL=https://venue.test.chatgqt.top
 VITE_COMPREHENSIVE_API_BASE_URL=https://8002.frp.chatgqt.top

miniprogram/src/modules/comprehensive/api/privateBooking.js

@@ -10,12 +10,22 @@ const toQuoteCourt = (backendCourt = {}) => ({
   court_type_label: backendCourt.court_type_label || ''
 })
 
+const toQuoteItem = (backendItem = {}) => ({
+  court_id: backendItem.court_id ?? null,
+  court_name: backendItem.court_name || '',
+  start_at: backendItem.start_at || '',
+  end_at: backendItem.end_at || '',
+  unit_count: toNumber(backendItem.unit_count),
+  amount: backendItem.amount || '0.00'
+})
+
 const toPrivateQuote = (backendQuote = {}) => ({
   amount: backendQuote.amount || '0.00',
   unit_count: toNumber(backendQuote.unit_count),
   start_at: backendQuote.start_at || '',
   end_at: backendQuote.end_at || '',
-  courts: toArray(backendQuote.courts).map(toQuoteCourt)
+  courts: toArray(backendQuote.courts).map(toQuoteCourt),
+  items: toArray(backendQuote.items).map(toQuoteItem)
 })
 
 const toPrivateCreateResult = (backendData = {}) => ({
@@ -44,6 +54,34 @@ const toPrivateBookingOptions = (backendData = {}) => ({
   time_options: toArray(backendData.time_options).map(toPrivateTimeOption)
 })
 
+const toGridCourt = (backendCourt = {}) => ({
+  id: backendCourt.id ?? null,
+  name: backendCourt.name || ''
+})
+
+const toGridSlot = (backendSlot = {}) => ({
+  start: backendSlot.start || '',
+  end: backendSlot.end || ''
+})
+
+const toGridOccupation = (backendOcc = {}) => ({
+  court_id: backendOcc.court_id ?? null,
+  start_at: backendOcc.start_at || '',
+  end_at: backendOcc.end_at || ''
+})
+
+const toPrivateBookingGrid = (backendData = {}) => ({
+  date: backendData.date || '',
+  court_type: backendData.court_type || '',
+  court_type_label: backendData.court_type_label || '',
+  open_time: backendData.open_time || '',
+  close_time: backendData.close_time || '',
+  unit_price: backendData.unit_price || '0.00',
+  courts: toArray(backendData.courts).map(toGridCourt),
+  time_slots: toArray(backendData.time_slots).map(toGridSlot),
+  occupations: toArray(backendData.occupations).map(toGridOccupation)
+})
+
 export const privateBookingApi = {
   getPrivateBookingOptions(params = {}) {
     return request({
@@ -55,25 +93,33 @@ export const privateBookingApi = {
       })
     }).then(toPrivateBookingOptions)
   },
+
+  getPrivateBookingGrid(params = {}) {
+    return request({
+      url: '/api/bookings/private/grid',
+      data: compactParams({
+        date: params.date,
+        court_type: params.courtType || params.court_type
+      })
+    }).then(toPrivateBookingGrid)
+  },
+
   quotePrivateBooking(payload = {}) {
     return request({
       url: '/api/bookings/private/quote',
       method: 'POST',
       data: {
-        court_ids: toArray(payload.court_ids),
+        items: toArray(payload.items)
-        start_at: payload.start_at,
-        end_at: payload.end_at
       }
     }).then(toPrivateQuote)
   },
+
   createPrivateBooking(payload = {}) {
     return request({
       url: '/api/bookings/private',
       method: 'POST',
       data: {
-        court_ids: toArray(payload.court_ids),
+        items: toArray(payload.items)
-        start_at: payload.start_at,
-        end_at: payload.end_at
       }
     }).then(toPrivateCreateResult)
   }

miniprogram/src/pages/comprehensive/private/confirm.vue

@@ -2,17 +2,19 @@
   <view class="confirm-page container page-bottom-safe" v-if="quote">
     <view class="card summary-card">
       <text class="card-title">{{ courtTypeLabel(payload.court_type) }}包场</text>
-      <view class="summary-row">
+      <view
-        <text>预约场地</text>
+        v-for="(item, index) in quote.items"
-        <text>{{ quote.courts.map(item => item.name).join('、') }}</text>
+        :key="index"
+        class="item-row"
+      >
+        <view class="item-header">
+          <text class="item-name">{{ item.court_name }}</text>
+          <text class="item-amount">¥{{ item.amount }}</text>
         </view>
-      <view class="summary-row">
+        <view class="item-meta">
-        <text>预约时间</text>
+          <text>{{ formatTime(item.start_at) }}-{{ formatTime(item.end_at) }}</text>
-        <text>{{ formatTimeRange(quote.start_at, quote.end_at) }}</text>
+          <text>{{ formatDuration(item.start_at, item.end_at) }}</text>
         </view>
-      <view class="summary-row">
-        <text>预约时长</text>
-        <text>{{ formatDuration(quote.start_at, quote.end_at) }}</text>
       </view>
     </view>
 
@@ -47,7 +49,7 @@ import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { privateBookingApi } from '@/modules/comprehensive/api/privateBooking'
 import { courtTypeLabel } from '@/modules/comprehensive/utils/status'
-import { formatDuration, formatTimeRange } from '@/modules/comprehensive/utils/date'
+import { formatDuration, formatTime } from '@/modules/comprehensive/utils/date'
 
 const payload = ref({})
 const quote = ref(null)
@@ -84,6 +86,42 @@ const submit = async () => {
   font-weight: 900;
 }
 
+.item-row {
+  padding: $spacing-sm 0;
+  border-bottom: 1rpx solid $bg-color-hover;
+}
+
+.item-row:last-child {
+  border-bottom: none;
+}
+
+.item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8rpx;
+}
+
+.item-name {
+  color: $text-color-main;
+  font-size: 28rpx;
+  font-weight: 800;
+}
+
+.item-amount {
+  color: $text-color-main;
+  font-size: 26rpx;
+  font-weight: 800;
+}
+
+.item-meta {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  color: $text-color-muted;
+  font-size: 24rpx;
+}
+
 .summary-row {
   min-height: 72rpx;
   display: flex;

miniprogram/src/pages/comprehensive/private/index.vue

@@ -1,25 +1,16 @@
 <template>
   <view class="private-page">
-    <view class="top-panel">
+    <view class="tab-bar">
-      <view class="type-tabs">
       <view
         v-for="item in typeOptions"
         :key="item.value"
-          class="type-tab"
+        class="tab-item"
         :class="{ active: courtType === item.value }"
         @tap="selectType(item.value)"
-        >
+      >{{ item.label }}</view>
-          {{ item.label }}
-        </view>
-      </view>
-      <view class="venue-meta">
-        <text>{{ businessHoursText }}</text>
-        <text>{{ options ? `¥${options.unit_price}/半小时` : '加载价格中' }}</text>
-      </view>
     </view>
 
-    <view class="date-section">
+    <scroll-view scroll-x class="date-bar" :show-scrollbar="false">
-      <scroll-view scroll-x class="date-scroll" :show-scrollbar="false">
       <view class="date-list">
         <view
           v-for="item in dateOptions"
@@ -28,75 +19,67 @@
           :class="{ active: selectedDate === item.value }"
           @tap="selectDate(item.value)"
         >
-            <text class="date-week">{{ item.week }}</text>
+          <text class="date-label">{{ item.label }}</text>
           <text class="date-day">{{ item.day }}</text>
         </view>
       </view>
     </scroll-view>
+
+    <view class="grid-wrapper">
+      <view v-if="isLoading && !grid" class="state-box">加载中...</view>
+      <view v-else-if="loadError" class="state-box">{{ loadError }}</view>
+      <view v-else-if="!grid || !grid.courts.length" class="state-box">暂无场地数据</view>
+      <scroll-view
+        v-else
+        scroll-x
+        scroll-y
+        enable-flex
+        class="grid-scroll"
+        :show-scrollbar="false"
+      >
+        <view class="grid-inner">
+          <view class="grid-header-row">
+            <view class="corner-cell">时间</view>
+            <view
+              v-for="court in grid.courts"
+              :key="court.id"
+              class="court-header-cell"
+            >{{ court.name }}</view>
+          </view>
+          <view
+            v-for="(slot, si) in grid.time_slots"
+            :key="si"
+            class="grid-row"
+          >
+            <view class="time-label-cell">{{ slot.start }}</view>
+            <view
+              v-for="court in grid.courts"
+              :key="court.id"
+              class="grid-cell"
+              :class="getCellClass(court.id, si)"
+              @tap="toggleCell(court.id, si)"
+            ></view>
+          </view>
+          <view
+            v-if="currentTimeLineVisible && currentTimeTop >= 0"
+            class="current-time-line"
+            :style="{ top: currentTimeTop + 'rpx' }"
+          >
+            <text class="current-time-label">{{ now.format('HH:mm') }}</text>
+          </view>
+        </view>
+      </scroll-view>
     </view>
 
-    <view class="duration-section section-card">
+    <view class="action-bar">
-      <view class="section-header compact">
+      <button v-if="selectedCourtCount === 0" class="primary-button submit-btn-full" @tap="goConfirm">预约</button>
-        <text class="section-title">预约时长</text>
+      <template v-else>
-      </view>
-      <view class="duration-control">
-        <button class="step-btn" :disabled="durationUnits <= 1" @tap="decreaseDuration">-</button>
-        <view class="duration-value">
-          <text class="duration-main">{{ durationText }}</text>
-          <text class="duration-sub">{{ options ? `单场 ¥${options.amount_per_court}` : '按选择时长试算' }}</text>
-        </view>
-        <button class="step-btn" :disabled="durationUnits >= MAX_DURATION_UNITS" @tap="increaseDuration">+</button>
-      </view>
-    </view>
-
-    <view class="time-section section-card">
-      <view class="section-header compact">
-        <text class="section-title">开始时间</text>
-      </view>
-
-      <view v-if="isLoading" class="state-box">正在加载可预约时段</view>
-      <view v-else-if="loadError" class="state-box">{{ loadError }}</view>
-      <view v-else-if="!timeOptions.length" class="state-box">当前日期暂无可预约时段</view>
-      <view v-else class="time-grid">
-        <view
-          v-for="item in timeOptions"
-          :key="item.start_at"
-          class="time-chip"
-          :class="{ active: selectedTime?.start_at === item.start_at, disabled: !item.available_court_count }"
-          @tap="selectTime(item)"
-        >
-          <text class="time-main">{{ formatTime(item.start_at) }}</text>
-          <text class="time-sub">{{ item.available_court_count ? `余 ${item.available_court_count} 场` : '已满' }}</text>
-        </view>
-      </view>
-    </view>
-
-    <view class="court-section section-card">
-      <view class="section-header compact">
-        <text class="section-title">选择场地</text>
-      </view>
-
-      <view v-if="!selectedTime" class="state-box">请先选择开始时间</view>
-      <view v-else-if="!availableCourts.length" class="state-box">该时段无可预约场地</view>
-      <view v-else class="court-list">
-        <view
-          v-for="court in availableCourts"
-          :key="court.id"
-          class="court-chip"
-          :class="{ active: selectedCourtIds.includes(court.id) }"
-          @tap="toggleCourt(court.id)"
-        >
-          <text>{{ court.name }}</text>
-        </view>
-      </view>
-    </view>
-
-    <view class="fixed-action-bar">
         <view class="selection-info">
-        <text class="selection-main">{{ selectionTitle }}</text>
+          <text class="selection-main">{{ selectedCourtCount }}个场地 {{ selectionTimeText }}</text>
-        <text class="selection-sub">{{ selectionSubText }}</text>
+          <text class="selection-sub">¥{{ selectionAmount }}</text>
         </view>
-      <button class="primary-button submit-btn" :disabled="!canConfirm" @tap="goConfirm">确认预约</button>
+        <button class="primary-button submit-btn" :disabled="!canConfirm" @tap="goConfirm">预约</button>
+      </template>
     </view>
   </view>
 </template>
@@ -105,11 +88,11 @@
 import { computed, onMounted, ref } from 'vue'
 import dayjs from 'dayjs'
 import { privateBookingApi } from '@/modules/comprehensive/api/privateBooking'
-import { formatAmount, toAmountNumber } from '@/modules/comprehensive/utils/money'
-import { formatTime, todayString } from '@/modules/comprehensive/utils/date'
 
-const ADVANCE_DAYS = 7
+const HEADER_HEIGHT = 75
-const MAX_DURATION_UNITS = 8
+const CELL_HEIGHT = 107
+const TIME_COL_WIDTH = 128
+const COURT_COL_WIDTH = 149
 
 const typeOptions = [
   { label: '羽毛球', value: 'badminton' },
@@ -117,342 +100,467 @@ const typeOptions = [
 ]
 
 const courtType = ref('badminton')
-const selectedDate = ref(todayString())
+const selectedDate = ref(dayjs().format('YYYY-MM-DD'))
-const durationUnits = ref(2)
+const grid = ref(null)
-const options = ref(null)
-const selectedTime = ref(null)
-const selectedCourtIds = ref([])
 const isLoading = ref(false)
 const loadError = ref('')
+const selectedCells = ref({})
+const now = ref(dayjs())
 let loadRequestId = 0
 
+const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 const dateOptions = computed(() => {
   const today = dayjs()
-  const weekLabels = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  return Array.from({ length: 7 }).map((_, i) => {
-  return Array.from({ length: ADVANCE_DAYS }).map((_, index) => {
+    const d = today.add(i, 'day')
-    const date = today.add(index, 'day')
-    const week = index === 0 ? '今天' : index === 1 ? '明天' : weekLabels[date.day()]
     return {
-      value: date.format('YYYY-MM-DD'),
+      label: i === 0 ? '今天' : i === 1 ? '明天' : weekDays[d.day()],
-      week,
+      day: `${d.month() + 1}/${d.date()}`,
-      day: date.format('MM/DD')
+      value: d.format('YYYY-MM-DD')
     }
   })
 })
 
-const timeOptions = computed(() => options.value?.time_options || [])
+const openTime = computed(() => normalizeClock(grid.value?.open_time))
-const availableCourts = computed(() => selectedTime.value?.available_courts || [])
+const closeTime = computed(() => normalizeClock(grid.value?.close_time))
-const businessHoursText = computed(() => {
+
-  if (!options.value) return '营业时间加载中'
+const occupationMap = computed(() => {
-  return `营业 ${normalizeClock(options.value.open_time)}-${normalizeClock(options.value.close_time)}`
+  const map = {}
-})
+  if (!grid.value) return map
-const durationText = computed(() => {
+  for (const occ of grid.value.occupations) {
-  const minutes = durationUnits.value * 30
+    if (!map[occ.court_id]) map[occ.court_id] = []
-  if (minutes % 60 === 0) return `${minutes / 60} 小时`
+    map[occ.court_id].push(occ)
-  if (minutes > 60) return `${Math.floor(minutes / 60)} 小时 ${minutes % 60} 分钟`
+  }
-  return `${minutes} 分钟`
+  return map
-})
-const canConfirm = computed(() => selectedTime.value && selectedCourtIds.value.length > 0)
-const estimatedAmount = computed(() => {
-  return formatAmount(toAmountNumber(options.value?.amount_per_court) * selectedCourtIds.value.length)
-})
-const selectionTitle = computed(() => {
-  if (!selectedTime.value) return '请选择开始时间'
-  if (!selectedCourtIds.value.length) return `${formatTime(selectedTime.value.start_at)}-${formatTime(selectedTime.value.end_at)}`
-  return `${selectedCourtIds.value.length} 个场地 · ¥${estimatedAmount.value}`
-})
-const selectionSubText = computed(() => {
-  if (!selectedTime.value) return '选择时长后展示可预约时间'
-  if (!selectedCourtIds.value.length) return '请选择至少一个场地'
-  return `${formatTime(selectedTime.value.start_at)}-${formatTime(selectedTime.value.end_at)} · ${durationText.value}`
 })
 
-onMounted(loadOptions)
+const cellStatus = computed(() => {
+  if (!grid.value) return {}
+  const status = {}
+  const isToday = selectedDate.value === dayjs().format('YYYY-MM-DD')
+  const currentTime = now.value
 
-const loadOptions = async () => {
+  for (const court of grid.value.courts) {
+    status[court.id] = {}
+    const occs = occupationMap.value[court.id] || []
+
+    for (let si = 0; si < grid.value.time_slots.length; si++) {
+      const slot = grid.value.time_slots[si]
+      const slotStart = dayjs(`${selectedDate.value} ${slot.start}`)
+      const slotEnd = dayjs(`${selectedDate.value} ${slot.end}`)
+
+      if (isToday && slotEnd.isBefore(currentTime)) {
+        status[court.id][si] = 'past'
+        continue
+      }
+
+      const isOccupied = occs.some((occ) => {
+        const occStart = dayjs(occ.start_at)
+        const occEnd = dayjs(occ.end_at)
+        return occStart.isBefore(slotEnd) && occEnd.isAfter(slotStart)
+      })
+
+      status[court.id][si] = isOccupied ? 'occupied' : 'available'
+    }
+  }
+  return status
+})
+
+const currentTimeLineVisible = computed(() => {
+  if (!grid.value) return false
+  return selectedDate.value === dayjs().format('YYYY-MM-DD')
+})
+
+const currentTimeTop = computed(() => {
+  if (!grid.value || !currentTimeLineVisible.value) return -1
+  const openMin = parseTimeToMinutes(grid.value.open_time)
+  const closeMin = parseTimeToMinutes(grid.value.close_time)
+  const currentMin = now.value.hour() * 60 + now.value.minute()
+  if (currentMin < openMin || currentMin > closeMin) return -1
+  return HEADER_HEIGHT + ((currentMin - openMin) / 30) * CELL_HEIGHT
+})
+
+const selectedCourtCount = computed(() => Object.keys(selectedCells.value).length)
+const selectedTotalSlots = computed(() =>
+  Object.values(selectedCells.value).reduce((sum, indices) => sum + indices.length, 0)
+)
+
+const canConfirm = computed(() => selectedCourtCount.value > 0 && selectedTotalSlots.value > 0)
+
+const selectionTimeText = computed(() => {
+  const allSlots = []
+  for (const indices of Object.values(selectedCells.value)) {
+    allSlots.push(...indices)
+  }
+  if (!allSlots.length) return ''
+  const sorted = allSlots.sort((a, b) => a - b)
+  const startSlot = grid.value.time_slots[sorted[0]]
+  const endSlot = grid.value.time_slots[sorted[sorted.length - 1]]
+  return `${startSlot.start}-${endSlot.end}`
+})
+
+const selectionAmount = computed(() => {
+  const priceVal = parseFloat(grid.value?.unit_price || '0')
+  return (priceVal * selectedTotalSlots.value).toFixed(2)
+})
+
+onMounted(loadGrid)
+
+async function loadGrid() {
   const requestId = ++loadRequestId
-  isLoading.value = true
+  if (!grid.value) isLoading.value = true
   loadError.value = ''
-  selectedTime.value = null
-  selectedCourtIds.value = []
   try {
-    const data = await privateBookingApi.getPrivateBookingOptions({
+    const data = await privateBookingApi.getPrivateBookingGrid({
       date: selectedDate.value,
-      courtType: courtType.value,
+      courtType: courtType.value
-      durationUnits: durationUnits.value
     })
     if (requestId !== loadRequestId) return
-    options.value = data
+    grid.value = data
-    selectFirstAvailableTime()
+    selectedCells.value = {}
   } catch (error) {
     if (requestId !== loadRequestId) return
-    options.value = null
+    if (!grid.value) loadError.value = error?.message || '加载失败，请稍后重试'
-    loadError.value = error?.message || '加载失败，请稍后重试'
   } finally {
-    if (requestId === loadRequestId) {
+    if (requestId === loadRequestId) isLoading.value = false
-      isLoading.value = false
-    }
   }
 }
 
-const selectFirstAvailableTime = () => {
+function selectType(type) {
-  const first = timeOptions.value.find((item) => item.available_court_count > 0)
-  if (first) {
-    selectTime(first)
-  }
-}
-
-const selectType = (type) => {
   if (courtType.value === type) return
   courtType.value = type
-  loadOptions()
+  loadGrid()
 }
 
-const selectDate = (date) => {
+function selectDate(date) {
   if (selectedDate.value === date) return
   selectedDate.value = date
-  loadOptions()
+  now.value = dayjs()
+  loadGrid()
 }
 
-const decreaseDuration = () => {
+function getCellClass(courtId, slotIndex) {
-  if (durationUnits.value <= 1) return
+  const status = cellStatus.value[courtId]?.[slotIndex] || 'available'
-  durationUnits.value -= 1
+  const isSelected = selectedCells.value[courtId]?.includes(slotIndex)
-  loadOptions()
+  if (isSelected) return { 'cell-selected': true }
+  return { [`cell-${status}`]: true }
 }
 
-const increaseDuration = () => {
+function toggleCell(courtId, slotIndex) {
-  if (durationUnits.value >= MAX_DURATION_UNITS) return
+  const status = cellStatus.value[courtId]?.[slotIndex]
-  durationUnits.value += 1
+  if (status !== 'available') return
-  loadOptions()
-}
 
-const selectTime = (timeOption) => {
+  const current = selectedCells.value[courtId] || []
-  if (!timeOption.available_court_count) return
-  selectedTime.value = timeOption
-  selectedCourtIds.value = timeOption.available_courts.slice(0, 1).map((court) => court.id)
-}
 
-const toggleCourt = (id) => {
+  if (current.includes(slotIndex)) {
-  if (selectedCourtIds.value.includes(id)) {
+    const next = current.filter((i) => i !== slotIndex)
-    selectedCourtIds.value = selectedCourtIds.value.filter((item) => item !== id)
+    if (next.length === 0) {
+      const next2 = { ...selectedCells.value }
+      delete next2[courtId]
+      selectedCells.value = next2
+      return
+    }
+    const sorted = next.sort((a, b) => a - b)
+    const isContiguous = sorted.every((val, idx) => idx === 0 || val === sorted[idx - 1] + 1)
+    if (isContiguous) {
+      selectedCells.value = { ...selectedCells.value, [courtId]: sorted }
     } else {
-    selectedCourtIds.value = [...selectedCourtIds.value, id]
+      uni.showToast({ title: '不能取消中间时段', icon: 'none' })
+    }
+    return
+  }
+
+  if (current.length === 0) {
+    selectedCells.value = { ...selectedCells.value, [courtId]: [slotIndex] }
+    return
+  }
+
+  const minIdx = Math.min(...current)
+  const maxIdx = Math.max(...current)
+
+  if (slotIndex === minIdx - 1 || slotIndex === maxIdx + 1) {
+    selectedCells.value = {
+      ...selectedCells.value,
+      [courtId]: [...current, slotIndex].sort((a, b) => a - b)
+    }
+  } else {
+    selectedCells.value = { ...selectedCells.value, [courtId]: [slotIndex] }
   }
 }
 
-const normalizeClock = (value) => {
+function goConfirm() {
+  if (!canConfirm.value) return
+
+  const items = Object.entries(selectedCells.value).map(([courtIdStr, slotIndices]) => {
+    const courtId = parseInt(courtIdStr)
+    const sorted = [...slotIndices].sort((a, b) => a - b)
+    const startSlot = grid.value.time_slots[sorted[0]]
+    const endSlot = grid.value.time_slots[sorted[sorted.length - 1]]
+    return {
+      court_id: courtId,
+      start_at: buildDateTime(selectedDate.value, startSlot.start),
+      end_at: buildDateTime(selectedDate.value, endSlot.end)
+    }
+  })
+
+  const payload = encodeURIComponent(JSON.stringify({
+    court_type: courtType.value,
+    items
+  }))
+  uni.navigateTo({ url: `/pages/comprehensive/private/confirm?payload=${payload}` })
+}
+
+function buildDateTime(date, time) {
+  return `${date}T${time}:00${dayjs().format('Z')}`
+}
+
+function parseTimeToMinutes(timeStr) {
+  if (!timeStr) return 0
+  const parts = timeStr.split(':')
+  return parseInt(parts[0]) * 60 + parseInt(parts[1])
+}
+
+function normalizeClock(value) {
   if (!value) return '--:--'
   return value.slice(0, 5)
 }
 
-const goConfirm = () => {
+defineExpose({
-  if (!canConfirm.value) return
+  refresh() {
-  const payload = encodeURIComponent(JSON.stringify({
+    now.value = dayjs()
-    court_type: courtType.value,
+    loadGrid()
-    court_ids: selectedCourtIds.value,
+  }
-    start_at: selectedTime.value.start_at,
+})
-    end_at: selectedTime.value.end_at
-  }))
-  uni.navigateTo({ url: `/pages/comprehensive/private/confirm?payload=${payload}` })
-}
 </script>
 
 <style lang="scss" scoped>
 .private-page {
-  min-height: 100vh;
+  display: flex;
-  padding: $spacing-md;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
   background: $bg-color-soft;
 }
 
-.top-panel,
+.tab-bar {
-.section-card {
+  flex-shrink: 0;
-  @include minimal-card;
+  display: flex;
-  margin-bottom: $spacing-md;
+  height: 88rpx;
+  background: $bg-color-main;
+  border-bottom: 1rpx solid $border-color;
 }
 
-.court-section {
+.tab-item {
-  margin-bottom: 180rpx;
+  flex: 1;
-}
-
-.type-tabs {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: $spacing-sm;
-  margin-bottom: $spacing-md;
-}
-
-.type-tab,
-.date-chip,
-.time-chip,
-.court-chip {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: $border-radius-base;
+  font-size: 28rpx;
-  background: $bg-color-hover;
-  color: $text-color-muted;
-  font-weight: 800;
-}
-
-.type-tab {
-  height: 72rpx;
-  font-size: 26rpx;
-}
-
-.type-tab.active,
-.date-chip.active,
-.time-chip.active,
-.court-chip.active {
-  background: $text-color-main;
-  color: #FFFFFF;
-}
-
-.venue-meta {
-  min-height: 54rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: $spacing-md;
-  border-top: 1rpx solid $bg-color-hover;
-  color: $text-color-muted;
-  font-size: 24rpx;
   font-weight: 700;
+  color: $text-color-muted;
+  transition: all 0.2s ease;
 }
 
-.date-section {
+.tab-item.active {
-  margin-bottom: $spacing-md;
+  color: $text-color-main;
+  font-weight: 900;
+  position: relative;
 }
 
-.date-scroll {
+.tab-item.active::after {
-  width: 100%;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48rpx;
+  height: 4rpx;
+  border-radius: 2rpx;
+  background: $text-color-main;
+}
+
+.date-bar {
+  flex-shrink: 0;
+  background: $bg-color-main;
+  border-bottom: 1rpx solid $border-color;
   white-space: nowrap;
 }
 
 .date-list {
   display: inline-flex;
-  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-xs;
-  padding-right: $spacing-md;
+  gap: $spacing-xs;
 }
 
 .date-chip {
-  width: 128rpx;
+  display: flex;
-  height: 92rpx;
   flex-direction: column;
-  gap: 6rpx;
+  align-items: center;
-  background: $bg-color-main;
+  justify-content: center;
-  border: 1rpx solid $bg-color-hover;
+  width: 96rpx;
+  height: 88rpx;
+  border-radius: $border-radius-sm;
+  gap: 4rpx;
 }
 
-.date-week {
+.date-chip.active {
+  background: $text-color-main;
+}
+
+.date-label {
   font-size: 22rpx;
+  font-weight: 700;
+  color: $text-color-muted;
+}
+
+.date-chip.active .date-label {
+  color: #FFFFFF;
 }
 
 .date-day {
   font-size: 24rpx;
+  font-weight: 800;
+  color: $text-color-main;
 }
 
-.compact {
+.date-chip.active .date-day {
-  margin: 0 0 $spacing-md;
+  color: #FFFFFF;
 }
 
-.duration-control {
+.grid-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.grid-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-inner {
+  position: relative;
+  display: inline-block;
+}
+
+.grid-header-row {
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.corner-cell {
+  width: 128rpx;
+  flex-shrink: 0;
+  height: 75rpx;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
-  gap: $spacing-md;
+  background: $bg-color-main;
+  border-right: 1rpx solid $border-color;
+  border-bottom: 1rpx solid $border-color;
+  color: $text-color-muted;
+  font-size: 20rpx;
+  font-weight: 800;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 15;
 }
 
-.step-btn {
+.court-header-cell {
-  width: 88rpx;
+  width: 149rpx;
-  height: 76rpx;
+  flex-shrink: 0;
+  height: 75rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $bg-color-main;
+  border-right: 1rpx solid $border-color;
+  border-bottom: 1rpx solid $border-color;
+  color: $text-color-regular;
+  font-size: 20rpx;
+  font-weight: 800;
+  @include text-ellipsis;
+}
+
+.grid-row {
+  display: flex;
+}
+
+.time-label-cell {
+  width: 128rpx;
+  flex-shrink: 0;
+  height: 107rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $bg-color-main;
+  border-right: 1rpx solid $border-color;
+  border-bottom: 1rpx solid $bg-color-hover;
+  color: $text-color-muted;
+  font-size: 20rpx;
+  font-weight: 700;
+  position: sticky;
+  left: 0;
+  z-index: 5;
+}
+
+.grid-cell {
+  width: 149rpx;
+  flex-shrink: 0;
+  height: 107rpx;
+  border-right: 1rpx solid $bg-color-hover;
+  border-bottom: 1rpx solid $bg-color-hover;
+}
+
+.cell-available {
+  background: $bg-color-main;
+}
+
+.cell-occupied {
+  background: $color-danger-light;
+}
+
+.cell-past {
+  background: $bg-color-hover;
+}
+
+.cell-selected {
+  background: $color-primary;
+}
+
+.current-time-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 3rpx;
+  background: $color-danger;
+  z-index: 8;
+}
+
+.current-time-label {
+  position: absolute;
+  left: 4rpx;
+  top: -28rpx;
+  padding: 2rpx 8rpx;
+  border-radius: 4rpx;
+  background: $color-danger;
+  color: #FFFFFF;
+  font-size: 18rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.action-bar {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: $spacing-md;
-  border-radius: $border-radius-base;
+  padding: $spacing-sm $spacing-md calc($spacing-sm + env(safe-area-inset-bottom));
-  background: $text-color-main;
+  background: rgba(255, 255, 255, 0.96);
-  color: #FFFFFF;
+  border-top: 1rpx solid $border-color;
-  font-size: 38rpx;
-  font-weight: 900;
-}
-
-.step-btn[disabled] {
-  background: $bg-color-hover;
-  color: $text-color-light;
-}
-
-.duration-value {
-  flex: 1;
-  min-width: 0;
-  text-align: center;
-}
-
-.duration-main,
-.duration-sub,
-.time-main,
-.time-sub,
-.selection-main,
-.selection-sub {
-  display: block;
-}
-
-.duration-main {
-  color: $text-color-main;
-  font-size: 34rpx;
-  font-weight: 900;
-}
-
-.duration-sub {
-  margin-top: 4rpx;
-  color: $text-color-muted;
-  font-size: 22rpx;
-}
-
-.state-box {
-  min-height: 140rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $text-color-light;
-  font-size: 24rpx;
-}
-
-.time-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: $spacing-sm;
-}
-
-.time-chip {
-  height: 94rpx;
-  flex-direction: column;
-  gap: 6rpx;
-}
-
-.time-chip.disabled {
-  color: $text-color-light;
-  background: rgba(241, 245, 249, 0.7);
-}
-
-.time-main {
-  font-size: 26rpx;
-}
-
-.time-sub {
-  font-size: 20rpx;
-  font-weight: 700;
-}
-
-.court-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: $spacing-sm;
-}
-
-.court-chip {
-  min-height: 76rpx;
-  padding: 0 $spacing-sm;
-  font-size: 26rpx;
 }
 
 .selection-info {
@@ -461,19 +569,33 @@ const goConfirm = () => {
 }
 
 .selection-main {
+  display: block;
   color: $text-color-main;
   font-size: 28rpx;
   font-weight: 900;
 }
 
 .selection-sub {
+  display: block;
   margin-top: 4rpx;
   color: $text-color-muted;
   font-size: 22rpx;
 }
 
 .submit-btn {
-  width: 260rpx;
+  width: 200rpx;
 }
 
+.submit-btn-full {
+  flex: 1;
+}
+
+.state-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-color-light;
+  font-size: 24rpx;
+}
 </style>

miniprogram/src/pages/ice/private/index.vue

@@ -9,6 +9,9 @@
 </template>
 
 <script setup>
+defineExpose({
+  refresh() {}
+})
 </script>
 
 <style lang="scss" scoped>

miniprogram/src/pages/private/index.vue

@@ -7,12 +7,22 @@
 
 <script setup>
 import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import { getStoredVenue } from '@/utils/venue'
 import ComprehensivePrivate from '@/pages/comprehensive/private/index.vue'
 import IcePrivate from '@/pages/ice/private/index.vue'
 
 const isComprehensive = getStoredVenue() === 'comprehensive'
 const contentRef = ref()
+let isFirstShow = true
+
+onShow(() => {
+  if (isFirstShow) {
+    isFirstShow = false
+    return
+  }
+  contentRef.value?.refresh?.()
+})
 </script>
 
 <style lang="scss" scoped>