health.applet/miniprogram/module/order/pages/appointment/appointment.ts

import PageContainerBehavior from "../../../../core/behavior/page-container.behavior";
import DictionariesBehavior from "../../../../core/behavior/dictionaries.behavior";
import tickleBehavior from "../../../../core/behavior/tickle.behavior";
import { patientOfflineTreatmentAppointmentMethod } from "../../request";
// module/order/pages/appointment/appointment.ts
Page({
  behaviors: [PageContainerBehavior, DictionariesBehavior, tickleBehavior],
  data: {
    goodsInfo: { appointmentTime: '' },
    dateList: [] as Array<{
      label: string;
      dateStr: string;
      date: string;
      isSelected: boolean;
    }>,
    timeSlots: [] as Array<{
      time: string;
      isSelected: boolean;
      isDisabled: boolean;
    }>,
    selectedDate: "",
    selectedTime: "",
    show: false,
    date: '',
    offlineId: "",
  },
  onLoad(options: any) {
    // 初始化日期列表（从今天开始5天）
    this.initDateList();
    if (options.goodsInfo) {
      const goodsInfo = JSON.parse(options.goodsInfo);
      this.setData({
        goodsInfo: goodsInfo,
        offlineId: goodsInfo.offlineId,
      });
    }
  },
  // 初始化日期列表
  initDateList(startDate?: Date) {
    const dateList: Array<{
      label: string;
      dateStr: string;
      date: string;
      isSelected: boolean;
    }> = [];
    const baseDate = startDate || new Date();
    // 设置时间为0点，避免时区问题
    baseDate.setHours(0, 0, 0, 0);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

    for (let i = 0; i < 5; i++) {
      const date = new Date(baseDate);
      date.setDate(baseDate.getDate() + i);

      const month = date.getMonth() + 1;
      const day = date.getDate();
      const weekDay = weekDays[date.getDay()];

      // 判断相对今天的位置
      const diffDays = Math.floor((date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
      let label = '';
      if (diffDays === 0) {
        label = '今天';
      } else if (diffDays === 1) {
        label = '明天';
      } else {
        label = weekDay;
      }

      const dateStr = `${month}月${day}日`;
      const dateValue = `${date.getFullYear()}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

      dateList.push({
        label,
        dateStr,
        date: dateValue,
        isSelected: i === 0, // 默认选中第一个
      });
    }

    this.setData({
      dateList,
      selectedDate: dateList[0].date, // 默认选中第一个日期
    });

    // 初始化时间列表，传入默认选中的日期
    this.initTimeSlots(dateList[0].date);
  },
  // 初始化时间列表 - 固定8:00-20:00
  initTimeSlots(selectedDate?: string) {
    const timeSlots: Array<{
      time: string;
      isSelected: boolean;
      isDisabled: boolean;
    }> = [];

    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const selectedDateObj = selectedDate ? new Date(selectedDate) : today;
    const selectedDateOnly = new Date(selectedDateObj.getFullYear(), selectedDateObj.getMonth(), selectedDateObj.getDate());

    // 判断选中的日期是否是今天
    const isToday = selectedDateOnly.getTime() === today.getTime();
    const currentHour = now.getHours();
    const currentMinute = now.getMinutes();

    // 从08:00到20:00，每30分钟一个时间段
    for (let hour = 8; hour <= 20; hour++) {
      for (let minute = 0; minute < 60; minute += 30) {
        if (timeSlots.length >= 25) break; // 限制为25个时间段
        const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;

        // 如果是今天，需要判断时间是否已过去
        let isDisabled = false;
        if (isToday) {
          // 如果时间已过去，禁用
          if (hour < currentHour || (hour === currentHour && minute <= currentMinute)) {
            isDisabled = true;
          }
        }

        timeSlots.push({
          time: timeStr,
          isSelected: false,
          isDisabled,
        });
      }
    }

    this.setData({ timeSlots });
  },
  // 选择日期
  onDateSelect(e: any) {
    const index = e.currentTarget.dataset.index;
    const dateList = this.data.dateList.map((item, i) => ({
      ...item,
      isSelected: i === index,
    }));

    const selectedDate = dateList[index].date;

    // 重新初始化时间列表，根据选中的日期禁用已过去的时间
    this.initTimeSlots(selectedDate);

    this.setData({
      dateList,
      selectedDate,
      // 切换日期时清空已选时间
      selectedTime: "",
    });
  },
  // 选择时间
  onTimeSelect(e: any) {
    const index = e.currentTarget.dataset.index;
    const time = e.currentTarget.dataset.time;
    const timeSlot = this.data.timeSlots[index];

    // 如果时间段被禁用，不处理
    if (timeSlot && timeSlot.isDisabled) {
      return;
    }

    // 每次只能选择一个时间段，点击新的会取消之前的选择
    const timeSlots = this.data.timeSlots.map((item, i) => ({
      ...item,
      isSelected: i === index, // 只有当前点击的为选中状态
    }));

    this.setData({
      timeSlots,
      selectedTime: time,
    });
  },
  // 提交预约
  async onSubmit() {

    if (!this.data.selectedDate) {
      wx.showToast({
        title: "请选择日期",
        icon: "none",
      });
      return;
    }
    if (!this.data.selectedTime) {
      wx.showToast({
        title: "请选择时间",
        icon: "none",
      });
      return;
    }
    console.log(this.data.selectedDate, "this.data.selectedDate", this.data.selectedTime, "this.data.selectedTime", this.data.offlineId, "this.data.offlineId")

    const appointmentTime = `${this.data.selectedDate} ${this.data.selectedTime}`;
    console.log(appointmentTime, "appointmentTime");
    console.log(this.data.offlineId, "this.data.offlineId");
    this.setData({
      goodsInfo: {
        ...this.data.goodsInfo,
        appointmentTime: `${this.data.selectedDate} ${this.data.selectedTime}`,
      },
    });
    try {
      await patientOfflineTreatmentAppointmentMethod(this.data.offlineId, appointmentTime);
      wx.showToast({
        title: '预约成功',
        icon: 'success',
      });
      setTimeout(() => {
        wx.redirectTo({
          url: `/module/order/pages/appointment-success/appointment-success?goodsInfo=${JSON.stringify(this.data.goodsInfo)}`,
        });
      }, 1000);

    } catch (error: any) {
      wx.showToast({
        title: error.errMsg || "预约失败",
        icon: "none",
      });
      console.log(error, "error")
    }
  },

  // 打开日历弹窗
  onOpenCalendar() {
    console.log('onOpenCalendar');
    this.setData({ show: true });
  },
  // 关闭日历弹窗
  onClose() {
    this.setData({ show: false });
  },
  // 格式化日期
  formatDate(date: any) {
    date = new Date(date);
    return `${date.getMonth() + 1}/${date.getDate()}`;
  },
  // 确认选择日期
  onConfirm(event: any) {
    const selectedDate = event.detail;
    console.log('选择的日期:', selectedDate);

    if (selectedDate) {
      // 解析日期
      const dateObj = new Date(selectedDate);
      dateObj.setHours(0, 0, 0, 0);

      // 格式化日期字符串用于比较
      const dateValue = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;

      // 检查选择的日期是否在当前展示的5天中
      const existingDateIndex = this.data.dateList.findIndex(item => item.date === dateValue);

      if (existingDateIndex !== -1) {
        // 如果选择的日期在已展示的5天中，只更新选中状态
        const dateList = this.data.dateList.map((item, index) => ({
          ...item,
          isSelected: index === existingDateIndex,
        }));

        // 重新初始化时间列表，根据选中的日期禁用已过去的时间
        this.initTimeSlots(dateValue);

        // 清空已选时间
        this.setData({
          show: false,
          dateList,
          selectedDate: dateValue,
          date: this.formatDate(selectedDate),
          selectedTime: "",
        });
      } else {
        // 如果选择的日期不在已展示的5天中，重新生成日期列表
        this.initDateList(dateObj);

        // 重新初始化时间列表，根据选中的日期禁用已过去的时间
        this.initTimeSlots(dateValue);

        // 清空已选时间
        this.setData({
          show: false,
          date: this.formatDate(selectedDate),
          selectedTime: "",
        });
      }
    } else {
      this.setData({ show: false });
    }
  },
});