mini-yu/pages/booking/booking.vue

<template>
  <view class="container">
    <!-- 自定义日历选择器 -->
    <view class="date-selector">
      <view class="calendar-header">
        <text class="month-title">{{ currentDateStr }}</text>
      </view>
      <view class="calendar-weekdays">
        <text v-for="day in weekdays" :key="day" class="weekday">{{ day }}</text>
      </view>
      <view class="calendar-days">
        <view v-for="(day, index) in calendarDays" :key="day.dateStr || `placeholder-${index}`" class="calendar-day"
          :class="{
            'placeholder': day.isPlaceholder,
            'selected': day.dateStr === selectedDate,
            'today': day.isToday,
            'disabled': !day.hasBookings && !day.isPlaceholder,
            'has-bookings': day.hasBookings
          }" @click="!day.isPlaceholder && selectDate(day)">
          <text v-if="!day.isPlaceholder" class="day-number">{{ day.day }}</text>
          <text v-if="!day.isPlaceholder && day.bookingCount > 0" class="booking-count">
            {{ day.bookingCount }}人
          </text>
        </view>
      </view>
    </view>

    <!-- 时间槽列表 -->
    <scroll-view class="timeslots-scroll" scroll-y="true">
      <view class="timeslots-section">
        <view class="section-title">
          {{ selectedDate }} 可选时间段
          <text v-if="totalBookingCount > 0" class="total-booking">
            (总预约: {{ totalBookingCount }}人)
          </text>
        </view>
        <t-loading v-if="loading" loading />
        <view v-else-if="timeslots.length === 0" class="empty-state">
          <t-empty description="暂无可预约时间段" />
        </view>
        <view v-else class="timeslots-list">
          <view v-for="slot in timeslots" :key="slot.id" class="timeslot-card"
            :class="{ disabled: !slot.is_active || slot.current_people >= slot.max_people }">
            <view class="timeslot-info">
              <view class="time-range">
                {{ formatTime(slot.start_time) }} - {{ formatTime(slot.end_time) }}
              </view>
              <view class="slot-status">
                <t-tag :theme="slot.current_people >= slot.max_people ? 'danger' : 'success'" size="small">
                  {{ slot.current_people }}/{{ slot.max_people }}
                </t-tag>
              </view>
            </view>
            <t-button t-class="btn-primary" size="small" theme="primary"
              :disabled="!slot.is_active || slot.current_people >= slot.max_people"
              @click.stop="showBookingModal(slot)">
              {{ slot.current_people >= slot.max_people ? '已满' : '预约' }}
            </t-button>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 预约弹窗 -->
    <t-dialog v-model:visible="showDialog" title="预约确认" cancelBtn="取消"
      confirmBtn="确认预约" t-class-confirm="btn-primary" @confirm="confirmBooking"
      @cancel="showDialog = false">
      <template #content>
        <!-- 适配skyline，增加type="list" -->
        <scroll-view type="list" scroll-y class="long-content">
          <view class="booking-dialog">
            <view class="dialog-item">
              <text class="dialog-label">日期：</text>
              <text class="dialog-value">{{ selectedDate }}</text>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">时间段：</text>
              <text class="dialog-value">{{ selectedSlot?.start_time ? formatTime(selectedSlot.start_time) : '' }} - {{
                selectedSlot?.end_time ? formatTime(selectedSlot.end_time) : '' }}</text>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">人数：</text>
              <t-stepper v-model="peopleCount" :min="1"
                :max="selectedSlot?.max_people - selectedSlot?.current_people || 1" :disabled="true" size="small" />
            </view>
          </view>
        </scroll-view>
      </template>
    </t-dialog>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { api, type TimeSlot } from '@/utils/api'

// 获取本地时区的日期字符串（东八区）
const getLocalDateStr = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

const selectedDate = ref(getLocalDateStr())
const timeslots = ref<TimeSlot[]>([])
const loading = ref(false)
const showDialog = ref(false)
const selectedSlot = ref<TimeSlot | null>(null)
const peopleCount = ref(1)
const notes = ref('')
const isBooking = ref(false) // 防止重复点击

// 日历相关
const currentDate = ref(new Date())
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
const dateBookings = ref<Record<string, number>>({})
const dateHasSlots = ref<Record<string, boolean>>({})

// 计算当前月份显示
const currentDateStr = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth() + 1
  return `${year}年${month}月`
})

// 计算总预约人数
const totalBookingCount = computed(() => {
  return timeslots.value.reduce((sum, slot) => sum + slot.current_people, 0)
})

// 生成日历数据 - 只显示本月（但保留上个月的占位以对齐星期）
const calendarDays = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()

  // 获取当月第一天和最后一天
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  const today = new Date()

  // 获取当月第一天是星期几
  const startWeekday = firstDay.getDay()

  const days: any[] = []

  // 添加上个月的日期占位（用于对齐），但设置为不可点击
  for (let i = startWeekday - 1; i >= 0; i--) {
    days.push({
      day: '',
      dateStr: '',
      isPlaceholder: true,
      isOtherMonth: false,
      isToday: false,
      bookingCount: 0,
      hasBookings: false
    })
  }

  // 获取当月的日期
  for (let i = 1; i <= lastDay.getDate(); i++) {
    const date = new Date(year, month, i)

    // 使用本地时间获取日期部分，避免时区问题
    const yearNum = date.getFullYear()
    const monthNum = date.getMonth() + 1
    const dayNum = date.getDate()

    const dateStr = `${yearNum}-${String(monthNum).padStart(2, '0')}-${String(dayNum).padStart(2, '0')}`

    // 使用本地时间比较是否为今天
    const todayYear = today.getFullYear()
    const todayMonth = today.getMonth()
    const todayDay = today.getDate()
    const isToday = yearNum === todayYear && monthNum - 1 === todayMonth && dayNum === todayDay

    days.push({
      day: i,
      dateStr,
      isPlaceholder: false,
      isOtherMonth: false,
      isToday,
      bookingCount: dateBookings.value[dateStr] || 0,
      hasBookings: dateHasSlots.value[dateStr] || false
    })
  }

  return days
})

