Selaa lähdekoodia

Merge branch 'dev_YWQ' into dev

dev_YWQ
HolyKnightIX 1 vuosi sitten
vanhempi
commit
e84c8a670d
11 muutettua tiedostoa jossa 636 lisäystä ja 231 poistoa
  1. +29
    -0
      src/apis/login.js
  2. +16
    -0
      src/apis/signSucceed.js
  3. +12
    -1
      src/lang/package/en.ts
  4. +11
    -1
      src/lang/package/zh-cn.ts
  5. +1
    -8
      src/layout/components/Navbar.vue
  6. +1
    -1
      src/layout/components/TagsView/index.vue
  7. +17
    -2
      src/layout/index.vue
  8. +2
    -1
      src/main.ts
  9. +42
    -42
      src/permission.ts
  10. +348
    -171
      src/views/login/index.vue
  11. +157
    -4
      src/views/signSucceed/index.vue

+ 29
- 0
src/apis/login.js Näytä tiedosto

@@ -15,6 +15,35 @@ export function register(data) {
})
}

/**
* @description 登录
* @params email,password,code
* @returns data
*/
export function login(data) {
return request({
url: `/api/user/loginByEmail`,
method: 'post',
data
})
}

/**
/**
* @description:重新发送邮件
* @param {string} data
* @return: data
*/
export function sendRegisterEmail(email) {
return request({
url: `/api/user/sendRegisterEmail`,
method: 'post',
data: {
email
}
})
}

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


+ 16
- 0
src/apis/signSucceed.js Näytä tiedosto

@@ -0,0 +1,16 @@
import request from "@/utils/request.js";

/**
* @description 通过ticket激活账户
* @params ticket
* @returns data
*/
export function activateByTicket(ticket) {
return request({
url: `/api/user/doActivation`,
method: 'post',
data: {
ticket
}
})
}

+ 12
- 1
src/lang/package/en.ts Näytä tiedosto

@@ -9,7 +9,9 @@ export default {
login: {
title: "Metavatar-PC",
username: "Username",
email: "E-mail",
password: "Password",
confirmPassword: "Confirm Password",
login: "Sign in",
register: "Sign up",
loginBtn: "Sign in",
@@ -84,6 +86,15 @@ export default {
Alipay: "Alipay",
},
signSucceed: {
title: "Sign Succeed !",
title: "Confirm your email",
succeed: "Sign Succeed !",
welcome: "Welcome to Metavatar !",
createSuccess:
"Your account has been created successfully. Enjoy yourself !",
expired:
"Your ticket is expired. You can click the button to resend new email then",
sendSuccess: "The email has been resent, you can check it now",
goLogin: "Login Now",
reSend: "Resend",
},
};

+ 11
- 1
src/lang/package/zh-cn.ts Näytä tiedosto

@@ -9,7 +9,9 @@ export default {
login: {
title: "Metavatar-PC",
username: "用户名",
email: "电子邮件",
password: "密码",
confirmPassword: "确认密码",
login: "登录",
register: "注册",
loginBtn: "登 录",
@@ -84,6 +86,14 @@ export default {
Alipay: "支付宝支付",
},
signSucceed: {
title: "注册成功!",
title: "确认邮箱",
succeed: "注册成功",
welcome: "欢迎加入Metavatar!",
createSuccess: "您的账户已成功创建",
expired:
"您的通行密钥已过期。稍后,您可以点击下面的按钮重新发送一封新的邮件。",
sendSuccess: "您的邮件已重新发送,请注意查收。",
goLogin: "即将登录",
reSend: "重新发送",
},
};

+ 1
- 8
src/layout/components/Navbar.vue Näytä tiedosto

@@ -124,14 +124,7 @@ function logout() {
cancelButtonText: cancel,
}).then(() => {
router.push(`/login`);
// userStore
// .logout()
// .then(() => {
// tagsViewStore.delAllViews();
// })
// .then(() => {
// router.push(`/login?redirect=${route.fullPath}`);
// });
localStorage.removeItem("AccessToken");
});
}



+ 1
- 1
src/layout/components/TagsView/index.vue Näytä tiedosto

