|
|
|
@@ -9,7 +9,7 @@ |
|
|
|
loop |
|
|
|
></video> |
|
|
|
</div> |
|
|
|
<!-- 正常登录 --> |
|
|
|
<!-- 正常登录 1--> |
|
|
|
<el-form |
|
|
|
v-if="isLogin == 1" |
|
|
|
ref="loginFormRef" |
|
|
|
@@ -126,7 +126,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- 注册账户 --> |
|
|
|
<!-- 注册账户 2--> |
|
|
|
<el-form |
|
|
|
v-if="isLogin == 2" |
|
|
|
ref="loginFormRef" |
|
|
|
@@ -240,7 +240,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- 忘记密码 --> |
|
|
|
<!-- 忘记密码 3--> |
|
|
|
<el-form |
|
|
|
v-if="isLogin == 3" |
|
|
|
ref="loginFormRef" |
|
|
|
@@ -308,7 +308,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- 重置密码 --> |
|
|
|
<!-- 重置密码 4--> |
|
|
|
<el-form |
|
|
|
v-if="isLogin == 4" |
|
|
|
ref="loginFormRef" |
|
|
|
@@ -429,7 +429,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- 忘记密码邮件返回 --> |
|
|
|
<!-- 忘记密码邮件返回 5--> |
|
|
|
<el-form |
|
|
|
v-if="isLogin == 5" |
|
|
|
ref="loginFormRef" |
|
|
|
@@ -559,7 +559,7 @@ |
|
|
|
name="email" |
|
|
|
/> |
|
|
|
<span class="captcha"> |
|
|
|
<div v-if="SMSTimeOut == 0" @click="" class="sendSMSBtn"> |
|
|
|
<div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn"> |
|
|
|
{{ $t("login.sendSMS") }} |
|
|
|
</div> |
|
|
|
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div> |
|
|
|
@@ -598,7 +598,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- 忘记密码手机号 --> |
|
|
|
<!-- 忘记密码手机号 7--> |
|
|
|
<el-form |
|
|
|
v-if="isLogin == 7" |
|
|
|
ref="loginFormRef" |
|
|
|
@@ -633,7 +633,11 @@ |
|
|
|
name="password" |
|
|
|
/> |
|
|
|
<span class="captcha"> |
|
|
|
<div v-if="SMSTimeOut == 0" @click="" class="sendSMSBtn"> |
|
|
|
<div |
|
|
|
v-if="SMSTimeOut == 0" |
|
|
|
@click="getSMSToLogin(7)" |
|
|
|
class="sendSMSBtn" |
|
|
|
> |
|
|
|
{{ $t("login.sendSMS") }} |
|
|
|
</div> |
|
|
|
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div> |
|
|
|
@@ -660,13 +664,13 @@ |
|
|
|
</span> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="confirmPassword4"> |
|
|
|
<el-form-item prop="confirmPassword7"> |
|
|
|
<span class="text-white"> |
|
|
|
<svg-icon icon-class="password" /> |
|
|
|
</span> |
|
|
|
<el-input |
|
|
|
class="flex-1" |
|
|
|
v-model="loginData7.confirmPassword4" |
|
|
|
v-model="loginData7.confirmPassword7" |
|
|
|
:placeholder="$t('login.confirmNewPwd')" |
|
|
|
:type="passwordVisible === false ? 'password' : 'input'" |
|
|
|
size="large" |
|
|
|
@@ -685,7 +689,7 @@ |
|
|
|
:loading="loading" |
|
|
|
type="primary" |
|
|
|
class="loginBtn" |
|
|
|
@click.prevent="resetPwdForm" |
|
|
|
@click.prevent="handleResetPwdByPhone" |
|
|
|
> |
|
|
|
<el-icon |
|
|
|
v-if="isRegistering" |
|
|
|
@@ -710,16 +714,16 @@ |
|
|
|
<div style="margin-bottom: 5px" @click="loginFlag(1)"> |
|
|
|
<span class="join">{{ $t("login.signIn") }}</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<!-- <div> |
|
|
|
<span |
|
|
|
class="join" |
|
|
|
@click="router.push({ path: 'createVideo', params: {} })" |
|
|
|
>{{ $t("login.gohome") }}</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- 手机号登录 --> |
|
|
|
<!-- 手机号登录 8--> |
|
|
|
<el-form |
|
|
|
v-if="isLogin == 8" |
|
|
|
ref="loginFormRef" |
|
|
|
@@ -729,7 +733,7 @@ |
|
|
|
> |
|
|
|
<div class="flex text-white items-center"> |
|
|
|
<span class="flex-1 text-center">{{ |
|
|
|
$t("login.title") + " " + $t("login.register") |
|
|
|
$t("login.title") + " " + $t("login.login") |
|
|
|
}}</span> |
|
|
|
<el-tooltip |
|
|
|
class="box-item" |
|
|
|
@@ -766,7 +770,11 @@ |
|
|
|
name="email" |
|
|
|
/> |
|
|
|
<span class="captcha"> |
|
|
|
<div v-if="SMSTimeOut == 0" @click="" class="sendSMSBtn"> |
|
|
|
<div |
|
|
|
v-if="SMSTimeOut == 0" |
|
|
|
@click="getSMSToLogin(8)" |
|
|
|
class="sendSMSBtn" |
|
|
|
> |
|
|
|
{{ $t("login.sendSMS") }} |
|
|
|
</div> |
|
|
|
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div> |
|
|
|
@@ -778,7 +786,7 @@ |
|
|
|
:loading="loading" |
|
|
|
type="primary" |
|
|
|
class="loginBtn" |
|
|
|
@click.prevent="handleRegister" |
|
|
|
@click.prevent="handleLoginByPhone" |
|
|
|
> |
|
|
|
<el-icon |
|
|
|
v-if="isRegistering" |
|
|
|
@@ -796,7 +804,7 @@ |
|
|
|
></path> |
|
|
|
</svg> |
|
|
|
</el-icon> |
|
|
|
{{ $t("login.registerBtn") }} |
|
|
|
{{ $t("login.loginBtn") }} |
|
|
|
</el-button> |
|
|
|
|
|
|
|
<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> |
|
|
|
@@ -819,6 +827,11 @@ import { |
|
|
|
sendUpdPwdEmailApi, |
|
|
|
resetPwdEmailApi, |
|
|
|
resetPwdFormApi, |
|
|
|
loginByPhoneApi, |
|
|
|
registerByPhoneApi, |
|
|
|
getSMSToLoginApi, |
|
|
|
loginByMSMApi, |
|
|
|
doUpdPassApi, |
|
|
|
} from "@/apis/login"; |
|
|
|
import axios from "axios"; |
|
|
|
// 状态管理依赖 |
|
|
|
@@ -897,7 +910,7 @@ const loginData6 = ref({ |
|
|
|
const loginData7 = ref({ |
|
|
|
SMScode: "", |
|
|
|
password: "", |
|
|
|
confirmPassword4: "", |
|
|
|
confirmPassword7: "", |
|
|
|
}); |
|
|
|
const loginData8 = ref({ |
|
|
|
phone: "", |
|
|
|
@@ -933,6 +946,9 @@ const loginRules = ref({ |
|
|
|
confirmPassword4: [ |
|
|
|
{ required: true, trigger: "blur", validator: confirmPasswordValidator4 }, |
|
|
|
], |
|
|
|
confirmPassword7: [ |
|
|
|
{ required: true, trigger: "blur", validator: confirmPasswordValidator7 }, |
|
|
|
], |
|
|
|
newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }], |
|
|
|
confirmNewPwd: [ |
|
|
|
{ required: true, trigger: "blur", validator: confirmPasswordValidator5 }, |
|
|
|
@@ -968,13 +984,23 @@ function loginFlag(type: number) { |
|
|
|
* @param:email,password |
|
|
|
*/ |
|
|
|
function saveInfo(data: any) { |
|
|
|
const userInfo = JSON.stringify({ |
|
|
|
email: data.email, |
|
|
|
password: data.password, |
|
|
|
}); |
|
|
|
// 将用户信息加密 |
|
|
|
const enCodeUserInfo = encodeURI(userInfo); |
|
|
|
localStorage.setItem("userInfo", enCodeUserInfo); |
|
|
|
if (data.email) { |
|
|
|
const userInfo = JSON.stringify({ |
|
|
|
email: data.email, |
|
|
|
password: data.password, |
|
|
|
}); |
|
|
|
// 将用户信息加密 |
|
|
|
const enCodeUserInfo = encodeURI(userInfo); |
|
|
|
localStorage.setItem("userInfo", enCodeUserInfo); |
|
|
|
} else if (data.phone) { |
|
|
|
const userInfo = JSON.stringify({ |
|
|
|
email: data.phone, |
|
|
|
password: data.password, |
|
|
|
}); |
|
|
|
// 将用户信息加密 |
|
|
|
const enCodeUserInfo = encodeURI(userInfo); |
|
|
|
localStorage.setItem("userInfo", enCodeUserInfo); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@@ -1086,6 +1112,24 @@ function confirmPasswordValidator4(rule: any, value: any, callback: any) { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
} |
|
|
|
function confirmPasswordValidator7(rule: any, value: any, callback: any) { |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "确认密码不能为空!" |
|
|
|
: "The Confirm password can not be empty"; |
|
|
|
const msg2 = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "两次输入密码不一致!" |
|
|
|
: "Confirm Passward entered should match"; |
|
|
|
|
|
|
|
if (!value) { |
|
|
|
callback(new Error(msg)); |
|
|
|
} else if (value !== loginData7.value.password) { |
|
|
|
callback(new Error(msg2)); |
|
|
|
} else { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
} |
|
|
|
function confirmPasswordValidator5(rule: any, value: any, callback: any) { |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
@@ -1115,8 +1159,62 @@ function handleLogin() { |
|
|
|
password: loginData.value.password, |
|
|
|
code: loginData.value.verifyCode, |
|
|
|
}; |
|
|
|
const emailReg = |
|
|
|
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; |
|
|
|
const phoneReg = /^[1][3-9]\d{9}$/; |
|
|
|
// 如果是邮箱 |
|
|
|
if (emailReg.test(data.email)) { |
|
|
|
isLogining.value = true; |
|
|
|
doLogin(data); |
|
|
|
// 如果是手机 |
|
|
|
} else if (phoneReg.test(data.email)) { |
|
|
|
const data2 = { |
|
|
|
phone: loginData.value.email, |
|
|
|
password: loginData.value.password, |
|
|
|
code: loginData.value.verifyCode, |
|
|
|
}; |
|
|
|
isRegistering.value = true; |
|
|
|
doLoginByPhone(data2); |
|
|
|
} else { |
|
|
|
} |
|
|
|
} else { |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "请检查信息格式!" |
|
|
|
: "Please check the format !"; |
|
|
|
ElMessage.error(msg); |
|
|
|
return; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
//#region 手机号+密码登录 |
|
|
|
function doLoginByPhone(data: any) { |
|
|
|
loginFormRef.value.validate(async (val: any) => { |
|
|
|
if (val) { |
|
|
|
isLogining.value = true; |
|
|
|
doLogin(data); |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; |
|
|
|
await loginByPhoneApi(data) |
|
|
|
.then((res: any) => { |
|
|
|
console.log(res, "res"); |
|
|
|
localStorage.setItem("AccessToken", res.data.token); |
|
|
|
ElMessage.success(msg); |
|
|
|
router.push("/createVideo"); |
|
|
|
// 注册成功将账号密码保存到本地 |
|
|
|
saveInfo(data); |
|
|
|
isLogining.value = false; |
|
|
|
userInfoPinia.getUserInfo(); //保存邮箱到pinia |
|
|
|
}) |
|
|
|
.catch((err: any) => { |
|
|
|
console.log(err, "err"); |
|
|
|
// 登录失败刷新验证码 |
|
|
|
// getCode(); |
|
|
|
ElMessage.error(err.message); |
|
|
|
isLogining.value = false; |
|
|
|
if (err.code == 2112) { |
|
|
|
// reSendEmail(data.email); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
@@ -1127,7 +1225,6 @@ function handleLogin() { |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 注册行为 |
|
|
|
function handleRegister() { |
|
|
|
loginFormRef.value.validate((val: any) => { |
|
|
|
@@ -1145,8 +1242,12 @@ function handleRegister() { |
|
|
|
doRegister(data); |
|
|
|
// 如果是手机 |
|
|
|
} else if (phoneReg.test(data.email)) { |
|
|
|
const data2 = { |
|
|
|
phone: loginData2.value.email, |
|
|
|
password: loginData2.value.password, |
|
|
|
}; |
|
|
|
isRegistering.value = true; |
|
|
|
doRegisterByPhone(data); |
|
|
|
doRegisterByPhone(data2); |
|
|
|
} else { |
|
|
|
} |
|
|
|
} else { |
|
|
|
@@ -1160,6 +1261,93 @@ function handleRegister() { |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//#region 手机号+SMS登录 |
|
|
|
function handleLoginByPhone() { |
|
|
|
loginFormRef.value.validate(async (val: any) => { |
|
|
|
if (val) { |
|
|
|
const data = { |
|
|
|
phone: loginData8.value.phone, |
|
|
|
code: loginData8.value.SMScode, |
|
|
|
}; |
|
|
|
isLogining.value = true; |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; |
|
|
|
await loginByMSMApi(data) |
|
|
|
.then((res: any) => { |
|
|
|
console.log(res, "res"); |
|
|
|
localStorage.setItem("AccessToken", res.data.token); |
|
|
|
ElMessage.success(msg); |
|
|
|
router.push("/createVideo"); |
|
|
|
// 注册成功将账号密码保存到本地 |
|
|
|
saveInfo(data); |
|
|
|
isLogining.value = false; |
|
|
|
userInfoPinia.getUserInfo(); //保存邮箱到pinia |
|
|
|
}) |
|
|
|
.catch((err: any) => { |
|
|
|
console.log(err, "err"); |
|
|
|
// 登录失败刷新验证码 |
|
|
|
// getCode(); |
|
|
|
ElMessage.error(err.message); |
|
|
|
isLogining.value = false; |
|
|
|
if (err.code == 2112) { |
|
|
|
// reSendEmail(data.email); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "请检查信息格式!" |
|
|
|
: "Please check the format !"; |
|
|
|
ElMessage.error(msg); |
|
|
|
return; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//#endregion |
|
|
|
|
|
|
|
//#region 手机号忘记密码 |
|
|
|
function handleResetPwdByPhone() { |
|
|
|
loginFormRef.value.validate(async (val: any) => { |
|
|
|
if (val) { |
|
|
|
const data = { |
|
|
|
phone: loginData3.value.email, |
|
|
|
code: loginData7.value.SMScode, |
|
|
|
pwd: loginData7.value.password, |
|
|
|
}; |
|
|
|
isLogining.value = true; |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "密码修改成功!" |
|
|
|
: "Password changed successfully!"; |
|
|
|
await doUpdPassApi(data) |
|
|
|
.then((res: any) => { |
|
|
|
console.log(res, "res"); |
|
|
|
isLogin.value = 1; |
|
|
|
ElMessage.success(msg); |
|
|
|
}) |
|
|
|
.catch((err: any) => { |
|
|
|
console.log(err, "err"); |
|
|
|
// 登录失败刷新验证码 |
|
|
|
// getCode(); |
|
|
|
ElMessage.error(err.message); |
|
|
|
isLogining.value = false; |
|
|
|
if (err.code == 2112) { |
|
|
|
// reSendEmail(data.email); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "请检查信息格式!" |
|
|
|
: "Please check the format !"; |
|
|
|
ElMessage.error(msg); |
|
|
|
return; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
//#endregion |
|
|
|
|
|
|
|
//#region 忘记密码 表单3 |
|
|
|
function sendEmailforgetPwd() { |
|
|
|
const emailReg = |
|
|
|
@@ -1167,6 +1355,7 @@ function sendEmailforgetPwd() { |
|
|
|
const phoneReg = /^[1][3-9]\d{9}$/; |
|
|
|
if (phoneReg.test(loginData3.value.email)) { |
|
|
|
isLogin.value = 7; |
|
|
|
getSMSToLogin(3); |
|
|
|
return; |
|
|
|
} else if (emailReg.test(loginData3.value.email)) { |
|
|
|
const msg = |
|
|
|
@@ -1303,14 +1492,18 @@ async function doRegister(data: object) { |
|
|
|
ElMessage.error(err.message); |
|
|
|
}); |
|
|
|
} |
|
|
|
// 注册时发送手机验证码后 |
|
|
|
const SMSTimeOut = ref(0); //倒计时 |
|
|
|
// 手机注册注册时 |
|
|
|
|
|
|
|
async function doRegisterByPhone(data: object) { |
|
|
|
// const msg = |
|
|
|
// currentLan.value == "zh-cn" |
|
|
|
// ? "确认短信验证码已发送至您的手机,请注意查收" |
|
|
|
// : "An SMS has been send to you, Please pay attention to confirm"; |
|
|
|
const msg = |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "确认短信验证码已发送至您的手机,请注意查收" |
|
|
|
: "An SMS has been send to you, Please pay attention to confirm"; |
|
|
|
await register(data) |
|
|
|
? "注册成功!请登录" |
|
|
|
: "Registered successfully! Please log in"; |
|
|
|
await registerByPhoneApi(data) |
|
|
|
.then((res) => { |
|
|
|
SMSTimeOut.value = 60; |
|
|
|
const timer = setInterval(() => { |
|
|
|
@@ -1322,7 +1515,7 @@ async function doRegisterByPhone(data: object) { |
|
|
|
}, 1000); |
|
|
|
console.log(res, "res"); |
|
|
|
isRegistering.value = false; |
|
|
|
isLogin.value = 6; |
|
|
|
isLogin.value = 1; |
|
|
|
ElMessage.success(msg); |
|
|
|
// 注册成功将账号密码保存到本地 |
|
|
|
saveInfo(data); |
|
|
|
@@ -1335,6 +1528,48 @@ async function doRegisterByPhone(data: object) { |
|
|
|
ElMessage.error(err.message); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 发送手机验证码 |
|
|
|
const SMSTimeOut = ref(0); //倒计时 |
|
|
|
async function getSMSToLogin(type: any) { |
|
|
|
let phoneReg = /^[1][3-9]\d{9}$/; |
|
|
|
const myPhone = ref(""); |
|
|
|
if (type == 8) { |
|
|
|
myPhone.value = loginData8.value.phone; |
|
|
|
} |
|
|
|
if (type == 3) { |
|
|
|
myPhone.value = loginData3.value.email; |
|
|
|
} |
|
|
|
let phoneValide = phoneReg.test(myPhone.value); |
|
|
|
if (!phoneValide) { |
|
|
|
ElMessage.error( |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "请输入正确的手机号!" |
|
|
|
: "Please enter the correct phone number!" |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
try { |
|
|
|
await getSMSToLoginApi(Number(myPhone.value)).then((res) => { |
|
|
|
ElMessage.success( |
|
|
|
currentLan.value == "zh-cn" |
|
|
|
? "短信验证码发送成功!" |
|
|
|
: "SMS verification code sent successfully!" |
|
|
|
); |
|
|
|
SMSTimeOut.value = 60; |
|
|
|
const timer = setInterval(() => { |
|
|
|
if (SMSTimeOut.value != 0) { |
|
|
|
SMSTimeOut.value--; |
|
|
|
} else { |
|
|
|
clearInterval(timer); |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
}); |
|
|
|
} catch (error: any) { |
|
|
|
ElMessage.error(error.message); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description:登录 |
|
|
|
* @param {Object} data |
|
|
|
|