短信快捷登录

assets/scss/common.scss

@@ -492,7 +492,26 @@ form .text-position .el-checkbox__inner::after {
   height: 34px;
   line-height: 30px;
 }
+//短信便捷登录
+.loginForm .el-input__inner{
+  padding-left: 12px !important;
+}
+.login-form .fastMsg .el-button.fastCode{
+  position: absolute;
+  top: 2px;
+  right: 0;
+  padding: 0;
+  width: 93px;
+  height: 34px;
+  text-align: center;
+  border: none;
+  color: #000;
+  background: #ccc;
+}
 
+.login-form .fastMsg .el-button.code-send{
+  background: #ddd;
+}
 //个人注册错误框颜色
 form .el-form-item .el-form-item__content div.active .el-input__inner{
   border-color: #f56c6c !important;

components/login/Login.vue

@@ -5,14 +5,14 @@
       <div class="container">
         <div class="navbar-header">
           <input type="hidden" name="iconUrl" value="">
-          <a class="navbar-brand" :href="JSON.parse(loginStyle.returnHomeUrl).url || ''">
+          <a class="navbar-brand" :href="!loginStyle || (loginStyle && (JSON.parse(loginStyle.returnHomeUrl).url)) || ''">
             <img :src="loginStyle.logoUrl" alt="">
             <span>{{loginStyle.title || ''}}</span>
           </a>
         </div>
         <div class="collapse navbar-collapse navbar-right">
-          <a :href="JSON.parse(loginStyle.returnHomeUrl).url || ''">{{JSON.parse(loginStyle.returnHomeUrl).name || ''}}</a>
-          <a href="http://uas.ubtob.com/serve#/" v-if="JSON.parse(loginStyle.returnHomeUrl).needHelp">帮助</a>
+          <a :href="loginStyle ? JSON.parse(loginStyle.returnHomeUrl).url : ''">{{loginStyle ? JSON.parse(loginStyle.returnHomeUrl).name : ''}}</a>
+          <a href="http://uas.ubtob.com/serve#/" v-if="!loginStyle || (loginStyle && (JSON.parse(loginStyle.returnHomeUrl).needHelp))">帮助</a>
         </div>
       </div>
     </nav>
@@ -46,7 +46,8 @@
         <div class="x-login">
           <!-- user & pwd login wrap -->
           <div id="form-wrap" class="x-login-form">
-            <div>
+            <!--账号密码登录-->
+            <div v-show="activeTab === 0">
               <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
                 <el-form-item prop="username">
                   <el-input type="text" v-model="login.username" auto-complete="new-password" placeholder="手机号/邮箱"></el-input>
@@ -84,11 +85,33 @@
                 </el-form-item>
               </el-form>
             </div>
+            <!--短信快捷登录-->
+            <div v-show="activeTab === 1">
+              <el-form :model="fastLogin" :rules="rules3" ref="fastLogin" class="demo-ruleForm login-form loginForm">
+                <el-form-item prop="mobile">
+                  <el-input type="text" v-model="fastLogin.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
+                </el-form-item>
+                <el-form-item prop="code" class="fastMsg">
+                  <el-input type="text" v-model="fastLogin.code"
+                            auto-complete="off" placeholder="验证码"></el-input>
+                  <el-button type="primary" class="fastCode"
+                             v-show="sendLoginCode"
+                             @click="getCheckCode">获取验证码</el-button>
+                  <el-button type="primary"  v-show="!sendLoginCode" class="fastCode code-send">已发送({{login_time}}s)</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <a class="btn login"
+                     @click="fastToLogin(true)">登录</a>
+                </el-form-item>
+              </el-form>
+            </div>
             <div class="warn-text-area">
               为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
             </div>
             <div class="link-go">
               <a @click="changeManage" class="first">更换管理员</a>
+              <a class='change' @click="activeTab = 1" v-show="activeTab === 0">短信快捷登录</a>
+              <a class='change' @click="activeTab = 0" v-show="activeTab === 1">用户密码登录</a>
               <a id="register" @click="goRegister" class="second">
                 <i class="fa fa-arrow-circle-o-right"></i>免费注册</a>
             </div>
@@ -199,6 +222,39 @@
           callback()
         }
       }
+      // 短信便捷登录
+      var validateMobile = (rule, value, callback) => {
+        if (value === '') {
+          this.checkMobile = false
+        } else {
+          if (this.fastLogin.mobile !== '') {
+            // 判断手机号是否已被注册
+            this.$http.get(`/api/user/checkMobile`, {params: {mobile: this.fastLogin.mobile}})
+              .then(response => {
+                if (response.data.hasRegister) {
+                  this.checkMobile = true
+                } else {
+                  this.$message.error('手机号未注册，请先注册！')
+                  this.checkMobile = false
+                  return Promise.reject(response.data)
+                }
+              }).catch(err => {
+                this.$message.error(err.errMsg)
+              })
+            callback()
+          }
+        }
+      }
+      var validateCode = (rule, value, callback) => {
+        if (value === '') {
+          this.checkCode = false
+        } else {
+          if (this.fastLogin.code !== '') {
+            this.checkCode = true
+          }
+          callback()
+        }
+      }
       return {
         login: {
           username: '',
@@ -206,6 +262,11 @@
           captcha: '',
           spaceUU: ''
         },
+        fastLogin: {
+          mobile: '',
+          code: ''
+        },
+        activeTab: 1,
         checked: false,
         isShowLoading: false,
         checkUsername: false,
@@ -214,6 +275,12 @@
         isLoginDisabled: false,
         dialogVisible: false,
         queryLink: '',
+        checkMobile: false,
+        getCodeBtnIsDisabled: true,
+        sendLoginCode: true,
+        login_time: 0,
+        token: '',
+        checkCode: false,
         rules2: {
           username: [
             {validator: validateUsername, trigger: 'blur'}
@@ -221,6 +288,14 @@
           password: [
             {validator: validatePassword, trigger: 'blur'}
           ]
+        },
+        rules3: {
+          mobile: [
+            {validator: validateMobile, trigger: 'blur'}
+          ],
+          code: [
+            {validator: validateCode, trigger: 'blur'}
+          ]
         }
       }
     },
