订单支付倒计时效果逻辑函数封装

一、实现效果

                    

二、实现代码 

1.安装插件

npm i dayjs

2.封装倒计时逻辑函数

// 封装倒计时逻辑函数
import { computed, onUnmounted, ref } from 'vue'
import dayjs from 'dayjs'
export const useCountDown = () => {
  // 1. 响应式的数据
  let timer = null
  const time = ref(0)
  // 格式化时间 为 xx分xx秒
  const formatTime = computed(() => dayjs.unix(time.value).format('mm分ss秒'))
  // 2. 开启倒计时的函数
  const start = (currentTime) => {
    // 开始倒计时的逻辑
    // 核心逻辑的编写：每隔1s就减一
    time.value = currentTime
    timer = setInterval(() => {
      time.value--
    }, 1000)
  }
  // 组件销毁时清除定时器
  onUnmounted(() => {
    timer && clearInterval(timer)
  })
  return {
    formatTime,
    start
  }
}

3.组件中使用倒计时逻辑函数 

import { useCountDown } from '@/composables/useCountDown';
const { formatTime, start } = useCountDown();
// 获取订单数据
const route = useRoute()
const payInfo = ref({})
const getPayInfo = async () => {
  const res = await getOrderAPI(route.query.id)
  payInfo.value = res.result
  //初始化倒计时秒数
  start(res.result.countdown)
}
onMounted(() => getPayInfo())

  <div class="tip">
            <p>订单提交成功！请尽快完成支付。</p>
            <p>支付还剩 <span>{
   
   { formatTime }}</span>, 超时后将取消订单</p>
  </div>