座位预约功能怎么实现

Question

在做自习室的预约功能，怎么做简单一点
之前想的用户选时间，可是不会禁用用户选的时间，有点复杂

Answer 1

引自免费微信小程序：皆我百晓生

为了实现一个简单的座位预约功能，我们可以分为以下几个步骤：

1. 数据结构设计
2. 创建Vue组件
3. 添加事件监听
4. 禁用已预约的座位和时间

首先，我们需要创建一个数据结构来存储座位和时间信息。这里我们假设每个座位都有唯一的编号（例如：seat_0, seat_1, ...），并且有预定状态（booked: boolean）。同样，时间可以按照小时为单位，例如：[{start: '08:00', end: '09:00'}, {start: '09:00', end: '10:00'}, ...]

// data structure for seats and time slots
const seats = {
  seat_0: { booked: false },
  seat_1: { booked: false },
  // add more seats as needed...
};

const timeSlots = [
  { start: '08:00', end: '09:00' },
  { start: '09:00', end: '10:00' },
  // add more time slots as needed...
];

接下来，我们将创建一个Vue组件，用于显示座位列表和选择时间。

<!-- SeatReservation.vue -->
<template>
  <div>
    <h2>座位预约</h2>
    <div v-for="(slot, index) in timeSlots" :key="index">
      {{ slot.start }} - {{ slot.end }}
      <button
        v-for="(seat, key) in seats"
        :key="key"
        :disabled="isSeatBooked(seat, slot)"
        @click="reserveSeat(seat, slot)"
      >
        {{ key }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seats,
      timeSlots,
    };
  },
  methods: {
    isSeatBooked(seat, slot) {
      // Check if the seat is booked during the given time slot
      const bookedDuringSlot =
        this.seats[seat].booked &&
        this.seats[seat].timeStart <= slot.start &&
        this.seats[seat].timeEnd >= slot.end;
      return bookedDuringSlot;
    },
    reserveSeat(seat, slot) {
      // Update seat booking status and set time range
      this.seats[seat].booked = true;
      this.seats[seat].timeStart = slot.start;
      this.seats[seat].timeEnd = slot.end;

      // Optionally, you can also notify the server here or use Vuex to manage state globally
      // fetch('/api/book-seat', { method: 'POST', body: JSON.stringify({ seat, slot }) });
    },
  },
};
</script>

这个组件展示了所有座位和时间槽，并且当用户点击某个座位时，会调用reserveSeat方法，将座位标记为已预订并设置时间范围。同时，按钮会根据座位是否已被预订以及是否在当前时间范围内禁用。

请注意，这是一个基础版本的实现，实际应用可能还需要考虑更多因素，比如验证、错误处理、用户登录/注册、后端接口交互等。不过，对于您的需求来说，这个简单的例子应该足够了。你可以直接把SeatReservation.vue文件添加到你的项目中，然后通过<seat-reservation></seat-reservation>将其引入主模板中。