mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
3.9 KiB
175 lines
3.9 KiB
<script setup lang="ts">
|
|
import { useLoginStore } from "@/stores/login";
|
|
import { ref, Ref } from "vue";
|
|
const store = useLoginStore();
|
|
interface RegisterInfo {
|
|
username: string;
|
|
nickname: string;
|
|
password: string;
|
|
email: string;
|
|
phone: string;
|
|
third_user_id: string;
|
|
union_id: string;
|
|
platform: string;
|
|
confirmPassword: string;
|
|
}
|
|
// 注册信息
|
|
const registerInfo: Ref<RegisterInfo> = ref({
|
|
username: "",
|
|
nickname: "",
|
|
password: "",
|
|
email: "",
|
|
phone: "",
|
|
third_user_id: "",
|
|
union_id: "",
|
|
platform: "",
|
|
confirmPassword: "",
|
|
});
|
|
const rules = {
|
|
username: [
|
|
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
|
{
|
|
min: 3,
|
|
max: 20,
|
|
message: "用户名长度应在3到20个字符之间",
|
|
trigger: "blur",
|
|
},
|
|
{
|
|
pattern: /^[a-zA-Z0-9]+$/,
|
|
message: "用户名只能包含英文和数字",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
password: [
|
|
{ required: true, message: "密码不能为空", trigger: "blur" },
|
|
{ min: 6, message: "密码长度不能小于6位", trigger: "blur" },
|
|
],
|
|
confirmPassword: [
|
|
{ required: true, message: "请再次输入密码", trigger: "blur" },
|
|
{
|
|
validator: (rule: any, value: any, callback: any) => {
|
|
console.log(rule);
|
|
if (value === "") {
|
|
callback(new Error("请再次输入密码"));
|
|
} else if (value !== registerInfo.value.password) {
|
|
callback(new Error("两次输入的密码不一致"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
email: [
|
|
{ required: true, message: "邮箱不能为空", trigger: "blur" },
|
|
{
|
|
type: "email",
|
|
message: "请输入有效的邮箱地址",
|
|
trigger: ["blur", "change"],
|
|
},
|
|
],
|
|
phone: [
|
|
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
|
{
|
|
pattern: /^1[3-9]\d{9}$/,
|
|
message: "请输入有效的手机号",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
nickname: [
|
|
{ required: true, message: "昵称不能为空", trigger: "blur" },
|
|
{
|
|
min: 2,
|
|
max: 20,
|
|
message: "昵称长度应在2到20个字符之间",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
};
|
|
</script>
|
|
<template>
|
|
<el-form
|
|
label-position="left"
|
|
label-width="0px"
|
|
:model="registerInfo"
|
|
ref="regFormRef"
|
|
:rules="rules"
|
|
>
|
|
<el-form-item prop="username">
|
|
<el-input
|
|
v-model="registerInfo.username"
|
|
size="large"
|
|
placeholder="请输入用户名"
|
|
prefix-icon="UserFilled"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item prop="nickname">
|
|
<el-input
|
|
v-model="registerInfo.nickname"
|
|
size="large"
|
|
placeholder="请输入真实姓名"
|
|
prefix-icon="Avatar"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="email">
|
|
<el-input
|
|
v-model="registerInfo.email"
|
|
size="large"
|
|
placeholder="请输入邮箱"
|
|
prefix-icon="Message"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="phone">
|
|
<el-input
|
|
v-model="registerInfo.phone"
|
|
size="large"
|
|
placeholder="请输入手机号"
|
|
prefix-icon="Iphone"
|
|
></el-input>
|
|
</el-form-item> -->
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
v-model="registerInfo.password"
|
|
size="large"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
show-password
|
|
prefix-icon="Key"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="confirmPassword">
|
|
<el-input
|
|
v-model="registerInfo.confirmPassword"
|
|
size="large"
|
|
type="password"
|
|
placeholder="请再次输入密码"
|
|
show-password
|
|
prefix-icon="Lock"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item class="button-center">
|
|
<el-button
|
|
class="login-button"
|
|
type="primary"
|
|
size="large"
|
|
@click="store.onRegister"
|
|
>注册</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<style scoped>
|
|
.button-center {
|
|
width: 100%;
|
|
.login-button {
|
|
width: 100%;
|
|
height: 45px;
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
:deep(.el-input__wrapper) {
|
|
border-radius: 50px;
|
|
height: 45px;
|
|
}
|
|
</style>
|
|
|