feat(projects): 登录页面实现

src/hooks/business/index.ts

@@ -0,0 +1,4 @@
+import useCountDown from './useCountDown';
+import useSmsCode from './useSmsCode';
+
+export { useCountDown, useSmsCode };

src/hooks/business/useCountDown.ts

@@ -0,0 +1,46 @@
+import { ref, computed } from 'vue';
+
+/**
+ * 倒计时
+ * @param second - 倒计时的时间(s)
+ */
+export default function useCountDown(second: number) {
+  if (second <= 0 && second % 1 !== 0) {
+    throw Error('倒计时的时间应该为一个正整数！');
+  }
+  const counts = ref(0);
+  const isCounting = computed(() => Boolean(counts.value));
+
+  let intervalId: any;
+
+  /**
+   * 开始计时
+   * @param updateSecond - 更改初时传入的倒计时时间
+   */
+  function start(updateSecond: number = second) {
+    if (!counts.value) {
+      counts.value = updateSecond;
+      intervalId = setInterval(() => {
+        counts.value -= 1;
+        if (counts.value <= 0) {
+          clearInterval(intervalId);
+        }
+      }, 1000);
+    }
+  }
+
+  /**
+   * 停止计时
+   */
+  function stop() {
+    intervalId = clearInterval(intervalId);
+    counts.value = 0;
+  }
+
+  return {
+    counts,
+    isCounting,
+    start,
+    stop
+  };
+}

src/hooks/business/useSmsCode.ts

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import useCountDown from './useCountDown';
+
+export default function useSmsCode() {
+  const { counts, start, isCounting } = useCountDown(60);
+  const initLabel = '获取验证码';
+  const countingLabel = (second: number) => `${second}秒后重新获取`;
+  const label = computed(() => (isCounting.value ? countingLabel(counts.value) : initLabel));
+
+  return {
+    label,
+    start,
+    isCounting
+  };
+}