reservation-ssr/components/register/stepThird.vue

<template>
  <div class="third">
    <div class="container">
      <div class="info-content">
        <p>管理员信息</p>
        <div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="adminName">
              <el-input v-model="ruleForm.adminName" placeholder="例如： 张三"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="adminTel">
              <el-input v-model="ruleForm.adminTel" placeholder="例如： 13888888888"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="adminEmail">
              <el-input v-model="ruleForm.adminEmail" placeholder="例如： 123456@example.com"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="checkcode" :gutter="20">
              <el-col :span="20">
                <el-input v-model="ruleForm.checkcode" placeholder="例如： 123456"></el-input>
              </el-col>
              <el-col :span="4" style="padding-left: 13px;">
                <el-button type="primary" @click="getVerify">{{verify}}</el-button>
              </el-col>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password" placeholder="例如： Aa123456"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom-btn">
          <el-button type="primary" @click="submitForm('ruleForm')">注  册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'stepFirst',
    data () {
      return {
        ruleForm: {
          adminName: '',
          adminTel: null,
          adminEmail: '',
          checkcode: '',
          password: ''
        },
        rules: {
          adminName: [
            {required: true, message: '请输入管理员姓名', trigger: 'blur'}
          ],
          adminTel: [
            {required: true, message: '请输入管理员手机号', trigger: 'blur'}
          ],
          adminEmail: [
            {required: true, message: '请输入管理邮箱', trigger: 'blur'}
          ],
          checkcode: [
            {required: true, message: '请输入验证码信息', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入管理员密码', trigger: 'blur'}
          ]
        },
        verify: '获取验证码',
        numVerify: 59
      }
    },
    methods: {
      sectionChange (type) {
        this.$emit('sectionEvent', type)
      },
      getVerify () {
        let self = this
        let time = setInterval(function () {
          self.numVerify--
          self.verify = '已发送(' + self.numVerify + ')s'
          if (self.numVerify <= 0) {
            self.verify = '获取验证码'
            clearInterval(time)
          }
        }, 1000)
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
            this.sectionChange(1)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .third{
    .container{
      width:960px;
      margin:0 auto;
      .info-content{
        background: #fff;
        padding: 30px 55px 50px 55px;
        p{
          font-size: 14px;
          color:#999;
          margin-bottom:30px;
        }
        .bottom-btn{
          padding-top:50px;
          padding-bottom:333px;
          .el-button{
            display:block;
            width:340px;
            height:70px;
            margin:0 auto;
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>