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>
        <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)
        //   }
        // }
        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>