vue.js 写一个购物车倒计时清除未支付订单

你可以使用 Vue.js 的计时器和生命周期方法实现购物车倒计时清除未支付订单的功能。以下是一个简单的实现示例：

1. 首先，需要在 `data` 中定义一个变量 `countdown` 来保存倒计时的秒数，以及一个变量 `timer` 来保存计时器的 ID：

data() {
  return {
    countdown: 300, // 倒计时 5 分钟
    timer: null, // 计时器 ID
    orders: [] // 存放订单信息的数组
  }
}

2. 在组件的 `mounted` 生命周期中启动计时器：

mounted() {
  this.timer = setInterval(() => {
    this.countdown--
    if (this.countdown === 0) {
      clearInterval(this.timer)
      this.clearUnpaidOrders()
    }
  }, 1000)
}

3. 在 `clearUnpaidOrders` 方法中实现清除未支付订单的逻辑，并在计时器计时结束时调用该方法：

methods: {
  clearUnpaidOrders() {
    this.orders = this.orders.filter(order => !order.paid)
    this.countdown = 300 // 重置倒计时
  }
}

这样，当用户添加商品到购物车后，倒计时会开始计时，如果用户在 5 分钟内没有完成支付，未支付的订单将被自动清除。