sso-ssr/components/register/PersonalRegistration.vue

<template>
  <div class="register">
    <div class="container">
      <div class="content">
        <div class="content-top">
          <h3>个人注册</h3>
        </div>
        <div>
          <el-form :model="item" :rules="rules2" ref="item" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="vipName">
              <el-input type="text" v-model="item.vipName" auto-complete="off" placeholder="会员名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="item.password" auto-complete="off" 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="confirm">
              <el-input type="password" v-model="item.confirm" auto-complete="off" placeholder="密码确认"></el-input>
            </el-form-item>
            <el-form-item prop="mobile">
              <el-input v-model="item.mobile"
                        v-bind:class="{active: mobileRegister}"
                        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="item.code"
                        v-bind:class="{ active: this.codeErrorChecked }" auto-complete="off" class="msg" placeholder="短信验证码"></el-input>
              <el-button type="primary" class="code"
                         v-show="sendPersonalCode"
                         @click="getCheckCode"
                         :disabled="this.checkMobile">获取验证码</el-button>
              <el-button type="primary"  v-show="!sendPersonalCode" class="code code-send">已发送({{personal_time}}s)</el-button>
              <!--<span v-show="codeErrorChecked" class="codeError-tip">验证码输入错误</span>-->
            </el-form-item>
            <el-form-item>
              <!--<el-button type="primary" @click="submitForm('item')" :disabled="!this.item.vipName || !this.item.password || !this.item.confirm  || !this.item.code || !this.checked" class="finish">完成注册</el-button>-->
              <a class="btn finish" @click="submit"
                 :disabled="!this.vipNameChecked || !this.passwordChecked || !this.confirmChecked || !this.mobileChecked || !this.codeChecked || !this.checked">完成注册</a>
            </el-form-item>

            <el-form-item>
              <el-checkbox name="type" v-model="checked" @click="checkboxChecked"></el-checkbox>
              <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="login">已有账号？<a href="/">立即登录</a></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PersonalRegistration',
    data () {
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('会员名不能为空'))
          this.vipNameChecked = false
        } else {
          if (this.item.vipName !== '') {
            if (value.length < 2 || value.length > 20) {
              callback(new Error('请填写合适的会员名称，2~20个字符'))
              this.vipNameChecked = false
            } else {
              this.vipNameChecked = true
            }
          }
        }
        callback()
      }
      var validatePass = (rule, value, callback) => {
        if (this.item.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 validatePassTip = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
          this.passwordChecked = false
        } else {
          if (this.item.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
            }
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
          this.confirmChecked = false
        } else if (value !== this.item.password) {
          callback(new Error('两次输入密码不一致!'))
          this.confirmChecked = false
        } else {
          this.confirmChecked = true
          callback()
        }
      }
      var validateMobile = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的手机号'))
          this.showMsgTip = false
          this.checkMobile = true
          this.mobileRegister = false
          this.mobileChecked = false
        } else {
          if (this.item.mobile !== '') {
            var reg = /^1([0-9]{10})$/
            if (!reg.test(value)) {
              callback(new Error('请填写正确的手机号'))
              this.showMsgTip = false
              this.checkMobile = true
              this.mobileRegister = false
              this.mobileChecked = false
            } else {
              this.$http.get(`/api/user/checkMobile`, {params: {mobile: this.item.mobile, mobileArea: ''}})
                .then(response => {
                  if (response.data.hasRegister) {
                    this.mobileRegister = true
                    this.showMsgTip = false
                    this.checkMobile = true
                    this.mobileChecked = false
                  } else {
                    this.showMsgTip = false
                    this.checkMobile = false
                    this.mobileRegister = false
                    this.mobileChecked = true
                  }
                })
            }
          }
          callback()
        }
      }
      var validateCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的验证码'))
          this.codeErrorChecked = false
          this.codeChecked = false
        } else {
          if (this.token !== '') {
            if (this.item.code !== '' && this.item.mobile !== '') {
              let param = new FormData()
              param.append('mobile', this.item.mobile)
              param.append('code', this.item.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
//                    callback(new Error('验证码输入错误'))
                    return Promise.reject(response.data)
                  }
                }).catch(err => {
                  this.$message.error(err.errMsg)
                })
            }
          } else {}
          callback()
        }
      }
      return {
        item: {
          vipName: '',
          password: '',
          confirm: '',
          mobile: '',
          code: ''
        },
        vipNameChecked: false,
        passwordChecked: false,
        confirmChecked: false,
        mobileChecked: false,
        codeChecked: false,
        codeErrorChecked: false,
        showMsgTip: true,
        showMsgTip1: false,
        showMsgTip2: false,
        showMsgTip3: false,
        showMsgTip4: false,
        checkMobile: true,
        checked: true,
        token: '',
        mobileRegister: false,
        sendPersonalCode: true,
        personal_time: 0,
        rules2: {
          vipName: [
            { validator: validateName, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassTip, trigger: 'blur' },
            { validator: validatePass, trigger: 'change' }
          ],
          confirm: [
            { required: true, validator: validatePass2, trigger: 'blur' }
          ],
          mobile: [
            { validator: validateMobile, trigger: 'blur' }
          ],
          code: [
            { validator: validateCode, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
//      我同意是否被选中
      checkboxChecked () {
        this.checked = !this.checked
      },
//      表单提交
      submit () {
        if (this.vipNameChecked && this.passwordChecked && this.confirmChecked && this.mobileChecked && this.codeChecked && this.checked) {
          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'] || ''
          let param = new FormData()
          param.append('vipName', this.item.vipName)
          param.append('password', this.item.password)
          param.append('mobile', this.item.mobile)
//          param.append('mobileArea', '')
          param.append('appId', appId)
          param.append('code', this.item.code)
          param.append('token', this.token)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/personal/register', param, config)
            .then(response => {
              if (response.data.success) {
//                window.loaction.href = '/'
              } else {
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.$message.error(err.errMsg)
            })
        }
      },
//      获取验证码
//      async getCode () {
//        let { data } = await this.$http.get(`/sso/personal/register/checkCode`, {params: {mobile: this.item.mobile}})
//        this.token = data.token
//      },
      getCheckCode () {
//        this.getCode()
        this.$http.get(`/sso/personal/register/checkCode`, {params: {mobile: this.item.mobile}})
          .then(response => {
            this.token = response.data.token
            if (this.token !== '') {
              this.$message({
                message: '验证码已经发送到您的手机，请注意查收',
                type: 'success'
              })
              this.sendPersonalCode = false
              this.personal_time = 60
              var personalTime = setInterval(() => {
                this.personal_time--
                if (this.personal_time <= 0) {
                  this.sendPersonalCode = true
                  clearInterval(personalTime)
                }
              }, 1000)
            } else {}
          }).catch(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;
            input{
              padding: 0 0 0 18px;
              width: 360px;
              height: 44px;
              line-height: 44px;
              font-size: 14px;
              color: #000;
              border-radius: 0;
            }
            span.help{
              position: absolute;
              right: -230px;
              top:0;
              font-size: 12px;
              color: #f00;
            }
            i.fa{
              position: absolute;
              top: 10px;
              right: 18px;
              font-size: 24px;
              color: #a0a0a0;
              cursor: pointer;
            }
            .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.tip{
              position: absolute;
              top: 3px;
              right: -190px;
              font-size: 13px;
              color: #8c8c8c;
            }
            span.tip.tip-mobile{
              top: 3px;
              right: -118px;
              color: #ff4949;
              font-size: 12px;
            }
            span.codeError-tip{
              position: absolute;
              top: 3px;
              right: -105px;
              color: #ff4949;
              font-size: 12px;
            }
            input.msg{
              float: left;
              width: 210px;
            }
            button.msg{
              float: right;
              width: 130px;
              height: 44px;
              font-size: 14px;
              color: #5a5a5a;
              background: #f4f4f4;
              border: 1px solid #dcdcdc;
              cursor: pointer;
              &:disabled{
                cursor: not-allowed ;
                opacity: .7;
               }
            }
            span.msg.send{
              float: right;
              width: 130px;
              height: 44px;
              line-height: 44px;
              font-size: 14px;
              background: #d2d2d2;
              color: #fff;
              border: 1px solid #dcdcdc;
            }
            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;
          }
          .submitBtn {
            display: inline-block;
            margin-top: 34px;
            width: 360px;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            color: #fff;
            background: #0076AD;
            border-radius: 3px;
            border: none;
            &:disabled{
              cursor: not-allowed ;
              opacity: .7;
             }
          }
        }
      }
      .login{
        margin-top: 20px;
        font-size: 14px;
        color: #8c8c8c;
        a{
          font-size: 14px;
          color: #0076ad;
        }
      }
    }
  }
</style>