wms-antdvue/.svn/pristine/d7/d7c9d334b8e26e5d2bb434dba003e8aa561e2205.svn-base

<template>
  <a-form ref="formRef" size="large" :model="formInline" :rules="rules">
    <a-form-item name="username">
      <a-input v-model:value="formInline.username" size="large" placeholder="请输入用户名">
        <template #prefix>
          <UserOutlined type="user" style="color: #808695; font-size: 18px" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item name="mobile">
      <div class="w-full flex">
        <a-input
          class="order-first"
          size="large"
          v-model:value="formInline.mobile"
          placeholder="请输入手机号码"
        >
          <template #prefix>
            <MobileOutlined style="color: #808695; font-size: 18px" />
          </template>
        </a-input>
        <a-button class="ml-3 order-last" size="large" :disabled="isGetCode" @click="getCode"
          >{{ codeMsg }}<span v-if="isGetCode">s</span>
        </a-button>
      </div>
    </a-form-item>
    <a-form-item name="code">
      <a-input v-model:value="formInline.code" size="large" placeholder="请输入验证码">
        <template #prefix>
          <SafetyOutlined style="color: #808695; font-size: 18px" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item name="password">
      <a-input-password
        v-model:value="formInline.password"
        size="large"
        showPasswordOn="click"
        placeholder="请输入密码"
      >
        <template #prefix>
          <LockOutlined style="color: #808695; font-size: 18px" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item name="retPassword">
      <a-input-password
        v-model:value="formInline.retPassword"
        showPasswordOn="click"
        placeholder="请再次输入密码"
        @keyup.enter="handleSubmit"
        size="large"
      >
        <template #prefix>
          <LockOutlined style="color: #808695; font-size: 18px" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item class="default-color" name="agreement">
      <div class="flex justify-between">
        <div class="flex-initial">
          <a-checkbox v-model:checked="formInline.agreement">我同意隐私协议</a-checkbox>
        </div>
      </div>
    </a-form-item>

    <a-form-item :show-label="false">
      <a-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
        注册
      </a-button>
    </a-form-item>

    <a-form-item :show-label="false">
      <a-button size="large" block @click="backLogin">返回</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { message } from 'ant-design-vue';
  import {
    UserOutlined,
    LockOutlined,
    MobileOutlined,
    SafetyOutlined,
  } from '@ant-design/icons-vue';

  const formRef = ref();
  const loading = ref(false);
  const codeMsg = ref<number | string>('获取验证码');
  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' },
    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',
      validator: (_, value) => {
        if (value === true) {
          return Promise.resolve();
        }
        return Promise.reject('请先勾选协议');
      },
    },
  };

  const handleSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        message.success('注册准备就绪');
        loading.value = true;
      })
      .catch((error) => {
        console.log('error', error);
        message.error('验证失败，请填写完整信息');
      });
  };

  const backLogin = () => {
    emit('backLogin');
  };

  function getCode() {
    codeMsg.value = 60;
    isGetCode.value = true;
    let time = setInterval(() => {
      (codeMsg.value as number)--;
      if (codeMsg.value <= 0) {
        clearInterval(time);
        codeMsg.value = '获取验证码';
        isGetCode.value = false;
      }
    }, 1000);
  }
</script>