feat: 支持邮箱注册功能
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
// 注册逻辑
|
||||
import {computed, reactive, ref} from "vue";
|
||||
import {getCodePhone} from "@/apis/accountApi";
|
||||
import {getCodeEmail} from "@/apis/accountApi";
|
||||
import useAuths from "@/hooks/useAuths";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import useUserStore from "@/stores/user";
|
||||
@@ -20,15 +20,16 @@ const codeUUid = computed(() => useUserStore().codeUUid);
|
||||
const passwordConfirm = ref("");
|
||||
const registerForm = reactive({
|
||||
userName: "",
|
||||
phone: "",
|
||||
//phone: "",
|
||||
password: "",
|
||||
uuid: "",
|
||||
code: "",
|
||||
nick:""
|
||||
nick:"",
|
||||
email: "",
|
||||
});
|
||||
const phoneForm=reactive({
|
||||
code:"",
|
||||
phone:"",
|
||||
email:"",
|
||||
uuid:codeUUid
|
||||
});
|
||||
const registerRules = reactive({
|
||||
@@ -39,7 +40,7 @@ const registerRules = reactive({
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{ min: 2, message: "用户名需大于两位", trigger: "blur" },
|
||||
],
|
||||
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
|
||||
email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
||||
password: [
|
||||
{ required: true, message: "请输入新的密码", trigger: "blur" },
|
||||
@@ -52,7 +53,7 @@ const register = async (formEl) => {
|
||||
|
||||
if (valid) {
|
||||
try {
|
||||
if (registerForm.password != passwordConfirm.value) {
|
||||
if (registerForm.password !== passwordConfirm.value) {
|
||||
ElMessage.error("两次密码输入不一致");
|
||||
return;
|
||||
}
|
||||
@@ -72,7 +73,7 @@ const register = async (formEl) => {
|
||||
|
||||
|
||||
//验证码
|
||||
const codeInfo = ref("发送短信");
|
||||
const codeInfo = ref("发送邮箱");
|
||||
const isDisabledCode = ref(false);
|
||||
|
||||
//点击验证码
|
||||
@@ -80,9 +81,9 @@ const handleGetCodeImage=()=>{
|
||||
useUserStore().updateCodeImage();
|
||||
}
|
||||
|
||||
//点击手机发送短信
|
||||
//点击手机发送邮箱
|
||||
const clickPhoneCaptcha=()=>{
|
||||
if (registerForm.phone !== "")
|
||||
if (registerForm.email !== "")
|
||||
{
|
||||
isDisabledCode.value=true;
|
||||
handleGetCodeImage();
|
||||
@@ -90,7 +91,7 @@ const clickPhoneCaptcha=()=>{
|
||||
}
|
||||
else {
|
||||
ElMessage({
|
||||
message: `请先输入手机号`,
|
||||
message: `请先输入邮箱`,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
@@ -101,14 +102,14 @@ const handleSignInNow=()=>{
|
||||
router.push("/login");
|
||||
}
|
||||
const captcha = async () => {
|
||||
if (registerForm.phone!==""&&phoneForm.code!=="")
|
||||
if (registerForm.email!==""&&phoneForm.code!=="")
|
||||
{
|
||||
phoneForm.phone=registerForm.phone;
|
||||
const { data } = await getCodePhone(phoneForm);
|
||||
phoneForm.email=registerForm.email;
|
||||
const { data } = await getCodeEmail(phoneForm);
|
||||
registerForm.uuid = data.uuid;
|
||||
codeDialogVisible.value=false;
|
||||
ElMessage({
|
||||
message: `已向${registerForm.phone}发送验证码,请注意查收`,
|
||||
message: `已向${registerForm.email}发送验证码,请注意查收`,
|
||||
type: "success",
|
||||
});
|
||||
isDisabledCode.value = true;
|
||||
@@ -171,16 +172,16 @@ const captcha = async () => {
|
||||
</div>
|
||||
|
||||
<div class="input" style="margin-top: 0">
|
||||
<p>*电话</p>
|
||||
<el-form-item prop="phone">
|
||||
<p>*邮箱</p>
|
||||
<el-form-item prop="email">
|
||||
<div class="phone-code">
|
||||
<input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
|
||||
<input class="phone-code-input" type="text" v-model.trim="registerForm.email">
|
||||
<button type="button" class="phone-code-btn" @click="clickPhoneCaptcha()">{{codeInfo}}</button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="input">
|
||||
<p>*短信验证码</p>
|
||||
<p>*邮箱验证码</p>
|
||||
<el-form-item prop="code" >
|
||||
<input :disabled="!isDisabledCode" type="text" v-model.trim="registerForm.code">
|
||||
</el-form-item>
|
||||
@@ -211,7 +212,7 @@ const captcha = async () => {
|
||||
|
||||
<el-dialog
|
||||
v-model="codeDialogVisible"
|
||||
title="发送短信"
|
||||
title="发送邮箱"
|
||||
width="500"
|
||||
center
|
||||
>
|
||||
@@ -223,7 +224,8 @@ const captcha = async () => {
|
||||
<el-form-item prop="code" >
|
||||
<input type="text" v-model.trim="phoneForm.code">
|
||||
</el-form-item>
|
||||
<p style="color: red">由于国内短信严格程度在2025年5月连续加强3次,你的验证码有一定概率被运营商拦截</p>
|
||||
<!-- <p style="color: red">由于国内短信严格程度在2025年5月连续加强3次,你的验证码有一定概率被运营商拦截</p>-->
|
||||
<p style="color: red">请检查你的邮箱垃圾箱,可能在那</p>
|
||||
<p style="color: red">如果未收到验证码,请联系微信chengzilaoge520 站长进行手动创建</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<el-input v-model="user.nick" maxlength="30" :disabled="isDisable"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input v-model="user.phone" maxlength="11" :disabled="isDisable" />
|
||||
<el-input v-model="user.phone" maxlength="11" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="user.email" maxlength="50" :disabled="isDisable" />
|
||||
<el-input v-model="user.email" maxlength="50" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="user.sex" :disabled="isDisable">
|
||||
@@ -46,22 +46,22 @@ const userRef = ref(null);
|
||||
|
||||
const rules = ref({
|
||||
nick: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||
email: [
|
||||
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
|
||||
{
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
// email: [
|
||||
// { required: true, message: "邮箱地址不能为空", trigger: "blur" },
|
||||
// {
|
||||
// type: "email",
|
||||
// message: "请输入正确的邮箱地址",
|
||||
// trigger: ["blur", "change"],
|
||||
// },
|
||||
// ],
|
||||
// phone: [
|
||||
// { required: true, message: "手机号码不能为空", trigger: "blur" },
|
||||
// {
|
||||
// pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
// message: "请输入正确的手机号码",
|
||||
// trigger: "blur",
|
||||
// },
|
||||
// ],
|
||||
});
|
||||
|
||||
/** 提交按钮 */
|
||||
|
||||
Reference in New Issue
Block a user