feat: migrate comprehensive venue module
This commit is contained in:
gqt
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<view class="private-page page-bottom-safe">
|
||||
<view class="top-panel">
|
||||
<view class="type-tabs">
|
||||
<view
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
class="type-tab"
|
||||
: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>
|
||||
</view>
|
||||
|
||||
<view class="date-section">
|
||||
<scroll-view scroll-x class="date-scroll" :show-scrollbar="false">
|
||||
<view class="date-list">
|
||||
<view
|
||||
v-for="item in dateOptions"
|
||||
:key="item.value"
|
||||
class="date-chip"
|
||||
:class="{ active: selectedDate === item.value }"
|
||||
@tap="selectDate(item.value)"
|
||||
>
|
||||
<text class="date-week">{{ item.week }}</text>
|
||||
<text class="date-day">{{ item.day }}</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="selection-info">
|
||||
<text class="selection-main">{{ selectionTitle }}</text>
|
||||
<text class="selection-sub">{{ selectionSubText }}</text>
|
||||
</view>
|
||||
<button class="primary-button submit-btn" :disabled="!canConfirm" @tap="goConfirm">确认预约</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 typeOptions = [
|
||||
{ label: '羽毛球', value: 'badminton' },
|
||||
{ label: '篮球', value: 'basketball' }
|
||||
]
|
||||
|
||||
const courtType = ref('badminton')
|
||||
const selectedDate = ref(todayString())
|
||||
const durationUnits = ref(2)
|
||||
const options = ref(null)
|
||||
const selectedTime = ref(null)
|
||||
const selectedCourtIds = ref([])
|
||||
const isLoading = ref(false)
|
||||
const loadError = ref('')
|
||||
let loadRequestId = 0
|
||||
|
||||
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 {
|
||||
value: date.format('YYYY-MM-DD'),
|
||||
week,
|
||||
day: date.format('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}`
|
||||
})
|
||||
|
||||
onMounted(loadOptions)
|
||||
|
||||
const loadOptions = async () => {
|
||||
const requestId = ++loadRequestId
|
||||
isLoading.value = true
|
||||
loadError.value = ''
|
||||
selectedTime.value = null
|
||||
selectedCourtIds.value = []
|
||||
try {
|
||||
const data = await privateBookingApi.getPrivateBookingOptions({
|
||||
date: selectedDate.value,
|
||||
courtType: courtType.value,
|
||||
durationUnits: durationUnits.value
|
||||
})
|
||||
if (requestId !== loadRequestId) return
|
||||
options.value = data
|
||||
selectFirstAvailableTime()
|
||||
} catch (error) {
|
||||
if (requestId !== loadRequestId) return
|
||||
options.value = null
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
const selectType = (type) => {
|
||||
if (courtType.value === type) return
|
||||
courtType.value = type
|
||||
loadOptions()
|
||||
}
|
||||
|
||||
const selectDate = (date) => {
|
||||
if (selectedDate.value === date) return
|
||||
selectedDate.value = date
|
||||
loadOptions()
|
||||
}
|
||||
|
||||
const decreaseDuration = () => {
|
||||
if (durationUnits.value <= 1) return
|
||||
durationUnits.value -= 1
|
||||
loadOptions()
|
||||
}
|
||||
|
||||
const increaseDuration = () => {
|
||||
if (durationUnits.value >= MAX_DURATION_UNITS) return
|
||||
durationUnits.value += 1
|
||||
loadOptions()
|
||||
}
|
||||
|
||||
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 toggleCourt = (id) => {
|
||||
if (selectedCourtIds.value.includes(id)) {
|
||||
selectedCourtIds.value = selectedCourtIds.value.filter((item) => item !== id)
|
||||
} else {
|
||||
selectedCourtIds.value = [...selectedCourtIds.value, id]
|
||||
}
|
||||
}
|
||||
|
||||
const 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}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.private-page {
|
||||
min-height: 100vh;
|
||||
padding: $spacing-md;
|
||||
background: $bg-color-soft;
|
||||
}
|
||||
|
||||
.top-panel,
|
||||
.section-card {
|
||||
@include minimal-card;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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-weight: 700;
|
||||
}
|
||||
|
||||
.date-section {
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.date-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-list {
|
||||
display: inline-flex;
|
||||
gap: $spacing-sm;
|
||||
padding-right: $spacing-md;
|
||||
}
|
||||
|
||||
.date-chip {
|
||||
width: 128rpx;
|
||||
height: 92rpx;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
background: $bg-color-main;
|
||||
border: 1rpx solid $bg-color-hover;
|
||||
}
|
||||
|
||||
.date-week {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.date-day {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.compact {
|
||||
margin: 0 0 $spacing-md;
|
||||
}
|
||||
|
||||
.duration-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.step-btn {
|
||||
width: 88rpx;
|
||||
height: 76rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.selection-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.selection-main {
|
||||
color: $text-color-main;
|
||||
font-size: 28rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.selection-sub {
|
||||
margin-top: 4rpx;
|
||||
color: $text-color-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 260rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user