登录页验证码登录使用phone字段替换username

front-vue/src/views/login.vue

@@ -18,8 +18,8 @@
                             </div>
                             <el-tabs v-model="activeName" class="zap-tabs" @tab-click="changeLoginType">
                                 <el-tab-pane label="验证码登录" name="login_shortMessage">
-                                    <el-form-item prop="username">
-                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="手机号">
+                                    <el-form-item prop="phone">
+                                        <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号">
                                             <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                                         </el-input>
                                     </el-form-item>
@@ -178,6 +178,7 @@ export default {
             cookiePassword: "",
             loginForm: {
                 shortMessageCode: '',
+                phone: '',
                 username: "",
                 password: "",
                 rememberMe: false,
@@ -187,6 +188,13 @@ export default {
             codeBtnWord: '获取验证码', // 获取验证码按钮文字
             waitTime:2, // 获取验证码按钮失效时间
             loginRules: {
+                phone: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '手机号不能为空'
+                    }
+                ],
                 username: [
                     {
                         required: true,
@@ -298,9 +306,16 @@ export default {
                       Cookies.remove("password");
                       Cookies.remove("rememberMe");
                   }
-
+                    let loginForm = {}
+                    // 验证码登录
+                    if (this.activeName == "login_shortMessage") {
+                        loginForm = Object.assign({}, this.loginForm, {username: this.loginForm.phone})
+                        delete loginForm.phone
+                    } else {
+                        loginForm = this.loginForm
+                    }
                   this.$store
-                      .dispatch("Login", this.loginForm)
+                      .dispatch("Login", loginForm)
                       .then((data) => {
                         console.log(data)
                           if (data.code == "0") {
@@ -348,8 +363,8 @@ export default {
           })
       },
       changeLoginType(e){
-
           if (this.activeName === 'login_password') {
+            delete this.loginRules.phone
               this.loginRules.code = [
                     {
                         required: true,
@@ -359,6 +374,13 @@ export default {
                 ]
           } else {
               delete this.loginRules.code
+              this.loginRules.phone = [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '手机号不能为空'
+                    }
+                ]
           }
         this.getCode();
       },
@@ -376,7 +398,7 @@ export default {
                       return this.codeDialogVisible = true
                   }
                   // 调用获取短信验证码接口
-                  sendShortMessage(this.loginForm.username, this.loginForm.code, this.loginForm.uuid).then(response => {
+                  sendShortMessage(this.loginForm.phone, this.loginForm.code, this.loginForm.uuid).then(response => {
                     this.sendShortMessageBtn = true;
                     this.msgSuccess("发送成功!");