feat(projects): 迁移登录完成

src/hooks/business/index.ts

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

src/hooks/business/useCountDown.ts

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

src/hooks/business/useImageVerify.ts

@@ -0,0 +1,85 @@
+import { ref, onMounted } from 'vue';
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export default function useImageVerify(width = 152, height = 40) {
+  const domRef = ref<HTMLCanvasElement>();
+  const imgCode = ref('');
+
+  function setImgCode(code: string) {
+    imgCode.value = code;
+  }
+
+  function getImgCode() {
+    if (!domRef.value) return;
+    imgCode.value = draw(domRef.value, width, height);
+  }
+
+  onMounted(() => {
+    getImgCode();
+  });
+
+  return {
+    domRef,
+    imgCode,
+    setImgCode,
+    getImgCode
+  };
+}
+
+function randomNum(min: number, max: number) {
+  const num = Math.floor(Math.random() * (max - min) + min);
+  return num;
+}
+
+function randomColor(min: number, max: number) {
+  const r = randomNum(min, max);
+  const g = randomNum(min, max);
+  const b = randomNum(min, max);
+  return `rgb(${r},${g},${b})`;
+}
+
+function draw(dom: HTMLCanvasElement, width: number, height: number) {
+  let imgCode = '';
+
+  const NUMBER_STRING = '0123456789';
+
+  const ctx = dom.getContext('2d');
+  if (!ctx) return imgCode;
+
+  ctx.fillStyle = randomColor(180, 230);
+  ctx.fillRect(0, 0, width, height);
+  for (let i = 0; i < 4; i += 1) {
+    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
+    imgCode += text;
+    const fontSize = randomNum(18, 41);
+    const deg = randomNum(-30, 30);
+    ctx.font = `${fontSize}px Simhei`;
+    ctx.textBaseline = 'top';
+    ctx.fillStyle = randomColor(80, 150);
+    ctx.save();
+    ctx.translate(30 * i + 23, 15);
+    ctx.rotate((deg * Math.PI) / 180);
+    ctx.fillText(text, -15 + 5, -15);
+    ctx.restore();
+  }
+  for (let i = 0; i < 5; i += 1) {
+    ctx.beginPath();
+    ctx.moveTo(randomNum(0, width), randomNum(0, height));
+    ctx.lineTo(randomNum(0, width), randomNum(0, height));
+    ctx.strokeStyle = randomColor(180, 230);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  for (let i = 0; i < 41; i += 1) {
+    ctx.beginPath();
+    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.fillStyle = randomColor(150, 200);
+    ctx.fill();
+  }
+  return imgCode;
+}

src/hooks/business/useSmsCode.ts

@@ -0,0 +1,59 @@
+import { computed } from 'vue';
+import { REGEXP_PHONE } from '@/config';
+import { fetchSmsCode } from '@/service';
+import { useLoading } from '../common';
+import useCountDown from './useCountDown';
+
+export default function useSmsCode() {
+  const { loading, startLoading, endLoading } = useLoading();
+  const { counts, start, isCounting } = useCountDown(60);
+  const initLabel = '获取验证码';
+  const countingLabel = (second: number) => `${second}秒后重新获取`;
+  const label = computed(() => {
+    let text = initLabel;
+    if (loading.value) {
+      text = '';
+    }
+    if (isCounting.value) {
+      text = countingLabel(counts.value);
+    }
+    return text;
+  });
+
+  /** 判断手机号码格式是否正确 */
+  function isPhoneValid(phone: string) {
+    let valid = true;
+    if (phone.trim() === '') {
+      window.$message?.error('手机号码不能为空！');
+      valid = false;
+    } else if (!REGEXP_PHONE.test(phone)) {
+      window.$message?.error('手机号码格式错误！');
+      valid = false;
+    }
+    return valid;
+  }
+
+  /**
+   * 获取短信验证码
+   * @param phone - 手机号
+   */
+  async function getSmsCode(phone: string) {
+    const valid = isPhoneValid(phone);
+    if (!valid || loading.value) return;
+    startLoading();
+    const { data } = await fetchSmsCode(phone);
+    if (data) {
+      window.$message?.success('验证码发送成功！');
+      start();
+    }
+    endLoading();
+  }
+
+  return {
+    label,
+    start,
+    isCounting,
+    getSmsCode,
+    loading
+  };
+}

src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './common';
+export * from './business';