当前位置：首页 > VUE

vue实现购票

2026-03-07 06:10:14VUE

Vue 实现购票功能

项目结构设计

使用 Vue CLI 创建项目
采用 Vuex 管理状态（如座位选择、票价计算）
使用 Vue Router 实现页面导航

核心功能实现

座位选择组件

vue实现购票

<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>

购物车组件

vue实现购票

<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>