vue实现影院购票

Vue实现影院购票功能

项目结构设计

1. 创建Vue项目并安装必要依赖（vue-router、axios、vuex）
2. 划分模块：首页/影片列表/影院选择/座位选择/订单确认/支付页面
3. 使用Vuex管理全局状态（用户信息、选座数据、订单信息）

影院数据获取

// API接口示例
getCinemaList(cityId) {
  return axios.get('/api/cinema/list', { params: { cityId } })
}
getScreenings(movieId, cinemaId) {
  return axios.get('/api/screening/list', { params: { movieId, cinemaId } })
}

座位选择组件

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

状态管理设计

// store/modules/ticket.js
const state = {
  selectedSeats: [],
  currentScreening: null,
  orderInfo: {
    tickets: [],
    totalPrice: 0
  }
}

const mutations = {
  ADD_SEAT(state, seat) {
    state.selectedSeats.push(seat)
    state.orderInfo.tickets.push({
      seatId: seat.id,
      price: seat.price
    })
    state.orderInfo.totalPrice += seat.price
  }
}

订单生成流程

1. 用户选择座位后生成临时订单
2. 调用创建订单接口锁定座位

   createOrder(orderData) {
   return axios.post('/api/order/create', orderData)
   }

3. 跳转支付页面完成支付流程
4. 支付成功后更新订单状态

响应式布局处理

/* 移动端适配 */
.seat-map {
  overflow-x: auto;
  white-space: nowrap;
}
.seat {
  width: 30px;
  height: 30px;
  margin: 2px;
  display: inline-block;
}

数据持久化处理

1. 使用localStorage缓存城市选择和用户偏好
2. 订单数据在页面刷新时从Vuex恢复
3. 支付超时处理机制（15分钟内未支付自动释放座位）

性能优化

1. 座位数据分页加载（大型影厅场景）
2. 使用虚拟滚动渲染长列表（影片列表页）
3. 防抖处理座位选择事件

   methods: {
   selectSeat: _.debounce(function(row, col) {
    // 座位选择逻辑
   }, 300)
   }

安全措施

1. 敏感接口添加JWT验证
2. 支付金额服务器端二次校验
3. 订单状态变更使用WebSocket实时更新

完整购票流程

1. 用户选择影片和影院
2. 进入场次选择页面
3. 可视化座位图选择位置
4. 确认订单信息并支付
5. 生成电子票二维码
6. 订单完成通知

实现时需注意影院业务的特殊性：座位实时锁定机制、不同时段价格差异、特殊座位标记等功能需要与后端密切配合。