library-wechat/subpkg/pages/seat-booking/seat-booking.vue

<template>
  <view class="booking-detail">
    <view class="section">
      <view class="calendar-wrap">
        <view class="calendar-top">
          <text class="calendar-title">选择入馆日期</text>
          <text class="calendar-month">{{ displayYear }}.{{ String(displayMonth).padStart(2,'0') }}</text>
        </view>
        <view class="calendar-days-grid">
          <view 
            v-for="(day, index) in calendarDays" 
            :key="index" 
            class="day-card"
            :class="{ 
              'card-selected': day.date === selectedDate,
              'card-available': day.available && !day.tempClose && !day.userHasBooked,
              'card-disabled': !day.available || day.tempClose,
              'card-today': day.isToday,
              'card-user-booked': day.userHasBooked,
              'card-temp-close': day.tempClose
            }"
            @click="selectDate(day)"
          >
            <!-- 今天蓝色角标 -->
            <view v-if="day.isToday" class="corner-block-today"></view>
            <!-- 用户已预约 橙色角标 -->
            <view v-if="day.userHasBooked" class="corner-block-booked"></view>

            <text class="card-week">{{ day.isToday ? '今天' : day.weekText }}</text>
            <text class="card-num">{{ day.day }}</text>
            <text class="card-status">
              {{ day.tempClose ? '闭馆' : (day.userHasBooked ? '已预约' : (day.available ? '可预约' : '')) }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间选择：闭馆时整体禁用 -->
    <view class="section" :class="{disabled: isSelectCloseDay}">
      <view class="section-title">时间选择</view>
      <view class="time-slots">
        <view 
          v-for="slot in timeSlots" 
          :key="slot.id" 
          class="time-item"
          :class="{ 
            'selected': selectedTimeList.includes(slot.time), 
            disabled: isSelectCloseDay,
            'booked-item': slot.isUserBooked
          }"
          @click="selectTime(slot)"
        >
          <text class="time-text">{{ slot.time }}</text>
          <text v-if="slot.isUserBooked" class="booked-tag">已预约</text>
          <uni-icons 
            v-if="selectedTimeList.includes(slot.time) && !slot.isUserBooked" 
            style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%);" 
            custom-prefix="iconfont" 
            type="icon-xuanze" 
            size="20" 
            color="#01a4fe"
          ></uni-icons>
        </view>
      </view>
      <view v-if="isSelectCloseDay" class="disable-tip">该日期闭馆，不可选择时间段</view>
    </view>
    
    <!-- 闭馆公告板块：仅选中闭馆日期显示 -->
    <view v-if="isSelectCloseDay" class="section notice-section">
      <view class="notice-title">闭馆公告</view>
      <view class="notice-content">{{ closeNoticeText }}</view>
    </view>

    <view class="section operate-desc">
      <view class="section-title" style="font-size: 14px;">预约说明</view>
      <view class="desc-item">
        <text class="color-blue">1、<text>蓝色</text>日期 可预约</text>
      </view>
      <view class="desc-item">
        <text class="color-orange">2、<text>橙色</text>日期 已有预约</text>
      </view>
      <view class="desc-item">
        <text class="color-gray">3、<text>灰色</text>日期 超出可选范围不可点击预约</text>
      </view>
      <view class="desc-item">
        <text class="color-close">4、标<text>“闭馆”</text>日期 可查看公告，但无法预约或入馆</text>
      </view>
      <view class="desc-item">
        <text>5、已预约时间段仅可查看，不可取消，可新增其他时间段</text>
      </view>
    </view>

    <view class="bottom-bar">
      <button class="btn-primary" :disabled="isSelectCloseDay" @click="confirmBooking">确认预约</button>
    </view>
  </view>
</template>

<script>
import { FetchInitLibraryReservationSettings,FetchReserve } from '@/api/reservation';
import { getOpenId } from '@/utils/storage';
import config from '@/utils/config';

