fix: 修改acm页面验证问题

feature: 添加验证码60秒限制

package.json

@@ -1,7 +1,7 @@
 {
     "name": "join-us-vue",
     "private": true,
-    "version": "2.5.1",
+    "version": "2.5.1.1",
     "scripts": {
         "dev": "vite",
         "build": "vue-tsc --noEmit && vite build",

src/components/JHButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const prop = defineProps<{
-  type: string;
+  type: string | [string];
 }>();
 </script>
 
@@ -11,6 +11,7 @@ const prop = defineProps<{
       'button-small': type == 'small',
       'button-middle': type == 'middle',
       'button-middle-disabled': type == 'middle-disabled',
+      'button-small-disabled': type == 'small-disabled',
     }"
   >
     <slot></slot>
@@ -34,6 +35,21 @@ const prop = defineProps<{
   cursor: pointer;
   white-space: nowrap;
 }
+.button-small-disabled {
+  width: fit-content;
+  padding-inline: 24px;
+  height: 30px;
+  margin: auto;
+  border-radius: 20px;
+  background-color: #999999;
+  color: white;
+  font-size: 20px;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  cursor: not-allowed;
+  white-space: nowrap;
+}
 .button-middle {
   width: fit-content;
   padding: 10px;

src/utils/valid.ts

@@ -5,15 +5,15 @@ export function isEmail(email: string): boolean {
 
 export function isPhone(phone: string): boolean {
   var reg = /[0-9]{11}/;
-  return reg.test(phone);
+  return reg.test(phone) && phone.length === 11;
 }
 
 export function isStuId(id: string): boolean {
   var reg = /[0-9]{12}/;
-  return reg.test(id);
+  return reg.test(id) && id.length === 12;
 }
 
 export function isID(id: string): boolean {
   var reg = /[0-9]{17}[0-9|x|X]{1}/;
-  return reg.test(id);
+  return reg.test(id) && id.length === 18;
 }

src/views/join/acm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { computed, onMounted, reactive, ref } from "vue";
 import PageTop from "../../components/PageTop.vue";
 import { IACMUser } from "../../types/acm";
 import JHInput from "../../components/JHInput.vue";
@@ -11,26 +11,54 @@ import JHButton from "../../components/JHButton.vue";
 import router from "../../router";
 import { getCaptcha, registerUser } from "../../apis/acm";
 import { GetCaptchaForm } from "../../apis/captcha";
+var captchaTime = ref(0);
+var captchaTimer: NodeJS.Timer;
 const data = reactive(<IACMUser>{
   name: "",
   phone: "",
   email: "",
   stu_id: "",
   code: "",
 });
+const dataValid = computed(() => {
+  return (
+    data.name != "" &&
+    isPhone(data.phone) &&
+    isEmail(data.email) &&
+    (isStuId(data.stu_id) || isID(data.stu_id))
+  );
+});
 const pageStore = usePageStore();
 function returnClicked() {
   router.push("/join");
   return;
 }
 async function captchaClicked() {
+  if (captchaTime.value > 0) {
+    return;
+  }
+  if (!dataValid.value) {
+    alert("表单输入有误");
+    return;
+  }
   var res = await getCaptcha(data);
-  // console.log(res);
   if (res != "OK") alert("提交失败");
   else alert("验证码已发送");
+  captchaTime.value = 60;
+  captchaTimer = setInterval(() => {
+    captchaTime.value--;
+    if (captchaTime.value <= 0) {
+      clearInterval(captchaTimer);
+      captchaTime.value = 0;
+    }
+  }, 1000);
   return;
 }
 async function submitClicked() {
+  if (!dataValid.value || data.code == "") {
+    alert("表单输入有误");
+    return;
+  }
   var res = await registerUser(data);
   if (res != "OK") alert("提交失败");
   else alert("提交成功");
@@ -49,7 +77,7 @@ onMounted(() => {
       label="姓名"
       v-model="data.name"
       :valid="data.name != ''"
-      notice="姓名长度2-12"
+      notice="输入姓名"
       :type="pageStore.pageType == 'normal' ? 'normal' : 'mob'"
     />
     <JHInput
@@ -63,7 +91,7 @@ onMounted(() => {
       label="身份证号或学号"
       v-model="data.stu_id"
       :valid="isID(data.stu_id) || isStuId(data.stu_id)"
-      notice="身份证号长度18位"
+      notice="学长输入学号，新生输入身份证号"
       :type="pageStore.pageType == 'normal' ? 'normal' : 'mob'"
     />
     <JHInput
@@ -77,12 +105,18 @@ onMounted(() => {
       label="验证码"
       v-model="data.code"
       :valid="data.code != ''"
-      notice="输入验证码"
+      notice="输入邮箱验证码"
       :type="pageStore.pageType == 'normal' ? 'normal' : 'mob'"
     />
     <div class="btns">
       <JHButton type="small" @click="returnClicked">返回</JHButton>
-      <JHButton type="small" @click="captchaClicked">获取验证码</JHButton>
+      <JHButton
+        :type="captchaTime == 0 ? 'small' : 'small-disabled'"
+        @click="captchaClicked"
+        >{{
+          captchaTime == 0 ? "获取验证码" : "获取验证码(" + captchaTime + ")"
+        }}</JHButton
+      >
       <JHButton type="small" @click="submitClicked">提交</JHButton>
     </div>
   </div>