当前位置：首页 > VUE

vue实现影院选座

2026-02-24 15:47:43VUE

Vue实现影院选座功能

影院选座功能通常需要结合UI交互、数据管理和状态同步。以下是一个基于Vue的实现方案：

数据结构设计

选座功能的核心是座位布局数据，建议使用二维数组表示：

data() {
  return {
    seats: [
      [{id: 'A1', status: 'available'}, {id: 'A2', status: 'available'}],
      [{id: 'B1', status: 'unavailable'}, {id: 'B2', status: 'available'}]
    ],
    selectedSeats: []
  }
}

座位渲染组件

创建可复用的座位组件，根据状态显示不同样式：

<template>
  <div 
    class="seat"
    :class="[seat.status, {selected: isSelected}]"
    @click="handleClick">
    {{ seat.id }}
  </div>
</template>

<script>
export default {
  props: ['seat', 'selectedSeats'],
  computed: {
    isSelected() {
      return this.selectedSeats.includes(this.seat.id)
    }
  },
  methods: {
    handleClick() {
      if (this.seat.status !== 'unavailable') {
        this.$emit('select', this.seat.id)
      }
    }
  }
}
</script>

选座逻辑实现

在父组件中处理座位选择和取消选择：

methods: {
  toggleSeat(seatId) {
    const index = this.selectedSeats.indexOf(seatId)
    if (index > -1) {
      this.selectedSeats.splice(index, 1)
    } else {
      this.selectedSeats.push(seatId)
    }
  }
}

屏幕和座位布局

完整的影院布局应包括屏幕和座位区：

<template>
  <div class="cinema">
    <div class="screen">荧幕</div>
    <div class="seats-container">
      <div v-for="(row, rowIndex) in seats" :key="rowIndex" class="row">
        <div class="row-label">{{ String.fromCharCode(65 + rowIndex) }}</div>
        <Seat 
          v-for="seat in row" 
          :key="seat.id"
          :seat="seat"
          :selected-seats="selectedSeats"
          @select="toggleSeat"/>
      </div>
    </div>
  </div>
</template>

样式设计

CSS样式应明确区分不同状态的座位：

.seat {
  width: 30px;
  height: 30px;
  margin: 5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
}

.available {
  background-color: #e0e0e0;
}

.unavailable {
  background-color: #f44336;
  cursor: not-allowed;
}

.selected {
  background-color: #4caf50;
}

.screen {
  width: 80%;
  height: 20px;
  margin: 20px auto;
  background: #2196f3;
  color: white;
  text-align: center;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row-label {
  width: 20px;
  margin-right: 10px;
}

数据持久化

与后端API交互保存选座结果：

vue实现影院选座

methods: {
  async confirmSelection() {
    try {
      const response = await axios.post('/api/reserve', {
        seats: this.selectedSeats
      })
      // 处理成功响应
    } catch (error) {
      // 处理错误
    }
  }
}