Browse Source

1

dev_YWQ
congzc 1 year ago
parent
commit
ba75ae1481
10 changed files with 569 additions and 165 deletions
  1. +45
    -0
      src/apis/login.js
  2. +9
    -0
      src/lang/package/en.ts
  3. +9
    -0
      src/lang/package/zh-cn.ts
  4. +8
    -0
      src/permission.ts
  5. +2
    -19
      src/router/index.ts
  6. +32
    -28
      src/views/createVideo/index.vue
  7. +455
    -19
      src/views/login/index.vue
  8. +5
    -3
      src/views/myAccount/index.vue
  9. +0
    -95
      src/views/myPassword/index.vue
  10. +4
    -1
      src/views/signSucceed/index.vue

+ 45
- 0
src/apis/login.js View File

@@ -44,6 +44,51 @@ export function sendRegisterEmail(email) {
})
}

/**
/**
* @description:忘记密码发送邮件
* @param {string} data
* @return: data
*/
export function sendUpdPwdEmailApi(email) {
return request({
url: `/api/user/sendUpdPwdEmail`,
method: 'post',
data: {
email
}
})
}

/**
/**
* @description:邮件重置密码,
* @param pwd, ticket
* @return: data
*/
export function resetPwdEmailApi(data) {
return request({
url: `/api/user/doUpdPass`,
method: 'post',
data
})
}

/**
/**
* @description:邮件重置密码,
* @param oldpwd, newpwd
* @return: data
*/
export function resetPwdFormApi(data) {
return request({
url: `/api/user/oldUpdPass`,
method: 'post',
data
})
}


