第一份工作总结-hooks全局钩子函数

背景介绍

订单流程中有支付订单和订单收货时间的倒计时，在其他页面也需要用到，因此将其封装成钩子函数全局使用，减少代码冗余。

代码

后端同学给支付的截止时间或者收货的截止时间，通过计算截止时间与现在的时间来得显示超时还是倒计时，不超时有两种情况，假如产品给定24小时才显示倒计时，那不超时的时间在24小时内就显示倒计时，反之不显示。

import { ref } from 'vue';

// 用来做倒计时
export default function useTimer(time: string) {
  const timeRef = ref('');

  const checkTime = (i: number | string) => {
    if (i < 10) {
      i = '0' + i;
    }
    return i;
  };

  // 倒计时方法
  const timeDown = (endTime: string) => {
    const interval = setInterval(() => {
      const time = Number(endTime);
      const now = new Date();
      const diffTime = Math.floor((time - now.getTime()) / 1000);
      const diffDays = Math.floor(diffTime / 60 / 60 / 24);
      if (diffDays > 1) {
        timeRef.value = '';
      } else if (diffTime > 0) {
        const hours = Math.floor(diffTime / 60 / 60) % 24;
        const minutes = Math.floor((diffTime / 60) % 60);
        const seconds = diffTime % 60;
        timeRef.value = `[剩余:${checkTime(hours)}:${checkTime(minutes)}:${checkTime(seconds)}]`;
      } else {
        timeRef.value = '已超时';
        clearInterval(interval);
      }
    }, 1000);
  };

  // 调用hooks自动开始倒计时
  timeDown(time);

  return {
    timeRef,
  };
}

1. checkTime函数
   用来处理时分秒为个位数时在前面加0；
2. timeDown函数
   用来做倒计时，首先得到截止时间与现在时间的差值，通过差值去计算，然后根据结算结果显示对应的值

引入hooks钩子函数

import useTimer from '../../hooks/use-timer';
const showPayFinalTime = computed(() => useTimer(orderDetailData.value.payFinalTime).timeRef);
DOM：<span>{{showPayFinalTime}}<span/>

这里用了computed，去计算倒计时结果