sso-ssr/components/register/EnterpriseRegistration.vue

<template>
  <div class="register">
    <div class="container">
      <div class="content">
        <div class="content-top">
          <h3>企业注册</h3>
          <a class="go" @click="goRegister"><i class="fa fa-long-arrow-right"></i>个人注册</a>
        </div>
        <div v-show="goNextStep">
          <el-form :model="enterprise" :rules="rules" ref="enterprise" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="mobile">
              <el-input v-model="enterprise.mobile" placeholder="手机号码"></el-input>
              <span class="tip" v-show="showMsgTip">一个手机可注册多个企业</span>
            </el-form-item>
            <el-form-item prop="code">
              <el-input type="text" v-model="enterprise.code"
                                    v-bind:class="{ active: codeErrorChecked }"
                                    auto-complete="off"
                                    class="msg"
                                    placeholder="短信验证码"></el-input>
              <el-button type="primary" class="code"
                         v-show="sendEnterpriseCode"
                         @click="getCheckCode"
                         :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
              <el-button type="primary"  v-show="!sendEnterpriseCode" class="code code-send">已发送({{enterprise_time}}s)</el-button>
              <span v-show="codeErrorChecked" class="codeError-tip">{{codeErrorMsg}}</span>
            </el-form-item>
            <el-form-item>
              <a class="btn finish"
                 @click="checkPhone">下一步</a>
            </el-form-item>
            <el-form-item>
              <el-checkbox name="type" v-model="checked" @click="checkboxIsChecked"></el-checkbox>
              <span class="agree" v-if="JSON.parse(agreementUrl.terms).isUrl || ''">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
              <span class="agree" v-else>我已阅读并同意<a :href="`/common/cityAgreement/?appId=${this.$route.query.appId}`">《{{JSON.parse(agreementUrl.terms).name || ''}}》</a></span>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="!goNextStep">
          <el-form :model="enterprise1" :rules="rules1" ref="enterprise1" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="spaceName">
              <el-input type="text"
                        v-model="enterprise1.spaceName"
                        v-bind:class="{ active: isSpaceNameExist }"
                        auto-complete="off"
                        placeholder="企业名称"
              ></el-input>
              <span class="tip exist" v-show="isSpaceNameExist">
                {{spaceNameExitMsg}}
                <!--<i class="fa fa-question-circle" aria-hidden="true"-->
                                       <!--v-show="spaceNameExitMsg != '出现异常'"-->
                                       <!--@mouseenter='showPopTip =true'-->
                                       <!--@mouseleave='showPopTip = false'></i>-->
              </span>
              <!--<div class="pop-tip"  @mouseenter='showPopTip =true'-->
                   <!--@mouseleave='showPopTip = false'> <span class='pop-title' v-show="showPopTip">如果您所属企业的管理员已离职或不再使用优软云，请 <a href="/appeals/changeManagerAppeal">更换管理员</a> </span>-->
              <!--</div>-->
            </el-form-item>
            <el-form-item prop="businessCode">
              <el-input type="text"
                        v-model="enterprise1.businessCode"
                        v-bind:class="{ active: isBusinessCodeExist }"
                        auto-complete="off"
                        placeholder="营业执照号"></el-input>
              <span class="tip exist" v-show="isBusinessCodeExist">{{businessCodeExitMsg}}。<a href="https://www.ubtob.com/contact">仍有问题？</a></span>
            </el-form-item>
            <el-form-item prop="vipName" v-if="!isHasRegister">
              <el-input type="text" v-model="enterprise1.vipName" auto-complete="off" placeholder="管理员姓名"></el-input>
            </el-form-item>
            <el-form-item prop="password" v-if="!isHasRegister">
              <el-input type="password" v-model="enterprise1.password" auto-complete="new-password" placeholder="登录密码"></el-input>
              <div class="pwd sm" v-show="showMsgTip1">密码强度 <em></em><em></em><em></em><span>弱</span></div>
              <div class="pwd md" v-show="showMsgTip2">密码强度 <em></em><em></em><em></em><span>中</span></div>
              <div class="pwd lar" v-show="showMsgTip3">密码强度 <em></em><em></em><em></em><span>强</span></div>
              <div class="pwd low" v-show="showMsgTip4">密码强度 <em></em><em></em><em></em></div>
            </el-form-item>
            <el-form-item prop="password" v-if="isHasRegister">
              <el-input type="password"
                        v-model="enterprise1.password"
                        auto-complete="new-password"
                        placeholder="密码确认"
                        v-bind:class="{ correct: passwordChecked }"></el-input>
              <span class="sure" v-if="isHasRegister" v-show="phoneIsRegisterTip">该手机号已有优软账号，请输入原账号的登录密码进行校验确认</span>
            </el-form-item>
            <el-form-item prop="confirm" v-if="!isHasRegister">
              <el-input type="password"
                        auto-complete="new-password"
                        placeholder="密码确认"
                        v-bind:class="{active: showPasswordError}"
                        v-model="enterprise1.confirm"></el-input>
              <span class="tip passwordError" v-show="showPasswordError">两次输入密码不一致</span>
            </el-form-item>
            <el-form-item prop="email" v-if="!isHasEmail">
              <el-input type="text"
                        v-model="enterprise1.email"
                        auto-complete="off"
                        placeholder="联系邮箱"
                        v-bind:class="{active: emailHasRegister}"></el-input>
              <span class="codeError-tip" v-if="emailHasRegister">该邮箱已被注册</span>
            </el-form-item>
              <a class="btn finish" @click="sureRegister">确认注册</a>
            </el-form-item>

            <el-form-item>
              <el-checkbox name="type" v-model="checked" @click="checkboxIsChecked"></el-checkbox>
              <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="login">已有账号？<a :href="returnLogin">立即登录</a></div>
      <loading v-show="isShowLoading"/>
    </div>
    <!--尾部-->
    <div v-html="loginStyle.footUrl" class="footer"></div>
  </div>
