143 lines
3.1 KiB
Vue
143 lines
3.1 KiB
Vue
<template>
|
|
<t-form class="tui-register-form" :data="formData.data" :rules="rules" @submit="doSubmit">
|
|
<t-form-item label="昵称" name="name">
|
|
<t-input class="name" v-model="formData.data.name" placeholder="" />
|
|
</t-form-item>
|
|
<t-form-item label="密码" name="password">
|
|
<t-input type="password" v-model="formData.data.password" placeholder="" />
|
|
</t-form-item>
|
|
<t-form-item label="确认密码" name="rePassword">
|
|
<t-input type="password" v-model="formData.data.rePassword" placeholder="" />
|
|
</t-form-item>
|
|
<t-form-item label="邮箱" name="email">
|
|
<t-input type="text" v-model="formData.data.email" placeholder="选填" />
|
|
</t-form-item>
|
|
<t-form-item label="验证码" name="captcha">
|
|
<div class="captcha-box">
|
|
<t-input class="captcha" v-model="formData.captcha" placeholder="" />
|
|
<captcha :api="CommonAPI.getCaptchaAPI()" :width="90" :height="28" :from="CaptchaFrom.REGISTER" />
|
|
</div>
|
|
</t-form-item>
|
|
<div class="exec">
|
|
<t-button
|
|
class="button"
|
|
type="submit"
|
|
:loading="doSubmitting"
|
|
:disabled="doSubmitting"
|
|
>注册</t-button>
|
|
</div>
|
|
</t-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { Captcha, CaptchaData, CaptchaFrom, CommonAPI, RegisterRequest, UserAPI, userStore } from "timi-web";
|
|
import { FormRules, MessagePlugin, SubmitContext } from "tdesign-vue-next";
|
|
import { Emits, useHandler } from "~/components/authorize-form/emits";
|
|
|
|
type RegisterForm = {
|
|
rePassword: string;
|
|
} & RegisterRequest
|
|
|
|
const emits = defineEmits<Emits>();
|
|
const { onRegisterSuccess } = useHandler(emits);
|
|
|
|
const doSubmitting = ref<boolean>(false);
|
|
|
|
const formData = reactive<CaptchaData<RegisterForm>>({
|
|
from: CaptchaFrom.LOGIN,
|
|
captcha: "",
|
|
data: {
|
|
name: "",
|
|
password: "",
|
|
rePassword: "",
|
|
email: undefined
|
|
}
|
|
});
|
|
|
|
const rules = {
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: "请输入昵称",
|
|
type: "error"
|
|
}
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
message: "请输入密码",
|
|
type: "error"
|
|
}
|
|
],
|
|
rePassword: [
|
|
{
|
|
required: true,
|
|
message: "请输入确认密码",
|
|
type: "error"
|
|
},
|
|
{
|
|
validator: (val: string) => new Promise((resolve) => {
|
|
const timer = setTimeout(() => {
|
|
resolve(formData.data.password === val);
|
|
clearTimeout(timer);
|
|
});
|
|
}),
|
|
message: "两次密码不一致"
|
|
}
|
|
],
|
|
captcha: [
|
|
{
|
|
required: true,
|
|
message: "请输入验证码",
|
|
type: "error"
|
|
}
|
|
]
|
|
} as FormRules;
|
|
|
|
const doSubmit = ({validateResult, e}: SubmitContext) => {
|
|
if (e) {
|
|
e.preventDefault();
|
|
}
|
|
if (validateResult === true) {
|
|
doSubmitting.value = true;
|
|
UserAPI.register({...formData}).then(async (response) => {
|
|
await userStore.updateToken(response);
|
|
await onRegisterSuccess();
|
|
doSubmitting.value = false;
|
|
}).catch(msg => {
|
|
MessagePlugin.error(msg, 5E3);
|
|
doSubmitting.value = false;
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tui-register-form {
|
|
padding: 1rem;
|
|
margin-left: -32px;
|
|
|
|
.captcha-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.captcha {
|
|
width: 7rem;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
|
|
.exec {
|
|
display: flex;
|
|
margin-top: 2rem;
|
|
justify-content: center;
|
|
|
|
.button {
|
|
width: 8rem;
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|