@@ -95,7 +95,7 @@ watch(
route,
() => {
addTags();
moveToCurrentTag();
// moveToCurrentTag();
},
{
//初始化立即执行


+ 17
- 2
src/layout/index.vue Näytä tiedosto

@@ -1,5 +1,5 @@
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="sideBarVisible" :class="classObj" class="app-wrapper">
<!-- 手机设备侧边栏打开遮罩层 -->
<div
v-if="classObj.mobile && classObj.openSidebar"
@@ -24,18 +24,25 @@
</RightPanel>
</div>
</div>

<div v-if="!sideBarVisible">
<SignSucceed />
</div>
</template>

<script setup lang="ts">
import { computed, watchEffect } from "vue";
import { useWindowSize } from "@vueuse/core";
import { AppMain, Navbar, Settings, TagsView } from "./components/index";
import SignSucceed from "../views/signSucceed/index.vue";
import Sidebar from "./components/Sidebar/index.vue";
import RightPanel from "@/components/RightPanel/index.vue";

import { useAppStore } from "@/store/modules/app";
import { useSettingsStore } from "@/store/modules/settings";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const { params } = route;
const { width } = useWindowSize();

/**
@@ -50,6 +57,7 @@ const WIDTH = 992;
const appStore = useAppStore();
const settingsStore = useSettingsStore();

const sideBarVisible = ref(true);
const fixedHeader = computed(() => settingsStore.fixedHeader);
const showTagsView = computed(() => settingsStore.tagsView);
const showSettings = computed(() => settingsStore.showSettings);
@@ -80,6 +88,13 @@ watchEffect(() => {
function handleOutsideClick() {
appStore.closeSideBar(false);
}

onMounted(() => {
if (route.path == "/signSucceed") {
sideBarVisible.value = false;
console.log(true);
}
});
</script>

<style lang="scss" scoped>


+ 2
- 1
src/main.ts Näytä tiedosto

@@ -25,6 +25,7 @@ setupDirective(app);
setupStore(app);
// element
import ElementPlus from "element-plus";
app.use(ElementPlus);
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
app.use(ElementPlus, ElementPlusIconsVue);

app.use(router).use(i18n).mount("#app");

+ 42
- 42
src/permission.ts Näytä tiedosto

@@ -9,51 +9,51 @@ NProgress.configure({ showSpinner: false }); // 进度条
const permissionStore = usePermissionStoreHook();

// 白名单路由
const whiteList = ["/login"];
const whiteList = ["/login", "/signSucceed"];

// router.beforeEach(async (to, from, next) => {
// NProgress.start();
// const hasToken = localStorage.getItem("accessToken");
// if (hasToken) {
// if (to.path === "/login") {
// // 如果已登录,跳转首页
// next({ path: "/" });
// NProgress.done();
// } else {
// const userStore = useUserStoreHook();
// const hasRoles = userStore.roles && userStore.roles.length > 0;
// if (hasRoles) {
// // 未匹配到任何路由,跳转404
// if (to.matched.length === 0) {
// from.name ? next({ name: from.name }) : next("/404");
// } else {
// next();
// }
// } else {
// try {
// const { roles } = await userStore.getInfo();
// const accessRoutes = await permissionStore.generateRoutes(roles);
// accessRoutes.forEach((route) => {
// router.addRoute(route);
// });
// next({ ...to, replace: true });
// } catch (error) {
// // 移除 token 并跳转登录页
// await userStore.resetToken();
// next(`/login?redirect=${to.path}`);
// NProgress.done();
// }
// }
// }
// } else {
// // 未登录可以访问白名单页面
// if (whiteList.indexOf(to.path) !== -1) {
// next();
// } else {
// next(`/login?redirect=${to.path}`);
// NProgress.done();
// }
// }
// // const hasToken = localStorage.getItem("accessToken");
// // if (hasToken) {
// // if (to.path === "/login") {
// // // 如果已登录,跳转首页
// // next({ path: "/" });
// // NProgress.done();
// // } else {
// // const userStore = useUserStoreHook();
// // const hasRoles = userStore.roles && userStore.roles.length > 0;
// // if (hasRoles) {
// // // 未匹配到任何路由,跳转404
// // if (to.matched.length === 0) {
// // from.name ? next({ name: from.name }) : next("/404");
// // } else {
// // next();
// // }
// // } else {
// // try {
// // const { roles } = await userStore.getInfo();
// // const accessRoutes = await permissionStore.generateRoutes(roles);
// // accessRoutes.forEach((route) => {
// // router.addRoute(route);
// // });
// // next({ ...to, replace: true });
// // } catch (error) {
// // // 移除 token 并跳转登录页
// // await userStore.resetToken();
// // next(`/login?redirect=${to.path}`);
// // NProgress.done();
// // }
// // }
// // }
// // } else {
// // // 未登录可以访问白名单页面
// // if (whiteList.indexOf(to.path) !== -1) {
// // next();
// // } else {
// // next(`/login?redirect=${to.path}`);
// // NProgress.done();
// // }
// // }
// });

// router.afterEach(() => {


+ 348
- 171
src/views/login/index.vue Näytä tiedosto

@@ -12,6 +12,7 @@
v-if="isLogin"
ref="loginFormRef"
:model="loginData"
:rules="loginRules"
class="login-form"
>
<div class="flex text-white items-center py-4">
@@ -21,47 +22,40 @@
<lang-select style="color: #fff" />
</div>

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

<el-tooltip
:disabled="isCapslock === false"
content="Caps lock is On"
placement="right"
>
<el-form-item prop="password">
<span class="p-2 text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData.password"
:placeholder="$t('login.password')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
@keyup="checkCapslock"
@keyup.enter="handleLogin"
<el-form-item prop="password">
<span class="p-2 text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData.password"
:placeholder="$t('login.password')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
@keyup.enter="handleLogin"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/>
<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-tooltip>
</span>
</el-form-item>

<!-- 验证码 -->
<el-form-item prop="verifyCode">
@@ -77,7 +71,7 @@
/>

<span class="captcha">
<img v-if="showCodeImg" :src="verifyCode" @click="getCode" />
<img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
</span>
</el-form-item>

@@ -87,7 +81,24 @@
type="primary"
class="loginBtn"
@click.prevent="handleLogin"
>{{ $t("login.loginBtn") }}
>
<el-icon
v-if="isLogining"
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.loginBtn") }}
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
@@ -103,7 +114,8 @@
<el-form
v-if="!isLogin"
ref="loginFormRef"
:model="loginData"
:model="loginData2"
:rules="loginRules"
class="login-form"
>
<div class="flex text-white items-center py-4">
@@ -113,63 +125,58 @@
<lang-select style="color: #fff" />
</div>

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

<el-tooltip
:disabled="isCapslock === false"
content="Caps lock is On"
placement="right"
>
<el-form-item prop="password">
<span class="p-2 text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData.password"
:placeholder="$t('login.password')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
@keyup="checkCapslock"
@keyup.enter="handleRegister"
<el-form-item prop="password">
<span class="p-2 text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData2.password"
:placeholder="$t('login.password')"
: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 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-tooltip>
</span>
</el-form-item>

<!-- 验证码 -->
<el-form-item v-if="isLogin" prop="verifyCode">
<el-form-item prop="confirmPassword">
<span class="p-2 text-white">
<svg-icon icon-class="verify_code" />
<svg-icon icon-class="password" />
</span>
<el-input
v-model="loginData.verifyCode"
auto-complete="off"
:placeholder="$t('login.verifyCode')"
class="flex-1"
v-model="loginData2.confirmPassword"
:placeholder="$t('login.confirmPassword')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="confirmPassword"
@keyup.enter="handleRegister"
/>

<span class="captcha">
<img v-if="showCodeImg" :src="verifyCode" @click="getCode" />
<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>

@@ -179,7 +186,24 @@
type="primary"
class="loginBtn"
@click.prevent="handleRegister"
>{{ $t("login.registerBtn") }}
>
<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.registerBtn") }}
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
@@ -197,13 +221,15 @@
<script setup lang="ts">
import LangSelect from "@/components/LangSelect/index.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { register, getCodeImgUrl } from "@/apis/login";

import {
register,
login,
sendRegisterEmail,
getCodeImgUrl,
} from "@/apis/login";
import axios from "axios";

// 状态管理依赖
import { useUserStore } from "@/store/modules/user";

// API依赖
import {
LocationQuery,
@@ -211,14 +237,10 @@ import {
useRoute,
useRouter,
} from "vue-router";

import { LoginData } from "@/api/auth/types";

import { useI18n } from "vue-i18n";
const { locale } = useI18n();

const { locale } = useI18n();
const currentLan = ref(locale);

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
@@ -227,11 +249,6 @@ const router = useRouter();
*/
const loading = ref(false);

/**
* 是否大写锁定
*/
const isCapslock = ref(false);

/**
* 密码是否可见
*/
@@ -240,7 +257,7 @@ const passwordVisible = ref(false);
/**
* 验证码图片Base64字符串
*/
const verifyCode = ref();
const verifyCodeUrl = ref();

/**
* 登录/注册
@@ -253,74 +270,206 @@ const showCodeImg = ref(true);
*/
const loginFormRef = ref(ElForm);

const isLogining = ref(false);
const isRegistering = ref(false);

const loginData = ref({
username: "",
email: "",
password: "",
verifyCode: "",
});

const loginRules = {
username: [{ required: true, trigger: "blur" }],
const loginData2 = ref({
email: "",
password: "",
confirmPassword: "",
});

const loginRules = ref({
email: [
{
required: true,
trigger: "blur",
validator: emailValidator,
},
],
password: [{ required: true, trigger: "blur", validator: passwordValidator }],
verifyCode: [{ required: true, trigger: "blur" }],
};
confirmPassword: [
{ required: true, trigger: "blur", validator: confirmPasswordValidator },
],
verifyCode: [
{
required: true,
trigger: "blur",
message:
currentLan.value == "zh-cn"
? "请输入验证码"
: "Please input verifyCode",
},
],
});

watch(currentLan, (newValue, oldValue) => {
const loginRule = loginRules.value;
loginRule.verifyCode[0].message =
newValue == "zh-cn" ? "请输入验证码" : "Please input verifyCode";
setTimeout(() => {
loginFormRef.value.resetFields();
getInfo();
}, 100);
// 切换语言刷新验证码
getCode();
});

/**
* @description: 切换登录/注册状态
*/
function loginFlag() {
isLogin.value = !isLogin.value;
passwordVisible.value = !isLogin.value;
console.log(isLogin.value, "isLogin.value");
// 切换登录/注册状态刷新验证码
getCode();
setTimeout(() => {
loginFormRef.value.resetFields();
}, 100);
}

/**
* 密码校验器
* @description: 将账户/密码存储在本地
* @param:email,password
*/
function passwordValidator(rule: any, value: any, callback: any) {
if (value.length < 6) {
callback(new Error("The password can not be less than 6 digits"));
} else {
callback();
}
function saveInfo(data: any) {
const userInfo = JSON.stringify({
email: data.email,
password: data.password,
});
// 将用户信息加密
const enCodeUserInfo = encodeURI(userInfo);
localStorage.setItem("userInfo", enCodeUserInfo);
}

/**
* 检查输入大小写状态
* @description: 将存储在本地的账户/密码恢复至登录表单
*/
function checkCapslock(e: any) {
const { key } = e;
isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
function getInfo() {
const data = localStorage.getItem("userInfo");
// 将用户信息解密
const deCodeUserInfo = decodeURI(data as any);
const userInfo = JSON.parse(deCodeUserInfo);
if (userInfo) {
loginData.value.email = userInfo.email ? userInfo.email : "";
loginData.value.password = userInfo.password ? userInfo.password : "";
}
}

function handleLogin() {
router.push("/createVideo");
}
/**
* 邮箱校验器
*/
function emailValidator(rule: any, value: any, callback: any) {
const msg =
currentLan.value == "zh-cn"
? "邮箱不能为空!"
: "The E-amil can not be empty";

const msg2 =
currentLan.value == "zh-cn" ? "邮箱格式不正确!" : "Incorrect email format";

function handleRegister() {
const data = {
email: loginData.value.username,
password: loginData.value.password,
};
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,}))$/;

if (!data.email) {
ElMessage.error("邮箱不能为空!");
return;
if (!value) {
callback(new Error(msg));
} else if (!emailReg.test(value)) {
callback(new Error(msg2));
} else {
callback();
}
}

if (!data.password) {
ElMessage.error("密码不能为空!");
return;
/**
* 密码校验器
*/
function passwordValidator(rule: any, value: any, callback: any) {
const msg =
currentLan.value == "zh-cn"
? "密码不能为空!"
: "The password can not be empty";

const msg2 =
currentLan.value == "zh-cn"
? "密码至少为6位!"
: "The password can not be less than 6 digits";
if (!value) {
callback(new Error(msg));
} else if (value.length < 6) {
callback(new Error(msg2));
} else {
callback();
}
}

if (!emailReg.test(data.email)) {
ElMessage.error("邮箱格式错误!");
return;
/**
* 确认密码校验器
*/
function confirmPasswordValidator(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 !== loginData2.value.password) {
callback(new Error(msg2));
} else {
callback();
}
console.log(data);
doRegister(data);
}

// 注册行为
function handleRegister() {
loginFormRef.value.validate((val: any) => {
if (val) {
const data = {
email: loginData2.value.email,
password: loginData2.value.password,
};
isRegistering.value = true;
doRegister(data);
} else {
const msg =
currentLan.value == "zh-cn"
? "请检查信息格式!"
: "Please check the format !";
ElMessage.error(msg);
return;
}
});
}

// 登录行为
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 getCode() {
@@ -329,64 +478,92 @@ function getCode() {
url: getCodeImgUrl,
method: "get",
}).then(() => {
verifyCode.value = getCodeImgUrl;
verifyCodeUrl.value = getCodeImgUrl;
showCodeImg.value = true;
});
}

/**
* @description:注册
* @param {type} data
* @param {Object} data
* @return: data
*/
async function doRegister(data: object) {
try {
const res = await register(data);
console.log(res, "res");
} catch (error) {
console.log(error);
}
const msg =
currentLan.value == "zh-cn"
? "确认信息已发送至您的邮箱,请注意查收!"
: "An email has been send to you, Please pay attention to confirm !";
await register(data)
.then((res) => {
console.log(res, "res");
isRegistering.value = false;
ElMessage.success(msg);
// 注册成功将账号密码保存到本地
saveInfo(data);
})
.catch((err) => {
// 注册失败刷新验证码
getCode();
isRegistering.value = false;
console.log(err, "err");
ElMessage.error(err.message);
});
}

/**
* @description:登录
* @param {Object} data
* @return: data
*/
async function doLogin(data: any) {
const msg =
currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
await login(data)
.then((res) => {
console.log(res, "res");
localStorage.setItem("AccessToken", res.data.token);
ElMessage.success(msg);
router.push("/createVideo");
// 注册成功将账号密码保存到本地
saveInfo(data);
isLogining.value = false;
})
.catch((err) => {
console.log(err, "err");
// 登录失败刷新验证码
getCode();
ElMessage.error(err.message);
isLogining.value = false;
if (err.code == 2112) {
reSendEmail(data.email);
}
});
}

// /**
// * 登录
// */
// function handleLogin() {
// loginFormRef.value.validate((valid: boolean) => {
// if (valid) {
// loading.value = true;
// userStore
// .login(loginData.value)
// .then(() => {
// const query: LocationQuery = route.query;

// const redirect = (query.redirect as LocationQueryValue) ?? "/";

// const otherQueryParams = Object.keys(query).reduce(
// (acc: any, cur: string) => {
// if (cur !== "redirect") {
// acc[cur] = query[cur];
// }
// return acc;
// },
// {}
// );

// router.push({ path: redirect, query: otherQueryParams });
// })
// .catch(() => {
// // 验证失败,重新生成验证码
// getCaptcha();
// })
// .finally(() => {
// loading.value = false;
// });
// }
// });
// }
/**
* @description:重新发送邮件
* @param {string} email
* @return: data
*/
async function reSendEmail(email: string) {
const msg =
currentLan.value == "zh-cn"
? "确认信息已发送至您的邮箱,请注意查收!"
: "An email has been send to you, Please pay attention to confirm !";
await sendRegisterEmail(email)
.then((res) => {
console.log(res, "res");
ElMessage.success(msg);
})
.catch((err) => {
console.log(err, "err");
ElMessage.error(err.message);
});
}

onMounted(() => {
getCode();
getInfo();
});
</script>



+ 157
- 4
src/views/signSucceed/index.vue Näytä tiedosto

@@ -1,15 +1,168 @@
<template>
<div />
<div class="content">
<div class="logo" @click="goLogin">
<img src="../../assets/img/left-top-logo.png" alt="" />
</div>

<div class="lanSelect">
<lang-select
class="navItem"
style="color: #ffffff; transform: scale(2)"
/>
</div>
<div v-if="isSuccess == 1">
<div class="welcome">{{ $t("signSucceed.welcome") }}</div>
<div class="success">{{ $t("signSucceed.createSuccess") }}</div>
<div class="login pointer" @click="goLogin">
{{ $t("signSucceed.goLogin") }}
</div>
</div>

<div v-if="isSuccess == 2">
<div class="welcome">{{ $t("signSucceed.welcome") }}</div>
<div class="success">
{{ $t("signSucceed.expired") }}
</div>
<div class="login pointer" @click="reSend">
{{ $t("signSucceed.reSend") }}
</div>
</div>

<div v-if="isSuccess == 3">
<div class="welcome">{{ $t("signSucceed.welcome") }}</div>
<div class="success">{{ $t("signSucceed.sendSuccess") }}</div>
</div>
</div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { activateByTicket } from "@/apis/signSucceed";
import { sendRegisterEmail } from "@/apis/login";
import { useI18n } from "vue-i18n";
import LangSelect from "@/components/LangSelect/index.vue";

const { locale } = useI18n();
const currentLan = ref(locale);
const route = useRoute();
const router = useRouter();

const { params, query } = route;
const { path } = params;
const isSuccess = ref(0);

function doActivateByTicket() {
const ticket = query.ticket;
activateByTicket(ticket)
.then((res) => {
console.log(res, "res");
localStorage.setItem("AccessToken", res.data.token);
isSuccess.value = 1;
})
.catch((err) => {
console.log(err, "err");
isSuccess.value = 2;
});
}

function goLogin() {
const AccessToken = localStorage.getItem("AccessToken");
if (AccessToken) {
router.push("/createVideo");
} else {
router.push("/login");
}
}

console.log(query.ticket, "ticket");
function reSend() {
const email = query.email;
reSendEmail(email as string);
}

/**
* @description:重新发送邮件
* @param {string} email
* @return: data
*/
async function reSendEmail(email: string) {
const msg =
currentLan.value == "zh-cn"
? "确认信息已发送至您的邮箱,请注意查收!"
: "An email has been send to you, Please pay attention to confirm !";
await sendRegisterEmail(email)
.then((res) => {
console.log(res, "res");
ElMessage.success(msg);
isSuccess.value = 3;
})
.catch((err) => {
console.log(err, "err");
if (err.code == 2113) {
ElMessage.success(err.message);
router.push("/login");
return;
}
ElMessage.error(err.message);
router.push("/login");
});
}

onMounted(() => {
console.log(query, "query");
if (query.ticket || query.email) {
doActivateByTicket();
} else {
router.push("/login");
}
});
</script>

<style lang="scss" scoped>
.content {
position: relative;
height: 1000px;
padding: 100px 0 0 40px;
background-color: #000000;
color: #ffffff;
.logo {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}

.lanSelect {
position: absolute;
top: 40px;
right: 40px;
}

.success {
font-size: 25px;
text-align: center;
margin-bottom: 28px;
}
.welcome {
font-size: 30px;
text-align: center;
margin: 28px;
}
.login {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #ffffff;
background: linear-gradient(270deg, #4b61dc, #15d1b8);
border-radius: 10px;
transition: all 0.3s;
margin: auto;
&:hover {
transform: scale(1.1);
}
}
}
</style>

Ladataan…
Peruuta
Tallenna