feat: 订场页改为网格时间表，支持多场地多时段选择
- private/index.vue 重写为场地×时间网格，双向滚动，sticky表头 - 当前时间红线指示，已过时灰块/已占用浅红/已选中蓝色 - 支持多场地连续时段选择，非连续会提示 - 日期改为近7天，Tab栏样式与约课页统一 - 底部按钮：未选时全宽长条，选中后显示摘要+小按钮 - privateBooking.js 新增 getPrivateBookingGrid API - quote/create 改为 items[] 格式，每场地独立时间段 - confirm.vue 按 items 逐条展示 - pages/private/index.vue onShow 自动刷新 - .env 冰场馆URL修正
This commit is contained in:
gqt
+1
-1
@@ -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
|
||||
@@ -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),
|
||||
start_at: payload.start_at,
|
||||
end_at: payload.end_at
|
||||
items: toArray(payload.items)
|
||||
}
|
||||
}).then(toPrivateQuote)
|
||||
},
|
||||
|
||||
createPrivateBooking(payload = {}) {
|
||||
return request({
|
||||
url: '/api/bookings/private',
|
||||
method: 'POST',
|
||||
data: {
|
||||
court_ids: toArray(payload.court_ids),
|
||||
start_at: payload.start_at,
|
||||
end_at: payload.end_at
|
||||
items: toArray(payload.items)
|
||||
}
|
||||
}).then(toPrivateCreateResult)
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<text>预约场地</text>
|
||||
<text>{{ quote.courts.map(item => item.name).join('、') }}</text>
|
||||
<view
|
||||
v-for="(item, index) in quote.items"
|
||||
: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">
|
||||
<text>预约时间</text>
|
||||
<text>{{ formatTimeRange(quote.start_at, quote.end_at) }}</text>
|
||||
<view class="item-meta">
|
||||
<text>{{ formatTime(item.start_at) }}-{{ formatTime(item.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;
|
||||
|
||||
@@ -1,25 +1,16 @@
|
||||
<template>
|
||||
<view class="private-page">
|
||||
<view class="top-panel">
|
||||
<view class="type-tabs">
|
||||
<view class="tab-bar">
|
||||
<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>
|
||||
</view>
|
||||
<view class="venue-meta">
|
||||
<text>{{ businessHoursText }}</text>
|
||||
<text>{{ options ? `¥${options.unit_price}/半小时` : '加载价格中' }}</text>
|
||||
</view>
|
||||
>{{ item.label }}</view>
|
||||
</view>
|
||||
|
||||
<view class="date-section">
|
||||
<scroll-view scroll-x class="date-scroll" :show-scrollbar="false">
|
||||
<scroll-view scroll-x class="date-bar" :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="section-header compact">
|
||||
<text class="section-title">预约时长</text>
|
||||
</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="action-bar">
|
||||
<button v-if="selectedCourtCount === 0" class="primary-button submit-btn-full" @tap="goConfirm">预约</button>
|
||||
<template v-else>
|
||||
<view class="selection-info">
|
||||
<text class="selection-main">{{ selectionTitle }}</text>
|
||||
<text class="selection-sub">{{ selectionSubText }}</text>
|
||||
<text class="selection-main">{{ selectedCourtCount }}个场地 {{ selectionTimeText }}</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 MAX_DURATION_UNITS = 8
|
||||
const HEADER_HEIGHT = 75
|
||||
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 durationUnits = ref(2)
|
||||
const options = ref(null)
|
||||
const selectedTime = ref(null)
|
||||
const selectedCourtIds = ref([])
|
||||
const selectedDate = ref(dayjs().format('YYYY-MM-DD'))
|
||||
const grid = ref(null)
|
||||
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: ADVANCE_DAYS }).map((_, index) => {
|
||||
const date = today.add(index, 'day')
|
||||
const week = index === 0 ? '今天' : index === 1 ? '明天' : weekLabels[date.day()]
|
||||
return Array.from({ length: 7 }).map((_, i) => {
|
||||
const d = today.add(i, 'day')
|
||||
return {
|
||||
value: date.format('YYYY-MM-DD'),
|
||||
week,
|
||||
day: date.format('MM/DD')
|
||||
label: i === 0 ? '今天' : i === 1 ? '明天' : weekDays[d.day()],
|
||||
day: `${d.month() + 1}/${d.date()}`,
|
||||
value: d.format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const timeOptions = computed(() => options.value?.time_options || [])
|
||||
const availableCourts = computed(() => selectedTime.value?.available_courts || [])
|
||||
const businessHoursText = computed(() => {
|
||||
if (!options.value) return '营业时间加载中'
|
||||
return `营业 ${normalizeClock(options.value.open_time)}-${normalizeClock(options.value.close_time)}`
|
||||
})
|
||||
const durationText = computed(() => {
|
||||
const minutes = durationUnits.value * 30
|
||||
if (minutes % 60 === 0) return `${minutes / 60} 小时`
|
||||
if (minutes > 60) return `${Math.floor(minutes / 60)} 小时 ${minutes % 60} 分钟`
|
||||
return `${minutes} 分钟`
|
||||
})
|
||||
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}`
|
||||
const openTime = computed(() => normalizeClock(grid.value?.open_time))
|
||||
const closeTime = computed(() => normalizeClock(grid.value?.close_time))
|
||||
|
||||
const occupationMap = computed(() => {
|
||||
const map = {}
|
||||
if (!grid.value) return map
|
||||
for (const occ of grid.value.occupations) {
|
||||
if (!map[occ.court_id]) map[occ.court_id] = []
|
||||
map[occ.court_id].push(occ)
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
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,
|
||||
durationUnits: durationUnits.value
|
||||
courtType: courtType.value
|
||||
})
|
||||
if (requestId !== loadRequestId) return
|
||||
options.value = data
|
||||
selectFirstAvailableTime()
|
||||
grid.value = data
|
||||
selectedCells.value = {}
|
||||
} catch (error) {
|
||||
if (requestId !== loadRequestId) return
|
||||
options.value = null
|
||||
loadError.value = error?.message || '加载失败，请稍后重试'
|
||||
if (!grid.value) loadError.value = error?.message || '加载失败，请稍后重试'
|
||||
} finally {
|
||||
if (requestId === loadRequestId) {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selectFirstAvailableTime = () => {
|
||||
const first = timeOptions.value.find((item) => item.available_court_count > 0)
|
||||
if (first) {
|
||||
selectTime(first)
|
||||
if (requestId === loadRequestId) isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const selectType = (type) => {
|
||||
function 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 = () => {
|
||||
if (durationUnits.value <= 1) return
|
||||
durationUnits.value -= 1
|
||||
loadOptions()
|
||||
function getCellClass(courtId, slotIndex) {
|
||||
const status = cellStatus.value[courtId]?.[slotIndex] || 'available'
|
||||
const isSelected = selectedCells.value[courtId]?.includes(slotIndex)
|
||||
if (isSelected) return { 'cell-selected': true }
|
||||
return { [`cell-${status}`]: true }
|
||||
}
|
||||
|
||||
const increaseDuration = () => {
|
||||
if (durationUnits.value >= MAX_DURATION_UNITS) return
|
||||
durationUnits.value += 1
|
||||
loadOptions()
|
||||
}
|
||||
function toggleCell(courtId, slotIndex) {
|
||||
const status = cellStatus.value[courtId]?.[slotIndex]
|
||||
if (status !== 'available') return
|
||||
|
||||
const selectTime = (timeOption) => {
|
||||
if (!timeOption.available_court_count) return
|
||||
selectedTime.value = timeOption
|
||||
selectedCourtIds.value = timeOption.available_courts.slice(0, 1).map((court) => court.id)
|
||||
}
|
||||
const current = selectedCells.value[courtId] || []
|
||||
|
||||
const toggleCourt = (id) => {
|
||||
if (selectedCourtIds.value.includes(id)) {
|
||||
selectedCourtIds.value = selectedCourtIds.value.filter((item) => item !== id)
|
||||
if (current.includes(slotIndex)) {
|
||||
const next = current.filter((i) => i !== slotIndex)
|
||||
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 = () => {
|
||||
if (!canConfirm.value) return
|
||||
const payload = encodeURIComponent(JSON.stringify({
|
||||
court_type: courtType.value,
|
||||
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}` })
|
||||
defineExpose({
|
||||
refresh() {
|
||||
now.value = dayjs()
|
||||
loadGrid()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.private-page {
|
||||
min-height: 100vh;
|
||||
padding: $spacing-md;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $bg-color-soft;
|
||||
}
|
||||
|
||||
.top-panel,
|
||||
.section-card {
|
||||
@include minimal-card;
|
||||
margin-bottom: $spacing-md;
|
||||
.tab-bar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
height: 88rpx;
|
||||
background: $bg-color-main;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.court-section {
|
||||
margin-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $border-radius-base;
|
||||
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-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-color-muted;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.date-section {
|
||||
margin-bottom: $spacing-md;
|
||||
.tab-item.active {
|
||||
color: $text-color-main;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.date-scroll {
|
||||
width: 100%;
|
||||
.tab-item.active::after {
|
||||
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-right: $spacing-md;
|
||||
padding: $spacing-sm $spacing-xs;
|
||||
gap: $spacing-xs;
|
||||
}
|
||||
|
||||
.date-chip {
|
||||
width: 128rpx;
|
||||
height: 92rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
background: $bg-color-main;
|
||||
border: 1rpx solid $bg-color-hover;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
margin: 0 0 $spacing-md;
|
||||
.date-chip.active .date-day {
|
||||
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;
|
||||
gap: $spacing-md;
|
||||
justify-content: center;
|
||||
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 {
|
||||
width: 88rpx;
|
||||
height: 76rpx;
|
||||
.court-header-cell {
|
||||
width: 149rpx;
|
||||
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;
|
||||
border-radius: $border-radius-base;
|
||||
background: $text-color-main;
|
||||
color: #FFFFFF;
|
||||
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;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-sm $spacing-md calc($spacing-sm + env(safe-area-inset-bottom));
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-top: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -9,6 +9,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineExpose({
|
||||
refresh() {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user