注册优化使用邮箱验证

src/api/login.js

@@ -56,4 +56,16 @@ export function getCodeImg() {
     method: 'get',
     timeout: 20000
   })
+}
+
+// 获取邮件验证码
+export function getCodeMail(email) {
+  return request({
+    url: '/captchaMail?email='+email,
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
 }

src/views/login.vue

@@ -52,7 +52,7 @@
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
+        <div style="float: right;font-size: 14px;padding-top:10px;" v-if="register">
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
@@ -93,7 +93,7 @@ const loading = ref(false);
 // 验证码开关
 const captchaEnabled = ref(true);
 // 注册开关
-const register = ref(false);
+const register = ref(true);
 const redirect = ref(undefined);
 
 function handleLogin() {

src/views/register.vue

@@ -37,6 +37,17 @@
           <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
+      <el-form-item prop="email">
+        <el-input
+          v-model="registerForm.email"
+          type="email"
+          size="large" 
+          auto-complete="off"
+          placeholder="邮箱"
+        >
+          <template #prefix><svg-icon icon-class="email" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
         <el-input
           size="large" 
@@ -49,7 +60,12 @@
           <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
         </el-input>
         <div class="register-code">
-          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
+          <el-button
+          size="large" 
+          @click.prevent="getCode"
+          >
+            获取邮箱验证码
+          </el-button>
         </div>
       </el-form-item>
       <el-form-item style="width:100%;">
@@ -63,7 +79,7 @@
           <span v-if="!loading">注 册</span>
           <span v-else>注 册 中...</span>
         </el-button>
-        <div style="float: right;">
+        <div style="float: right;font-size: 14px;padding-top:10px;">
           <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
         </div>
       </el-form-item>
@@ -76,8 +92,8 @@
 </template>
 
 <script setup>
-import { ElMessageBox } from "element-plus";
+import { ElAlert, ElMessageBox } from "element-plus";
-import { getCodeImg, register } from "@/api/login";
+import { getCodeMail, register } from "@/api/login";
 
 const router = useRouter();
 const { proxy } = getCurrentInstance();
@@ -87,6 +103,7 @@ const registerForm = ref({
   password: "",
   confirmPassword: "",
   code: "",
+  email: "",
   uuid: ""
 });
 
@@ -98,6 +115,7 @@ const equalToPassword = (rule, value, callback) => {
   }
 };
 
+
 const registerRules = {
   username: [
     { required: true, trigger: "blur", message: "请输入您的账号" },
@@ -111,6 +129,9 @@ const registerRules = {
     { required: true, trigger: "blur", message: "请再次输入您的密码" },
     { required: true, validator: equalToPassword, trigger: "blur" }
   ],
+  email: [
+    { required: true, trigger: "blur", message: "请输入正确的邮箱地址" }
+  ],
   code: [{ required: true, trigger: "change", message: "请输入验证码" }]
 };
 
@@ -132,25 +153,19 @@ function handleRegister() {
         }).catch(() => {});
       }).catch(() => {
         loading.value = false;
-        if (captchaEnabled) {
-          getCode();
-        }
       });
     }
   });
 }
 
 function getCode() {
-  getCodeImg().then(res => {
+      getCodeMail(registerForm.value.email).then(res => { 
-    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        proxy.$modal.msgSuccess("邮件发送成功");
-    if (captchaEnabled.value) {
+        registerForm.value.uuid = res.uuid;
-      codeUrl.value = "data:image/gif;base64," + res.img;
+      })
-      registerForm.value.uuid = res.uuid;
+}  
-    }
+
-  });
-}
 
-getCode();
 </script>
 
 <style lang='scss' scoped>

src/views/system/user/profile/userInfo.vue

@@ -6,9 +6,9 @@
       <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="user.phonenumber" maxlength="11" />
       </el-form-item>
-      <el-form-item label="邮箱" prop="email">
+     <!--<el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" maxlength="50" />
-      </el-form-item>
+      </el-form-item>-->
       <el-form-item label="性别">
          <el-radio-group v-model="user.sex">
             <el-radio label="0">男</el-radio>
@@ -35,7 +35,7 @@ const { proxy } = getCurrentInstance();
 
 const rules = ref({
   nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+  //email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
   phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
 });