短信快捷登录

assets/scss/mobileCommon.scss

@@ -53,13 +53,6 @@
     color:#666;
   }
 }
-.page-part a.rgba{
-  transition: all .2s ease;
-  color:#2d8cf0;
-  &:hover{
-    color:#f44336;
-  }
-}
 .f-main{
   background: #fff;
   padding:0.55rem .3rem 1.1rem;
@@ -405,3 +398,29 @@
     color: #3c3c3c;
   }
 }
+
+//短信快捷登录
+.page-part .handle{
+  overflow: hidden;
+  margin-top: .14rem;
+  span{
+    font-size: .28rem;
+    color: #50a0f7;
+    &.fast-login{
+      float: left;
+    }
+    &.pwd{
+      float: right;
+    }
+  }
+}
+
+.mint-field-other .token{
+  display: inline-block;
+  padding: 0 .5rem;
+  text-align: center;
+  border-left: 1px solid #b5b5b5;
+  margin-left: .1rem;
+  color: #2d8cf0;
+}
+

components/login/Login.vue

@@ -767,6 +767,7 @@
         if (this.$route.query.code) {
           let param = new FormData()
           param.append('code', this.$route.query.code ? this.$route.query.code : '')
+          param.append('type', 'wx')
           param.append('state', this.$route.query.state ? this.$route.query.state : '')
           param.append('appId', this.$route.query.appId ? this.$route.query.appId : '')
           param.append('returnUrl', this.$route.query.returnURL ? this.$route.query.returnURL : '')
@@ -775,18 +776,18 @@
           let config = {
             headers: {'Content-Type': 'multipart/form-data'}
           }
-          this.$http.post('/sso/login/wxqrLogin', param, config)
+          this.$http.post('/sso/login/foreignLogin', param, config)
             .then(response => {
               this.isShowLoading = false
               if (response.data.success) {
                 if (!response.data.content.hasRegister && response.data.content.token) {
                   this.loginWay = 2
                   this.wxToken = response.data.content.token
-                  this.$http.get(`/weChat/userInfo/${this.wxToken}`, {params: {token: this.wxToken}})
+                  this.$http.get(`/foreign/userInfo/${this.wxToken}`, {params: {token: this.wxToken}})
                     .then(response => {
                       if (response.data.success) {
-                        this.wxImg = response.data.content.headimgurl
-                        this.wxName = response.data.content.nickname
+                        this.wxImg = response.data.content.foreignUserImg
+                        this.wxName = response.data.content.foreignUserName
                       } else {
                         return Promise.reject(response.data)
                       }
@@ -865,13 +866,14 @@
           this.$message.error('请填写密码')
         } else {
           let param = new FormData()
+          param.append('_operate', 'account')
           param.append('t', this.wxToken)
           param.append('username', this.bindAccount.username)
           param.append('password', this.bindAccount.password)
           let config = {
             headers: {'Content-Type': 'multipart/form-data'}
           }
-          this.$http.post('/weChat/addAccount', param, config)
+          this.$http.post('/foreign/addAccount', param, config)
             .then(response => {
               this.isShowLoading = false
               if (response.data.success) {

components/mobile/loginMobile.vue

@@ -1,31 +1,59 @@
 <template>
 <div class="login">
-  <div v-if="activeTab === 0">
-    <div class="page-part">
-      <mt-field auto-complete="off" placeholder="手机号/邮箱" v-model="login.username" @blur.native.capture="codeCount"></mt-field>
-    </div>
-    <div class="page-part">
-      <mt-field placeholder="密码" v-model="login.password" type="password"></mt-field>
-      <template>
-        <p class="passwd"><a @click="forgetPwd" class="rgba">忘记密码？</a></p>
+  <div v-if="loginWay === 0">
+    <div class="login-way" v-if="activeTab === 0">
+      <div class="page-part">
+        <mt-field auto-complete="off" placeholder="手机号/邮箱" v-model="login.username" @blur.native.capture="codeCount"></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="密码" v-model="login.password" type="password"></mt-field>
+        <template>
+          <div class="handle">
+            <span class="fast-login" @click="activeTab = 1">短信快捷登录</span>
+            <span class="pwd" @click="forgetPwd">忘记密码？</span>
+          </div>
+        </template>
+      </div>
+      <template v-if="showCheckCode">
+        <div class="page-part">
+          <mt-field placeholder="验证码" v-model="login.captcha">
+            <img :src="imgSrc" height="45px" width="100px" @click="getCode">
+          </mt-field>
+        </div>
       </template>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="checkLogin(true)">登录</mt-button>
+      </div>
     </div>
-    <template v-if="showCheckCode">
+    <div class="login-way" v-if="activeTab === 1">
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="请输入手机号"
+                  v-model="fastLogin.mobile"
+                  :state="state.mobile"></mt-field>
+      </div>
       <div class="page-part">
-        <mt-field placeholder="验证码" v-model="login.captcha">
-          <img :src="imgSrc" height="45px" width="100px" @click="getCode">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="fastLogin.code">
+          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
         </mt-field>
+        <template>
+          <div class="handle">
+            <span class="pwd" @click="activeTab = 0">用户名密码登录</span>
+          </div>
+        </template>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="fastToLogin(true)">登录</mt-button>
       </div>
-    </template>
-    <div class="page-part">
-      <mt-button size="large" type="primary" @click="checkLogin(true)">登录</mt-button>
     </div>
     <div class="login-btn">
       <p>还没有优软云账号？</p>
       <mt-button size="large" plain type="primary" @click="jump">立即注册</mt-button>
     </div>
   </div>
-  <div v-if="activeTab === 1">
+  <div v-if="loginWay === 1">
     <div class="user-info">
       <div class="img"><img :src="bhImg || '/images/all/icon_mall_index.png'" alt=""></div>
       <div class="user-name">{{bhName}}</div>
@@ -87,6 +115,13 @@
           username: '',
           password: ''
         },
+        fastLogin: {
+          mobile: '',
+          code: ''
+        },
+        state: {
+          mobile: 'error'
+        },
         appId: '',
         returnUrl: '',
         baseUrl: '',
@@ -94,6 +129,10 @@
         bhToken: '',
         bhImg: '',
         bhName: '',
+        tokenCode: '',
+        tokenTime: 60,
+        tokenText: '获取验证码',
+        loginWay: 0,
         activeTab: 0
       }
     },
@@ -128,9 +167,21 @@
         if (this.$route.query.type) {
           this.bhToLogin()
         } else {
-          this.toLogin(flag)
+          if (this.activeTab === 0) {
+            this.toLogin(flag)
+          }
+          if (this.activeTab === 1) {
+            this.fastToLogin(flag)
+          }
         }
       },
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
       // 忘记密码
       forgetPwd () {
         window.location.href = `/reset/forgetPasswordValidationAccount${this.$store.state.option.fullPath}`
@@ -311,13 +362,14 @@
           this.downToast('请填写密码')
         } else {
           let param = new FormData()
+          param.append('_operate', 'account')
           param.append('t', this.bhToken)
           param.append('username', this.bhLogin.username)
           param.append('password', this.bhLogin.password)
           let config = {
             headers: {'Content-Type': 'multipart/form-data'}
           }
-          this.$http.post('/bh/addAccount', param, config)
+          this.$http.post('/foreign/addAccount', param, config)
             .then(response => {
               this.$indicator.close()
               if (response.data.success) {
@@ -340,6 +392,7 @@
         if (this.$route.query.type) {
           let param = new FormData()
           param.append('code', this.bhCode || '')
+          param.append('type', 'bh')
           param.append('appId', this.$route.query.appId ? this.$route.query.appId : '')
           param.append('returnUrl', this.$route.query.returnURL ? this.$route.query.returnURL : '')
           param.append('baseUrl', this.$route.query.baseUrl ? this.$route.query.baseUrl : '')
@@ -347,18 +400,18 @@
           let config = {
             headers: {'Content-Type': 'multipart/form-data'}
           }
-          this.$http.post('/sso/login/bhLogin', param, config)
+          this.$http.post('/sso/login/foreignLogin', param, config)
             .then(response => {
               this.$indicator.close()
               if (response.data.success) {
                 if (!response.data.content.hasRegister && response.data.content.token) {
-                  this.activeTab = 1
+                  this.loginWay = 1
                   this.bhToken = response.data.content.token
-                  this.$http.get(`/bh/userInfo/${this.bhToken}`, {params: {token: this.bhToken}})
+                  this.$http.get(`/foreign/userInfo/${this.bhToken}`, {params: {token: this.bhToken}})
                     .then(response => {
                       if (response.data.success) {
-                        this.bhImg = response.data.content.userImg
-                        this.bhName = response.data.content.nickName
+                        this.bhImg = response.data.content.foreignUserImg
+                        this.bhName = response.data.content.foreignUserName
                       } else {
                         return Promise.reject(response.data)
                       }
@@ -420,6 +473,146 @@
               })
             })
         }
+      },
+      // 验证手机号
+      validateMobile () {
+        let reg = /^1[0-9]{10}$/
+        if (!this.fastLogin.mobile) {
+          this.downToast('请先填写手机号')
+          this.state.mobile = 'error'
+        } else {
+          if (!reg.test(this.fastLogin.mobile)) {
+            this.downToast('请填写正确的手机号')
+            this.state.mobile = 'warning'
+          } else {
+            this.state.mobile = 'success'
+          }
+        }
+      },
+      // 短信获取验证码
+      getCheckCode () {
+        console.log('er')
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          this.validateMobile()
+          if (this.state.mobile === 'success') {
+            this.$indicator.open('获取中...')
+            let _this = this
+            this.$http.get('/sso/login/sendSmsCode', {params: {mobile: this.fastLogin.mobile}})
+              .then(response => {
+                this.$indicator.close()
+                if (response.data.success) {
+                  this.tokenCode = response.data.content.token
+                  this.$toast({
+                    message: '验证码已经发送到您的手机，请注意查收',
+                    iconClass: 'el-icon-success'
+                  })
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  let setTime = setInterval(() => {
+                    _this.tokenTime--
+                    this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                    if (this.tokenTime <= 0) {
+                      clearInterval(setTime)
+                      _this.tokenText = '获取验证码'
+                      _this.tokenTime = 60
+                    }
+                  }, 1000)
+                } else {
+                  console.log(response.data.errMsg)
+                  this.downToast(response.data.errMsg)
+                }
+              }).catch((err) => {
+                this.$indicator.close()
+                this.downToast(err.errMsg)
+              })
+          }
+        }
+      },
+      // 短信快捷登录
+      fastToLogin (flag) {
+        if (this.fastLogin.mobile === '') {
+          this.downToast('手机号不能为空')
+        } else if (this.fastLogin.code === '') {
+          this.downToast('验证码不能为空')
+        } else {
+          this.$indicator.open('登录中...')
+          let param = new FormData()
+          param.append('mobile', this.fastLogin.mobile)
+          param.append('code', this.fastLogin.code)
+          param.append('appId', this.$route.query.appId ? this.$route.query.appId : '')
+          param.append('token', this.tokenCode)
+          param.append('spaceUU', this.login.spaceUU ? this.login.spaceUU : '')
+          param.append('returnUrl', this.returnUrl ? this.returnUrl : '')
+          param.append('baseUrl', this.baseUrl ? this.baseUrl : '')
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/login/sms', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                // 弹框用户选择企业
+                if (response.data.content.spaces) {
+                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
+                  this.popupVisible = 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.$indicator.open('跳转中...')
+                  if (response.data.content.currentUrl) {
+                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
+                      name: 'successCallback',
+                      timeout: 5000
+                    }, (err, data) => {
+                      if (err) {
+                        this.$indicator.close()
+                        this.$toast({
+                          message: '登录超时，请重试',
+                          iconClass: 'el-icon-error'
+                        })
+                        this.login.spaceUU = ''
+                        throw err
+                      } else {
+                        this.loginOther(response, params)
+                      }
+                    })
+                  } else {
+                    this.loginOther(response, params, 3000)
+                  }
+                }
+              } else {
+                this.login.password = ''
+                this.$toast({
+                  message: response.data.errMsg,
+                  iconClass: 'el-icon-error'
+                })
+                let count = response.data.errorCount
+                if (count >= 3 && count < 5) {
+                  this.showCheckCode = true
+                  this.getCode()
+                  let _this = this
+                  setTimeout(function () {
+                    _this.getCode()
+                  }, 100)
+                  this.$toast({
+                    message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
+                    iconClass: 'el-icon-warning'
+                  })
+                }
+              }
+            }).catch(err => {
+              this.$toast({
+                message: err.errMsg,
+                iconClass: 'el-icon-error'
+              })
+            })
+        }
       }
     }
   }

nuxt.config.js

@@ -104,6 +104,6 @@ module.exports = {
     src: '~plugins/vee-validate.js',
     ssr: true
   }],
-  /* TODO 暂时代理到商城测试版，之后再做出调整 */
-  proxyTable: ['/api/**', '/login/**', '/user**', '/logout**', '/sso/**', '/appeal/**', '/update/user/**', '/valid/**', '/im/**', '/weChat/**', '/bh/**']
+  /* TODO 代理 */
+  proxyTable: ['/api/**', '/login/**', '/user**', '/logout**', '/sso/**', '/appeal/**', '/update/user/**', '/valid/**', '/im/**', '/weChat/**', '/bh/**', '/foreign/**']
 }

server.js

@@ -3,7 +3,7 @@ const app = require('express')()
 const proxy = require('http-proxy-middleware')
 const cookiejar = require('cookiejar')
 const host = process.env.HOST || '127.0.0.1'
-const port = process.env.PORT || 3001
+const port = process.env.PORT || 80
 process.noDeprecation = true
 
 app.set('port', port)