sso-ssr/components/register/EnterpriseRegistration.vue

<template>
  <div class="register">
    <div class="container">
      <div class="content">
        <div class="content-top">
          <h3>企业注册</h3>
        </div>
        <div v-if="activeTab == 0">
          <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>
              <span class="tip tip-mobile"
                    v-show="mobileRegister">该手机号已被注册</span>
            </el-form-item>
            <el-form-item prop="code">
              <el-input type="text" v-model="enterprise.code"
                                    v-bind:class="{ active: this.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">验证码输入错误</span>
            </el-form-item>
            <el-form-item>
              <a class="btn finish"
                 @click="CheckPhone"
                 :disabled="!this.checked || !this.mobileChecked || !this.codeChecked">验证手机</a>
            </el-form-item>
            <el-form-item>
              <el-checkbox name="type" v-model="checked" @click="checkboxIsChecked"></el-checkbox>
              <span class="agree">我已阅读并同意 <a href="">《优软云服务条款》</a></span>
            </el-form-item>
          </el-form>
        </div>
        <form action="" v-if="activeTab == 1">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="企业名称" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="营业执照号" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="管理员姓名" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="登录密码" />
            <i class="fa fa-keyboard-o" aria-hidden="true"></i>
            <!--<div class="pwd sm">密码强度 <em></em><em></em><em></em><span>弱</span></div>-->
            <!--<div class="pwd md">密码强度 <em></em><em></em><em></em><span>中</span></div>-->
            <div class="pwd lar">密码强度 <em></em><em></em><em></em><span>强</span></div>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="密码确认" />
            <i class="fa fa-keyboard-o" aria-hidden="true"></i>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="联系邮箱" />
          </div>
          <button class="btn">确认注册</button>
        </form>
        <form action="" v-if="activeTab == 2">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="企业名称" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="营业执照号" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="密码确认" />
            <i class="fa fa-keyboard-o" aria-hidden="true"></i>
            <span class="sure">手机号已注册过优软云，请输入原密码</span>
          </div>
          <button class="btn">确认注册</button>
        </form>
      </div>
      <div class="login">已有账号？<a href="">立即登录</a></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'EnterpriseRegistration',
    data () {
      var validateMobile = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的手机号'))
          this.showMsgTip = false
          this.getCodeBtnIsDisabled = true
          this.mobileChecked = false
          console.log(this.mobileChecked)
        } 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.code !== '') {
            if (this.token !== '') {
              if (this.enterprise.code !== '' && this.enterprise.mobile !== '') {
                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/personal/register/checkCode`, param, config)
                  .then(response => {
                    if (response.data.success) {
                      this.codeChecked = true
                      this.codeErrorChecked = false
                    } else {
                      this.codeErrorChecked = true
                      this.codeChecked = false
                    }
                  }, err => {
//                  console.log(err)
                    this.$message.error(err)
                  })
              }
            } else {}
          }
          callback()
        }
      }
      return {
        activeTab: 0,
        enterprise: {
          mobile: '',
          code: ''
        },
        checked: true,
        getCodeBtnIsDisabled: true,
        mobileChecked: false,
        codeChecked: false,
        showMsgTip: true,
        mobileRegister: false,
        sendEnterpriseCode: true,
        codeErrorChecked: false,
        enterprise_time: 0,
        rules: {
          mobile: [
            {validator: validateMobile, trigger: 'blur'}
          ],
          code: [
            {validator: validateCode, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
//      我同意是否被选中
      checkboxIsChecked () {
        this.checked = !this.checked
      },
//      获取校验码
      getCheckCode () {
        this.$http.get(`/sso/userspace/register/checkCode`, {params: {mobile: this.enterprise.mobile}})
          .then(response => {
            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)
            }
          }).catch(err => {
            console.log(err)
            this.$message.error(err.errMsg)
          })
      },
//      验证手机
      CheckPhone () {
        if (this.mobileChecked && this.codeChecked) {
          var url = window.location.search
          var request = {}
          if (url.indexOf('?' !== -1)) {
            var str = url.substr(1)
            var strs = str.split('&')
            for (var i = 0; i < strs.length; i++) {
              request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
            }
          }
          var appId = request['appId']
          console.log(appId)
          let param = new FormData()
          param.append('mobile', this.enterprise.mobile)
          param.append('code', this.enterprise.code)
          param.append('appId', 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 => {
              if (response.data.success) {
                console.log(response.data)
              } else {
                return Promise.reject(response.data)
              }
            }).catch(err => {
              console.log(err)
              this.$message.error(err.errMsg)
            })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .register {
    padding-bottom: 145px;
    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{
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #dcdcdc;
            h3{
              font-family: 'SimHei';
              font-size: 24px;
              color: #000;
            }
          }
          form {
            padding-bottom: 44px;
            margin-top: 35px;
              span.sure{
                position: absolute;
                top: 0;
                right: -240px;
                font-size: 13px;
                color: #8c8c8c;
              }
              span.codeError-tip{
                position: absolute;
                top: 3px;
                right: -105px;
                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;
              }
              i{
                position: absolute;
                top: 10px;
                right: 18px;
                font-size: 24px;
                color: #a0a0a0;
                cursor: pointer;
              }
              .pwd {
                position: absolute;
                top: 0;
                right: -205px;
                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;
              }
              }
              span.tip{
                position: absolute;
                top: 0;
                right: -190px;
                font-size: 13px;
                color: #8c8c8c;
              }
              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: 0 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;
              }
            }
    }
  }
</style>