注册添加验证码

src/views/register.vue

@@ -146,6 +146,25 @@
           </el-input>
           <p class="tips">非大陆地区用户注册完成后请用账号密码进行登录</p>
         </el-form-item>
+        <el-form-item label="验证码" prop="code" class="code-box">
+          <el-input
+            v-model="registerForm.code"
+            autocomplete="off"
+            placeholder="请输入验证码"
+            class="code-input"
+            @blur="handleTrim('registerForm', 'code')"
+            maxlength="20"
+          >
+          </el-input>
+          <el-button
+            type="primary"
+            @click="sendCode('time', 'phone', 'verificationCodeShow')"
+            size="small"
+            class="sendCode"
+          >
+            {{ verificationCodeShow ? time + "s" : "发送验证码" }}
+          </el-button>
+        </el-form-item>
 
         <el-form-item label="邮箱" prop="email">
           <el-input
@@ -353,6 +372,7 @@ export default {
         desc: "",
         school: "",
         phone: "",
+        code: "",
         email: "",
         newPwd: "", // 密码
         confirmPwd: "", // 确认密码
@@ -378,6 +398,7 @@ export default {
           },
         ],
         phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
+        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
         newPwd: [
           { required: true, validator: validatePass, trigger: "blur" },
           {
@@ -423,6 +444,9 @@ export default {
         },
       ],
       isPhone: false,
+      time: 60, //获取验证码的时间
+      verificationCodeShow: false, //是否已经获取了验证码
+      timer: null,
     };
   },
   //计算属性 类似于data概念
@@ -478,6 +502,8 @@ export default {
             org_id: this.region[1] ? this.region[1] : "",
             email: form.email,
             phone: form.phone,
+            verification_code: form.code,
+            verification_type: "SMS",
             city_id: form.selectedOptions[1],
             memo: form.desc,
             school: form.school,
@@ -493,6 +519,9 @@ export default {
             })
             .catch(() => {
               this.loading = false;
+              this.verificationCodeShow = false;
+              clearInterval(this.timer);
+              this.time = 60;
             });
         } else {
           let msg = "";
@@ -513,6 +542,50 @@ export default {
         }
       });
     },
+    // 发送验证码
+    sendCode(time, phone, flag, obj) {
+      let this_ = this;
+      if (this_[time] != 60) {
+        return;
+      }
+      this_.timer = null;
+      if (this_.registerForm[phone]) {
+        let reg = /^1[3-9]\d{9}$/;
+        let regex = /^09\d{7,8}$/;
+        let result =
+          reg.test(this_.registerForm[phone]) ||
+          regex.test(this_.registerForm[phone]);
+        if (!result) {
+          this_.$message.warning("请输入正确的手机号");
+          return;
+        }
+        this_[flag] = true;
+        this_.timer = setInterval(() => {
+          this_[time]--;
+          if (this_[time] == 0) {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          }
+        }, 1000);
+        let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
+        let data = {
+          send_type: "SMS",
+          phone_or_email: this_.registerForm.phone,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {})
+          .catch(() => {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          });
+      } else {
+        this_.$message.warning("请先输入手机号");
+      }
+    },
     // 取消 恢复到修改前状态
     onCancel(formName) {
       this.$refs[formName].resetFields();
@@ -693,6 +766,11 @@ export default {
   color: #f56c6c;
   margin-right: 4px;
 }
+.code-box {
+  .el-form-item__content {
+    display: flex;
+  }
+}
 </style>
 <style lang="scss">
 .registerForm {