export default {
  data() {
    return {
      selectedDate: '',
      selectedTimeList: [], // 多选时间段数组
      calendarDays: [],
      timeSlots: [],
      reserveConfig: null,
      // 馆员临时闭馆日期列表，格式'2026-08-20'，后台接口返回
      tempCloseDateList: [],
      // 闭馆公告映射 key:日期 value:公告内容
      tempCloseNoticeMap: {},
      // 用户已经预约过的日期列表，后台接口返回
      userBookedDateList: [],
      // key:日期字符串，value:已预约时间段，后端返回
      userBookedMap:{}
    };
  },
  computed: {
    // 是否选中闭馆日期
    isSelectCloseDay(){
      if(!this.selectedDate) return false
      return this.tempCloseDateList.includes(this.selectedDate)
    },
    // 获取当前闭馆公告文本
    closeNoticeText(){
      return this.tempCloseNoticeMap[this.selectedDate] || "本日场馆闭馆，暂不支持预约。"
    },
    displayYear() {
      let targetDateStr = this.selectedDate;
      if (!targetDateStr && this.calendarDays.length > 0) {
        const firstValid = this.calendarDays.find(d => d.available && !d.tempClose) || this.calendarDays[0];
        targetDateStr = firstValid.date;
      }
      if (!targetDateStr) return new Date().getFullYear();
      const d = new Date(targetDateStr);
      return d.getFullYear();
    },
    displayMonth() {
      let targetDateStr = this.selectedDate;
      if (!targetDateStr && this.calendarDays.length > 0) {
        const firstValid = this.calendarDays.find(d => d.available && !d.tempClose) || this.calendarDays[0];
        targetDateStr = firstValid.date;
      }
      if (!targetDateStr) return new Date().getMonth() + 1;
      const d = new Date(targetDateStr);
      return d.getMonth() + 1;
    }
  },
  async onLoad(options) {
    await this.initReservationSettings();
    if(this.reserveConfig){
      this.generateCalendar();
    }
  },
  methods: {
    transformReserveConfig(apiData){
      const { baseSetting, weekJson } = apiData;
      const weekKeyMap = {
        1: 'monday',
        2: 'tuesday',
        3: 'wednesday',
        4: 'thursday',
        5: 'friday',
        6: 'saturday',
        7: 'sunday'
      };
      const weekDays = [];
      for(let wId=1;wId<=7;wId++){
        const propName = weekKeyMap[wId];
        const checked = !!baseSetting[propName];
        const timeArr = weekJson[wId] || [];
        // 把startTime[h,m], endTime[h,m]转 "HH:mm - HH:mm"
        const times = timeArr.map(item=>{
          const sh = String(item.startTime[0]).padStart(2,'0');
          const sm = String(item.startTime[1]).padStart(2,'0');
          const eh = String(item.endTime[0]).padStart(2,'0');
          const em = String(item.endTime[1]).padStart(2,'0');
          return `${sh}:${sm} - ${eh}:${em}`;
        })
        weekDays.push({
          id:wId,
          name:this.getWeekText(wId),
          checked: checked,
          times: times,
          showPicker: false,
          newTime: ""
        })
      }
      return {
        frequency: String(baseSetting.advanceBookingDays),
        weekDays
      }
    },

    // 初始化预约设置
    async initReservationSettings() {
      try {
        const res = await FetchInitLibraryReservationSettings({
         libcode: config.LIB_CODE
        })
        if (res && res.code === 200 && res.data) {
          // 转换为旧格式，原有业务逻辑完全不用改动
          this.reserveConfig = this.transformReserveConfig(res.data);
        }else{
          console.error('初始化预约设置失败',res)
        }
      } catch (e) {
        console.error('获取预约设置异常', e)
      }
    },

    getWeekNum(dateStr) {
      const d = new Date(dateStr);
      const day = d.getDay();
      return day === 0 ? 7 : day
    },
    getWeekText(weekNo){
      const map = {1:'周一',2:'周二',3:'周三',4:'周四',5:'周五',6:'周六',7:'周日'}
      return map[weekNo]
    },

    generateCalendar() {
      if(!this.reserveConfig) return;
      const today = new Date();
      const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
      const freq = Number(this.reserveConfig.frequency);
      const allowDateList = [];
      for(let i = 0; i < freq; i++){
        const temp = new Date(today);
        temp.setDate(today.getDate() + i);
        const ds = `${temp.getFullYear()}-${String(temp.getMonth()+1).padStart(2,'0')}-${String(temp.getDate()).padStart(2,'0')}`
        allowDateList.push(ds)
      }

      const list = []
      allowDateList.forEach(dateStr=>{
        const weekNo = this.getWeekNum(dateStr)
        const weekCfg = this.reserveConfig.weekDays.find(w => w.id === weekNo)
        const available = !!weekCfg?.checked
        const d = new Date(dateStr)

        const tempClose = this.tempCloseDateList.includes(dateStr)
        const userHasBooked = this.userBookedDateList.includes(dateStr)

        list.push({
          day: d.getDate(),
          date: dateStr,
          weekText: this.getWeekText(weekNo),
          available: available,
          isToday: dateStr === todayStr,
          tempClose: tempClose,
          userHasBooked: userHasBooked
        })
      })
      this.calendarDays = list

      // 找第一个不是闭馆的有效日期作为初始选中
      const firstAvail = this.calendarDays.find(d => d.available && !d.tempClose);
      if(firstAvail){
        this.selectedDate = firstAvail.date
        this.refreshTimeSlots(this.selectedDate)
      }else{
        this.selectedDate = ''
        this.timeSlots = []
      }
    },

    refreshTimeSlots(dateStr){
      if(!dateStr) {
        this.timeSlots = []
        return
      }
      const weekNo = this.getWeekNum(dateStr)
      const weekCfg = this.reserveConfig.weekDays.find(w => w.id === weekNo)
      if(!weekCfg || !weekCfg.checked){
        this.timeSlots = []
        return
      }
      // 当前日期已经预约的时间段
      const bookedTimeArr = this.userBookedMap[dateStr] || []

      this.timeSlots = weekCfg.times.map((t, idx)=>{
        return {
          id: idx + 1,
          time: t,
          available: true,
          isUserBooked: bookedTimeArr.includes(t)
        }
      })
      // 回填历史已预约时间段，不能取消
      this.selectedTimeList = [...bookedTimeArr]
    },

    selectDate(day) {
      // 普通不可选（非临时闭馆）：弹提示，禁止选中
      if (!day.available && !day.tempClose) {
        uni.showToast({
          title: '超出可选的时间范围，请选择其他日期',
          icon: 'none'
        })
        return;
      }
      // 临时闭馆 || 正常可预约：允许选中
      this.selectedDate = day.date;
      this.refreshTimeSlots(day.date);
    },
    selectTime(slot) {
      if(this.isSelectCloseDay) return
      if (!slot.available) return;
      // 已预约时间段禁止取消
      if(slot.isUserBooked){
        uni.showToast({
          title:"该时间段已预约，不可取消",
          icon:"none"
        })
        return
      }

      const idx = this.selectedTimeList.indexOf(slot.time)
      if(idx > -1){
        // 本次新增的，可以取消
        this.selectedTimeList.splice(idx,1)
      }else{
        this.selectedTimeList.push(slot.time)
      }
    },
    async confirmBooking() {
      if(this.isSelectCloseDay){
        uni.showToast({title:"该日期闭馆，无法预约",icon:"none"})
        return
      }
      if (!this.selectedDate) {
        uni.showToast({ title: '请选择日期', icon: 'none' });
        return;
      }

      const bookedTimeArr = this.userBookedMap[this.selectedDate] || []
      // 过滤：只取本次新增勾选的时间段
      const newSelectTimes = this.selectedTimeList.filter(item=> !bookedTimeArr.includes(item))

      if (!newSelectTimes || newSelectTimes.length === 0) {
        uni.showToast({ title: '请选择需要新增预约的时间段', icon: 'none' });
        return;
      }

      uni.showLoading({ title: '预约中...' });
      const openId = await getOpenId();
      if (!openId) {
        uni.hideLoading();
        uni.showToast({ title: '获取用户openid失败', icon: 'none' });
        return;
      }

      // 组装数组参数，后端接收对象数组
      const param = newSelectTimes.map(timeStr => {
        const [startPart, endPart] = timeStr.split(' - ');
        const startTime = startPart.trim() + ':00';
        const endTime = endPart.trim() + ':00';
        return {
          libcode: config.LIB_CODE,
          openid: openId,
          specificDate: this.selectedDate,
          startTime: startTime,
          endTime: endTime
        }
      })

      try {
        const res = await FetchReserve(param);
        uni.hideLoading();

        if(res.code === 200){
          // 更新本地预约状态
          if(!this.userBookedDateList.includes(this.selectedDate)){
            this.userBookedDateList.push(this.selectedDate)
          }
          const old = this.userBookedMap[this.selectedDate] || []
          this.userBookedMap[this.selectedDate] = [...new Set([...old,...newSelectTimes])]

          const timeText = newSelectTimes.join('\n');
          uni.showModal({
            title: '预约成功',
            content: `您已新增预约\n日期：${this.selectedDate}\n时间段：${timeText}`,
            showCancel: false,
            confirmText: '确定',
            success: () => {
              uni.navigateBack({ delta: 2 });
            }
          })
        }else{
          uni.showToast({ title: res.msg || '预约失败，请重试', icon: 'none' })
        }
      } catch (err) {
        uni.hideLoading();
        console.error('预约接口异常', err);
        uni.showToast({ title: '预约失败，请重试', icon: 'none' })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.booking-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 70px;
}

.section {
  background-color: #fff;
  margin: 10px;
  border-radius: 12px;
  padding: 16px;
}
// 闭馆公告板块
.notice-section{
  background:#FCECE9;
  .notice-title{
    font-size:15px;
    font-weight:bold;
    color:#FD7359;
    margin-bottom:8px;
  }
  .notice-content{
    font-size:14px;
    color:#595959;
    line-height:1.6;
  }
}

// 时间板块整体置灰
.section.disabled{
  opacity:0.55;
  pointer-events:none;
}
.disable-tip{
  margin-top:12px;
  font-size:13px;
  color:#999;
  text-align:center;
}

.calendar-wrap{
  background:#ffffff;
  border-radius:16px;
}
.calendar-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.calendar-title{
  font-size:17px;
  font-weight:bold;
  color:#222;
}
.calendar-month{
  font-size:16px;
  color:#333;
  font-weight:bold;
}

.calendar-days-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.day-card{
  width: calc((100% - 48px) / 7);
  background:#f7f8fa;
  border-radius: 4px;
  padding: 4px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  overflow: hidden;
}

/* 今天左上角蓝色三角 */
.corner-block-today{
  position:absolute;
  top:0;
  left:0;
  width: 0;
  height: 0;
  border-top: 12px solid #01a4fe;
  border-right: 12px solid transparent;
}
/* 已预约 橙色三角角标 */
.corner-block-booked{
  position:absolute;
  top:0;
  left:0;
  width: 0;
  height: 0;
  border-top: 12px solid #ff7800;
  border-right: 12px solid transparent;
}

.card-week{
  font-size:12px;
  color:#666;
  margin-bottom:4px;
}
.card-num{
  font-size:18px;
  font-weight:bold;
  color:#333;
}
.card-status{
  font-size:11px;
  margin-top:4px;
}

/* 可预约 */
.day-card.card-available{
  background:#e8f4fd;
}
.day-card.card-available .card-status{
  color:#01a4fe;
}

/* 闭馆/不可选 */
.day-card.card-disabled{
  background:#f7f8fa;
}
.day-card.card-disabled .card-week,
.day-card.card-disabled .card-num,
.day-card.card-disabled .card-status{
  color:#999;
}

/* 选中状态 */
.day-card.card-selected{
  background:#01a4fe;
}
.day-card.card-selected .card-week,
.day-card.card-selected .card-num,
.day-card.card-selected .card-status{
  color:#ffffff;
}
.day-card.card-user-booked{
  background:#FFF3E5;
}
.day-card.card-user-booked  .card-week,
.day-card.card-user-booked  .card-num,
.day-card.card-user-booked .card-status{
  color:#ff7800;
}

.day-card.card-user-booked.card-selected{
  background:#ff7800;
}
.day-card.card-user-booked.card-selected .card-week,
.day-card.card-user-booked.card-selected .card-num,
.day-card.card-user-booked.card-selected .card-status{
  color:#fff;
}

.day-card.card-temp-close .card-status{
  color:#999;
}

.day-card.card-temp-close.card-selected {
  background:#888;
}

.day-card.card-temp-close.card-selected .card-week,
.day-card.card-temp-close.card-selected .card-num,
.day-card.card-temp-close.card-selected .card-status{
  color:#fff;
}


/* 时间选择 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}
.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.time-item {
  position: relative;
  width: calc(50% - 5px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: #f8f8f8;
  border-radius: 8px;
  border: 1px solid transparent;
}
.time-item.selected {
  background-color: #e8f4fd;
  border-color: #01a4fe;
}
.time-item.disabled{
  pointer-events:none;
}
.time-item.booked-item{
  background: #fff3e5;
  border:1px solid #ffb870;
  .time-text{
    color:#ff7800;
  }
}
.booked-tag{
  font-size:11px;
  color:#ff7800;
}
.time-text {
  font-size: 14px;
  color: #333;
}
.available-badge {
  font-size: 12px;
  color: #01a4fe;
  background-color: #e8f4fd;
  padding: 2px 8px;
  border-radius: 10px;
}
.unavailable-badge {
  font-size: 12px;
  color: #999;
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 底部按钮 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}
.btn-primary {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #01a4fe;
  color: #fff;
  border-radius: 22px;
  font-size: 15px;
  border: none;
}
.btn-primary::after {
  border: none;
}
.btn-primary[disabled]{
  background:#b8d8f5 !important;
}
.operate-desc{
  margin:10px;
  padding:16px;
  border-radius:12px;
  background:#fff;

  .section-title{
    margin-bottom:10px !important;
  }
  .desc-item{
    line-height:2;
    font-size:13px;
  }
  .color-blue{
    text{
      color:#01a4fe;
    }
  }
  .color-orange{
    text{
      color:#ff7800;
    }
  }
  .color-gray{
    text{
      color:#999;
    }
  }
  .color-close{
    text{
      color:#FD7359;
      font-weight:500;
    }
  }
}
</style>