sso-ssr/components/mobile/registerEnterprise/index.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>企业注册</p>
      <a class="go" href="/register/personalRegistration"><i class="fa fa-long-arrow-right"></i>个人注册</a>
    </div>
    <template v-if="step === 1">
      <div class="f-form">
        <div class="page-part">
          <mt-field placeholder="手机号码"
                    v-model="step1.mobile"
                    :state="state.mobile"
                    type="tel"
                    @blur.native.capture="validateMobile"
          ></mt-field>
        </div>
        <div class="page-part">
          <mt-field auto-complete="off"
                    placeholder="短信验证码"
                    v-model="step1.token"
                    :state="state.token"
                    @blur.native.capture="validateCode">
            <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
          </mt-field>
        </div>
      </div>
      <div class="form-btn">
        <div class="page-part">
          <el-checkbox v-model="checked">我已阅读并同意 <a href="/common/agreement" class="rgba">《优软云服务条款》</a></el-checkbox>
        </div>
        <mt-button type="primary" size="large" @click.native="checkPhone">验证手机</mt-button>
      </div>
    </template>
    <template v-if="step === 2">
      <div class="f-form">
        <div class="page-part">
          <mt-field placeholder="企业名称"
                    v-model="step2.spaceName"
                    :state="state.spaceName"
                    @blur.native.capture="validateSpaceName"></mt-field>
        </div>
        <div class="page-part">
          <mt-field placeholder="营业护照号"
                    v-model="step2.businessCode"
                    :state="state.businessCode"
                    @blur.native.capture="validateBusinessCode"></mt-field>
        </div>
        <div class="page-part" v-if="!hasRegister">
          <mt-field placeholder="管理员号码"
                    v-model="step2.vipName"
                    :state="state.vipName"
                    @blur.native.capture="validateVipName"></mt-field>
        </div>
        <div class="page-part" v-if="!hasRegister">
          <mt-field placeholder="登录密码"
                    :attr="{ maxlength: 20 }"
                    v-model="step2.password"
                    :state="state.password"
                    type="password"
                    @input.native="validatePassword"
                    @blur.native.capture="validatePasswordTip"></mt-field>
          <template v-if="step2.password">
            <p class="pwd">密码强度 <em :class="{sm:progress === '弱', md: progress === '中', ld:progress === '强'}"></em> <em :class="{md: progress === '中', ld:progress === '强'}"></em> <em :class="{ld:progress === '强'}"></em> <span :class="{smstep:progress === '弱', mdstep: progress === '中', ldstep:progress === '强'}" v-text="progress">强</span></p>
            <p class="pwd">密码须为8-20字符的英文、数字混合</p>
          </template>
        </div>
        <div class="page-part" v-if="hasRegister">
          <mt-field placeholder="登录密码"
                    v-model="step2.password"
                    :state="state.password"
                    type="password"
                    @blur.native.capture="validatePasswordTipHas"></mt-field>
          <template v-if="step2.password">
            <p class="pwd">手机号已注册，请输入原密码</p>
          </template>
        </div>
        <div class="page-part" v-if="!hasRegister">
          <mt-field placeholder="密码确认"
                    v-model="step2.confirm"
                    :state="state.confirm"
                    type="password"
                    @blur.native.capture="validateConfirm"></mt-field>
        </div>
        <div class="page-part" v-if="!hasEmail">
          <mt-field placeholder="联系邮箱"
                    v-model="step2.email"
                    :state="state.email"
                    type="email"
                    @blur.native.capture="validateEmail"></mt-field>
        </div>
      </div>
      <div class="form-btn">
        <mt-button type="primary" size="large" @click.native="sureRegister">完成注册</mt-button>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'registerEnterprise',
    data () {
      return {
        step: 1,
        state: {
          mobile: 'error',
          token: 'error',
          spaceName: 'error',
          businessCode: 'error',
          vipName: 'error',
          password: 'error',
          confirm: 'error',
          email: 'error'
        },
        step1: {
          mobile: '',
          token: ''
        },
        step2: {
          spaceName: '',
          businessCode: '',
          vipName: '',
          password: '',
          confirm: '',
          email: ''
        },
        checked: true,
        tokenCode: '',
        tokenTime: 60,
        tokenText: '获取验证码',
        hasRegister: false,
        hasEmail: false,
        progress: '弱'
      }
    },
    methods: {
      // 弹窗处理
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 验证手机号
      validateMobile () {
        let reg = /^1[0-9]{10}$/
        if (!this.step1.mobile) {
          this.downToast('请先填写手机号')
        } else {
          if (!reg.test(this.step1.mobile)) {
            this.downToast('请填写正确的手机号')
            this.state.mobile = 'warning'
          } else {
            this.state.mobile = 'success'
          }
        }
      },
      // 验证正确的验证码
      validateCode () {
        if (!this.step1.token) {
          this.downToast('请先填写验证码')
        } else {
          if (!this.step1.mobile) {
            this.downToast('请先填写正确的手机号码')
            this.state.token = 'warning'
          } else {
            if (this.tokenCode) {
              let param = new FormData()
              param.append('mobile', this.step1.mobile)
              param.append('token', this.tokenCode)
              param.append('code', this.step1.token)
              let config = {
                headers: {'Content-Type': 'multipart/form-data'}
              }
              this.$http.post('/sso/personal/register/checkCode', param, config)
                .then(response => {
                  if (response.data.success) {
                    this.state.token = 'success'
                  } else {
                    this.$toast({
                      message: response.data.errMsg,
                      iconClass: 'el-icon-error'
                    })
                  }
                }).catch(() => {
                  this.downToast('请检查网络是否正常或联系服务商')
                })
            } else {
              this.downToast('请点击先获取验证码信息')
              this.state.token = 'warning'
            }
          }
        }
      },
      // 获取验证码
      getCheckCode () {
        if (this.tokenTime > 0 && this.tokenTime < 60) {
          this.downToast('请稍后再点击，我在倒计时')
        } else {
          if (this.state.mobile !== 'success') {
            this.downToast('请先输入正确的手机号')
          } else {
            this.$indicator.open('获取中...')
            let _this = this
            this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.step1.mobile}})
              .then(response => {
                this.$indicator.close()
                if (response.data) {
                  this.tokenCode = response.data.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)
                }
              }).catch(() => {
                this.$indicator.close()
                this.downToast('请检查网络是否正常或联系服务商')
              })
          }
        }
      },
      // 验证手机
      checkPhone () {
        if (!this.state.mobile === 'success' && !this.state.token === 'success') {
          this.downToast('请确认填写部分是否有误')
        } else if (this.checked === false) {
          this.downToast('您对阅读条款未做勾选')
        } else {
          this.$indicator.open('验证手机中...')
          let param = new FormData()
          param.append('mobile', this.step1.mobile)
          param.append('code', this.step1.token)
          param.append('appId', this.$store.state.option.appId)
          param.append('token', this.tokenCode)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/userspace/register/checkAdminTel', param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                response.data.content.hasEmail ? this.hasEmail = true : this.hasEmail = false
                response.data.content.hasRegister ? this.hasRegister = true : this.hasRegister = false
                this.step = 2
              }
            }).catch(() => {
              this.$indicator.close()
              this.downToast('请检查网络是否正常或联系服务商')
            })
        }
      },
      // 验证企业名
      validateSpaceName () {
        if (!this.step2.spaceName) {
          this.downToast('请填写企业名称')
        } else {
          if (this.step2.spaceName.length > 20) {
            this.downToast('输入长度过长，限定20个字符以内')
            this.state.spaceName = 'warning'
          } else {
            this.$http.get(`/api/userspace/checkSpaceName`, {params: {spaceName: this.step2.spaceName}})
              .then(response => {
                if (response.data.success) {
                  this.state.spaceName = 'success'
                } else {
                  this.state.spaceName = 'warning'
                  this.downToast(response.data.errMsg)
                }
              })
          }
        }
      },
      // 验证营业号
      validateBusinessCode () {
        let reg = /^[A-Za-z0-9]+$/
        if (!this.step2.businessCode) {
          this.downToast('请填写营业执照号')
        } else {
          if (!reg.test(this.step2.businessCode)) {
            this.downToast('请填写正确的营业执照号')
            this.state.businessCode = 'warning'
          } else {
            this.$http.get(`/api/userspace/checkBusinessCode`, {params: {businessCode: this.step2.businessCode}})
              .then(response => {
                if (response.data.success) {
                  this.state.businessCode = 'success'
                } else {
                  this.state.businessCode = 'warning'
                  this.downToast(response.data.errMsg)
                }
              })
          }
        }
      },
      // 验证管理员名
      validateVipName () {
        if (!this.step2.vipName) {
          this.downToast('请填写管理员姓名')
        } else {
          if (this.step2.vipName.length > 20) {
            this.downToast('输入长度请限制在20个字符以内')
            this.state.vipName = 'warning'
          } else {
            this.state.vipName = 'success'
          }
        }
      },
      // 验证密码强度
      validatePassword () {
        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]))).*$/
        let count = this.step2.password.length
        if (count >= 20) {
          this.downToast('密码须为8-20字符的英文、数字混合')
        } else {
          if (reg1.test(this.step2.password)) {
            this.progress = '强'
          } else if (reg2.test(this.step2.password)) {
            this.progress = '中'
          } else {
            this.progress = '弱'
          }
        }
      },
      // 验证密码
      validatePasswordTip () {
        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
        if (!this.step2.password) {
          this.downToast('请输入密码')
        } else {
          if (!reg2.test(this.step2.password)) {
            this.downToast('密码须为8-20字符的英文、数字混合')
            this.state.password = 'warning'
          } else {
            this.state.password = 'success'
          }
        }
      },
      // 验证密码
      validatePasswordTipHas () {
        if (!this.step2.password) {
          this.downToast('请输入密码')
        } else {
          this.state.password = 'success'
        }
      },
      // 验证二次密码
      validateConfirm () {
        if (!this.step2.confirm) {
          this.downToast('请再次输入密码')
        } else {
          if (this.step2.confirm === this.step2.password) {
            this.state.confirm = 'success'
          } else {
            this.state.confirm = 'warning'
            this.downToast('两次输入密码不一致，请重新输入')
          }
        }
      },
      // 验证邮箱
      validateEmail () {
        let reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
        if (!this.step2.email) {
          this.downToast('请填写联系邮箱信息')
        } else {
          if (!reg.test(this.step2.email)) {
            this.downToast('请输入正确的邮箱地址格式')
            this.state.email = 'warning'
          } else {
            this.state.email = 'success'
          }
        }
      },
      // 注册请求方法
      sbmitRegister () {
        this.$indicator.open('注册中...')
        let param = new FormData()
        param.append('spaceName', this.step2.spaceName)
        param.append('businessCode', this.step2.businessCode)
        param.append('vipName', this.step2.vipName || '')
        param.append('password', this.step2.password)
        param.append('email', this.step2.email || '')
        param.append('appId', this.$store.state.option.appId)
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        this.$http.post('/sso/userspace/register', param, config)
          .then(response => {
            this.$indicator.close()
            if (response.data.success) {
              window.location.href = '/overRegister/overEnterprise'
            } else {
              this.downToast(response.data.errMsg)
            }
          }).catch(() => {
            this.$indicator.close()
            this.downToast('请检查网络是否正常或联系服务商')
          })
      },
      // 企业注册
      sureRegister () {
        if (!this.hasRegister) {
          if (!this.state.spaceName === 'success' &&
            !this.state.businessCode === 'success' &&
            !this.state.vipName === 'success' &&
            !this.state.password === 'success' &&
            !this.state.confirm === 'success' &&
            !this.state.email === 'success') {
            this.downToast('请确认填写部分是否有误')
          } else {
            this.sbmitRegister()
          }
        } else {
          if (!this.hasEmail) {
            if (!this.state.spaceName === 'success' &&
              !this.state.businessCode === 'success' &&
              !this.state.password === 'success' &&
              !this.state.email === 'success') {
              this.downToast('请确认填写部分是否有误')
            } else {
              this.sbmitRegister()
            }
          } else {
            if (!this.state.spaceName === 'success' &&
              !this.state.businessCode === 'success' &&
              !this.state.password === 'success') {
              this.downToast('请确认填写部分是否有误')
            } else {
              this.sbmitRegister()
            }
          }
        }
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .f-main{
    background: #fff;
    padding:0.55rem .3rem 1.1rem;
    .content-top{
      position:relative;
      p{
        font-size: .4rem;
        color:#787878;
        margin-bottom:.35rem;
      }
      a.go{
        position: absolute;
        top: 0;
        right: 0;
        font-size: .28rem;
        i{
          margin-right: .06rem;
        }
      }
    }
    .f-form{
      border-top:1px solid #b5b5b5;
      padding-top:.6rem;
      .pwd{
        font-size: .14rem;
        color:#a0a0a0;
        margin: .2rem auto;
        em{
          display: inline-block;
          line-height: .14rem;
          margin:.05rem .2rem;
          width: .45rem;
          height: .1rem;
        }
        .sm{background:#ff4e00}
        .md{background: #22ac38}
        .ld{background: #00a0e9}
        .smstep{color:#ff4e00}
        .mdstep{color: #22ac38}
        .ldstep{color: #00a0e9}
      }
      .token{
        display:inline-block;
        padding: 0 .5rem;
        text-align: center;
        border-left:1px solid #b5b5b5;
        color:#2d8cf0;
        margin-left: .1rem;
      }
    }
  }
</style>