mall-web-ssr/pages/businessEnter/index.vue

<template>
  <div class="business-enter">
   <div class="banner"></div>
    <div class="section-01">
      <img src="/images/bussinessEnter/banner02.png" alt="">
      <div class="register">
        <div class="reg-box">
          <div  v-show="goNextStep" class="reg-content">
            <div class="form-group">
              <input type="text" class="form-control phone"
                     placeholder="手机号码"
                     v-model="enterprise.mobile"
                     maxlength="11"
                     :class="{'err': !mobileChecked}"
                     @blur="checkMobile(enterprise.mobile)"/>
              <span class="help-list" v-text="mobileErrMsg"></span>
            </div>
            <div class="form-group">
              <input type="text" class="form-control code"
                     placeholder="短信验证码"
                     v-model="enterprise.code"
                     :class="{'err': !codeChecked}"
                     @change="checkMsgCode(enterprise.code)"/>
              <template>
                <el-popover
                  placement="top"
                  width="300"
                  v-model="visible">
                  <div class="valid-code">
                    <input type="text"
                           v-model="enterprise.ImgCode">
                    <img id="captchaImage2" alt="">
                    <span @click="getImgCode">看不清换一张</span>
                  </div>
                  <div class="valid-btn">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="getCode">确定</el-button>
                  </div>
                  <button class="code-btn"
                          slot="reference"
                          v-show="sendEnterpriseCode"
                          :disabled="!mobileChecked">获取验证码</button>
                </el-popover>
              </template>
              <button class="code-btn" v-show="!sendEnterpriseCode">已发送({{enterprise_time}}s)</button>
              <span class="help-list" v-text="codeErrMsg"></span>
            </div>
            <div class="form-group">
              <label class="check-box-wrap">
                <input type="checkbox"
                       id="check-box"
                       v-model="isRead"
                       :checked="isRead">
                <label class="agr" for="check-box">我已阅读并同意<a :href="`${address}/common/agreement`" target="_blank">《优软云服务条款》</a></label>
              </label>
            </div>
            <div class="form-group">
              <span class="next-bottom" @click="nextStep">下一步</span>
            </div>
          </div>
          <div v-show="!goNextStep" class="reg-content">
            <div class="form-group">
              <input type="text" class="form-control"
                     placeholder="企业名称"
                     v-model="enterprise.spaceName"
                     maxlength="20"
                     :class="{'err': !spaceNameChecked}"
                     @blur="checkSpaceName(enterprise.spaceName)"/>
              <span class="help-list" v-text="spaceNameErrMsg"></span>
            </div>
            <div class="form-group">
              <input type="text" class="form-control"
                     placeholder="营业执照号"
                     v-model="enterprise.businessCode"
                     maxlength="20"
                     :class="{'err': !businessCodeChecked}"
                     @blur="checkBusinessCode(enterprise.businessCode)"/>
              <span class="help-list" v-text="businessCodeErrMsg"></span>
            </div>
            <div class="form-group" v-if="!isHasRegister">
              <input type="text" class="form-control"
                     placeholder="管理员姓名"
                     v-model="enterprise.vipName"
                     maxlength="20"
                     :class="{'err': !vipNameChecked}"
                     @blur="checkVipName(enterprise.vipName)"/>
              <span class="help-list" v-text="vipNameErrMsg"></span>
            </div>
            <div class="form-group" v-if="!isHasRegister">
              <input type="password" class="form-control"
                     placeholder="登录密码"
                     v-model="enterprise.password"
                     maxlength="20"
                     :class="{'err': !passwordChecked}"
                     @blur="checkPassword(enterprise.password)"
                     @input="passwordStrength(enterprise.password)"/>
              <span class="help-list" v-text="passwordErrMsg"></span>
            </div>
            <div v-if="enterprise.password">
              <div class="pwd" v-if="!isHasRegister"
                   :class="{sm: strength === '弱', md: strength === '中', lar: strength === '强', low: strength === ''}">
                密码强度 <em></em><em></em><em></em>
                <span v-text="strength === '弱' ? '弱' : strength === '中' ? '中' : strength === '强' ? '强' : ''">弱</span>
              </div>
            </div>
            <div class="form-group" v-if="isHasRegister">
              <input type="password" class="form-control"
                     placeholder="密码确认"
                     v-model="enterprise.password"
                     maxlength="20"
                     :class="{'err': !passwordChecked}"
                     @blur="checkRegisterPassword(enterprise.password)"/>
              <span class="help-list" v-text="phoneIsRegisterTip"></span>
            </div>
            <div class="form-group" v-if="!isHasRegister">
              <input type="password" class="form-control"
                     placeholder="密码确认"
                     v-model="enterprise.confirm"
                     maxlength="20"
                     :class="{'err': !passwordConfirmChecked}"
                     @blur="checkConfirm(enterprise.confirm)"/>
              <span class="help-list" v-text="confirmErrMsg"></span>
            </div>
            <div class="form-group" v-if="!isHasEmail">
              <input type="text" class="form-control"
                     placeholder="联系邮箱"
                     v-model="enterprise.email"
                     maxlength="20"
                     :class="{'err': !emailChecked}"
                     @blur="checkEmail(enterprise.email)"/>
              <span class="help-list" v-text="emailErrMsg"></span>
            </div>
            <div class="form-group">
              <label class="check-box-wrap">
                <input type="checkbox"
                       id="check-boxes"
                       v-model="isReads"
                       :checked="isReads">
                <label class="agr" for="check-box">我已阅读并同意<a :href="`${address}/common/agreement`" target="_blank">《优软云服务条款》</a></label>
              </label>
            </div>
            <div class="form-group">
              <span class="next-bottom" @click="sureRegister">确认注册</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-02"></div>
    <div class="section-03">
      <img src="/images/bussinessEnter/banner04.jpg" alt="">
    </div>
    <div class="section-04">
      <div class="handle-btn">
        <div class="ps-btn">
          <a @click="onRegisterClick">立即入驻</a>
          <a href="https://mall.usoftchina.com/help/helpDetail/28" target="_blank">联系企业</a>
        </div>
      </div>
    </div>
    <div class="loading" v-show="showLoading"></div>
  </div>
