Vue打造的美团APP：影院选座妙招，方便又便捷

2024-02-16 22:23:42

前言

随着互联网的迅猛发展，在线订票平台日益普及。美团APP作为国内知名生活服务平台，其影院订票功能备受用户青睐。本文将以Vue.js作为前端框架，详细介绍如何实现美团APP的影院选座功能，包括连续的推荐选座、座位状态管理、票价计算等功能。通过本教程，您将能够掌握Vue.js中二维数组的处理技巧、组件通信技术以及状态管理模式，从而构建出更加强大和用户友好的影院选座系统。

环境搭建

首先，我们需要搭建好Vue.js开发环境。您可以通过以下步骤快速搭建：

安装Node.js和npm。
创建一个新的Vue项目。
安装必要的Vue插件和库。

完成环境搭建后，就可以开始编写代码了。

创建用户界面

第一步，我们需要创建一个直观的用户界面。您可以参考美团APP的影院选座界面，设计出符合自身需求的UI。这里，我们采用Vue组件的方式来构建UI。

<template>
  <div class="seat-map">
    <div class="screen">银幕</div>
    <div class="seats-container">
      <seat v-for="seat in seats" :seat="seat" :key="seat.id"></seat>
    </div>
    <div class="legend">
      <div class="legend-item">
        <div class="seat available"></div>
        <span>可选</span>
      </div>
      <div class="legend-item">
        <div class="seat selected"></div>
        <span>已选</span>
      </div>
      <div class="legend-item">
        <div class="seat unavailable"></div>
        <span>不可选</span>
      </div>
    </div>
  </div>
</template>

<script>
import Seat from './Seat.vue';

export default {
  components: { Seat },
  data() {
    return {
      seats: [
        { id: 1, type: 'available' },
        { id: 2, type: 'available' },
        { id: 3, type: 'available' },
        { id: 4, type: 'available' },
        { id: 5, type: 'available' },
        { id: 6, type: 'available' },
        { id: 7, type: 'available' },
        { id: 8, type: 'available' },
        { id: 9, type: 'available' },
        { id: 10, type: 'available' },
      ],
    };
  },
};
</script>

<style>
.seat-map {
  width: 100%;
  height: 100%;
}

.screen {
  width: 100%;
  height: 50px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

.seats-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100% - 50px);
}

.seat {
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

.seat.selected {
  background-color: #000;
  color: #fff;
}

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

.legend {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 50px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-item span {
  margin-left: 5px;
}
</style>

实现连续的推荐选座功能

接下来，我们需要实现连续的推荐选座功能。我们可以通过Vuex来管理选座状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    selectedSeats: [],
  },
  mutations: {
    addSeat(state, seat) {
      state.selectedSeats.push(seat);
    },
    removeSeat(state, seat) {
      const index = state.selectedSeats.indexOf(seat);
      if (index > -1) {
        state.selectedSeats.splice(index, 1);
      }
    },
  },
  getters: {
    getSelectedSeats: state => state.selectedSeats,
  },
});

export default store;

在组件中，我们可以通过Vuex来获取和修改选座状态。

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['selectedSeats']),
  },
  methods: {
    ...mapMutations(['addSeat', 'removeSeat']),
    selectSeat(seat) {
      if (this.selectedSeats.length >= 5) {
        alert('最多只能选择5个座位');
        return;
      }
      if (seat.type === 'available') {
        this.addSeat(seat);
      } else if (seat.type === 'selected') {
        this.removeSeat(seat);
      }
    },
  },
};
</script>