karamay_wx/pages/index/start-preview/start-preview.js

const { museumApi } = require('../../../utils/api.js');

Page({
  data: {
    selectedTime: '',
    selectedDate: null,
    step: 1,
    morningAvailability: '余票充足',
    afternoonAvailability: '余票充足',
    morningTime: '10:00-14:00',
    afternoonTime: '14:00-18:00',
    morningId: null,
    afternoonId: null
  },

  onLoad(options) {
    // 页面加载时的逻辑
  },

  onShow() {
    // 页面显示时的逻辑
  },

  // 日期选择回调
  onDateChange(e) {
    console.log('选择的日期:', e.detail);
    const selectedDate = e.detail.dateString;
    
    // 只有当日期可选时才设置selectedDate和selectedTime
    if (selectedDate) {
      this.setData({
        selectedDate: selectedDate,
        selectedTime: 'morning' // 默认选中上午
      });
      
      // 调用API获取当日时段信息
      this.getSlotsByDate(selectedDate);
    } else {
      // 如果日期不可选，清空选择状态
      this.setData({
        selectedDate: null,
        selectedTime: ''
      });
    }
  },

  // 格式化日期
  formatDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  },

  // 调用API获取指定日期的时段信息
  getSlotsByDate(dateString) {
    console.log('调用API获取时段信息，日期:', dateString);
    
    museumApi.getSlotsByDate(dateString)
      .then(res => {
        console.log('API返回数据:', res);
        if (res) {
          this.updateAvailability(res);
        } else {
          // API调用失败，使用默认值
          this.setData({
            morningAvailability: '余票充足',
            afternoonAvailability: '余票充足'
          });
        }
      })
      .catch(error => {
        console.error('API调用失败:', error);
        // 使用默认值
        this.setData({
          morningAvailability: '余票充足',
          afternoonAvailability: '余票充足'
        });
      });
  },

  // 更新余票显示
  updateAvailability(data) {
    // 根据API返回的数据更新余票显示
    // 只取前两项数据，第一项为上午，第二项为下午
    let morningText = '余票充足';
    let afternoonText = '余票充足';
    let morningTime = '10:00-14:00';
    let afternoonTime = '14:00-18:00';
    let morningId = null;
    let afternoonId = null;
    console.log('更新余票显示，数据:', data);
    if (data && Array.isArray(data) && data.length >= 2) {
      // 第一项为上午
      const morningData = data[0];
      morningText = morningData.pcs > 0 ? `余票${morningData.pcs}张` : '已约满';
      morningTime = morningData.time;
      morningId = morningData.id;
      
      // 第二项为下午
      const afternoonData = data[1];
      afternoonText = afternoonData.pcs > 0 ? `余票${afternoonData.pcs}张` : '已约满';
      afternoonTime = afternoonData.time;
      afternoonId = afternoonData.id;
    }
    
    this.setData({
      morningAvailability: morningText,
      afternoonAvailability: afternoonText,
      morningTime: morningTime,
      afternoonTime: afternoonTime,
      morningId: morningId,
      afternoonId: afternoonId
    });
  },

  // 选择时间段
  selectTime(e) {
    const time = e.currentTarget.dataset.time;
    this.setData({
      selectedTime: time
    });
    console.log('选择的时间段:', time);
  },

  // 下一步
  goNext() {
    if (this.data.selectedTime && this.data.selectedDate) {
      console.log('选择的时间段:', this.data.selectedTime);
      console.log('选择的日期:', this.data.selectedDate);
      
      // 根据选择的时间段获取对应的id和时间
      let appointmentSlotsId = null;
      let actualTime = '';
      
      if (this.data.selectedTime === 'morning') {
        appointmentSlotsId = this.data.morningId;
        actualTime = this.data.morningTime;
      } else if (this.data.selectedTime === 'afternoon') {
        appointmentSlotsId = this.data.afternoonId;
        actualTime = this.data.afternoonTime;
      }
      
      wx.navigateTo({
        url: `/pages/index/visit-people/visit-people?date=${this.data.selectedDate}&time=${actualTime}&appointmentSlotsId=${appointmentSlotsId}&type=1`
      });
    } else {
      wx.showToast({
        title: '请选择日期和时间段',
        icon: 'none'
      });
    }
  },

  onShareAppMessage() {
    return {
      title: '克拉玛依博物馆 - 开始预约',
      path: '/pages/index/start-preview/start-preview'
    };
  }
});