// 格式化日期字符串
const formatDateStr = (date: Date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const dateStr = `${year}-${month}-${day}`
  return dateStr
}

// 检查登录状态
onMounted(() => {
  const token = uni.getStorageSync('token')
  if (!token) {
    uni.redirectTo({ url: '/pages/login/login' })
  } else {
    loadTimeSlots()
    loadDateBookings()
  }
})

// 加载日期预约统计
const loadDateBookings = async () => {
  try {
    const slots = await api.timeslots.getList({ is_active: true })

    const bookings: Record<string, number> = {}
    const slotsMap: Record<string, boolean> = {}

    slots.forEach(slot => {
      const dateStr = slot.date.split('T')[0]
      bookings[dateStr] = (bookings[dateStr] || 0) + slot.current_people
      slotsMap[dateStr] = true
    })

    dateBookings.value = bookings
    dateHasSlots.value = slotsMap

  } catch (error) {
    console.error('加载日期预约统计失败', error)
  }
}

// 加载时间槽
const loadTimeSlots = async () => {
  loading.value = true
  try {
    const slots = await api.timeslots.getList({
      date: selectedDate.value,
      is_active: true
    })
    timeslots.value = slots
  } catch (error) {
    console.error('加载时间槽失败', error)
  } finally {
    loading.value = false
  }
}

// 选择日期
const selectDate = (day: any) => {
  selectedDate.value = day.dateStr
  loadTimeSlots()
}

// 格式化时间
const formatTime = (timeStr: string) => {
  // 直接提取时间部分，避免时区转换问题
  const timePart = timeStr.split('T')[1] || timeStr
  const timeWithoutZone = timePart.split('+')[0].split('Z')[0]
  const [hours, minutes] = timeWithoutZone.split(':')
  return `${hours}:${minutes}`
}

// 显示预约弹窗
const showBookingModal = (slot: TimeSlot) => {

  // 防止重复点击
  if (isBooking.value) {
    uni.showToast({
      title: '正在处理，请稍候',
      icon: 'none'
    })
    return
  }

  if (!slot.is_active || slot.current_people >= slot.max_people) {
    console.log('时间槽不可用', slot)
    uni.showToast({
      title: '该时间段已不可用',
      icon: 'none'
    })
    return
  }
  selectedSlot.value = slot
  peopleCount.value = 1
  notes.value = ''
  showDialog.value = true
  console.log('打开弹窗', showDialog.value)
}

// 确认预约
const confirmBooking = async () => {
  if (!selectedSlot.value) return

  isBooking.value = true
  try {
    await api.appointments.create(selectedSlot.value.id, peopleCount.value, notes.value)
    uni.showToast({
      title: '预约成功',
      icon: 'success'
    })
    showDialog.value = false
    loadTimeSlots()
    loadDateBookings()
  } catch (error) {
      showDialog.value = false

  } finally {
    isBooking.value = false
  }
}


</script>

<style scoped>
.container {
  height: calc(100vh - var(--window-top));
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  overflow: hidden;
}

.date-selector {
  flex-shrink: 0;
  background: #ffffff;
  margin: 24rpx 32rpx;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}


.calendar-header {
  text-align: center;
  margin-bottom: 24rpx;
}

.month-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8rpx;
  margin-bottom: 16rpx;
  padding: 0 10rpx;
}

.weekday {
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8rpx;
  padding: 0 10rpx;
}

.calendar-day {
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.calendar-day.placeholder {
  visibility: hidden;
}

.calendar-day.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.calendar-day.has-bookings {
  background: rgba(255, 122, 0, 0.08);
  border: 2rpx solid #FF7A00;
}

.calendar-day.today {
  background: rgba(255, 122, 0, 0.12);
}

.calendar-day.selected {
  background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%);
}

.calendar-day.selected .day-number {
  color: #ffffff;
}

.calendar-day.selected .booking-count {
  color: #ffffff;
}

.day-number {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 4rpx;
}

.booking-count {
  font-size: 20rpx;
  color: #FF7A00;
}


.timeslots-scroll {
  flex: 1;
  overflow: hidden;
}

.timeslots-section {
  padding: 32rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.total-booking {
  font-size: 24rpx;
  color: #FF7A00;
  margin-left: 16rpx;
  font-weight: normal;
}

.empty-state {
  padding: 80rpx 0;
}

.timeslots-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.timeslot-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.timeslot-card.disabled {
  opacity: 0.6;
}

.timeslot-info {
  flex: 1;
}

.time-range {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.slot-status {
  margin-top: 8rpx;
}

.booking-dialog {
  padding: 32rpx 0;
}

.dialog-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.dialog-item:last-child {
  border-bottom: none;
}

.dialog-label {
  width: 120rpx;
  font-size: 28rpx;
  color: #666;
}

.dialog-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
</style>

<style>
	/* 按钮自定义样式 - 使用全局样式 */
	.btn-primary {
		background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%) !important;
		border: none !important;
		border-radius: 8rpx !important;
		color: #FFFFFF !important;
		box-shadow: 0 4rpx 12rpx rgba(255, 122, 0, 0.3) !important;
		outline: none !important;
	}

	.btn-primary::after {
		border: none !important;
		box-shadow: none !important;
	}

	.btn-primary:active {
		background: linear-gradient(135deg, #FF6900 0%, #FF8500 100%) !important;
	}
</style>