/**
* @description:获取图形验证码
* @return: 验证码地址


+ 9
- 0
src/lang/package/en.ts View File

@@ -20,6 +20,15 @@ export default {
signIn: "Already got an account? Sign in here",
signUp: "Don't have an account? Sign up here",
forgetPwd: "I forgot my password",
forgetPwdTitle:'forgot password',
SendEmail:'Send an email',
resetPassword:'Reset password',
setNewPwd:'Set new password',
newPwd:'new password',
oldPwd:'old password',
confirmNewPwd:'confirm new password',
confirm:'confirm',
gohome:'Back to home page'
},

// 导航栏国际化


+ 9
- 0
src/lang/package/zh-cn.ts View File

@@ -20,6 +20,15 @@ export default {
signIn: "已有账号?现在登录!",
signUp: "没有账号?现在加入!",
forgetPwd: "忘记密码",
forgetPwdTitle:'忘记密码',
SendEmail:'发送邮件',
resetPassword:'重置密码',
setNewPwd:'设置新密码',
newPwd:'新密码',
oldPwd:'旧密码',
confirmNewPwd:'确认新密码',
confirm:'确定',
gohome:'回到首页'
},

// 导航栏国际化


+ 8
- 0
src/permission.ts View File

@@ -15,7 +15,15 @@ router.beforeEach(async (to, from, next) => {
const AccessToken = localStorage.getItem("AccessToken");
// 已登录
if (AccessToken) {
// 重置密码时可以去往login页面
if(to.params.type == 4) {
next()
}
if(to.query.resetPwd) {
next()
}
if (to.path === "/login") {
next({ path: "/createVideo" });
} else {
next();


+ 2
- 19
src/router/index.ts View File

@@ -21,6 +21,7 @@ export const constantRoutes: RouteRecordRaw[] = [
path: "/login",
component: () => import("@/views/login/index.vue"),
meta: { hidden: true },
name:'login'
},
{
path: "/signSucceed",
@@ -83,25 +84,7 @@ export const constantRoutes: RouteRecordRaw[] = [
},
},
],
}, // 修改密码
{
path: "/",
component: Layout,
redirect: "/myPassword",
children: [
{
path: "myPassword",
component: () => import("@/views/myPassword/index.vue"),
name: "myPassword",
meta: {
title: "myPassword",
icon: "homepage",
affix: true,
name: "修改密码",
},
},
],
},
},
// 商店
{
path: "/",


+ 32
- 28
src/views/createVideo/index.vue View File

@@ -39,10 +39,14 @@
<div class="left-top" v-show="showUploadBtn">
<!-- 中间展示大图 -->
<div class="noImg">
<div class="trueImg inmiddle">
<my-loading
style="margin-top: 150px"
:isLoading="compressionImgLoad"
></my-loading>
<div v-if="!compressionImgLoad" class="trueImg inmiddle">
<div class="icon">✔</div>
</div>
<div class="upload inmiddle">
<div v-if="!compressionImgLoad" class="upload inmiddle">
+
<input
accept="image/*"
@@ -51,7 +55,7 @@
@change="lookImg"
/>
</div>
<div class="falseImg inmiddle">
<div v-if="!compressionImgLoad" class="falseImg inmiddle">
<div><div class="icon">×</div></div>
<div><div class="icon">×</div></div>
<div><div class="icon">×</div></div>
@@ -305,6 +309,7 @@ import {
import Recorder from "js-audio-recorder"; //mp3插件
import imageCompression from "browser-image-compression"; //压缩图片插件

//#region 头像区的逻辑
// 获取AI头像
const AiFaceList = ref([]);
const feceItemLoading = ref(false);
@@ -325,22 +330,21 @@ const showFace = ref("0");
function ChangeShowFaceList(index) {
showFace.value = index;
}
// 标题
const title = ref("");

// 上传图片
const imgUrl = ref(""); //图片回显路径
const imgData = ref(""); // 上传图片文件
const showUploadBtn = ref(false); //上传图片+号的显示隐藏
const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏
const faceItemActive = ref(); //高亮处理
// 点击aifece
function setImgUrl(url, id) {
faceItemActive.value = id;
showUploadBtn.value = false;
submitImgBtn.value = false;
imgUrl.value = url;
}
//#endregion ------------------------------

// 预览图片
//#region 预览图片
const compressionImgLoad = ref(false);
async function lookImg(e) {
// imgUrl.value = URL.createObjectURL(e.target.files[0]);
// imgData.value = e.target.files[0];
// showUploadBtn.value = false;
// submitImgBtn.value = true;
// 压缩配置
compressionImgLoad.value = true;
const options = {
maxSizeMB: 2, // 最大压缩大小为 1MB
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
@@ -350,7 +354,18 @@ async function lookImg(e) {
imgData.value = compressedFile;
showUploadBtn.value = false;
submitImgBtn.value = true;
compressionImgLoad.value = false;
}
//#endregion ------------------

// 标题
const title = ref("");

//#region 上传图片
const imgUrl = ref(""); //图片回显路径
const imgData = ref(""); // 上传图片文件
const showUploadBtn = ref(false); //上传图片+号的显示隐藏
const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏
// 上传图片
async function changeFile() {
imgUrl.value = URL.createObjectURL(imgData.value);
@@ -369,14 +384,7 @@ async function changeFile() {
ElMessage.error(error);
}
}
const faceItemActive = ref();
// 点击aifece
function setImgUrl(url, id) {
faceItemActive.value = id;
showUploadBtn.value = false;
submitImgBtn.value = false;
imgUrl.value = url;
}
//#endregion ---------------------------

//#region card1的逻辑
const textareaContent = ref("");
@@ -500,10 +508,6 @@ const handleFileChange = () => {
};
//#endregion --------------------------------------

//#region card3的

//#endregion ---------------------------

// $t在script中的使用
const {
appContext: {


+ 455
- 19
src/views/login/index.vue View File

@@ -9,8 +9,9 @@
loop
></video>
</div>
<!-- 正常登录 -->
<el-form
v-if="isLogin"
v-if="isLogin == 1"
ref="loginFormRef"
:model="loginData"
:rules="loginRules"
@@ -103,17 +104,19 @@
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
<div style="margin-bottom: 5px" @click="loginFlag">
<div style="margin-bottom: 5px" @click="loginFlag(2)">
<span class="join">{{ $t("login.signUp") }}</span>
</div>
<div>
<span class="join">{{ $t("login.forgetPwd") }}</span>
<span class="join" @click="loginFlag(3)">{{
$t("login.forgetPwd")
}}</span>
</div>
</div>
</el-form>
<!-- 注册账户 -->
<el-form
v-if="!isLogin"
v-if="isLogin == 2"
ref="loginFormRef"
:model="loginData2"
:rules="loginRules"
@@ -208,11 +211,276 @@
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
<div style="margin-bottom: 5px" @click="loginFlag">
<div style="margin-bottom: 5px" @click="loginFlag(1)">
<span class="join">{{ $t("login.signIn") }}</span>
</div>
<div>
<span class="join">{{ $t("login.forgetPwd") }}</span>
<span class="join" @click="loginFlag(3)">{{
$t("login.forgetPwd")
}}</span>
</div>
</div>
</el-form>
<!-- 忘记密码 -->
<el-form
v-if="isLogin == 3"
ref="loginFormRef"
:model="loginData3"
:rules="loginRules"
class="login-form"
>
<div class="flex text-white items-center py-4">
<span class="text-2xl flex-1 text-center">{{
$t("login.title") + " " + $t("login.forgetPwdTitle")
}}</span>
<lang-select style="color: #fff" />
</div>

<el-form-item prop="email">
<div class="p-2 text-white">
<svg-icon icon-class="user" />
</div>
<el-input
class="flex-1"
ref="email"
size="large"
v-model="loginData3.email"
:placeholder="$t('login.email')"
name="email"
/>
</el-form-item>

<el-button
size="default"
:loading="loading"
type="primary"
class="loginBtn"
@click.prevent="sendEmailforgetPwd"
>
<el-icon
v-if="isRegistering"
style="margin-right: 10px"
class="is-loading"
>
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
data-v-ea893728=""
>
<path
fill="currentColor"
d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
></path>
</svg>
</el-icon>
{{ $t("login.SendEmail") }}
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
<div style="margin-bottom: 5px" @click="loginFlag(1)">
<span class="join">{{ $t("login.signIn") }}</span>
</div>
</div>
</el-form>
<!-- 重置密码 -->
<el-form
v-if="isLogin == 4"
ref="loginFormRef"
:model="loginData4"
:rules="loginRules"
class="login-form"
>
<div class="flex text-white items-center py-4">
<span class="text-2xl flex-1 text-center">{{
$t("login.title") + " " + $t("login.resetPassword")
}}</span>
<lang-select style="color: #fff" />
</div>

<el-form-item prop="oldPassword">
<span class="p-2 text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData4.oldPassword"
:placeholder="$t('login.oldPwd')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/>
</span>
</el-form-item>

<el-form-item prop="password">
<span class="p-2 text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData4.password"
:placeholder="$t('login.newPwd')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/>
</span>
</el-form-item>

<el-form-item prop="confirmPassword4">
<span class="p-2 text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData4.confirmPassword4"
:placeholder="$t('login.confirmNewPwd')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="confirmPassword4"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/>
</span>
</el-form-item>

<el-button
size="default"
:loading="loading"
type="primary"
class="loginBtn"
@click.prevent="resetPwdForm"
>
<el-icon
v-if="isRegistering"
style="margin-right: 10px"
class="is-loading"
>
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
data-v-ea893728=""
>
<path
fill="currentColor"
d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
></path>
</svg>
</el-icon>
{{ $t("login.confirm") }}
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
<div style="margin-bottom: 5px" @click="loginFlag(1)">
<span class="join">{{ $t("login.signIn") }}</span>
</div>
<div>
<span
class="join"
@click="router.push({ path: 'createVideo', params: {} })"
>{{ $t("login.gohome") }}</span
>
</div>
</div>
</el-form>
<!-- 忘记密码邮件返回 -->
<el-form
v-if="isLogin == 5"
ref="loginFormRef"
:model="loginData5"
:rules="loginRules"
class="login-form"
>
<div class="flex text-white items-center py-4">
<span class="text-2xl flex-1 text-center">{{
$t("login.title") + " " + $t("login.setNewPwd")
}}</span>
<lang-select style="color: #fff" />
</div>

<el-form-item prop="newPwd">
<div class="p-2 text-white">
<svg-icon icon-class="password" />
</div>
<el-input
class="flex-1"
ref="email"
size="large"
v-model="loginData5.newPwd"
:placeholder="$t('login.newPwd')"
:type="passwordVisible === false ? 'password' : 'input'"
name="password"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/>
</span>
</el-form-item>
<el-form-item prop="confirmNewPwd">
<div class="p-2 text-white">
<svg-icon icon-class="password" />
</div>
<el-input
class="flex-1"
ref="email"
size="large"
v-model="loginData5.confirmNewPwd"
:placeholder="$t('login.confirmNewPwd')"
name="password"
:type="passwordVisible === false ? 'password' : 'input'"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/>
</span>
</el-form-item>

<el-button
size="default"
:loading="loading"
type="primary"
class="loginBtn"
@click.prevent="resetPwdEmail"
>
<el-icon
v-if="isRegistering"
style="margin-right: 10px"
class="is-loading"
>
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
data-v-ea893728=""
>
<path
fill="currentColor"
d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
></path>
</svg>
</el-icon>
{{ $t("login.confirm") }}
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
<div style="margin-bottom: 5px" @click="loginFlag(1)">
<span class="join">{{ $t("login.signIn") }}</span>
</div>
</div>
</el-form>
@@ -227,6 +495,9 @@ import {
login,
sendRegisterEmail,
getCodeImgUrl,
sendUpdPwdEmailApi,
resetPwdEmailApi,
resetPwdFormApi,
} from "@/apis/login";
import axios from "axios";
// 状态管理依赖
@@ -262,9 +533,9 @@ const passwordVisible = ref(false);
const verifyCodeUrl = ref();

/**
* 登录/注册
* 登录/注册 显示哪个表单
*/
const isLogin = ref(true);
const isLogin = ref(1);

