feat: 增加发送验证码逻辑

assets/var.less

@@ -5,4 +5,6 @@
   --border-radius-l: 20px;
   --box-shadow-l: 0px 5px 30px rgba(0, 0, 0, 0.1);
   --color-secondary: #8F8F8F;
+  --color-disabled: rgba(0, 0, 0, 0.25);
+  --color-disabled-bg: rgba(0, 0, 0, 0.04);
 }

nuxt.config.ts

@@ -1,4 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-
-})
+  ssr: false,
+  nitro: {
+    devProxy: {
+      '/api': {
+        target: 'https://api.cas.ziqiang.net.cn',
+        changeOrigin: true,
+        prependPath: true,
+      },
+    },
+  },
+});

pages/register.vue

@@ -9,38 +9,38 @@
       <div class="form-item">
         <label>用户名</label>
         <div class="input-container">
-          <input v-model="username" placeholder="请输入用户名" />
+          <input v-model="username" required placeholder="请输入用户名" />
           <img src="/icon/user.svg" />
         </div>
       </div>
       <div class="form-item">
         <label>手机号</label>
         <div class="input-container">
-          <input v-model="phone" placeholder="请输入手机号" />
+          <input ref="phoneInputRef" v-model="phone" minlength="11" maxlength="11" type="tel" pattern="[0-9]+" required placeholder="请输入手机号" />
           <img src="/icon/phone.svg" />
         </div>
       </div>
       <div class="form-item">
         <label>验证码</label>
         <div class="sms-container">
           <div class="input-container">
-            <input v-model="sms" placeholder="请输入验证码" />
+            <input v-model="sms" required placeholder="请输入验证码" />
             <img src="/icon/message.svg" />
           </div>
-          <button @click="sendMessage">获取验证码</button>
+          <button :disabled="messageTimeout > 0" @click="sendMessage">{{ messageTimeout > 0 ? messageTimeout : '获取验证码' }}</button>
         </div>
       </div>
       <div class="form-item">
         <label>密码</label>
         <div class="input-container">
-          <input v-model="password" type="password" placeholder="请输入密码" />
+          <input v-model="password" required type="password" placeholder="请输入密码" />
           <img src="/icon/lock.svg" />
         </div>
       </div>
       <div class="form-item">
         <label>确认密码</label>
         <div class="input-container">
-          <input v-model="confirmedPassword" type="password" placeholder="请再次输入密码" />
+          <input v-model="confirmedPassword" required type="password" placeholder="请再次输入密码" />
           <img src="/icon/lock.svg" />
         </div>
       </div>
@@ -61,8 +61,28 @@ function submit(e: Event) {
   e.preventDefault();
 }
 
+const phoneInputRef = ref<HTMLInputElement | null>(null);
+const messageTimeout = ref(0);
+let intervalId = -1;
 function sendMessage(e: Event) {
-  console.log('');
+  if (!phoneInputRef.value) return;
+  if (!phoneInputRef.value.reportValidity()) return;
+  if (messageTimeout.value > 0) return;
+  $fetch<{ status: string }>('/api/auth/sms/', {
+    method: 'post',
+    body: {
+      phone: phone.value,
+    },
+  }).then((res) => {
+    messageTimeout.value = 60;
+    intervalId = setInterval(() => {
+      messageTimeout.value -= 1;
+      if (messageTimeout.value === 0) {
+        clearInterval(intervalId);
+      }
+    }, 1000);
+    console.log(res.status);
+  });
   e.preventDefault();
 }
 </script>
@@ -137,8 +157,13 @@ form {
   button {
     width: auto;
     white-space: nowrap;
-    padding-left: 20px;
-    padding-right: 20px;
+    width: 45%;
+    transition: color, background-color .3s;
+
+    &[disabled] {
+      color: var(--color-disabled);
+      background-color: var(--color-disabled-bg);
+    }
   }
 }
 </style>

utils/request.ts

@@ -0,0 +1,32 @@
+type HttpMethod = 'POST' | 'GET' | 'DELETE' | 'PUT' | 'PATCH';
+
+export function request<T>(url: string, method: HttpMethod, options?: RequestInit) {
+  const fetchOptions: RequestInit = {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    ...options,
+  };
+
+  return fetch(url, fetchOptions)
+    .then((res) => {
+      if (res.ok) {
+        return res.json() as T;
+      } else {
+        return res.json()
+          .then((res) => Promise.reject(res))
+          .catch((res) => Promise.reject(res));
+      }
+    })
+    .catch((res) => {
+      console.error(res);
+      return Promise.reject(res);
+    });
+}
+
+request.get = (url: string, options?: RequestInit) => request(url, 'GET', options);
+request.delete = (url: string, options?: RequestInit) => request(url, 'DELETE', options);
+request.post = (url: string, options?: RequestInit) => request(url, 'POST', options);
+request.put = (url: string, options?: RequestInit) => request(url, 'PUT', options);
+request.patch = (url: string, options?: RequestInit) => request(url, 'PATCH', options);