adi_cae_web/src/views/register/index.vue

/*注册*/
<template>
  <div class="register">
    <div class="container">
      <div class="content">
        <div class="steps">
          <p>
            <span :class="[active==0?'on':'']">邮箱验证</span>
            &gt;
            <span :class="[active==1?'on':'']">设置密码</span>
            &gt;
            <span :class="[active==2?'on':'']">注册成功</span>
          </p>
        </div>
        <h3 class="title" v-if="active!=2">免费注册</h3>
        <el-form
          v-if="active==0"
          ref="emailForm"
          class="register-form"
          :model="emailForm"
          :rules="emailRules"
          label-position="left"
        >
          <el-form-item prop="email">
            <el-input
              ref="email"
              type="text"
              size="small"
              name="email"
              v-model="emailForm.email"
              placeholder="请输入邮箱地址"
            >
              <span slot="prefix" class="solt">邮箱</span>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              ref="code"
              type="text"
              size="small"
              style="width:220px"
              name="code"
              v-model="emailForm.code"
              placeholder="请输入验证码"
            >
              <span slot="prefix" class="solt">验证码</span>
            </el-input>
            <el-button
              class="code"
              type="danger"
              size="small"
              :disabled="countDown>0"
              plain
              @click.native.prevent="getCode"
            >{{countDown>0?`${countDown}s`:'获取验证码'}}</el-button>
          </el-form-item>
          <div class="agree">
            <el-checkbox v-model="emailForm.checked"></el-checkbox>
            <span>点击“下一步”按钮将视为您已阅读并同意</span>
            <router-link to="/protocol/index">《注册协议》</router-link>
          </div>
          <el-button type="danger" size="small" class="next-btn" @click.native.prevent="Next">下一步</el-button>
        </el-form>

        <el-form
          v-if="active==1"
          ref="setForm"
          class="register-form"
          :model="setForm"
          :rules="setRules"
          label-position="left"
        >
          <el-form-item prop="name">
            <el-input
              ref="name"
              type="text"
              size="small"
              name="name"
              v-model="setForm.name"
              placeholder="请设置用户名"
            >
              <span slot="prefix" class="solt">用户名</span>
            </el-input>
          </el-form-item>

          <el-form-item prop="pwd">
            <el-input
              ref="pwd"
              :type="setForm.pwdType"
              size="small"
              name="pwd"
              minlength="6"
              maxlength="8"
              v-model="setForm.pwd"
              placeholder="请输入密码"
            >
              <span slot="prefix" class="solt">密码</span>
              <svg-icon
                slot="suffix"
                :icon-class="setForm.pwdType === 'password' ? 'eye' : 'eye-open'"
                @click="showPwd"
              />
            </el-input>
          </el-form-item>
          <el-form-item prop="spwd">
            <el-input
              ref="spwd"
              :type="setForm.spwdType"
              size="small"
              name="spwd"
              minlength="6"
              maxlength="8"
              v-model="setForm.spwd"
              placeholder="请确认密码"
            >
              <span slot="prefix" class="solt">确认密码</span>
              <svg-icon
                slot="suffix"
                :icon-class="setForm.spwdType === 'password' ? 'eye' : 'eye-open'"
                @click="showSpwd"
              />
            </el-input>
          </el-form-item>
          <el-button type="danger" size="small" class="next-btn" @click.native.prevent="Next">下一步</el-button>
        </el-form>

        <div class="link" v-if="active!=2">
          已有账号？
          <router-link class="link-item" to="/login/index">立即登录</router-link>
        </div>

        <div v-if="active==2" class="success">
          <i class="el-icon-circle-check" />
          <p>恭喜您，注册成功！</p>
          <router-link to="/login/index">返回登录页面</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validEmail, validCode, validPwd } from '@/utils/validate'
