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 === 2">
      <div class="f-form">
        <div class="page-part">
          <mt-field placeholder="手机号码" v-model="mobile"></mt-field>
        </div>
        <div class="page-part">
          <mt-field placeholder="短信验证码" v-model="token">
            <span class="token">获取验证码</span>
          </mt-field>
        </div>
      </div>
      <div class="form-btn">
        <div class="page-part">
          <el-checkbox v-model="checked">我已阅读并同意 <a href="#">《优软云服务条款》</a></el-checkbox>
        </div>
        <mt-button type="primary" size="large">验证手机</mt-button>
      </div>
    </template>
    <template v-if="step === 1">
      <div class="f-form">
        <div class="page-part">
          <mt-field placeholder="企业名称" v-model="step2.spaceName"></mt-field>
        </div>
        <div class="page-part">
          <mt-field placeholder="营业护照号" v-model="step2.businessCode"></mt-field>
        </div>
        <div class="page-part">
          <mt-field placeholder="管理员号码" v-model="step2.vipName"></mt-field>
        </div>
        <div class="page-part">
          <mt-field placeholder="登录密码" v-model="step2.password"></mt-field>
          <template v-if="password">
            <p class="pwd">密码强度 <em class="sm"></em> <em class="md"></em> <em class="ld"></em> <span class="sm-span">强</span></p>
            <p class="pwd">密码须为8-20字符的英文、数字混合</p>
          </template>
        </div>
        <div class="page-part">
          <mt-field placeholder="密码确认" v-model="step2.password"></mt-field>
        </div>
        <div class="page-part">
          <mt-field placeholder="联系邮箱" v-model="step2.email"></mt-field>
        </div>
      </div>
      <div class="form-btn">
        <mt-button type="primary" size="large">完成注册</mt-button>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'registerEnterprise',
    data () {
      return {
        step: 1,
        step1: {
          mobile: '',
          token: ''
        },
        step2: {
          spaceName: '',
          businessCode: '',
          vipName: '',
          password: '',
          email: ''
        },
        checked: ''
      }
    }
  }
</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}
        .sm-span{color:#ff4e00}
        .md-span{color: #22ac38}
        .ld-span{color: #00a0e9}
      }
      .token{
        display:inline-block;
        padding: 0 .5rem;
        text-align: center;
        border-left:1px solid #b5b5b5;
      }
    }
  }
</style>