vue实现订票

Vue 实现订票系统核心步骤

数据绑定与表单处理 使用 v-model 实现表单双向绑定，例如车次选择、日期、座位类型等表单控件。通过 Vue 的响应式特性自动同步用户输入与数据模型。

<select v-model="selectedTrain">
  <option v-for="train in trains" :value="train.id">{{ train.name }}</option>
</select>
<input type="date" v-model="departureDate">

状态管理 复杂场景建议采用 Vuex 或 Pinia 管理全局状态，如车次列表、订单信息、用户登录状态等。将异步请求封装在 actions 中统一处理。

// Pinia 示例
export const useTicketStore = defineStore('ticket', {
  state: () => ({
    availableSeats: []
  }),
  actions: {
    async fetchSeats(trainId) {
      this.availableSeats = await api.getSeats(trainId)
    }
  }
})

实时座位可视化 通过动态 CSS 类或 SVG 渲染座位图，使用计算属性过滤已售座位。点击座位时触发状态变更：

<div class="seat-map">
  <div 
    v-for="seat in seats"
    :class="{ 'occupied': seat.status === 'booked' }"
    @click="selectSeat(seat)"
  >{{ seat.number }}</div>
</div>

订单提交验证 结合 Vue 的校验插件如 VeeValidate 处理表单验证，提交时调用 API 接口：

const submitOrder = async () => {
  try {
    await api.createOrder({
      train: selectedTrain.value,
      seats: selectedSeats.value
    })
    router.push('/payment')
  } catch (error) {
    showError('订单提交失败')
  }
}

关键优化方向

性能优化 对大型座位列表采用虚拟滚动技术，使用 vue-virtual-scroller 组件避免渲染所有 DOM 节点。通过防抖处理频繁的座位状态查询请求。

移动端适配 实现响应式布局，针对触摸事件优化交互。使用 @touchstart 替代部分 @click 事件，增加点击区域尺寸。

本地缓存 采用 localStorage 缓存车次查询结果，设置有效期减少重复请求。对未完成的订单实施草稿保存功能。

支付流程 集成第三方支付 SDK 时，通过动态组件加载支付方式。使用 Vue Router 的导航守卫保护支付路由：

router.beforeEach((to) => {
  if (to.path === '/payment' && !store.hasOrder) {
    return '/book'
  }
})