当前位置：首页 > VUE

vue实现商品秒杀

2026-02-19 05:27:22VUE

Vue 实现商品秒杀功能

前端页面设计

使用 Vue 的组件化开发方式，构建秒杀商品展示页面。通过 v-for 循环渲染商品列表，展示商品图片、名称、原价、秒杀价和倒计时。

vue实现商品秒杀

<template>
  <div class="seckill-container">
    <div v-for="item in seckillList" :key="item.id" class="seckill-item">
      <img :src="item.image" alt="商品图片">
      <h3>{{ item.name }}</h3>
      <p class="original-price">原价: ¥{{ item.originalPrice }}</p>
      <p class="seckill-price">秒杀价: ¥{{ item.seckillPrice }}</p>
      <count-down :end-time="item.endTime" @time-up="handleTimeUp(item.id)"></count-down>
      <button @click="handleSeckill(item.id)" :disabled="item.isDisabled">立即秒杀</button>
    </div>
  </div>
</template>

倒计时组件

创建一个独立的倒计时组件，实时显示剩余时间，并在时间结束时触发回调。

vue实现商品秒杀

// CountDown.vue
export default {
  props: ['endTime'],
  data() {
    return {
      remainingTime: 0
    }
  },
  mounted() {
    this.updateRemainingTime()
    this.timer = setInterval(this.updateRemainingTime, 1000)
  },
  methods: {
    updateRemainingTime() {
      const now = new Date().getTime()
      this.remainingTime = Math.max(0, this.endTime - now)
      if (this.remainingTime <= 0) {
        clearInterval(this.timer)
        this.$emit('time-up')
      }
    }
  },
  computed: {
    formattedTime() {
      const hours = Math.floor(this.remainingTime / (1000 * 60 * 60))
      const minutes = Math.floor((this.remainingTime % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((this.remainingTime % (1000 * 60)) / 1000)
      return `${hours}:${minutes}:${seconds}`
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

秒杀逻辑实现

在前端实现基本的防重复提交和状态管理，通过 API 与后端交互。

export default {
  data() {
    return {
      seckillList: [],
      isSubmitting: false
    }
  },
  created() {
    this.fetchSeckillList()
  },
  methods: {
    async fetchSeckillList() {
      const response = await axios.get('/api/seckill/list')
      this.seckillList = response.data.map(item => ({
        ...item,
        isDisabled: false
      }))
    },
    async handleSeckill(productId) {
      if (this.isSubmitting) return
      this.isSubmitting = true

      try {
        const response = await axios.post('/api/seckill/buy', { productId })
        if (response.data.success) {
          this.$message.success('秒杀成功！')
          this.updateProductStatus(productId)
        } else {
          this.$message.error(response.data.message)
        }
      } catch (error) {
        this.$message.error('网络错误，请重试')
      } finally {
        this.isSubmitting = false
      }
    },
    updateProductStatus(productId) {
      const product = this.seckillList.find(item => item.id === productId)
      if (product) {
        product.isDisabled = true
      }
    },
    handleTimeUp(productId) {
      const product = this.seckillList.find(item => item.id === productId)
      if (product) {
        product.isDisabled = true
      }
    }
  }
}