feat: 支持邮箱注册功能

This commit is contained in:
ccnetcore
2025-07-13 21:26:46 +08:00
parent 020d674ca2
commit 43dc962606
18 changed files with 483 additions and 214 deletions

View File

@@ -85,7 +85,19 @@ export function getCodeImg() {
// 获取短信验证码
export function getCodePhone(phoneForm) {
return request({
url: "/account/captcha-phone",
url: "/account/captcha-phone/register",
headers: {
isToken: false,
},
method: "post",
timeout: 20000,
data: phoneForm,
});
}
// 获取邮箱验证码
export function getCodeEmail(phoneForm) {
return request({
url: "/account/captcha-email/register",
headers: {
isToken: false,
},

View File

@@ -59,7 +59,7 @@ export function userLogout() {
*/
export function getCodePhone(data) {
return request({
url: `/account/captcha-phone`,
url: `/account/captcha-phone/register`,
method: "post",
data,
});

View File

@@ -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>

View File

@@ -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",
// },
// ],
});
/** 提交按钮 */