子沫
uniapp中订单列表如何进行批量倒计时？
06/25
本文最后更新于2024年06月25日，已超过148天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！
可以先创建一个插件
<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
},
//剩下的可以根据自己的逻辑进行处理啦
版权属于：
Strjson博客-专注于各种精品源码、精品软件、技术教程分享、黑客技术、破解教程（爱你在心口难开、没事写一写）
本文链接：
https://jpgke.com/vue/463.html（转载时请注明本文出处及文章链接）
作品采用：
