sso-ssr/components/mobile/loginMobile.vue

<template>
  <div class="mobile-content"
       v-bind:style="{background: `url(${loginStyle.bgUrlMobile}) no-repeat center center`}"
       v-bind:class="{'mobile-background-null': !loginStyle.bgUrlMobile}">
    <div class="mobile-opacity" v-bind:class="{'mobile-opacity-active': loginStyle.bgUrlMobile}">
      <template>
        <header-mobile/>
      </template>
      <div class="login">
      <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>
        <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 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>
        </div>
        <div class="login-btn">
          <p>还没有优软云账号？</p>
          <mt-button size="large" plain type="primary" @click="jump">立即注册</mt-button>
        </div>
      </div>
      <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>
        </div>
        <div class="page-part">
          <mt-field auto-complete="off" placeholder="请输入账号" v-model="bhLogin.username"></mt-field>
        </div>
        <div class="page-part">
          <mt-field placeholder="请输入密码" v-model="bhLogin.password" type="password"></mt-field>
        </div>
        <div class="page-part">
          <mt-button size="large" type="primary" @click="bhBind">确&nbsp;&nbsp;&nbsp;定</mt-button>
        </div>
        <div class="login-btn">
          <p>还没有优软云账号？</p>
          <mt-button size="large" plain type="primary"><a :href="`/register/enterpriseRegistration${this.$store.state.option.fullPath}&tk=${bhToken}`" class="go">创建新账号</a></mt-button>
        </div>
      </div>
      <mt-popup v-model="popupVisible" position="right" class="mint-popup" :modal="false">
        <ul style="height:100vh;overflow-y:auto">
          <li class="listitem itemgreen">选择您要登录的公司：</li>
          <li v-for="item in enterprise" class="listitem" @click="selectEnterprise(false, item.id)">{{ item.name }}</li>
        </ul>
      </mt-popup>
    </div>
    </div>
  </div>
</template>

