vue实现订票

Vue实现订票系统

核心功能模块设计

• 车次/航班查询：使用axios调用后端API获取数据，结合v-for渲染列表
• 座位选择：通过二维数组模拟座位状态，点击切换选中状态
• 乘客信息表单：v-model绑定表单数据，自定义校验规则
• 订单确认：计算属性汇总订单总价，使用Vuex管理订单状态

关键技术实现

// 座位选择组件示例
<template>
  <div class="seat-map">
    <div v-for="(row, i) in seats" :key="i" class="seat-row">
      <div 
        v-for="(seat, j) in row" 
        :key="j"
        :class="['seat', { 'selected': seat.selected, 'occupied': seat.occupied }]"
        @click="toggleSeat(i, j)"
      >
        {{ seat.number }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seats: [
        [
          { number: '1A', selected: false, occupied: false },
          { number: '1B', selected: false, occupied: true }
        ]
      ]
    }
  },
  methods: {
    toggleSeat(row, col) {
      if (!this.seats[row][col].occupied) {
        this.$set(this.seats[row], col, {
          ...this.seats[row][col],
          selected: !this.seats[row][col].selected
        })
      }
    }
  }
}
</script>

状态管理方案

• Vuex存储结构建议：

  state: {
  selectedDeparture: null,
  selectedReturn: null,
  passengers: [],
  contactInfo: {}
  },
  mutations: {
  ADD_PASSENGER(state, payload) {
    state.passengers.push(payload)
  }
  }

性能优化要点

• 使用keep-alive缓存查询结果页面
• 分页加载车次列表数据
• 防抖处理搜索框输入事件
• 路由懒加载组件

典型交互流程

1. 用户输入出发地/目的地和日期
2. 系统返回可预订车次列表
3. 用户选择具体车次和座位
4. 填写乘客身份信息
5. 确认订单并完成支付
6. 生成电子票据（PDF/二维码）

安全注意事项

• 敏感字段如身份证号需前端加密传输
• 支付环节应接入第三方安全SDK
• 实施CSRF防护措施
• 关键业务操作需增加验证码校验

移动端适配方案

• 采用vw/vh单位布局
• 关键按钮使用fixed定位
• 增加手势滑动操作支持
• 集成微信/支付宝SDK实现快捷支付