WebProject/vue_project/src/components/RegisterForm.vue

<template>
  <div class="content">
    <div class="wrapper">
      <div class="form-wrapper">
        <div class="signup-form">
          <div class="tips">
            <h1>注册账号.</h1>
            <span>已经有账号?</span>
            <router-link to="/login"
              ><span class="login-into">登录</span></router-link
            >
          </div>
          <div class="form-wrapper">
            <!-- 用户名 -->
            <div class="input-wrapper user">
              <input
                type="text"
                class="inputs"
                v-model="registerForm.username"
              />
            </div>
            <!-- 密码 -->
            <div class="input-wrapper pwd">
              <input
                type="password"
                class="inputs"
                v-model="registerForm.password"
              />
            </div>
            <!-- 电话号码 -->
            <div class="input-wrapper phone">
              <input
                type="text"
                class="inputs"
                v-model="registerForm.account"
              />
            </div>
            <!-- 验证码 -->
            <div class="input-wrapper veri-code" style="opacity: 1; z-index: 1">
              <input
                type="text"
                class="inputs veri-code-input"
                v-model="registerForm.captcha"
              />
              <span class="veri-code-tips" @click="veriCodeTipsClick"
                >Click To Get</span
              >
            </div>
            <button class="form-btn" @click="onRegister">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref } from "vue";
import { registerVerify ,registerApi} from "../api/index";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

let reckonTime; //计数器
let reckonTimeFlag = 5; //倒计时
const reckonFlag = ref(true); //重复点击判断

const registerForm = ref({
  username: "", //用户名
  password: "", //密码
  account: "", //手机号
  captcha: "", //验证码
});

//定时器
const countDown = () => {
  console.log("计数器");
  // 设置验证码读取效果
  let veriCodeTips = document.querySelector(".veri-code-tips");
  veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`;
  reckonTimeFlag--;
  if (reckonTimeFlag < 0) {
    clearInterval(reckonTime);
    reckonTimeFlag = 5;
    veriCodeTips.innerHTML = `Click To Get`;
    veriCodeTips.style.color = "rgb(39, 150, 247)";
  }
};

//点击事件触发的方法
const veriCodeTipsClick = () => {
  // 防止重复点击  重复触发计数器
  if (registerForm.value.account == "" || registerForm.value.account == null) {
    ElMessage.error("手机号不能为空");
  } else {
    if (!reckonFlag.value) {
      return;
    } else {
      reckonFlag.value = false;
      setTimeout(() => {
        reckonFlag.value = true;
      }, 5000);
      let veriCodeTips = document.querySelector(".veri-code-tips");
      veriCodeTips.style.color = "rgb(153, 151, 151)";
      reckonTime = setInterval(countDown, 1000);
      countDown();
      getRegisterVerify();
    }
  }
};

// 验证码获取
const getRegisterVerify = async () => {
  await registerVerify(registerForm.value.account).then(
    (response) => {
      if (response.data.status == 200) {
        ElMessage.success("验证码：" + response.data.data);
        registerForm.value.captcha = response.data.data;
      } else if (response.data.status == 501) {
        ElMessage.warning(
          "验证码10分钟内有效, 请勿重复点击：" + response.data.data
        );
        const a = response.data.data.split(":")
        registerForm.value.captcha = a[1];
      } else if (response.data.status == 500) {
        ElMessage.error("手机号已经注册");
      }
    },
    (error) => {
      console.log("验证码获取失败");
    }
  );
};

// 注册校验
const onRegister = async () => {
  await registerApi(registerForm.value).then(
    (response) => {
      ElMessage.success("注册成功");
      clearInterval(reckonTime);
      router.push({ path: "/Login" });
    },
    (error) => {
      console.log("注册失败");
    }
  );
};
</script>

<style scoped>
@import url("../assets/css/style.scss");
</style>