import { request, enPassword } from '@/utils/request'
export default {
  name: 'Register',
  data() {
    const validateEmail = (rule, value, callback) => {
      if (value) {
        if (!validEmail(value)) {
          callback(new Error('请输入正确的邮箱'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入邮箱'))
      }
    }
    const validateCode = (rule, value, callback) => {
      if (value) {
        if (!validCode(value)) {
          callback(new Error('验证码为6位数字'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入验证码'))
      }
    }
    const validatePwd = (rule, value, callback) => {
      if (value) {
        if (!validPwd(value)) {
          callback(new Error('6~8位,字母开头，只能包含字母、数字和下划线'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入密码'))
      }
    }
    const validateSpwd = (rule, value, callback) => {
      if (value) {
        if (value != this.setForm.pwd) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请再次输入密码'))
      }
    }
    return {
      active: 0, //当前步骤
      countDown: '00', // 倒计时
      emailForm: {
        email: '',
        code: '',
        checked: true
      },
      emailRules: {
        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }]
      },
      setForm: {
        name: '',
        pwd: '',
        spwd: '',
        pwdType: 'password',
        spwdType: 'password'
      },
      setRules: {
        name: [{ required: true, message: '请设置用户名', trigger: 'blur' }],
        pwd: [
          // { required: true, trigger: 'blur', validator: validatePwd }
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 8, message: '密码长度为6到8位', trigger: 'blur' }
        ],
        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }]
      }
    }
  },
  computed: {},
  methods: {
    // 切换显示密码
    showPwd() {
      this.setForm.pwdType =
        this.setForm.pwdType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.pwd.focus()
      })
    },
    // 切换显示二次密码
    showSpwd() {
      this.setForm.spwdType =
        this.setForm.spwdType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.spwd.focus()
      })
    },
    // 倒计时
    theLast() {
      this.countDown = 60
      let timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
          this.countDown < 10 && (this.countDown = '0' + this.countDown)
        } else {
          clearInterval(timer)
        }
      }, 1000)
    },
    //获取验证码
    getCode() {
      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
      if (!this.emailForm.email) return this.$message.error('请输入邮箱地址!')
      let params = {
        transCode: 'A00001',
        mail: this.emailForm.email,
        queryNo: '',
        type: '0'
      }
      request(params)
        .then(res => {
          this.$message.success(
            '验证码已发送至邮箱：' + this.emailForm.email + ',请注意查收！'
          )
          this.theLast()
        })
        .catch(err => {})
    },
    // 下一步
    Next() {
      if (this.active == 0) {
        this.$refs.emailForm.validate(valid => {
          if (valid) {
            if (this.emailForm.checked) {
              let params = {
                transCode: 'UT0003',
                mail: this.emailForm.email,
                verificationCode: this.emailForm.code
              }
              request(params)
                .then(res => {
                  this.$message.success('邮箱验证通过！')
                  this.active = 1
                })
                .catch(err => {})
            } else {
              this.$alert('请仔细阅读《注册协议》，并同意！', '提示', {
                confirmButtonText: '确定',
                callback: action => {}
              })
            }
          } else {
            return false
          }
        })
      } else if (this.active == 1) {
        this.$refs.setForm.validate(valid => {
          if (valid) {
            let params = {
              transCode: 'A00003',
              userName: this.setForm.name,
              password: enPassword(this.setForm.pwd),
              mail: this.emailForm.email
            }
            request(params)
              .then(res => {
                this.$message({
                  message: '恭喜您，注册成功！',
                  type: 'success'
                })
                this.active = 2
              })
              .catch(err => {})
          } else {
            return false
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.register {
  padding: 50px 0;
  @include w_h(100%, 100%);
  background: $color_f5;
  .container {
    @include w_h(100%, 100%);
    .content {
      margin: 0 auto;
      @include w_h(430px, 100%);
      background: $color_f;
      box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
      .steps {
        @include w_h(100%, 34px);
        font-size: 12px;
        line-height: 34px;
        text-align: center;
        color: #78a4db;
        background: #004498;
        .on {
          color: $color_f;
        }
      }
      .title {
        margin: 30px auto;
        font-size: 20px;
        text-align: center;
        color: $color_3;
      }
      .register-form {
        padding: 0 50px 30px;
        @include w_h(100%);
        background: $color_f;
        .solt {
          padding: 0 6px;
          font-size: 12px;
          color: $color_6;
        }
        .code {
          @include position(absolute, 4px, auto, auto, 0);
          @include w_h(100px);
          font-size: 12px;
          vertical-align: middle;
          cursor: pointer;
          user-select: none;
        }
        .agree {
          text-align: left;
          font-size: 12px;
          a {
            color: #409eff;
          }
        }
        .next-btn {
          margin: 30px auto 10px;
          @include w_h();
        }
      }
      .link {
        font-size: 12px;
        text-align: center;
        color: $color_9;
        .link-item {
          color: $color_on;
        }
      }
      .success {
        font-size: 14px;
        text-align: center;
        i {
          margin-top: 50px;
          font-size: 60px;
          color: #41b300;
        }
        p {
          margin: 20px auto;
          font-size: 20px;
          font-weight: 700;
          color: $color_3;
        }
        a {
          font-size: 14px;
          color: $color_9;
        }
        a:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .register-form .el-input input {
    font-size: 12px;
    color: $color_9;
  }
}
.register-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
    &--prefix .el-input__inner {
      color: $color_6;
      padding-left: 65px;
    }
  }
}
</style>>