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缓存查询结果页面
- 分页加载车次列表数据
- 防抖处理搜索框输入事件
- 路由懒加载组件
典型交互流程
- 用户输入出发地/目的地和日期
- 系统返回可预订车次列表
- 用户选择具体车次和座位
- 填写乘客身份信息
- 确认订单并完成支付
- 生成电子票据（PDF/二维码）
安全注意事项
- 敏感字段如身份证号需前端加密传输
- 支付环节应接入第三方安全SDK
- 实施CSRF防护措施
- 关键业务操作需增加验证码校验
移动端适配方案
- 采用vw/vh单位布局
- 关键按钮使用fixed定位
- 增加手势滑动操作支持
- 集成微信/支付宝SDK实现快捷支付
