搜索到
1
篇与
的结果
-
uniapp中订单列表如何进行批量倒计时？ 可以先创建一个插件<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 }, //剩下的可以根据自己的逻辑进行处理啦