</template>
<script>
  export default {
    name: 'businessEnter',
    layout: 'main',
    data () {
      return {
        enterprise: {
          mobile: '',
          code: '',
          ImgCode: '',
          spaceName: '',
          businessCode: '',
          vipName: '',
          password: '',
          confirm: '',
          email: ''
        },
        imageCode: `${this.address}/sso/login/checkCode`,
        mobileErrMsg: '一个手机可注册多个企业',
        codeErrMsg: '',
        spaceNameErrMsg: '',
        businessCodeErrMsg: '',
        vipNameErrMsg: '',
        passwordErrMsg: '',
        confirmErrMsg: '',
        emailErrMsg: '',
        mobileChecked: false,
        codeChecked: false,
        spaceNameChecked: false,
        businessCodeChecked: false,
        vipNameChecked: false,
        passwordChecked: false,
        passwordConfirmChecked: false,
        emailChecked: true,
        showLoading: false,
        visible: false,
        address: '',
        sendEnterpriseCode: true,
        token: '',
        enterprise_time: 0,
        isRead: true,
        isReads: true,
        isHasRegister: false,
        isHasEmail: false,
        goNextStep: true,
        phoneIsRegisterTip: '该手机号已有优软账号，请输入原账号的登录密码进行校验确认',
        strength: ''
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getAddress()
        this.getImgCode()
      })
    },
    methods: {
      // 立即入驻
      onRegisterClick () {
        this.$http.get('/register/page').then(response => {
          if (response.data) {
            window.location.href = response.data.content
          }
        })
      },
      checkMobile (flg) {
        let reg = /^1[0-9]{10}$/
        if (flg === '' && !flg) {
          this.mobileChecked = false
          this.mobileErrMsg = '请填写正确的手机号'
        } else {
          if (!reg.test(flg)) {
            this.mobileChecked = false
            this.mobileErrMsg = '请填写正确的手机号'
          } else {
            this.mobileErrMsg = ''
            this.mobileChecked = true
          }
        }
      },
      getAddress () {
        this.address = process.env.ssoUrl
      },
      getImgCode () {
        let imgSrc = document.getElementById('captchaImage2')
        imgSrc.setAttribute('src', this.address + '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf())
      },
      getCode () {
        this.showLoading = true
        if (this.mobileChecked) {
          this.$http.get(`${this.address}/sso/userspace/register/checkCode`, {params: {mobile: this.enterprise.mobile, timestamp: new Date().getTime() + '', code: this.enterprise.ImgCode}})
            .then(response => {
              this.showLoading = false
              if (response.data) {
                this.token = response.data.token
                if (response.data.errMsg) {
                  this.$message({
                    message: response.data.errMsg,
                    type: 'error'
                  })
                  this.enterprise.ImgCode = ''
                  this.getImgCode()
                  return
                }
                if (this.token !== '') {
                  this.$message({
                    message: '验证码已经发送到您的手机，请注意查收',
                    type: 'success'
                  })
                  this.sendEnterpriseCode = false
                  this.enterprise_time = 60
                  this.visible = false
                  this.enterprise.ImgCode = ''
                  let enterpriseTime = setInterval(() => {
                    this.enterprise_time--
                    if (this.enterprise_time <= 0) {
                      this.sendEnterpriseCode = true
                      clearInterval(enterpriseTime)
                    }
                  }, 1000)
                  this.getImgCode()
                }
              } else {
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.showLoading = false
              this.$message.error(err.errMsg)
            })
        }
      },
      checkMsgCode (flg) {
        if (!flg && flg === '') {
          this.codeErrMsg = '请填写正确的验证码'
          this.codeChecked = false
        } else {
          if (this.enterprise.mobile === '') {
            this.mobileErrMsg = '请填写正确的手机号'
            this.codeChecked = false
          } else {
            if (this.token) {
              if (flg.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(`${this.address}/sso/userspace/register/checkCode`, param, config)
                  .then(response => {
                    if (response.data.success) {
                      this.codeChecked = true
                      this.codeErrMsg = ''
                    } else {
                      this.codeChecked = false
                      return Promise.reject(response.data)
                    }
                  }).catch(err => {
                    this.codeChecked = false
                    this.codeErrMsg = err.errMsg
                  })
              } else {
                this.codeChecked = false
                this.codeErrMsg = '请输入正确的验证码'
              }
            } else {
              this.codeChecked = false
              this.codeErrMsg = '请先获取验证码'
            }
          }
        }
      },
      nextStep () {
        if (this.mobileChecked && this.codeChecked && this.isRead) {
          this.showLoading = true
          let param = new FormData()
          param.append('mobile', this.enterprise.mobile)
          param.append('code', this.enterprise.code)
          param.append('appId', 'mall')
          param.append('token', this.token)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post(`${this.address}/sso/userspace/register/checkAdminTel`, param, config)
            .then(response => {
              this.showLoading = 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.showLoading = 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.isRead) {
            this.$message.error('您对阅读条款未做勾选')
          }
        }
      },
      checkSpaceName (flg) {
        if (!flg && flg === '') {
          this.spaceNameErrMsg = '请填写正确的企业名称'
          this.spaceNameChecked = false
        } else {
          this.$http.get(`${this.address}/api/userspace/checkSpaceName`, {params: {spaceName: this.enterprise.spaceName}})
            .then(response => {
              if (response.data.success) {
                this.spaceNameChecked = true
                this.spaceNameErrMsg = ''
              } else {
                this.spaceNameChecked = false
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.spaceNameErrMsg = err.errMsg
            })
        }
      },
      checkBusinessCode (flg) {
        if (!flg && flg === '') {
          this.businessCodeErrMsg = '请填写正确的营业执照号'
          this.businessCodeChecked = false
        } else {
          let reg = /^[A-Za-z0-9]+$/
          if (!reg.test(flg)) {
            this.businessCodeErrMsg = '请填写正确的营业执照号'
            this.businessCodeChecked = false
          } else {
            this.$http.get(`${this.address}/api/userspace/checkBusinessCode`, {params: {businessCode: this.enterprise.businessCode}})
              .then(response => {
                if (response.data.success) {
                  this.businessCodeChecked = true
                  this.businessCodeErrMsg = ''
                } else {
                  this.businessCodeChecked = false
                  return Promise.reject(response.data)
                }
              }).catch(err => {
                this.businessCodeErrMsg = err.errMsg
              })
          }
        }
      },
      checkVipName (flg) {
        if (this.isHasRegister) {
          this.vipNameChecked = true
        } else {
          if (!flg && flg === '') {
            this.vipNameChecked = false
            this.vipNameErrMsg = '请填写正确的管理员姓名'
          } else {
            this.vipNameChecked = true
            this.vipNameErrMsg = ''
          }
        }
      },
      passwordStrength (flg) {
        console.log(flg)
        let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
        if (flg.length <= 20 && flg.length >= 8) {
          if (reg1.test(flg)) {
            this.strength = '强'
          } else if (reg2.test(flg)) {
            this.strength = '中'
          } else {
            this.strength = '弱'
          }
        } else {
          this.strength = ''
        }
      },
      checkPassword (flg) {
        if (!flg && flg === '') {
          this.passwordErrMsg = '请输入密码'
        } else {
          if (flg.length <= 20 && flg.length >= 8) {
            let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
            let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
            if (reg1.test(flg)) {
              this.passwordChecked = true
              this.passwordErrMsg = ''
            } else if (reg2.test(flg)) {
              this.passwordChecked = true
              this.passwordErrMsg = ''
            } else {
              this.passwordErrMsg = '密码强度弱'
              this.passwordChecked = false
            }
          } else {
            this.passwordErrMsg = '密码须为8-20字符的英文、数字混合'
            this.passwordChecked = false
          }
        }
      },
      checkRegisterPassword (flg) {
        if (this.isHasRegister) {
          if (!flg && flg === '') {
            this.phoneIsRegisterTip = '请输入密码'
            this.passwordChecked = false
          } else {
            this.passwordChecked = true
            this.phoneIsRegisterTip = ''
          }
        } else {
          if (!flg && flg === '') {
            this.phoneIsRegisterTip = '请输入密码'
            this.passwordChecked = false
          } else {
            if (flg.length <= 20 && flg.length >= 8) {
              let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
              let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
              if (reg1.test(flg)) {
                this.passwordChecked = true
              } else if (reg2.test(flg)) {
                this.passwordChecked = true
              } else {
                this.phoneIsRegisterTip = '密码须为8-20字符的英文、数字混合'
                this.passwordChecked = false
              }
            } else {
              this.phoneIsRegisterTip = '密码须为8-20字符的英文、数字混合'
              this.passwordChecked = false
            }
            if (this.enterprise.confirm && this.enterprise.confirm !== '') {
              if (flg !== this.enterprise.confirm) {
                this.phoneIsRegisterTip = '两次输入密码不一致!'
                this.passwordConfirmChecked = false
              } else {
                this.passwordConfirmChecked = true
                this.phoneIsRegisterTip = ''
              }
            }
          }
        }
      },
      checkConfirm (flg) {
        if (this.isHasRegister) {
          this.passwordConfirmChecked = true
        } else {
          if (!flg && flg === '') {
            this.confirmErrMsg = '请再次输入密码'
            this.passwordConfirmChecked = false
          } else if (flg !== this.enterprise.password) {
            this.confirmErrMsg = '两次输入密码不一致!'
            this.passwordConfirmChecked = false
          } else {
            this.passwordConfirmChecked = true
            this.confirmErrMsg = ''
          }
        }
      },
      checkEmail (flg) {
        if (this.isHasEmail) {
          this.emailChecked = true
          this.emailErrMsg = ''
        } else {
          if (flg) {
            let reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
            if (!reg.test(flg)) {
              this.emailErrMsg = '请输入正确的邮箱地址格式'
              this.emailChecked = false
            } else {
              this.$http.get(`${this.address}/api/user/checkEmail`, {params: {email: this.enterprise.email}})
                .then(response => {
                  if (response.data.hasRegister) {
                    this.emailChecked = false
                    this.emailErrMsg = '该邮箱已被注册'
                  } else {
                    this.emailChecked = true
                    this.emailErrMsg = ''
                    return Promise.reject(response.data)
                  }
                }).catch(err => {
                  this.$message.error(err.errMsg)
                })
            }
          } else {
            this.emailChecked = true
            this.emailErrMsg = ''
          }
        }
      },
      sureRegister () {
        if (!this.isHasRegister) {
          if (this.spaceNameChecked && this.businessCodeChecked && this.vipNameChecked && this.passwordChecked && this.passwordConfirmChecked && this.emailChecked && this.isReads) {
            this.submitRegister()
          } else {
            if (!this.enterprise.spaceName) {
              this.$message.error('企业名不能为空')
            } else if (!this.spaceNameChecked) {
              this.$message.error('企业名称输入有误，请按提示重新输入')
            } else if (!this.enterprise.businessCode) {
              this.$message.error('营业执照号不能为空')
            } else if (!this.businessCodeChecked) {
              this.$message.error('营业执照号输入有误，请按提示重新输入')
            } else if (!this.enterprise.vipName) {
              this.$message.error('管理员姓名不能为空')
            } else if (!this.vipNameChecked) {
              this.$message.error('管理员姓名输入有误，请按提示重新输入')
            } else if (!this.enterprise.password) {
              this.$message.error('密码不能为空')
            } else if (!this.passwordChecked) {
              this.$message.error('密码输入有误，请按提示重新输入')
            } else if (!this.enterprise.confirm) {
              this.$message.error('请再次输入密码')
            } else if (this.enterprise.password !== this.enterprise.confirm) {
              this.$message.error('请确认两次填写密码是否一致')
            } else if (this.enterprise.email && !this.emailChecked) {
              this.$message.error('邮箱输入有误，请按提示重新输入')
            } else if (!this.isReads) {
              this.$message.error('您对阅读条款未做勾选')
            }
          }
        } else {
          if (this.isHasEmail) {
            if (this.spaceNameChecked && this.businessCodeChecked && this.passwordChecked && this.isReads) {
              this.submitRegister()
            } else {
              if (!this.enterprise.spaceName) {
                this.$message.error('企业名不能为空')
              } else if (!this.spaceNameChecked) {
                this.$message.error('企业名称输入有误，请按提示重新输入')
              } else if (!this.enterprise.businessCode) {
                this.$message.error('营业执照号不能为空')
              } else if (!this.businessCodeChecked) {
                this.$message.error('营业执照号输入有误，请按提示重新输入')
              } else if (!this.enterprise.password) {
                this.$message.error('密码不能为空')
              } else if (!this.isReads) {
                this.$message.error('您对阅读条款未做勾选')
              }
            }
          } else {
            if (this.spaceNameChecked && this.businessCodeChecked && this.passwordChecked && this.emailChecked && this.isReads) {
              this.submitRegister()
            } else {
              if (!this.enterprise.spaceName) {
                this.$message.error('企业名不能为空')
              } else if (!this.spaceNameChecked) {
                this.$message.error('企业名称输入有误，请按提示重新输入')
              } else if (!this.enterprise.businessCode) {
                this.$message.error('营业执照号不能为空')
              } else if (!this.businessCodeChecked) {
                this.$message.error('营业执照号输入有误，请按提示重新输入')
              } else if (!this.enterprise.password) {
                this.$message.error('密码不能为空')
              } else if (this.enterprise.email && !this.emailChecked) {
                this.$message.error('邮箱输入有误，请按提示重新输入')
              } else if (!this.isReads) {
                this.$message.error('您对阅读条款未做勾选')
              }
            }
          }
        }
      },
      submitRegister () {
        this.showLoading = true
        let param = new FormData()
        param.append('spaceName', this.enterprise.spaceName)
        param.append('businessCode', this.enterprise.businessCode)
        param.append('vipName', this.enterprise.vipName || '')
        param.append('password', this.enterprise.password)
        param.append('email', this.enterprise.email || '')
        param.append('appId', 'mall')
        param.append('returnUrl', window.location.origin)
        param.append('t', '')
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        this.$http.post(`${this.address}/sso/userspace/register`, param, config)
          .then(response => {
            this.showLoading = false
            if (response.data.success) {
              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.showLoading = true
              response.data.content.currentUrl = window.location.hash + '/newLogin/other'
              this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
                name: 'successCallback',
                timeout: 3000
              }, (err, data) => {
                if (err) {
                  this.$message.error('注册成功，返回首页完成登录')
                  this.showLoading = false
                  throw err
                } else {
                  this.loginOther(response, params)
                }
              })
            } else {
              return Promise.reject(response.data)
            }
          }).catch(err => {
            this.showLoading = 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 {
          console.log(url, 'url')
          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}`))
          }
        }
        let returnUrl = decodeURIComponent(window.location.origin)
        Promise.all(promises).then(() => {
          crossAfter(returnUrl, timeout)
        }).catch(() => {
          crossAfter(returnUrl, timeout)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .business-enter {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    .banner{
      width: 100%;
      height: 500px;
      background: url('/images/bussinessEnter/banner01.png')  50%/auto 100% no-repeat #fcde64;
    }
    .section-01 {
      position: relative;
      margin: 0 auto;
      width: 100%;
      text-align: center;
      >img{
        margin-top: -15px;
        width: 100%;
        height: 820px;
      }
      .register {
        margin: 0 auto;
        width: 1190px;
        position: absolute;
        top: 170px;
        left: 50%;
        margin-left: -595px;
        .reg-shadow {
          margin: 0 auto;
          width: 208px;
          height: 11px;
          background-image: linear-gradient(0deg,
            #f0116a 0%,
            #b91552 100%),
          linear-gradient(
              #f0116a,
              #f0116a);
          border-radius: 10px 10px 0px 0px;
        }
        .reg-btn{
          margin: 0 auto;
          width: 208px;
          height: 49px;
          line-height: 49px;
          font-size: 25px;
          font-weight: bold;
          text-align: center;
          color: #ffffff;
          background-color: #f0116a;
          border-radius: 0 0 4px 4px;
        }
        .reg-box{
          position: relative;
          padding: 34px 0 10px 30px;
          margin: 0 auto;
          width: 646px;
          text-align: center;
          background-color: #7058ff;
          border-radius: 0 0 30px 30px;
          .form-group {
            overflow: hidden;
            height: 42px;
            input.form-control{
              padding-left: 20px;
              float: left;
              width: 358px;
              height: 42px;
              font-size: 20px;
              color: #9d8cfc;
              background-color: #ffffff;
              border-radius: 5px;
            }
            input.phone{
              width: 358px;
            }
            span.help-list{
              margin-left: 10px;
              float: left;
              width: 225px;
              word-break: break-all;
              line-height: 21px;
              text-align: left;
              font-size: 16px;
              color: #e6e6e6;
              background:none;
              border:0;
            }
            input.code{
              width: 208px;
            }
            /*input.err{*/
              /*border-color: #f56c6c;*/
            /*}*/
            .code-btn{
              float: left;
              margin-left: 10px;
              display: inline-block;
              width: 141px;
              height: 42px;
              line-height: 42px;
              text-align: center;
              font-size: 20px;
              color: #9d8cfc;
              background-color: #baaeff;
              border-radius: 5px;
              cursor: pointer;
              outline: none;
              border: none;
            }
            button.code-btn[disabled] {
              cursor: not-allowed;
            }
            .check-box-wrap {
              position: relative;
              float: left;
              padding-left: 9px;
              input{
                margin-top: 13px;
                width: 20px;
                height: 20px;
                background-color: #baaeff;
                border-radius: 5px;
              }
              .agr{
                position: absolute;
                top: 8px;
                left: 26px;
                width: 400px;
                display: inline-table;
                text-align: left;
                padding-left: 10px;
                font-size: 20px;
                font-weight: normal;
                color: #e6e6e6;
                a{
                  font-size: 20px;
                  color: #e6e6e6;
                }
              }
            }
            .next-bottom{
              float: left;
              display: inline-block;
              width: 358px;
              height: 42px;
              line-height: 42px;
              text-align: center;
              font-size: 20px;
              color: #3d00ff;
              background-color: #ffffff;
              border-radius: 5px;
              cursor: pointer;
            }
            &:first-child {
              margin-bottom: 14px;
            }
          }
          .pwd{
            margin: -10px 0 0 19px;
            height: 40px;
            line-height: 40px;
            text-align: left;
            font-size: 16px;
            color: #fff;
            span{
              font-size: 16px;
              color: #fff;
            }
            em{
              display: inline-block;
              margin: 0 8px 2px 0;
              width: 24px;
              height: 6px;
              border: solid 1px #ffffff;
              &:first-child {
                margin-left: 13px;
              }
            }
          }
          .pwd.sm{
            color: #fff;
            em {
              background: #bfbfbf;
              &:first-child{
                background: #ff4e00;
              }
            }
            span{
              color: #ff4e00;
            }
          }
          .pwd.md{
            color: #fff;
            em {
              background: #22ac38;
              &:nth-child(3){
                background: #bfbfbf;
              }
            }
            span{
              color: #22ac38;
            }
          }
          .pwd.lar{
            color: #fff;
            em {
              background: #00a0e9;
            }
            span{
              color: #00a0e9;
            }
          }
          .pwd.low{
            color: #fff;
            em {
              background: #bfbfbf;
            }
            span{
              color: #00a0e9;
            }
          }
        }
      }
    }
    .section-02 {
      width: 100%;
      height: 660px;
      background: url('/images/bussinessEnter/banner03.png')  50%/auto 100% no-repeat #fff;
    }
    .section-03{
      width: 100%;
      img{
        width: 100%;
        height: 630px;
      }
    }
    .section-04{
      margin: 0 auto;
      width: 100%;
      height: 760px;
      text-align: center;
      background: url('/images/bussinessEnter/banner05.jpg')  50%/auto 100% no-repeat #fff;
      .handle-btn {
        position: relative;
        margin: 0 auto;
        width: 1190px;
        height: 760px;
        .ps-btn {
          margin: 0 auto;
          overflow: hidden;
          position: absolute;
          top: 635px;
          left: 50%;
          margin-left: -198px;
          text-align: center;
        }
        a{
          float:left;
          display: inline-block;
          width: 190px;
          height: 59px;
          line-height: 59px;
          text-align: center;
          font-size: 27px;
          font-weight: bold;
          color: #ffffff;
          cursor: pointer;
          &:first-child {
            background-color: #eb162c;
          }
          &:last-child {
            background-color: #114fa4;
          }
        }
      }
    }
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #9d8cfc; opacity:1;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #9d8cfc;opacity:1;
  }

  input:-ms-input-placeholder{
    color: #9d8cfc;opacity:1;
  }

  input::-webkit-input-placeholder{
    color: #9d8cfc;opacity:1;
  }
</style>