140 lines
4.0 KiB
Plaintext
140 lines
4.0 KiB
Plaintext
<template>
|
|
<a-form ref="formRef" :show-label="false" :show-require-mark="false" size="large" :model="formInline" :rules="rules"
|
|
class="register-form">
|
|
<a-form-item name="username">
|
|
<a-input v-model="formInline.username" placeholder="请输入用户名">
|
|
<template #prefix>
|
|
<UserOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="mobile">
|
|
<a-input v-model="formInline.mobile" placeholder="请输入手机号码">
|
|
<template #prefix>
|
|
<MobileOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
|
|
</a-form-item>
|
|
<a-form-item name="code">
|
|
<a-input v-model.trim="formInline.code" placeholder="验证码">
|
|
<template #prefix>
|
|
<SafetyCertificateOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
<template #suffix>
|
|
<a-button type="text" :disabled="isGetCode" @click="getCode">
|
|
{{ codeMsg }}<span v-if="isGetCode">s</span>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="password">
|
|
<a-input v-model="formInline.password" type="password" show-password placeholder="请输入密码">
|
|
<template #prefix>
|
|
<LockOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="retPassword">
|
|
<a-input v-model="formInline.retPassword" type="password" show-password placeholder="请再次输入密码">
|
|
<template #prefix>
|
|
<LockOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item :show-label="false" class="mb-0">
|
|
<a-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
|
|
注册
|
|
</a-button>
|
|
</a-form-item>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-initial">
|
|
<a-checkbox v-model="formInline.agreement">我同意隐私协议</a-checkbox>
|
|
</div>
|
|
</div>
|
|
</a-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
|
import { rule } from '@/utils/validate';
|
|
import {
|
|
UserOutlined,
|
|
MobileOutlined,
|
|
SafetyCertificateOutlined,
|
|
LockOutlined
|
|
} from '@ant-design/icons-vue';
|
|
|
|
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;
|
|
message({
|
|
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>
|
|
|