</template>

<script>
  import Loading from '~components/common/loading/Loading.vue'
  export default {
    name: 'EnterpriseRegistration',
    components: {
      Loading
    },
    data () {
//      企业注册第一步
      var validateMobile = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的手机号'))
          this.showMsgTip = false
          this.getCodeBtnIsDisabled = true
          this.mobileChecked = false
        } else {
          if (this.enterprise.mobile !== '') {
            var reg = /^1[0-9]{10}$/
            if (!reg.test(value)) {
              callback(new Error('请填写正确的手机号'))
              this.showMsgTip = false
              this.getCodeBtnIsDisabled = true
              this.mobileChecked = false
            } else {
              this.getCodeBtnIsDisabled = false
              this.showMsgTip = false
              this.mobileChecked = true
            }
          }
          callback()
        }
      }
      var validateCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的验证码'))
          this.codeErrorChecked = false
          this.codeChecked = false
        } else {
          if (this.enterprise.mobile === '') {
            callback(new Error('请先填写正确的手机号'))
          } else {
            if (this.token) {
              if (this.enterprise.code.length === 6) {
                let param = new FormData()
                param.append('mobile', this.enterprise.mobile)
                param.append('code', this.enterprise.code)
                param.append('token', this.token)
                let config = {
                  headers: {'Content-Type': 'multipart/form-data'}
                }
                this.$http.post(`/sso/userspace/register/checkCode`, param, config)
                  .then(response => {
                    if (response.data.success) {
                      this.codeChecked = true
                      this.codeErrorChecked = false
                    } else {
                      this.codeErrorChecked = true
                      this.codeChecked = false
                      return Promise.reject(response.data)
                    }
                  }).catch(err => {
                    this.codeErrorChecked = true
                    this.codeErrorMsg = err.errMsg
                  })
              } else {
                callback(new Error('请输入正确的验证码'))
                this.codeChecked = false
                this.codeErrorChecked = false
              }
            } else {
              callback(new Error('请先获取验证码'))
              this.codeChecked = false
              this.codeErrorChecked = false
            }
          }
          callback()
        }
      }
      var validateCodeIsEmpty = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的验证码'))
          this.codeErrorChecked = false
          this.codeChecked = false
        } else {
          if (this.enterprise.mobile === '') {
            callback(new Error('请先填写正确的手机号'))
          } else {
            if (this.token) {
              if (this.enterprise.code.length === 6) {
                let param = new FormData()
                param.append('mobile', this.enterprise.mobile)
                param.append('code', this.enterprise.code)
                param.append('token', this.token)
                let config = {
                  headers: {'Content-Type': 'multipart/form-data'}
                }
                this.$http.post(`/sso/userspace/register/checkCode`, param, config)
                  .then(response => {
                    if (response.data.success) {
                      this.codeChecked = true
                      this.codeErrorChecked = false
                    } else {
                      this.codeErrorChecked = true
                      this.codeChecked = false
                      return Promise.reject(response.data)
                    }
                  }).catch(err => {
                    this.codeErrorChecked = true
                    this.codeErrorMsg = err.errMsg
                  })
              } else {
                callback(new Error('请输入正确的验证码'))
                this.codeChecked = false
                this.codeErrorChecked = false
              }
            } else {
              callback(new Error('请先获取验证码'))
              this.codeChecked = false
              this.codeErrorChecked = false
            }
          }
          callback()
        }
      }