const showCodeImg = ref(true);
/**
@@ -286,6 +557,18 @@ const loginData2 = ref({
password: "",
confirmPassword: "",
});
const loginData3 = ref({
email: "",
});
const loginData4 = ref({
oldPassword: "",
password: "",
confirmPassword4: "",
});
const loginData5 = ref({
newPwd: "",
confirmNewPwd: "",
});

const loginRules = ref({
email: [
@@ -296,6 +579,7 @@ const loginRules = ref({
},
],
password: [{ required: true, trigger: "blur", validator: passwordValidator }],

confirmPassword: [
{ required: true, trigger: "blur", validator: confirmPasswordValidator },
],
@@ -309,6 +593,16 @@ const loginRules = ref({
: "Please input verifyCode",
},
],
oldPassword: [
{ required: true, trigger: "blur", validator: passwordValidator },
],
confirmPassword4: [
{ required: true, trigger: "blur", validator: confirmPasswordValidator4 },
],
newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }],
confirmNewPwd: [
{ required: true, trigger: "blur", validator: confirmPasswordValidator5 },
],
});

watch(currentLan, (newValue, oldValue) => {
@@ -326,8 +620,8 @@ watch(currentLan, (newValue, oldValue) => {
/**
* @description: 切换登录/注册状态
*/
function loginFlag() {
isLogin.value = !isLogin.value;
function loginFlag(type: number) {
isLogin.value = type;
// 切换登录/注册状态刷新验证码
getCode();
setTimeout(() => {
@@ -362,6 +656,7 @@ function getInfo() {
loginData.value.password = userInfo.password ? userInfo.password : "";
}
}
//#region 密码校验部分

/**
* 邮箱校验器
@@ -431,6 +726,69 @@ function confirmPasswordValidator(rule: any, value: any, callback: any) {
}
}

/**
* 确认密码校验器
*/
function confirmPasswordValidator4(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 !== loginData4.value.password) {
callback(new Error(msg2));
} else {
callback();
}
}
function confirmPasswordValidator5(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 !== loginData5.value.newPwd) {
callback(new Error(msg2));
} else {
callback();
}
}
//#endregion ----------------------------

// 登录行为
function handleLogin() {
loginFormRef.value.validate((val: any) => {
if (val) {
const data = {
email: loginData.value.email,
password: loginData.value.password,
code: loginData.value.verifyCode,
};
isLogining.value = true;
doLogin(data);
} else {
const msg =
currentLan.value == "zh-cn"
? "请检查信息格式!"
: "Please check the format !";
ElMessage.error(msg);
return;
}
});
}

// 注册行为
function handleRegister() {
loginFormRef.value.validate((val: any) => {
@@ -452,17 +810,26 @@ function handleRegister() {
});
}

// 登录行为
function handleLogin() {
loginFormRef.value.validate((val: any) => {
//#region 忘记密码 表单3
function sendEmailforgetPwd() {
const msg =
currentLan.value == "zh-cn"
? "确认信息已发送至您的邮箱,请注意查收"
: "An email has been send to you, Please pay attention to confirm";
loginFormRef.value.validate(async (val: any) => {
if (val) {
const data = {
email: loginData.value.email,
password: loginData.value.password,
code: loginData.value.verifyCode,
email: loginData3.value.email,
};
isLogining.value = true;
doLogin(data);
await sendUpdPwdEmailApi(data.email)
.then((res) => {
console.log(res, "res");
ElMessage.success(msg);
})
.catch((err) => {
console.log(err, "err");
ElMessage.error(err.message);
});
} else {
const msg =
currentLan.value == "zh-cn"
@@ -473,6 +840,66 @@ function handleLogin() {
}
});
}
//#endregion --------------------------

//#region 忘记密码 表单5
function resetPwdEmail() {
loginFormRef.value.validate(async (val: any) => {
if (val) {
try {
const res = await resetPwdEmailApi({
pwd: loginData5.value.newPwd,
ticket: route.query.ticket,
});
localStorage.removeItem("AccessToken");
loginData.value.email = route.query.email + "";
loginData.value.password = "";
isLogin.value = 1;
router.push({ path: "login", query: {} });
} catch (error) {
ElMessage.error(error);
console.log(error);
}
} else {
const msg =
currentLan.value == "zh-cn"
? "请检查信息格式!"
: "Please check the format !";
ElMessage.error(msg);
return;
}
});
}
//#endregion --------------------------

//#region 重置密码 表单4
function resetPwdForm() {
loginFormRef.value.validate(async (val: any) => {
if (val) {
try {
const res = await resetPwdFormApi({
oldpwd: loginData4.value.oldPassword,
newpwd: loginData4.value.password,
});
localStorage.removeItem("AccessToken");
loginData.value.password = "";
isLogin.value = 1;
router.push({ path: "login", query: {} });
} catch (error) {
ElMessage.error(error.message);
console.log(error);
}
} else {
const msg =
currentLan.value == "zh-cn"
? "请检查信息格式!"
: "Please check the format !";
ElMessage.error(msg);
return;
}
});
}
//#endregion --------------------------

function getCode() {
showCodeImg.value = false;
@@ -566,6 +993,15 @@ async function reSendEmail(email: string) {
onMounted(() => {
getCode();
getInfo();
// 重置密码
if (router.currentRoute.value.params.type) {
isLogin.value = Number(router.currentRoute.value.params.type);
}
//有resetPwd则说明是重置密码邮件来的
if (route.query.resetPwd) {
isLogin.value = 5;
// route.query.ticket
}
});
</script>



+ 5
- 3
src/views/myAccount/index.vue View File

@@ -10,9 +10,11 @@
<div class="info">
<div class="name">OLO</div>
<span>weqrewerwer@mail.com</span>
<span class="password pointer" @click="routerTo('/myPassword')">{{
$t("account.reSetPwd")
}}</span>
<span
class="password pointer"
@click="router.push({ name: 'login', params: { type: 4 } })"
>{{ $t("account.reSetPwd") }}</span
>
</div>
</div>
<!-- 剩余次数 -->


+ 0
- 95
src/views/myPassword/index.vue View File

@@ -1,95 +0,0 @@
<template>
<div class="page">
<div>用户名</div>
<el-form
id="ruleForm"
ref="ruleFormRef"
:rules="rules"
:label-position="labelPosition"
label-width="120px"
:model="formData"
style="max-width: 500px"
>
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="formData.oldPassword" />
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="formData.newPassword" />
</el-form-item>
<el-form-item label="再次输入新密码" prop="newPassword2">
<el-input v-model="formData.newPassword2" />
</el-form-item>

<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>确认修改</el-button
>
</el-form-item>
</el-form>
</div>
</template>

<script setup>
import { ref, reactive } from "vue";

const labelPosition = ref("right");
const formData = reactive({
oldPassword: "",
newPassword: "",
newPassword2: "",
});

const validateNewPass = (rule, value, callback) => {
// 自定义校验规则,例如密码必须包含数字和字母
if (!/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/.test(value)) {
callback(new Error("密码必须包含数字和字母,且至少8位"));
} else {
callback();
}
};

const validateNewPass2 = (rule, value, callback) => {
if (value !== formData.newPassword) {
callback(new Error("两次输入的新密码不一致"));
} else {
callback();
}
};

const rules = {
oldPassword: [
{ required: true, message: "请输入旧密码", trigger: "blur" },
{ validator: validateNewPass, trigger: "blur" },
],
newPassword: [
{ required: true, message: "请输入新密码", trigger: "blur" },
{ validator: validateNewPass, trigger: "blur" },
],
newPassword2: [
{ required: true, message: "请再次输入新密码", trigger: "blur" },
{ validator: validateNewPass2, trigger: "blur" },
],
};

const ruleFormRef = ref();
// 点击提交
const submitForm = async (formEl) => {
if (!formEl) return;
await formEl.validate((valid) => {
if (valid) {
console.log("submit!");
} else {
console.log("error submit!");
}
});
};
</script>

<style scoped>
.page {
height: 1200px;
padding: 20px 0 0 20px;
background-color: #fff;
border-radius: 25px 0 0;
}
</style>

+ 4
- 1
src/views/signSucceed/index.vue View File

@@ -1,5 +1,6 @@
<template>
<div class="content">
<!-- 激活账户 -->
<div v-if="!query.resetPwd" class="content">
<div class="logo" @click="goLogin">
<img src="../../assets/img/left-top-logo.png" alt="" />
</div>
@@ -34,6 +35,8 @@
<div class="success">{{ $t("signSucceed.sendSuccess") }}</div>
</div>
</div>
<!-- 忘记密码 -->
<div v-if="query.resetPwd" class="content"></div>
</template>

<script setup lang="ts">


Loading…
Cancel
Save