Vue

uniapp中订单列表如何进行批量倒计时?

子沫
2024-06-25 / 0 评论 / 1,142 阅读 / 正在检测是否收录...
可以先创建一个插件
<template>
  <text>
    {{ remainingTime }}
  </text>
</template>

<script>
export default {
  props: {
    endTime: {
      type: String,
      required: true
    },
    orderCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      remainingTime: ''
    }
  },
  mounted() {
    this.startCountdown()
  },
  methods: {
    startCountdown() {
      // 计算剩余支付时间
      const endTime = new Date(this.endTime).getTime()
      const now = new Date().getTime()
      const diff = endTime - now

      if (diff <= 0) {
        // 付款时间已过
        this.remainingTime = '已过期'
        this.$emit('finish',this.orderCode);
        return
      }

      // 更新显示倒计时
      const seconds = Math.floor(diff / 1000)
      const minutes = Math.floor(seconds / 60)
      const hours = Math.floor(minutes / 60)
      const days = Math.floor(hours / 24);

     // this.remainingTime = `${days}天 ${hours % 24}小时 ${minutes % 60}分钟 ${seconds % 60}秒`
      this.remainingTime = `${minutes % 60<10?`0`+(minutes % 60):minutes % 60}:${seconds % 60<10?`0`+(seconds % 60):seconds % 60}`

      // 每秒更新一次倒计时
      setTimeout(this.startCountdown, 1000)
    }
  }
}
</script>
引入插件到列表中的具体位置
//view中
<view style="color:#F4292D;font-size: 24rpx;" class="tn-flex-4 order__item__head__title tn-text-right">剩余支付时间: <countdown :orderCode="item.orderCode" :endTime="item.timeOut" @finish="orderFinish"></countdown>
</view>
//在script中
import Countdown from '@/Order/Countdown/Countdown.vue';
components: {
  Countdown
},
//剩下的可以根据自己的逻辑进行处理啦
1

评论 (0)

取消