//      企业注册第二步
      var validateSpaceName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的企业名称'))
          this.spaceNameChecked = false
          this.isSpaceNameExist = false
        } else {
          if (this.enterprise1.spaceName !== '') {
            if (value.length > 20) {
              callback(new Error('输入长度过长，20个字符以内'))
              this.spaceNameChecked = false
            } else {
              this.$http.get(`/api/userspace/checkSpaceName`, {params: {spaceName: this.enterprise1.spaceName}})
                .then(response => {
                  if (response.data.success) {
                    this.spaceNameChecked = true
                    this.isSpaceNameExist = false
                  } else {
                    this.spaceNameChecked = false
                    this.isSpaceNameExist = true
                    return Promise.reject(response.data)
                  }
                }).catch(err => {
                  this.spaceNameExitMsg = err.errMsg
                  // this.$message.error(err.errMsg)
                })
            }
          }
          callback()
        }
      }
      var validateBusinessCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的营业执照号'))
          this.businessCodeChecked = false
          this.isBusinessCodeExist = false
        } else {
          if (this.enterprise1.businessCode !== '') {
            let reg = /^[A-Za-z0-9]+$/
            if (reg.test(value)) {
              if (value.length > 20) {
                callback(new Error('输入长度过长，20个字符以内'))
                this.businessCodeChecked = false
                this.isBusinessCodeExist = false
              } else {
                this.$http.get(`/api/userspace/checkBusinessCode`, {params: {businessCode: this.enterprise1.businessCode}})
                  .then(response => {
                    if (response.data.success) {
                      this.businessCodeChecked = true
                      this.isBusinessCodeExist = false
                    } else {
                      this.businessCodeChecked = false
                      this.isBusinessCodeExist = true
                      return Promise.reject(response.data)
                    }
                  }).catch(err => {
                    this.businessCodeExitMsg = err.errMsg
//                  this.$message.error(err.errMsg)
                  })
              }
            } else {
              callback(new Error('请填写正确的营业执照号'))
              this.businessCodeChecked = false
              this.isBusinessCodeExist = false
            }
          }
          callback()
        }
      }
      var validateVipName = (rule, value, callback) => {
        if (this.isHasRegister) {
          this.vipNameChecked = true
        } else {
          if (value === '') {
            callback(new Error('请填写正确的管理员姓名'))
            this.vipNameChecked = false
          } else {
            if (this.enterprise1.vipName !== '') {
              if (value.length > 20) {
                callback(new Error('输入长度过长，20个字符以内'))
                this.vipNameChecked = false
              } else {
                this.vipNameChecked = true
              }
            }
            callback()
          }
        }
      }
      var validatePassword = (rule, value, callback) => {
        if (this.enterprise1.password !== '') {
          if (value.length <= 20 && value.length >= 8) {
            var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
            var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
            if (reg1.test(value)) {
//                callback(new Error('密码强度强'))
              this.showMsgTip3 = true
              this.showMsgTip2 = false
              this.showMsgTip1 = false
              this.showMsgTip4 = false
              this.passwordChecked = true
            } else if (reg2.test(value)) {
//                callback(new Error('密码强度中'))
              this.showMsgTip2 = true
              this.showMsgTip3 = false
              this.showMsgTip1 = false
              this.showMsgTip4 = false
              this.passwordChecked = true
            } else {
              this.showMsgTip1 = true
              this.showMsgTip3 = false
              this.showMsgTip2 = false
              this.showMsgTip4 = false
              this.passwordChecked = false
            }
          } else {
            this.showMsgTip3 = false
            this.showMsgTip2 = false
            this.showMsgTip1 = false
            this.showMsgTip4 = true
            this.passwordChecked = false
          }
        }
        callback()
      }
      var validatePasswordTip = (rule, value, callback) => {
        if (this.isHasRegister) {
          if (value === '') {
            callback(new Error('请输入密码'))
            this.passwordChecked = false
            this.phoneIsRegisterTip = false
          } else {
            this.passwordChecked = true
          }
        } else {
          if (value === '') {
            callback(new Error('请输入密码'))
            this.passwordChecked = false
          } else {
            if (this.enterprise1.password !== '') {
              if (value.length <= 20 && value.length >= 8) {
                var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
                var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
                if (reg1.test(value)) {
                  this.passwordChecked = true
                } else if (reg2.test(value)) {
                  this.passwordChecked = true
                } else {
                  callback(new Error('密码须为8-20字符的英文、数字混合'))
                  this.passwordChecked = false
                }
              } else {
                callback(new Error('密码须为8-20字符的英文、数字混合'))
                this.passwordChecked = false
              }
              if (this.enterprise1.confirm !== '') {
                if (value !== this.enterprise1.confirm) {
                  this.showPasswordError = true
                  // callback(new Error('两次输入密码不一致!'))
                  this.passwordConfirmChecked = false
                } else {
                  this.passwordConfirmChecked = true
                  this.showPasswordError = false
                  callback()
                }
              }
            }
            callback()
          }
        }
      }
      var validateConfirm = (rule, value, callback) => {
        if (this.isHasRegister) {
          this.passwordConfirmChecked = true
        } else {
          if (value === '') {
            callback(new Error('请再次输入密码'))
            this.passwordConfirmChecked = false
            this.showPasswordError = false
          } else if (value !== this.enterprise1.password) {
            // callback(new Error('两次输入密码不一致!'))
            this.showPasswordError = true
            this.passwordConfirmChecked = false
          } else {
            this.passwordConfirmChecked = true
            this.showPasswordError = false
          }
        }
        callback()
      }
      var validateEmail = (rule, value, callback) => {
        if (this.isHasEmail) {
          this.emailChecked = true
          this.emailHasRegister = false
        } else {
          if (this.enterprise1.email) {
            var reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
            if (!reg.test(value)) {
              callback(new Error('请输入正确的邮箱地址格式'))
              this.emailChecked = false
              this.emailHasRegister = false
            } else {
              this.$http.get(`/api/user/checkEmail`, {params: {email: this.enterprise1.email}})
                .then(response => {
                  if (response.data.hasRegister) {
                    this.emailChecked = false
                    this.emailHasRegister = true
                  } else {
                    this.emailChecked = true
                    this.emailHasRegister = false
                    return Promise.reject(response.data)
                  }
                }).catch(err => {
                  this.$message.error(err.errMsg)
                })
            }
            callback()
          } else {
            this.emailChecked = true
            this.emailHasRegister = false
          }
        }
      }
      return {
//        企业注册第一步
        enterprise: {
          mobile: '',
          code: ''
        },
//        企业注册第二步
        enterprise1: {
          spaceName: '',
          businessCode: '',
          vipName: '',
          password: '',
          confirm: '',
          email: ''
        },
        businessCodeExitMsg: '',
        spaceNameExitMsg: '',
        showPopTip: false,
        showPasswordError: false,
        isShowLoading: false,
        codeErrorMsg: '',
        checked: true,
        getCodeBtnIsDisabled: true,
        mobileChecked: false,
        codeChecked: false,
        showMsgTip: true,
        sendEnterpriseCode: true,
        codeErrorChecked: false,
        enterprise_time: 0,
        showMsgTip1: false,
        showMsgTip2: false,
        showMsgTip3: false,
        showMsgTip4: false,
        spaceNameChecked: false,
        businessCodeChecked: false,
        vipNameChecked: false,
        passwordChecked: false,
        passwordConfirmChecked: false,
        emailChecked: true,
        isHasRegister: false,
        isHasEmail: false,
        goNextStep: true,
        phoneIsRegisterTip: true,
        isSpaceNameExist: false,
        isBusinessCodeExist: false,
        emailHasRegister: false,
        queryLink: '',
        appId: '',
        returnLogin: '',
//        企业注册第一步
        rules: {
          mobile: [
            {validator: validateMobile, trigger: 'blur'}
          ],
          code: [
            {validator: validateCode, trigger: 'change'},
            {validator: validateCodeIsEmpty, trigger: 'blur'}
          ]
        },
//        企业注册第二步
        rules1: {
          spaceName: [
            {validator: validateSpaceName, trigger: 'blur'}
          ],
          businessCode: [
            {validator: validateBusinessCode, trigger: 'blur'}
          ],
          vipName: [
            {validator: validateVipName, trigger: 'blur'}
          ],
          password: [
            {validator: validatePassword, trigger: 'change'},
            {validator: validatePasswordTip, trigger: 'blur'}
          ],
          confirm: [
            {validator: validateConfirm, trigger: 'blur'}
          ],
          email: [
            {validator: validateEmail, trigger: 'change'}
          ]
        }
      }
    },
    computed: {
      loginStyle () {
        return this.$store.state.login.loginStyle.data.content
      },
      agreementUrl () {
        return this.$store.state.login.agreementUrl.data.content
      }
    },
    mounted () {
//      获取链接
      this.$nextTick(() => {
        this.getUrl()
      })
    },
    methods: {
      // 获取链接
      getUrl () {
        var url = window.location.search
        var origin = window.location.origin
        this.returnLogin = origin + url
        var request = {}
        if (url.indexOf('?' !== -1)) {
          var str = url.substr(1)
          var strs = str.split('&')
          this.queryLink = str
          for (var i = 0; i < strs.length; i++) {
            request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
          }
        }
        this.appId = request['appId'] || ''
      },
      // 注册
      goRegister () {
        window.location.href = `/register/personalRegistration?${this.queryLink}`
      },
//      我同意是否被选中
      checkboxIsChecked () {
        this.checked = !this.checked
      },
//      获取校验码
      getCheckCode () {
        this.isShowLoading = true
        this.$http.get(`/sso/userspace/register/checkCode`, {params: {mobile: this.enterprise.mobile}})
          .then(response => {
            this.isShowLoading = false
            if (response.data) {
              this.token = response.data.token
              if (this.token !== '') {
                this.$message({
                  message: '验证码已经发送到您的手机，请注意查收',
                  type: 'success'
                })
                this.sendEnterpriseCode = false
                this.enterprise_time = 60
                var enterpriseTime = setInterval(() => {
                  this.enterprise_time--
                  if (this.enterprise_time <= 0) {
                    this.sendEnterpriseCode = true
                    clearInterval(enterpriseTime)
                  }
                }, 1000)
              }
            } else {
              return Promise.reject(response.data)
            }
          }).catch(err => {
            this.isShowLoading = false
            this.$message.error(err.errMsg)
          })
      },
//      验证手机
      checkPhone () {
        console.log('000')
        if (this.mobileChecked && this.codeChecked && this.checked) {
          this.isShowLoading = true
          let param = new FormData()
          param.append('mobile', this.enterprise.mobile)
          param.append('code', this.enterprise.code)
          param.append('appId', this.appId)
          param.append('token', this.token)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/userspace/register/checkAdminTel', param, config)
            .then(response => {
              this.isShowLoading = false
              if (response.data.success) {
                this.goNextStep = false
                if (response.data.content.hasRegister) {
                  this.isHasRegister = true
                  if (response.data.content.hasEmail) {
                    this.isHasEmail = true
                  } else {
                    this.isHasEmail = false
                  }
                } else {
                  this.isHasRegister = false
                  this.isHasEmail = false
                }
              } else {
                this.goNextStep = true
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.$message.error(err.errMsg)
              this.isShowLoading = false
              this.enterprise_time = 0
            })
        } else {
          if (!this.enterprise.mobile) {
            this.$message.error('手机号不能为空')
          } else if (!this.mobileChecked) {
            this.$message.error('手机号输入有误，请按提示重新输入')
          } else if (!this.token) {
            this.$message.error('请先获取验证码')
          } else if (!this.enterprise.code) {
            this.$message.error('验证码不能为空')
          } else if (!this.codeChecked) {
            this.$message.error('验证码输入有误，请按提示重新输入')
          } else if (!this.checked) {
            this.$message.error('您对阅读条款未做勾选')
          }
        }
      },
//      确认注册
      sureRegister () {
        if (!this.isHasRegister) {
          if (this.spaceNameChecked && this.businessCodeChecked && this.vipNameChecked && this.passwordChecked && this.passwordConfirmChecked && this.emailChecked && this.checked) {
            this.submitRegister()
          } else {
            if (!this.enterprise1.spaceName) {
              this.$message.error('企业名不能为空')
            } else if (!this.spaceNameChecked) {
              this.$message.error('企业名称输入有误，请按提示重新输入')
            } else if (!this.enterprise1.businessCode) {
              this.$message.error('营业执照号不能为空')
            } else if (!this.businessCodeChecked) {
              this.$message.error('营业执照号输入有误，请按提示重新输入')
            } else if (!this.enterprise1.vipName) {
              this.$message.error('管理员姓名不能为空')
            } else if (!this.vipNameChecked) {
              this.$message.error('管理员姓名输入有误，请按提示重新输入')
            } else if (!this.enterprise1.password) {
              this.$message.error('密码不能为空')
            } else if (!this.passwordChecked) {
              this.$message.error('密码输入有误，请按提示重新输入')
            } else if (!this.enterprise1.confirm) {
              this.$message.error('请再次输入密码')
            } else if (this.enterprise1.password !== this.enterprise1.confirm) {
              this.$message.error('请确认两次填写密码是否一致')
            } else if (this.enterprise1.email && !this.emailChecked) {
              this.$message.error('邮箱输入有误，请按提示重新输入')
            } else if (!this.checked) {
              this.$message.error('您对阅读条款未做勾选')
            }
          }
        } else {
          if (this.isHasEmail) {
            if (this.spaceNameChecked && this.businessCodeChecked && this.passwordChecked && this.checked) {
              this.submitRegister()
            } else {
              if (!this.enterprise1.spaceName) {
                this.$message.error('企业名不能为空')
              } else if (!this.spaceNameChecked) {
                this.$message.error('企业名称输入有误，请按提示重新输入')
              } else if (!this.enterprise1.businessCode) {
                this.$message.error('营业执照号不能为空')
              } else if (!this.businessCodeChecked) {
                this.$message.error('营业执照号输入有误，请按提示重新输入')
              } else if (!this.enterprise1.password) {
                this.$message.error('密码不能为空')
              } else if (!this.checked) {
                this.$message.error('您对阅读条款未做勾选')
              }
            }
          } else {
            if (this.spaceNameChecked && this.businessCodeChecked && this.passwordChecked && this.emailChecked && this.checked) {
              this.submitRegister()
            } else {
              if (!this.enterprise1.spaceName) {
                this.$message.error('企业名不能为空')
              } else if (!this.spaceNameChecked) {
                this.$message.error('企业名称输入有误，请按提示重新输入')
              } else if (!this.enterprise1.businessCode) {
                this.$message.error('营业执照号不能为空')
              } else if (!this.businessCodeChecked) {
                this.$message.error('营业执照号输入有误，请按提示重新输入')
              } else if (!this.enterprise1.password) {
                this.$message.error('密码不能为空')
              } else if (this.enterprise1.email && !this.emailChecked) {
                this.$message.error('邮箱输入有误，请按提示重新输入')
              } else if (!this.checked) {
                this.$message.error('您对阅读条款未做勾选')
              }
            }
          }
        }
      },
      submitRegister () {
        this.isShowLoading = true
        let param = new FormData()
        param.append('spaceName', this.enterprise1.spaceName)
        param.append('businessCode', this.enterprise1.businessCode)
        param.append('vipName', this.enterprise1.vipName || '')
        param.append('password', this.enterprise1.password)
        param.append('email', this.enterprise1.email || '')
        param.append('appId', this.$store.state.option.appId)
        param.append('inviteSpaceUU', this.$store.state.option.inviteSpaceUU)
        param.append('inviteUserUU', this.$store.state.option.inviteUserUU)
        param.append('invitationTime', this.$store.state.option.invitationTime)
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        this.$http.post('/sso/userspace/register', param, config)
          .then(response => {
            this.isShowLoading = false
            if (response.data.success) {
              console.log(response.data)
              if (response.data.content.type === 'mall') {
                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 if (response.data.content.type === 'city') {
                this.$router.push({ path: `/overRegister/cityRegisterOver${this.$store.state.option.fullPath}` })
              } else {
                window.location.href = '/overRegister/overEnterprise'
              }
            } else {
              return Promise.reject(response.data)
            }
          }).catch(err => {
            this.isShowLoading = false
            this.$message.error(err.errMsg)
          })
      },
      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) {
          promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?${a}`))
        }
        let returnUrl = decodeURIComponent(this.$route.query.returnURL)
        Promise.all(promises).then(() => {
          crossAfter(returnUrl || 'http://www.ubtob.com', timeout)
        }).catch(() => {
          crossAfter(returnUrl || 'http://www.ubtob.com', timeout)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .register {
    margin: 0 auto;
    width: 100%;
    background: #eee;
    .container{
      padding-top: 50px;
      margin: 0 auto;
      width: 980px;
      text-align: center;
      .content{
        padding: 0 50px;
        margin: 50px auto 0;
        width: 100%;
        text-align: center;
        background: #fff;
          .content-top{
            position: relative;
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #dcdcdc;
            h3{
              font-family: 'SimHei';
              font-size: 24px;
              color: #000;
            }
            a.go{
              position: absolute;
              top: 0;
              right: 0;
              font-size: 14px;
              i{
                margin-right: 3px;
              }
            }
          }
          form {
            padding-bottom: 44px;
            margin-top: 35px;
              span.sure{
                position: absolute;
                top: 0;
                right: -271px;
                width: 250px;
                text-align: left;
                line-height: 21px;
                font-size: 13px;
                color: #8c8c8c;
              }
              span.codeError-tip{
                position: absolute;
                top: 3px;
                left: 378px;
                width: 200px;
                text-align: left;
                color: #ff4949;
                font-size: 12px;
              }
              input{
                padding: 0 0 0 18px;
                width: 360px;
                height: 44px;
                line-height: 44px;
                font-size: 14px;
                color: #000;
                border-radius: 0;
              }
              .pwd {
                margin: 6px 0 -15px 0;
                text-align: left;
                font-size: 13px;
              em{
                display: inline-block;
                margin: 0 8px 2px 0;
                width: 24px;
                height: 6px;
              &:first-child{
                 margin-left: 10px;
               }
              }
              span{
                margin-left: 10px;
                font-size: 13px;
              }
              }
              .pwd.sm{
                color: #8c8c8c;
              em {
                background: #bfbfbf;
              &:first-child{
                 background: #ff4e00;
               }
              }
              span{
                color: #ff4e00;
              }
              }
              .pwd.md{
                color: #8c8c8c;
              em {
                background: #22ac38;
              &:nth-child(3){
                 background: #bfbfbf;
               }
              }
              span{
                color: #22ac38;
              }
              }
              .pwd.lar{
                color: #8c8c8c;
              em {
                background: #00a0e9;
              }
              span{
                color: #00a0e9;
              }
              }
              .pwd.low{
                color: #8c8c8c;
              em {
                background: #bfbfbf;
              }
              span{
                color: #00a0e9;
              }
              }
              span.tip{
                position: absolute;
                top: 0;
                right: -165px;
                font-size: 13px;
                color: #8c8c8c;
              }
              span.tip.exist{
                top: 5px;
                left: 380px;
                width: 250px;
                line-height: 18px;
                text-align: left;
                a{
                  color: #2d8cf0;
                  &:hover{
                     color: #f44336;
                   }
                }
                i.fa {
                  font-size: 14px;
                  color: #666;
                  cursor: pointer;
                }
              }
              div.pop-tip{
                position: absolute;
                top: 39px;
                left: 470px;
                z-index: 10;
                span.pop-title{
                  display: inline-block;
                  padding: 5px;
                  z-index:100;
                  width: 150px;
                  height: 55px;
                  line-height: 16px;
                  text-align: left;
                  font-size: 12px;
                  color: #8c8c8c;
                  background: #fff;
                  box-shadow: 0 0 5px rgba(0,0,0,.5);
                  -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
                  -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
                  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
                  border-radius: 5px;
                }
              }
              span.tip.passwordError{
                position: absolute;
                top: 3px;
                left: 380px;
                width: 200px;
                text-align: left;
                color: #ff4949;
                font-size: 12px;
              }
              input.msg{
                float: left;
                width: 210px;
              }
              span.msg{
                float: right;
                width: 130px;
                height: 44px;
                line-height: 44px;
                font-size: 14px;
                color: #5a5a5a;
                background: #f4f4f4;
                border: 1px solid #dcdcdc;
                cursor: pointer;
              }
              span.msg.send{
                background: #d2d2d2;
                color: #fff;
              }
              input[type='checkbox']{
                margin: 0 14px 0 55px;
                float: left;
                width: 16px;
                height: 16px;
              }
              span.agree{
                float: left;
                margin: 1px 0 0 10px;
                font-size: 14px;
                color: #8b8b8b;
                a{
                  color: #0076ad;
                }
              }
              .form-group.agree{
                margin: 20px auto 0 !important;
              }
              .btn {
                margin: 34px 0 16px 0;
                width: 360px;
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                color: #fff;
                background: #0076AD;
                border-radius: 3px;
              }
              }
              }
            .login{
              margin-top: 20px;
              font-size: 14px;
              color: #8c8c8c;
              a{
                font-size: 14px;
                color: #0076ad;
              }
            }
    }
  }
  .footer{
    padding: 50px 0;
  }
</style>