wms-elevue/src/views/login/RegisterForm.vue

<template>
  <el-form
    ref="formRef"
    :show-label="false"
    :show-require-mark="false"
    size="large"
    :model="formInline"
    :rules="rules"
    class="register-form"
  >
    <el-form-item prop="username">
      <el-input v-model="formInline.username" placeholder="请输入用户名">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <PersonOutline />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="mobile">
      <el-input v-model="formInline.mobile" placeholder="请输入手机号码">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <Iphone />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input v-model.trim="formInline.code" placeholder="验证码">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <SafetyCertificateOutlined />
          </el-icon>
        </template>
        <template #suffix>
          <el-button link :disabled="isGetCode ? true : false" @click="getCode">
            {{ codeMsg }}<span v-if="isGetCode">s</span>
          </el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="formInline.password"
        type="password"
        show-password
        placeholder="请输入密码"
      >
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <Lock />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="retPassword">
      <el-input
        v-model="formInline.retPassword"
        type="password"
        show-password
        placeholder="请再次输入密码"
      >
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <Lock />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item :show-label="false" class="mb-0">
      <el-button
        class="w-full"
        type="primary"
        @click="handleSubmit"
        size="large"
        :loading="loading"
      >
        注册
      </el-button>
    </el-form-item>

    <div class="flex items-center justify-between">
      <div class="flex-initial">
        <el-form-item prop="agreement">
          <el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { rule } from '@/utils/validate';
  import { PersonOutline } from '@vicons/ionicons5';
  import { SafetyCertificateOutlined } from '@vicons/antd';

  /**
   * 定义参数
   */
  const formRef = ref();
  const loading = ref(false);
  const codeMsg: any = ref('获取验证码');
  const isGetCode = ref(false);
  const emit = defineEmits(['backLogin']);

  /**
   * 定义表单参数
   */
  const formInline = reactive({
    username: '',
    password: '',
    retPassword: '',
    mobile: '',
    code: '',
    agreement: false,
  });

  /**
   * 定义验证规则
   */
  const rules = {
    username: { required: true, message: '请输入用户名', trigger: 'blur' },
    mobile: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      { validator: rule.validatePhone, trigger: 'blur' },
    ],
    code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
    retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
    agreement: {
      required: true,
      type: 'boolean',
      trigger: 'change',
      message: '请先勾选协议',
      validator: (_, value) => value === true,
    },
  };

  /**
   * 执行提交表单
   */
  const handleSubmit = () => {
    loading.value = true;
    formRef.value.validate(async (valid) => {
      if (valid) {
        backLogin();
        loading.value = false;
      } else {
        loading.value = false;
        ElMessage({
          message: '请填写完整信息',
          type: 'error',
        });
      }
    });
  };

  /**
   * 定义返回登录
   */
  const backLogin = () => {
    emit('backLogin', true);
  };

  /**
   * 获取验证码
   */
  function getCode() {
    if (!formInline.mobile) {
      formRef.value.validateField('mobile');
      return;
    }
    codeMsg.value = 60;
    isGetCode.value = true;
    let time = setInterval(() => {
      codeMsg.value--;
      if (codeMsg.value <= 0) {
        clearInterval(time);
        codeMsg.value = '获取验证码';
        isGetCode.value = false;
      }
    }, 1000);
  }
</script>

<style lang="scss" scoped></style>