添加注册邮箱验证码添加

src/api/user.ts

@@ -204,6 +204,15 @@ export const deleteThirdPartyInfo = (Data) => {
     })
 }
 
+export const getRigisterEmailCode = (Data) => {
+    const params = new URLSearchParams();
+    //console.log("qrdata=",qrData);
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/user/register_code' , params)
+}
+
 //获取qq登录的url
 export const getQQLoginUrl = (Data) => {
     let url ='/tool/qq_auth' + "?uuid=" + Data.uuid + "&type=" + Data["type"]

src/views/pages/register.vue

@@ -8,15 +8,7 @@
                 </div>
             </div>
             <el-form :model="param" :rules="rules" ref="register" size="large">
-                <el-form-item prop="username">
-                    <el-input v-model="param.username" placeholder="用户名">
-                        <template #prepend>
-                            <el-icon>
-                                <User />
-                            </el-icon>
-                        </template>
-                    </el-input>
-                </el-form-item>
+
                 <el-form-item prop="email">
                     <el-input v-model="param.email" placeholder="邮箱">
                         <template #prepend>
@@ -26,6 +18,24 @@
                         </template>
                     </el-input>
                 </el-form-item>
+                <el-button type="primary" class="login-btn" :disabled="isCountingDown" @click="sendCodeMail">{{ buttonText }}</el-button>
+                <p class="login-text" />
+                <el-form-item prop="email">
+                    <el-input v-model="param.code" placeholder="验证码">
+                        <template #prepend>
+                            <el-icon><BellFilled /></el-icon>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="username">
+                    <el-input v-model="param.username" placeholder="用户名">
+                        <template #prepend>
+                            <el-icon>
+                                <User />
+                            </el-icon>
+                        </template>
+                    </el-input>
+                </el-form-item>
                 <el-form-item prop="password">
                     <el-input type="password" placeholder="密码" v-model="param.password">
                         <template #prepend>
@@ -55,7 +65,7 @@
 import { ref, reactive,inject } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
-import { registerService } from "@/api/user";
+import { registerService,getRigisterEmailCode } from "@/api/user";
 import {GetUserInfoService} from "@/api/user";
 import { usePermissStore } from "@/store/permiss";
 const router = useRouter();
@@ -67,6 +77,7 @@ const param = reactive({
     password: '',
     repassword: '',
     email: '',
+    code: ''
 });
 
 const registerData = ref({
@@ -75,6 +86,9 @@ const registerData = ref({
   password: "",
   repassword: "",
 });
+const buttonText = ref('发送验证码');
+const countdown = ref(60); // 初始倒计时时间
+const COUNT_DOWN_TIME = 60; // 倒计时总时间
 
 const rules = {
     username: [
@@ -89,6 +103,7 @@ const rules = {
 };
 
 const register = ref();
+const isCountingDown = ref(false);
 
 const getMyUserInfo = async (id) => {
   let result = {};
@@ -152,6 +167,52 @@ const onRegister = async () => {
     router.push("/home");
   }
 };
+
+const sendCodeMail = async () => {
+
+    if (param.email === '') {
+        ElMessage.error('请输入邮箱');
+        return;
+    }
+    if (isCountingDown.value) return;
+
+    let req={
+        email: param.email,
+    }
+
+    
+    try{
+        let result = await getRigisterEmailCode(req);
+        if (result["code"] === 0) {
+            //重置成功，返回新token，直接登录
+            ElMessage.success('邮件已成功发送，请查收');
+        } else {
+            ElMessage.error(result["message"]);
+            return;
+        }
+        
+    }catch(err){
+        ElMessage.error('发送邮件失败');
+    }
+
+
+
+    // 开始倒计时
+    isCountingDown.value = true;
+    buttonText.value = `${COUNT_DOWN_TIME}秒后重新发送`;
+
+    const timer = setInterval(() => {
+    countdown.value -= 1;
+    if (countdown.value <= 0) {
+        clearInterval(timer);
+        isCountingDown.value = false;
+        countdown.value = COUNT_DOWN_TIME;
+        buttonText.value = '发送邮件';
+    } else {
+        buttonText.value = `${countdown.value}秒后可重新发送`;
+    }
+    }, 1000);
+};
 </script>
 
 <style scoped>