注册新增手机号验证码

src/api/login.js

@@ -25,6 +25,14 @@ export function register(data) {
   })
 }
 
+export function getPhoneCode(phonenumber) {
+  return request({
+    url: '/auth/getPhoneCode/' + phonenumber,
+    method: 'post'
+  })
+}
+
+
 // 刷新方法
 export function refreshToken() {
   return request({

src/views/register.vue

@@ -7,6 +7,12 @@
           <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="user"/>
         </el-input>
       </el-form-item>
+      <el-form-item prop="phonenumber">
+        <el-input v-model="registerForm.phonenumber" auto-complete="off" placeholder="手机号" type="text">
+          <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="user"/>
+        </el-input>
+      </el-form-item>
+
       <el-form-item prop="password">
         <el-input
           v-model="registerForm.password"
@@ -29,6 +35,11 @@
           <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="password"/>
         </el-input>
       </el-form-item>
+      <el-form-item prop="phoneCode">
+        <el-input v-model="registerForm.phoneCode" auto-complete="off" placeholder="验证码" type="text">
+          <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="user"/>
+        </el-input>
+      </el-form-item>
       <el-form-item v-if="captchaEnabled" prop="code">
         <el-input
           v-model="registerForm.code"
@@ -44,6 +55,21 @@
         </div>
       </el-form-item>
       <el-form-item style="width:100%;">
+
+          <el-row gutter="10">
+            <el-col :span="12">
+              <el-button
+                :loading="loadingCode"
+                size="medium"
+                style="width:100%;"
+                type="primary"
+                @click.native.prevent="handleEdit(phonenumber)"
+              >
+                <span v-if="!loadingCode">获取验证码</span>
+                <span v-else>获取验证码中...</span>
+              </el-button>
+            </el-col>
+            <el-col :span="12">
               <el-button
                 :loading="loading"
                 size="medium"
@@ -54,6 +80,12 @@
                 <span v-if="!loading">注 册</span>
                 <span v-else>注 册 中...</span>
               </el-button>
+            </el-col>
+
+          </el-row>
+
+
+
         <div style="float: right;">
           <router-link :to="'/login'" class="link-type">使用已有账户登录</router-link>
         </div>
@@ -67,7 +99,8 @@
 </template>
 
 <script>
-import {getCodeImg, register} from "@/api/login";
+import { getCodeImg, getPhoneCode, register } from '@/api/login'
+
 
 export default {
   name: "Register",
@@ -83,6 +116,7 @@ export default {
       codeUrl: "",
       registerForm: {
         username: "",
+        phonenumber:"",
         password: "",
         confirmPassword: "",
         code: "",
@@ -93,6 +127,14 @@ export default {
           {required: true, trigger: "blur", message: "请输入您的账号"},
           {min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur'}
         ],
+        phonenumber: [
+          {required: true, trigger: "blur", message: "请输入您的手机号"},
+          {min: 11, max: 11, message: '用户手机号长度等于11', trigger: 'blur'}
+        ],
+        phoneCode: [
+          {required: true, trigger: "blur", message: "请输入您的验证码"},
+          {min: 0, max: 4, message: '验证码长度必须介于 0 和 4 之间', trigger: 'blur'}
+        ],
         password: [
           {required: true, trigger: "blur", message: "请输入您的密码"},
           {min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur'}
@@ -104,6 +146,7 @@ export default {
         code: [{required: true, trigger: "change", message: "请输入验证码"}]
       },
       loading: false,
+      loadingCode: false,
       captchaEnabled: true
     };
   },
@@ -111,6 +154,23 @@ export default {
     this.getCode();
   },
   methods: {
+    handleEdit(phonenumber){
+      phonenumber=this.registerForm.phonenumber
+      if (phonenumber.trim()){
+        this.$modal.msgSuccess("手机号为空");
+        this.loading=false
+      }
+        this.loading=true
+      getPhoneCode(phonenumber).then(
+        res=>{
+          alert(res.data)
+          this.$modal.msgSuccess("验证码获取成功"+res.data);
+        }
+      ).catch(error=>{
+        this.$message.error("获取验证码失败："+error.message);
+        this.loading=false
+      })
+    },
     getCode() {
       getCodeImg().then(res => {
         this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;