登录短信

src/api/login.js

 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
+export function login(username, password, code, smsCode, uuid) {
   const data = {
     username,
     password,
     code,
+    smsCode,
     uuid
   }
   return request({

src/store/modules/user.js

@@ -34,9 +34,10 @@ const user = {
       const username = userInfo.username.trim()
       const password = userInfo.password
       const code = userInfo.code
+      const smsCode = userInfo.smsCode
       const uuid = userInfo.uuid
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, code, smsCode, uuid).then(res => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           resolve()

src/views/login.vue

@@ -16,7 +16,7 @@
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%;"
+        <el-input v-model="loginForm.code" auto-complete="off" placeholder="数字验证码" style="width: 63%;"
           @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
         </el-input>
@@ -24,6 +24,16 @@
           <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
+      <div style="color: red; font-size: 12px">获取短信验证码必须同时填写账号、密码、数字验证码</div>
+      <el-form-item prop="smsCode" v-if="captchaEnabled">
+        <el-input v-model="loginForm.smsCode" auto-complete="off" placeholder="短信验证码" style="width: 63%;"
+                  @keyup.enter.native="handleLogin">
+          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+        </el-input>
+        <div class="login-code">
+          <el-button size="small" @click="getSmsCode">发送短信验证码</el-button>
+        </div>
+      </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:12px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@@ -35,13 +45,6 @@
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
-                   @click.native.prevent="getSmsCode">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-      </el-form-item>
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
@@ -65,6 +68,7 @@ export default {
         password: "",
         rememberMe: false,
         code: "",
+        smsCode:"",
         uuid: ""
       },
       loginRules: {
@@ -74,7 +78,8 @@ export default {
         password: [
           { required: true, trigger: "blur", message: "请输入您的密码" }
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入数字验证码" }],
+        smsCode: [{ required: true, trigger: "change", message: "请输入短信验证码" }]
       },
       loading: false,
       // 验证码开关
@@ -117,6 +122,7 @@ export default {
       };
     },
     handleLogin() {
+      this.loginRules.smsCode = [{ required: true, trigger: "change", message: "请输入短信验证码" }]
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
@@ -141,9 +147,9 @@ export default {
       });
     },
     getSmsCode() {
+      delete this.loginRules.smsCode
       this.$refs.loginForm.validate(valid => {
         if (valid) {
-          this.loading = true;
           getLoginSmsCode(this.loginForm).then(resp =>　{
             if (200 === resp.code) {