vue实现影院

Vue 实现影院功能

影院页面布局

使用 Vue 组件化开发影院页面，通常包括影院列表、筛选条件、地图定位等功能模块。通过 v-for 渲染影院列表数据，结合 v-if 或 v-show 控制筛选条件的显示。

<template>
  <div class="cinema-container">
    <div class="filter-bar">
      <button @click="toggleFilter">筛选</button>
      <div v-show="showFilter" class="filter-options">
        <input type="text" v-model="searchQuery" placeholder="搜索影院">
        <select v-model="selectedRegion">
          <option v-for="region in regions" :key="region">{{ region }}</option>
        </select>
      </div>
    </div>
    <ul class="cinema-list">
      <li v-for="cinema in filteredCinemas" :key="cinema.id">
        <h3>{{ cinema.name }}</h3>
        <p>{{ cinema.address }}</p>
      </li>
    </ul>
  </div>
</template>

数据获取与处理

通过 Vue 的 data 和 methods 定义影院数据和筛选逻辑。使用 computed 属性实现动态过滤影院列表。

<script>
export default {
  data() {
    return {
      cinemas: [],
      searchQuery: '',
      selectedRegion: '全部',
      regions: ['全部', '朝阳区', '海淀区', '东城区'],
      showFilter: false
    }
  },
  computed: {
    filteredCinemas() {
      return this.cinemas.filter(cinema => {
        const matchesSearch = cinema.name.includes(this.searchQuery) || 
                             cinema.address.includes(this.searchQuery);
        const matchesRegion = this.selectedRegion === '全部' || 
                             cinema.region === this.selectedRegion;
        return matchesSearch && matchesRegion;
      });
    }
  },
  methods: {
    toggleFilter() {
      this.showFilter = !this.showFilter;
    },
    fetchCinemas() {
      // 模拟 API 请求
      this.cinemas = [
        { id: 1, name: '万达影城', address: '朝阳区建国路93号', region: '朝阳区' },
        { id: 2, name: 'UME国际影城', address: '海淀区中关村大街19号', region: '海淀区' }
      ];
    }
  },
  created() {
    this.fetchCinemas();
  }
}
</script>

影院详情页

通过 Vue Router 实现影院详情页的跳转，使用动态路由参数传递影院 ID。

// router.js
{
  path: '/cinema/:id',
  name: 'CinemaDetail',
  component: () => import('./views/CinemaDetail.vue')
}

<!-- CinemaDetail.vue -->
<template>
  <div v-if="cinema">
    <h1>{{ cinema.name }}</h1>
    <p>{{ cinema.address }}</p>
    <!-- 影院座位选择等更多功能 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      cinema: null
    }
  },
  created() {
    const cinemaId = this.$route.params.id;
    this.fetchCinema(cinemaId);
  },
  methods: {
    fetchCinema(id) {
      // 根据 ID 获取影院详情
    }
  }
}
</script>

影院座位选择

实现影院座位选择功能，通常使用 SVG 或 Canvas 绘制座位图，并通过 Vue 管理选座状态。

<template>
  <div class="seat-map">
    <div 
      v-for="seat in seats" 
      :key="seat.id" 
      :class="['seat', { 'selected': seat.selected }]"
      @click="selectSeat(seat)"
    >
      {{ seat.number }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seats: [
        { id: 1, number: 'A1', selected: false },
        { id: 2, number: 'A2', selected: false }
      ]
    }
  },
  methods: {
    selectSeat(seat) {
      seat.selected = !seat.selected;
    }
  }
}
</script>

样式与交互优化

使用 CSS 或 UI 框架（如 Element UI、Vant）美化影院页面，添加加载状态、错误处理等交互细节。

.cinema-list {
  list-style: none;
  padding: 0;
}
.cinema-list li {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.seat {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
  background: #ccc;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.seat.selected {
  background: #42b983;
}