vue实现购票
Vue 实现购票功能
项目结构设计
- 使用 Vue CLI 创建项目
- 采用 Vuex 管理状态（如座位选择、票价计算）
- 使用 Vue Router 实现页面导航
核心功能实现
座位选择组件
<template>
<div class="seat-map">
<div v-for="(row, rowIndex) in seats" :key="rowIndex" class="seat-row">
<div
v-for="(seat, colIndex) in row"
:key="colIndex"
:class="['seat', seat.status]"
@click="selectSeat(rowIndex, colIndex)"
>
{{ seat.number }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
seats: [
[{number: 'A1', status: 'available'}, ...],
// 更多座位数据
]
}
},
methods: {
selectSeat(row, col) {
if(this.seats[row][col].status === 'available') {
this.$store.commit('addSelectedSeat', this.seats[row][col])
this.seats[row][col].status = 'selected'
}
}
}
}
</script>购物车组件
<template>
<div class="cart">
<h3>已选座位</h3>
<ul>
<li v-for="(seat, index) in selectedSeats" :key="index">
{{ seat.number }} - ¥{{ seat.price }}
<button @click="removeSeat(index)">移除</button>
</li>
</ul>
<div class="total">总计: ¥{{ totalPrice }}</div>
<button @click="checkout">结算</button>
</div>
</template>
<script>
export default {
computed: {
selectedSeats() {
return this.$store.state.selectedSeats
},
totalPrice() {
return this.selectedSeats.reduce((sum, seat) => sum + seat.price, 0)
}
},
methods: {
removeSeat(index) {
this.$store.commit('removeSelectedSeat', index)
},
checkout() {
this.$router.push('/payment')
}
}
}
</script>状态管理（Vuex）
// store.js
export default new Vuex.Store({
state: {
selectedSeats: []
},
mutations: {
addSelectedSeat(state, seat) {
state.selectedSeats.push(seat)
},
removeSelectedSeat(state, index) {
state.selectedSeats.splice(index, 1)
},
clearCart(state) {
state.selectedSeats = []
}
}
})支付流程实现
支付页面组件
<template>
<div class="payment">
<h2>支付信息</h2>
<form @submit.prevent="submitPayment">
<input type="text" v-model="cardNumber" placeholder="信用卡号">
<input type="text" v-model="expiry" placeholder="有效期">
<input type="text" v-model="cvv" placeholder="CVV">
<button type="submit">确认支付</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
cardNumber: '',
expiry: '',
cvv: ''
}
},
methods: {
submitPayment() {
// 调用API处理支付
this.$store.dispatch('processPayment', {
seats: this.$store.state.selectedSeats,
paymentInfo: {
cardNumber: this.cardNumber,
expiry: this.expiry,
cvv: this.cvv
}
}).then(() => {
this.$router.push('/confirmation')
})
}
}
}
</script>响应式设计要点
- 使用 Flexbox/Grid 布局确保座位图在不同设备上正常显示
- 添加媒体查询调整小屏幕下的布局
- 为触摸设备优化点击区域大小
性能优化建议
- 虚拟滚动处理大量座位渲染
- 懒加载非首屏组件
- 使用 keep-alive 缓存常用组件
安全注意事项
- 支付信息通过 HTTPS 传输
- 敏感数据不存储在客户端
- 实现 CSRF 防护
这个实现包含了购票系统的主要功能模块，可根据实际需求扩展更多特性如优惠券、座位推荐等功能。
