add sms login function

src/api/api_sys.js

@@ -23,6 +23,10 @@ export const apiGetUserInfo = (params, id) => {
   return http({ url: `/lz_management/sys/user/info${id}`, method: 'get', params })
 }
 
+// 获取用户相关
+export const apiSsysSendSMS = (params, id) => {
+  return http({ url: `/lz_management/sys/sendSMS`, method: 'post', params })
+}
 /**
  * 管理员列表
  */

src/views/common/login.vue

@@ -14,24 +14,36 @@
             @keyup.enter.native="handleLogin()"
             status-icon
           >
-            <el-form-item prop="username">
+            <el-form-item prop="userName">
-              <el-input clearable v-model="dataForm.username" placeholder="帐号"></el-input>
+              <el-input clearable v-model="dataForm.userName" placeholder="帐号"></el-input>
             </el-form-item>
             <el-form-item prop="password">
               <el-input clearable v-model="dataForm.password" type="password" placeholder="密码"></el-input>
             </el-form-item>
+<!--            <el-form-item prop="captcha">-->
+<!--              <el-row :gutter="20">-->
+<!--                <el-col :span="14">-->
+<!--                  <el-input-->
+<!--                    @key.enter.native="handleLogin"-->
+<!--                    clearable-->
+<!--                    v-model="dataForm.captcha"-->
+<!--                    placeholder="验证码"-->
+<!--                  ></el-input>-->
+<!--                </el-col>-->
+<!--                <el-col :span="10" class="login-captcha">-->
+<!--                  <img :src="captchaPath" @click="handleGetImgCaptcha" />-->
+<!--                </el-col>-->
+<!--              </el-row>-->
+<!--            </el-form-item>-->
             <el-form-item prop="captcha">
               <el-row :gutter="20">
                 <el-col :span="14">
-                  <el-input
+                  <el-input v-model="dataForm.verify" placeholder="验证码">
-                    @key.enter.native="handleLogin"
+                  </el-input>
-                    clearable
-                    v-model="dataForm.captcha"
-                    placeholder="验证码"
-                  ></el-input>
                 </el-col>
                 <el-col :span="10" class="login-captcha">
-                  <img :src="captchaPath" @click="handleGetImgCaptcha" />
+                  <el-button v-if="!hasSendCode"  type="primary" @click="handleVerify">获取验证码</el-button>
+                  <el-button v-else type="primary">重新发送({{time}}S)</el-button>
                 </el-col>
               </el-row>
             </el-form-item>
@@ -52,38 +64,43 @@
 
 <script>
 import { getUUID } from '@/utils'
-import { apiLogin } from '@/api/api_sys'
+import { apiLogin, apiSsysSendSMS } from '@/api/api_sys'
 
 export default {
   data () {
     return {
       isloading: false,
       dataForm: {
-        username: '',
+        userName: '',
         password: '',
         uuid: '',
-        captcha: ''
+        // captcha: ''
+        verify: ''
       },
       dataRule: {
-        username: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
+        userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
         password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
-        captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
+        // captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
+        verify: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
       },
-      captchaPath: '' // 图像验证码请求地址
+      // captchaPath: '' // 图像验证码请求地址
+      time: 0,
+      timer: true,
+      hasSendCode: false
     }
   },
   created () {
-    this.handleGetImgCaptcha()
+    // this.handleGetImgCaptcha()
   },
   methods: {
-    // 获取图像验证码
+    // // 获取图像验证码
-    handleGetImgCaptcha () {
+    // handleGetImgCaptcha () {
-      this.dataForm.uuid = getUUID()
+    //   this.dataForm.uuid = getUUID()
-      this.captchaPath = `/lz_management/captcha.jpg?uuid=${this.dataForm.uuid}`
+    //   this.captchaPath = `/lz_management/captcha.jpg?uuid=${this.dataForm.uuid}`
-    },
+    // },
     // 登录提交表单
     handleLogin () {
-      let param = Object.assign(this.dataForm, { 'uuid': this.dataForm.uuid })
+      let param = Object.assign(this.dataForm, {'userName': this.dataForm.userName}, {'uuid': this.dataForm.uuid}, {'verifyCode': this.dataForm.verify})
       this.$refs.dataForm.validate((valid) => {
         if (valid) {
           this.isloading = true
@@ -94,13 +111,46 @@ export default {
               this.$router.replace({ name: 'home' })
             } else {
               this.$message.error(res.msg)
-              this.handleGetImgCaptcha()
             }
           })
         } else {
           return false
         }
       })
+    },
+    // 获取验证码
+    handleVerify () {
+      this.dataForm.uuid = getUUID()
+      if (!this.dataForm.userName) {
+        this.$message('请输入账号')
+        return false
+      }
+      // if (!this.dataForm.captcha) {
+      //   this.$message('请输入图形验证码')
+      //   return false
+      // }
+      let parmse = {
+        userName: this.dataForm.userName,
+        // captcha: this.dataForm.captcha,
+        password: this.dataForm.password,
+        uuid: this.dataForm.uuid
+      }
+      apiSsysSendSMS(parmse).then(res => {
+        if (res.code === 0) {
+          this.time = 60
+          this.hasSendCode = true
+          this.timer = setInterval(() => {
+            if (this.time === 0) {
+              this.hasSendCode = false
+            }
+            this.time--
+          }, 1000)
+          this.$message.success(res.msg)
+        } else {
+          // this.getCaptcha()
+          this.$message.error(res.msg)
+        }
+      })
     }
   }
 }
@@ -170,13 +220,13 @@ export default {
   .login-title {
     font-size: 16px;
   }
-  .login-captcha {
+  /*.login-captcha {*/
-    overflow: hidden;
+  /*  overflow: hidden;*/
-    > img {
+  /*  > img {*/
-      width: 100%;
+  /*    width: 100%;*/
-      cursor: pointer;
+  /*    cursor: pointer;*/
-    }
+  /*  }*/
-  }
+  /*}*/
   .login-btn-submit {
     width: 100%;
     margin-top: 38px;