vue 订单列表 倒计时

你可以使用 Vue.js 的计算属性来实现倒计时。具体步骤如下：

1. 在订单列表中，为每个订单添加一个订单创建时间的字段（比如 `createTime`），用于计算订单的剩余时间。
2. 在 Vue 实例中，定义一个计算属性 `remainingTime`，用于计算订单的剩余时间。
3. 在模板中，使用 `v-for` 指令遍历订单列表，并在每个订单中显示剩余时间。

下面是一个简单的实现示例：

<template>
  <div>
    <div v-for="order in orders" :key="order.id">
      订单编号：{{ order.id }}
      剩余时间：{{ remainingTime(order) }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        {
          id: 1,
          createTime: new Date('2021-01-01 10:00:00')
        },
        {
          id: 2,
          createTime: new Date('2021-01-02 12:00:00')
        },
        {
          id: 3,
          createTime: new Date('2021-01-03 14:00:00')
        }
      ]
    }
  },
  computed: {
    remainingTime(order) {
      const now = new Date()
      const createTime = new Date(order.createTime)
      const diff = createTime.getTime() + 30 * 60 * 1000 - now.getTime() // 订单剩余时间为30分钟
      const minutes = Math.floor(diff / 1000 / 60) // 剩余分钟数
      const seconds = Math.floor((diff / 1000) % 60) // 剩余秒数
      return `${minutes} 分 ${seconds} 秒`
    }
  }
}
</script>

在上面的示例中，我们使用 `new Date()` 创建了订单的创建时间和当前时间的日期对象。然后，计算它们之间的时间差，得到订单的剩余时间。最后，将剩余时间格式化为字符串，用于显示在模板中。

需要注意的是，上面的示例中，我们假设订单的剩余时间为30分钟。如果你需要设置不同的剩余时间，可以根据实际情况进行修改。