TypechoJoeTheme

Strjson博客-专注于各种精品源码、精品软件、技术教程分享、黑客技术、破解教程(爱你在心口难开、没事写一写)

统计
Vue

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

子沫博主
2024-06-25
/
0 评论
/
194 阅读
/
87 个字
/
百度已收录
06/25
本文最后更新于2024年06月25日,已超过106天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
可以先创建一个插件
<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
},
//剩下的可以根据自己的逻辑进行处理啦
列表uniappvue
朗读
赞(1)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

Strjson博客-专注于各种精品源码、精品软件、技术教程分享、黑客技术、破解教程(爱你在心口难开、没事写一写)

本文链接:

https://jpgke.com/vue/463.html(转载时请注明本文出处及文章链接)

评论 (0)

互动读者

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

360实时热点

  • 获取失败!

标签云

最新回复

  1. 试试看闲逛
    2021-12-14
  2. 555闲逛
    2021-12-07
  3. def闲逛
    2021-11-28
  4. 紫夜闲逛
    2021-11-28
  5. 666闲逛
    2021-10-05