电影排片系统: 播放厅、时段、时间、价格选择优化

电影排片系统优化: 顺序改变、异步校验

1. 顺序改变：播放厅 -> 时段 -> 时间 -> 价格

电影排片系统中，通常需要选择播放厅、时段、时间和价格。为了提升用户体验，建议将选择顺序调整为：播放厅 -> 时段 -> 时间 -> 价格。这种顺序更符合用户自然的选择逻辑，也方便后续的异步校验。

// 假设存在以下数据
const halls = ['厅A', '厅B', '厅C']; // 播放厅
const timeSlots = ['上午', '下午', '晚上']; // 时段
const times = ['10:00', '12:00', '14:00', '16:00', '18:00', '20:00']; // 时间
const prices = [30, 40, 50]; // 价格

// 播放厅下拉框
const hallSelect = document.getElementById('hall-select');
for (let hall of halls) {
  const option = document.createElement('option');
  option.value = hall;
  option.innerText = hall;
  hallSelect.appendChild(option);
}

// 时段下拉框
const timeSlotSelect = document.getElementById('time-slot-select');
for (let timeSlot of timeSlots) {
  const option = document.createElement('option');
  option.value = timeSlot;
  option.innerText = timeSlot;
  timeSlotSelect.appendChild(option);
}

// 时间下拉框
const timeSelect = document.getElementById('time-select');
for (let time of times) {
  const option = document.createElement('option');
  option.value = time;
  option.innerText = time;
  timeSelect.appendChild(option);
}

// 价格下拉框
const priceSelect = document.getElementById('price-select');
for (let price of prices) {
  const option = document.createElement('option');
  option.value = price;
  option.innerText = price;
  priceSelect.appendChild(option);
}

2. 异步校验：当时段失去焦点的时候发送 AJAX 请求验证当前厅的当前时间的当前时段是否可以排片（排片规则：一个厅的电影结束 10 分钟后才可以安排下一场电影的演出）

为了确保排片时段的有效性，需要进行异步校验。当用户选择完时段后，系统会发送 AJAX 请求验证当前厅的当前时间的当前时段是否可以排片。排片规则可以根据实际情况进行调整。

const timeSlotSelect = document.getElementById('time-slot-select');
const hallSelect = document.getElementById('hall-select');

timeSlotSelect.addEventListener('blur', function() {
  const hall = hallSelect.value;
  const timeSlot = timeSlotSelect.value;

  // 发送 AJAX 请求验证是否可以排片
  validateTimeSlot(hall, timeSlot)
    .then((canSchedule) => {
      if (canSchedule) {
        console.log('可以排片');
      } else {
        console.log('不可以排片');
      }
    })
    .catch((error) => {
      console.error(error);
    });
});

function validateTimeSlot(hall, timeSlot) {
  return new Promise((resolve, reject) => {
    // 模拟 AJAX 请求
    setTimeout(() => {
      // 假设电影结束时间为当前时间+10分钟
      const endTime = new Date();
      endTime.setMinutes(endTime.getMinutes() + 10);

      // 假设当前时间
      const currentTime = new Date();

      if (currentTime > endTime) {
        resolve(true); // 可以排片
      } else {
        resolve(false); // 不可以排片
      }
    }, 1000);
  });
}

以上是一个简单的示例，根据实际情况进行相应的修改和调整。