当前位置：首页 > VUE

利用vue实现购票

2026-01-14 07:58:12VUE

使用 Vue 实现购票功能

设计数据结构

购票功能通常需要管理票务信息、用户选择和订单状态。以下是一个基本的数据结构示例：

data() {
  return {
    tickets: [
      { id: 1, name: '成人票', price: 100, selected: false, quantity: 0 },
      { id: 2, name: '儿童票', price: 50, selected: false, quantity: 0 }
    ],
    totalPrice: 0
  }
}

创建票务选择组件

使用v-for渲染票务选项，绑定选择状态和数量：

利用vue实现购票

<div v-for="ticket in tickets" :key="ticket.id" class="ticket-item">
  <input type="checkbox" v-model="ticket.selected">
  <span>{{ ticket.name }} - ￥{{ ticket.price }}</span>
  <input type="number" v-model="ticket.quantity" min="0" 
         :disabled="!ticket.selected">
</div>

计算总价

添加计算属性自动更新总金额：

computed: {
  calculatedTotal() {
    return this.tickets.reduce((total, ticket) => {
      return total + (ticket.selected ? ticket.price * ticket.quantity : 0)
    }, 0)
  }
}

提交订单处理

实现提交逻辑，包括验证和API调用：

利用vue实现购票

methods: {
  submitOrder() {
    const selectedTickets = this.tickets.filter(t => t.selected && t.quantity > 0)
    if (selectedTickets.length === 0) {
      alert('请至少选择一种票')
      return
    }

    // 实际项目中这里调用API
    console.log('提交订单:', {
      tickets: selectedTickets,
      total: this.calculatedTotal
    })

    // 清空选择
    this.tickets.forEach(t => {
      t.selected = false
      t.quantity = 0
    })
  }
}

添加UI反馈

在模板中显示总价和提交按钮：

<div class="summary">
  <h3>总价: ￥{{ calculatedTotal }}</h3>
  <button @click="submitOrder" :disabled="calculatedTotal === 0">提交订单</button>
</div>

样式优化

添加基础样式提升用户体验：

.ticket-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
input[type="number"] {
  width: 50px;
  margin-left: 10px;
}
.summary {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
}

这个实现包含了购票的核心功能流程，可根据实际需求扩展座位选择、优惠券、支付接口等更多功能。对于生产环境，建议添加更完善的错误处理和加载状态管理。

标签: vue