@@ -402,7 +477,11 @@
       chooseOneEnterprise (flag, spaceUU) {
         this.login.spaceUU = spaceUU
         this.dialogVisible = false
-        this.isLogin(flag)
+        if (this.activeTab === 0) {
+          this.isLogin(flag)
+        } else if (this.activeTab === 1) {
+          this.fastToLogin(flag)
+        }
         if (this.appId === 'mall' || this.appId === 'home') {
           if (this.checked) {
             this.setCookie(this.login.username, this.login.password, 7)
@@ -411,6 +490,72 @@
           }
         }
       },
+      // 短信快捷登录
+      fastToLogin (flag) {
+        this.isShowLoading = true
+        if (!this.fastLogin.mobile) {
+          this.isShowLoading = false
+          this.$message.error('请填写手机号')
+        } else {
+          let param = new FormData()
+          param.append('mobile', this.fastLogin.mobile)
+          param.append('code', this.fastLogin.code)
+          param.append('appId', this.appId)
+          param.append('token', this.token)
+          param.append('spaceUU', this.login.spaceUU)
+          param.append('returnUrl', this.returnUrl)
+          param.append('baseUrl', this.baseUrl)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/login/sms', param, config)
+            .then(response => {
+              this.isShowLoading = false
+              if (response.data.success) {
+                if (response.data.content.spaces) {
+//                   弹框让用户选择企业
+                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
+                  this.dialogVisible = flag
+                } else if (response.data.content.loginUrls) {
+//                  遍历登录url循环让各应用登录(需要跨域)
+                  let param = response.data.content.data
+                  let a = ''
+                  for (let n in param) {
+                    a += (n + '=' + encodeURIComponent(param[n]) + '&')
+                  }
+                  let params = a.substr(0, a.length - 1)
+                  this.isShowLoading = true
+                  if (response.data.content.currentUrl) {
+                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
+                      name: 'successCallback',
+                      timeout: 3000
+                    }, (err, data) => {
+                      if (err) {
+                        this.$message.error('登录超时，请重试')
+                        this.isShowLoading = false
+                        throw err
+                      } else {
+                        this.loginOther(response, params)
+                      }
+                    })
+                  } else {
+                    this.loginOther(response, params, 3000)
+                  }
+                }
+              } else {
+                this.$message.error(response.data)
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.isShowLoading = false
+              let _this = this
+              setTimeout(function () {
+                _this.getCode()
+              }, 100)
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
       getJsonp: function (url, timeout = 500) {
         return new Promise((resolve, reject) => {
           this.$jsonp(url, {
@@ -473,11 +618,51 @@
       // 清除cookie
       clearCookie () {
         this.setCookie('', '', -1)
+      },
+      // 获取校验码
+      getCheckCode () {
+        this.isShowLoading = true
+        if (!this.fastLogin.mobile) {
+          this.isShowLoading = false
+          this.$message.error('请先填写手机号')
+        } else {
+          if (this.checkMobile) {
+            this.$http.get(`/sso/login/sendSmsCode`, {params: {mobile: this.fastLogin.mobile}})
+              .then(response => {
+                this.isShowLoading = false
+                if (response.data) {
+                  this.token = response.data.content.token
+                  if (this.token !== '') {
+                    this.$message({
+                      message: '验证码已经发送到您的手机，请注意查收',
+                      type: 'success'
+                    })
+                    this.sendLoginCode = false
+                    this.login_time = 60
+                    var loginTime = setInterval(() => {
+                      this.login_time--
+                      if (this.login_time <= 0) {
+                        this.sendLoginCode = true
+                        clearInterval(loginTime)
+                      }
+                    }, 1000)
+                  }
+                } else {
+                  return Promise.reject(response.data)
+                }
+              }).catch(err => {
+                this.isShowLoading = false
+                this.$message.error(err.errMsg)
+              })
+          } else {
+            this.isShowLoading = false
+          }
+        }
       }
     }
   }
 </script>
-<style lang="scss" scoped type="text/scss">
+<style lang="scss" type="text/scss" scoped>
   @import '~assets/scss/mixins';
   @import '~assets/scss/variables';
   .x-navbar{
@@ -545,6 +730,11 @@
         margin-top: 3px;
         font-size: 12px;
       }
+      a.change{
+        margin:3px 0 0 50px;
+        float: left;
+        font-size: 12px;
+      }
     }
     /*登录弹出框*/
     .x-floating {