<script>
  function getCodeD (appId) {
    let paramse = {
      appId: appId
    }
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        window.MrJsBridge.call((returnValue) => {
          resolve(returnValue)
        }, (error) => {
          console.log(error)
          reject(error)
        }, 'getCode', paramse)
      }
    })
  }
  import HeaderMobile from '~components/mobile/headerMobile.vue'
  export default {
    name: 'loginMobile',
    components: {
      HeaderMobile
    },
    data () {
      return {
        loading: false,
        popupVisible: false,
        imgSrc: '',
        showCheckCode: false,
        login: {
          username: '',
          password: '',
          spaceUU: '',
          captcha: ''
        },
        bhLogin: {
          username: '',
          password: ''
        },
        fastLogin: {
          mobile: '',
          code: ''
        },
        state: {
          mobile: 'error'
        },
        appId: '',
        returnUrl: '',
        baseUrl: '',
        bhCode: '',
        bhToken: '',
        bhImg: '',
        bhName: '',
        tokenCode: '',
        tokenTime: 60,
        tokenText: '获取验证码',
        loginWay: 0,
        activeTab: 0
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getUrl()
        // 碧合应用授权认证
        window.document.addEventListener('deviceready', function () {
          window.addEventListener('js_bridge_called', function () {
          })
        })
        let appId = 'a9f624cbbdb947049f5638880b0ecbb2'
        getCodeD(appId).then((data) => {
          // 成功回调 code
          alert(data)
          this.bhCode = data
          this.bhToLogin()
        }).catch((error) => {
          console.log(error)
        })
      })
    },
    computed: {
      enterprise () {
        return this.$store.state.login.chooseRegisterEnterprise.choose.data
      },
      loginStyle () {
        return this.$store.state.login.loginStyle.data.content ? this.$store.state.login.loginStyle.data.content : ''
      }
    },
    methods: {
      selectEnterprise (flag, type) {
        this.login.spaceUU = type
        this.popupVisible = flag
        if (this.$route.query.type) {
          this.bhToLogin()
        } else {
          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}`
      },
      jump () {
        window.location.href = `/register/enterpriseRegistration${this.$store.state.option.fullPath}`
      },
      getUrl () {
        this.appId = this.$store.state.option.appId
        this.returnUrl = this.$store.state.option.returnUrl
        this.baseUrl = this.$store.state.option.baseUrl
      },
      getCode () {
        this.imgSrc = '/sso/login/checkCode?timestamp=' + (new Date()).valueOf()
      },
      checkLogin (flag) {
        if (!this.login.username) {
          this.$toast({message: '请填写账号', iconClass: 'el-icon-warning'})
        } else if (!this.login.password) {
          this.$toast({message: '请填写密码', iconClass: 'el-icon-warning'})
        } else {
          this.toLogin(flag)
        }
      },
      codeCount () {
        this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
          .then(response => {
            if (response.data.success) {
              let count = response.data.content || ''
              if (count >= 3 && count < 5) {
                this.showCheckCode = true
                this.getCode()
                this.$toast({
                  message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
                  iconClass: 'el-icon-warning'
                })
              } else if (count === 5) {
                this.$toast({
                  message: '密码错误次数已达上限，今日无法登陆',
                  iconClass: 'el-icon-warning'
                })
              }
            } else {
              this.$toast({
                message: response.data.errMsg,
                iconClass: 'el-icon-warning'
              })
            }
          }).catch(err => {
            this.$toast({
              message: err.errMsg,
              iconClass: 'el-icon-warning'
            })
          })
      },
      toLogin (flag) {
        this.$indicator.open('登录中...')
        let param = new FormData()
        param.append('username', this.login.username)
        param.append('password', this.login.password)
        param.append('captcha', this.login.captcha)
        param.append('appId', this.appId)
        param.append('returnUrl', this.returnUrl)
        param.append('baseUrl', this.baseUrl)
        param.append('spaceUU', this.login.spaceUU)
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        this.$http.post('/sso/login', 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'
            })
          })
      },
      getJsonp: function (url, timeout = 500) {
        return new Promise((resolve, reject) => {
          this.$jsonp(url, {
            name: 'successCallback',
            timeout: timeout
          }, function (err, data) {
            if (err) {
              reject(err)
              throw err
            } else {
              resolve(data)
            }
          })
        })
      },
      crossAfter (url) {
        try {
          window.location.href = url
        } catch (err) {
          console.log(err)
        }
      },
      loginOther (response, a, timeout) {
        const crossAfter = this.crossAfter
        let promises = []
        for (let i in response.data.content.loginUrls) {
          if (response.data.content.currentUrl !== response.data.content.loginUrls[i]) {
            promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?${a}`))
          }
        }
        Promise.all(promises).then(() => {
          crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
        }).catch(() => {
          crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
        })
      },
      // 碧合绑定账号
      bhBind () {
        this.$indicator.open('绑定中请稍后...')
        if (!this.bhLogin.username) {
          this.$indicator.close()
          this.downToast('请填写账号')
        } else if (!this.bhLogin.password) {
          this.$indicator.close()
          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('/foreign/addAccount', param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.bhToLogin()
              } else {
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.$indicator.close()
              this.$toast({
                message: err.errMsg,
                iconClass: 'el-icon-error'
              })
            })
        }
      },
      // 判断是否绑定、选择账套
      bhToLogin () {
        this.$indicator.open('加载中...')
        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 : '')
          param.append('spaceUU', this.login.spaceUU ? this.login.spaceUU : '')
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          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.loginWay = 1
                  this.bhToken = response.data.content.token
                  this.$http.get(`/foreign/userInfo/${this.bhToken}`, {params: {token: this.bhToken}})
                    .then(response => {
                      if (response.data.success) {
                        this.bhImg = response.data.content.foreignUserImg
                        this.bhName = response.data.content.foreignUserName
                      } else {
                        return Promise.reject(response.data)
                      }
                    }).catch(err => {
                      this.$toast({
                        message: err.errMsg,
                        iconClass: 'el-icon-error'
                      })
                    })
                } else if (response.data.content.spaces) {
//                   弹框让用户选择企业
                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
                  this.popupVisible = true
                  this.$indicator.open('跳转中...')
                } 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: 3000
                    }, (err, data) => {
                      if (err) {
                        this.$toast({
                          message: '登录超时，请重试',
                          iconClass: 'el-icon-error'
                        })
                        this.$indicator.close()
                        throw err
                      } else {
                        this.loginOther(response, params)
                      }
                    })
                  } else {
                    this.loginOther(response, params, 3000)
                  }
                }
              } else {
                this.$toast({
                  message: response.data,
                  iconClass: 'el-icon-error'
                })
              }
            }).catch(err => {
              this.$indicator.close()
              let _this = this
              setTimeout(function () {
                _this.getCode()
              }, 100)
              this.$toast({
                message: err.errMsg,
                iconClass: 'el-icon-error'
              })
            })
        }
      },
      // 验证手机号
      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 () {
        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 {
                  this.state.mobile = 'error'
                  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'
              })
            })
        }
      }
    }
  }
</script>