@@ -0,0 +1,97 @@ | |||||
import request from "@/utils/request.js"; | |||||
const baseURL = import.meta.env.VITE_APP_BASE_API | |||||
/** | |||||
* @description 注册 | |||||
* @params email,password | |||||
* @returns data | |||||
*/ | |||||
export function register(data) { | |||||
return request({ | |||||
url: `/api/user/doRegisterByEmail`, | |||||
method: 'post', | |||||
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: { | |||||
} | |||||
}) | |||||
} | |||||
/** | |||||
/** | |||||
* @description:忘记密码发送邮件 | |||||
* @param {string} data | |||||
* @return: data | |||||
*/ | |||||
export function sendUpdPwdEmailApi(email) { | |||||
return request({ | |||||
url: `/api/user/sendUpdPwdEmail`, | |||||
method: 'post', | |||||
data: { | |||||
} | |||||
}) | |||||
} | |||||
/** | |||||
/** | |||||
* @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: 验证码地址 | |||||
*/ | |||||
export const getCodeImgUrl = baseURL + '/api/user/captcha.jpg' | |||||
@@ -9,7 +9,8 @@ const baseURL = import.meta.env.VITE_APP_BASE_API | |||||
*/ | */ | ||||
export function register(data) { | export function register(data) { | ||||
return request({ | return request({ | ||||
url: `/api/user/doRegisterByEmail`, | |||||
// url: `/api/user/doRegisterByEmail`, | |||||
url: `/api/user/doRegisterByPhone`, | |||||
method: 'post', | method: 'post', | ||||
data | data | ||||
}) | }) | ||||
@@ -22,7 +23,8 @@ export function register(data) { | |||||
*/ | */ | ||||
export function login(data) { | export function login(data) { | ||||
return request({ | return request({ | ||||
url: `/api/user/loginByEmail`, | |||||
// url: `/api/user/loginByEmail`, | |||||
url: `/api/user/login`, | |||||
method: 'post', | method: 'post', | ||||
data | data | ||||
}) | }) | ||||
@@ -50,16 +52,41 @@ export function sendRegisterEmail(email) { | |||||
* @param {string} data | * @param {string} data | ||||
* @return: data | * @return: data | ||||
*/ | */ | ||||
export function sendUpdPwdEmailApi(email) { | |||||
// export function sendUpdPwdEmailApi(email) { | |||||
// return request({ | |||||
// url: `/api/user/sendUpdPwdEmail`, | |||||
// method: 'post', | |||||
// data: { | |||||
// } | |||||
// }) | |||||
// } | |||||
/**`/api/user/sendLoginPhoneCode?phone=${phone}` | |||||
* @description 忘记密码第一步,根据图片验证码和手机号获取短信 | |||||
* @param {object} loginParams (phone,code) | |||||
* @returns data | |||||
*/ | |||||
export function sendUpdPwdEmailApi(data) { | |||||
return request({ | |||||
url: `/api/user/sendPhoneCode?phone=${data.phone}&code=${data.code}`, | |||||
method: 'get', | |||||
}) | |||||
} | |||||
/**`/api/user/sendLoginPhoneCode?phone=${phone}` | |||||
* @description 忘记密码第二步,短信验证码和新密码 | |||||
* @param {object} loginParams (phone,code,pwd) | |||||
* @returns data | |||||
*/ | |||||
export function doUpdPassApi(loginParams) { | |||||
return request({ | return request({ | ||||
url: `/api/user/sendUpdPwdEmail`, | |||||
url: `/api/user/updPass`, | |||||
method: 'post', | method: 'post', | ||||
data: { | |||||
} | |||||
data: loginParams | |||||
}) | }) | ||||
} | } | ||||
/** | /** | ||||
/** | /** | ||||
* @description:邮件重置密码, | * @description:邮件重置密码, | ||||
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<el-dropdown class="outSide" trigger="click" @command="handleLanguageChange"> | <el-dropdown class="outSide" trigger="click" @command="handleLanguageChange"> | ||||
<div> | <div> | ||||
<svg-icon icon-class="language" /> | |||||
<svg-icon icon-class="language" style="color: #fff" /> | |||||
</div> | </div> | ||||
<template #dropdown> | <template #dropdown> | ||||
<el-dropdown-menu> | <el-dropdown-menu> | ||||
@@ -15,7 +15,7 @@ export default { | |||||
login: { | login: { | ||||
title: "Metavatar-PC", | title: "Metavatar-PC", | ||||
username: "Username", | username: "Username", | ||||
email: "E-mail", | |||||
email: "Phone", | |||||
password: "Password", | password: "Password", | ||||
confirmPassword: "Confirm password", | confirmPassword: "Confirm password", | ||||
login: "Sign in", | login: "Sign in", | ||||
@@ -27,14 +27,15 @@ export default { | |||||
signUp: "Don't have an account? Sign up here", | signUp: "Don't have an account? Sign up here", | ||||
forgetPwd: "I forgot my password", | forgetPwd: "I forgot my password", | ||||
forgetPwdTitle:'Forgot password', | forgetPwdTitle:'Forgot password', | ||||
SendEmail:'Send an email', | |||||
SendEmail:'Send SMS Code', | |||||
resetPassword:'Reset password', | resetPassword:'Reset password', | ||||
setNewPwd:'Set new password', | setNewPwd:'Set new password', | ||||
newPwd:'New password', | newPwd:'New password', | ||||
oldPwd:'Old password', | oldPwd:'Old password', | ||||
confirmNewPwd:'Confirm new password', | confirmNewPwd:'Confirm new password', | ||||
confirm:'Confirm', | confirm:'Confirm', | ||||
gohome:'Back to home page' | |||||
gohome:'Back to home page', | |||||
SMSCode:'SMS Code' | |||||
}, | }, | ||||
// 导航栏国际化 | // 导航栏国际化 | ||||
@@ -15,7 +15,7 @@ export default { | |||||
login: { | login: { | ||||
title: "Metavatar-PC", | title: "Metavatar-PC", | ||||
username: "用户名", | username: "用户名", | ||||
email: "电子邮件", | |||||
email: "手机号", | |||||
password: "密码", | password: "密码", | ||||
confirmPassword: "确认密码", | confirmPassword: "确认密码", | ||||
login: "登录", | login: "登录", | ||||
@@ -27,14 +27,15 @@ export default { | |||||
signUp: "没有账号?现在加入!", | signUp: "没有账号?现在加入!", | ||||
forgetPwd: "忘记密码", | forgetPwd: "忘记密码", | ||||
forgetPwdTitle:'忘记密码', | forgetPwdTitle:'忘记密码', | ||||
SendEmail:'发送邮件', | |||||
SendEmail:'发送短信验证码', | |||||
resetPassword:'重置密码', | resetPassword:'重置密码', | ||||
setNewPwd:'设置新密码', | setNewPwd:'设置新密码', | ||||
newPwd:'新密码', | newPwd:'新密码', | ||||
oldPwd:'旧密码', | oldPwd:'旧密码', | ||||
confirmNewPwd:'确认新密码', | confirmNewPwd:'确认新密码', | ||||
confirm:'确定', | confirm:'确定', | ||||
gohome:'回到首页' | |||||
gohome:'回到首页', | |||||
SMSCode:'短信验证码', | |||||
}, | }, | ||||
// 导航栏国际化 | // 导航栏国际化 | ||||
@@ -1,25 +1,52 @@ | |||||
<template> | <template> | ||||
<div :class="classObj" class="app-wrapper"> | |||||
<!-- 手机设备侧边栏打开遮罩层 --> | |||||
<div | |||||
v-if="classObj.mobile && classObj.openSidebar" | |||||
class="drawer-bg" | |||||
@click="handleOutsideClick" | |||||
></div> | |||||
<Sidebar class="sidebar-container" /> | |||||
<div :class="{ hasTagsView: showTagsView }" class="main-container"> | |||||
<div | |||||
:class="{ 'fixed-header': fixedHeader }" | |||||
style="box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 4px; height: 80px" | |||||
> | |||||
<navbar /> | |||||
<tags-view v-if="showTagsView" /> | |||||
<div class="app-wrapper"> | |||||
<!-- 侧边栏 --> | |||||
<div class="Sidebar"> | |||||
<div class="imgBox"> | |||||
<img | |||||
class="boxCentreImg" | |||||
src="../assets//img/left-top-logo.png" | |||||
alt="" | |||||
/> | |||||
</div> | |||||
<!-- 侧边路由列表 --> | |||||
<div class="myRouter"> | |||||
<div class="myRouter-item" @click="router.push('/createVideo')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-edit /></el-icon> | |||||
</div> | |||||
{{ $t("createVideo.title") }} | |||||
</div> | |||||
<div class="myRouter-item" @click="router.push('/moveImg')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-edit /></el-icon> | |||||
</div> | |||||
{{ $t("createVideo.title") }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 右边显示部分 --> | |||||
<div class="rightBox"> | |||||
<!-- nav栏 --> | |||||
<div class="nav"> | |||||
<!-- 语言 --> | |||||
<lang-select class="navItem" /> | |||||
<!-- 登录 --> | |||||
<div class="navItem" v-if="!AccessToken" @click="router.push('login')"> | |||||
{{ $t("navbar.goLogin") }} | |||||
</div> | |||||
<!-- 注销 --> | |||||
<div | |||||
class="navItem" | |||||
v-if="AccessToken" | |||||
@click="logout" | |||||
style="margin-left: 10px" | |||||
> | |||||
{{ $t("navbar.logout") }} | |||||
</div> | |||||
</div> | </div> | ||||
<!-- 主页面 --> | <!-- 主页面 --> | ||||
<app-main /> | |||||
<app-main style="background-color: #000" /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -28,16 +55,41 @@ | |||||
import { computed, watchEffect } from "vue"; | import { computed, watchEffect } from "vue"; | ||||
import { useWindowSize } from "@vueuse/core"; | import { useWindowSize } from "@vueuse/core"; | ||||
import { AppMain, Navbar } from "./components/index"; | import { AppMain, Navbar } from "./components/index"; | ||||
import SignSucceed from "../views/signSucceed/index.vue"; | |||||
import Sidebar from "./components/Sidebar/index.vue"; | |||||
import LangSelect from "@/components/LangSelect/index.vue"; | |||||
import { useAppStore } from "@/store/modules/app"; | import { useAppStore } from "@/store/modules/app"; | ||||
import { useSettingsStore } from "@/store/modules/settings"; | |||||
// import { useSettingsStore } from "@/store/modules/settings"; | |||||
import { useRoute, useRouter } from "vue-router"; | import { useRoute, useRouter } from "vue-router"; | ||||
import { useI18n } from "vue-i18n"; | |||||
import { userInfoModules } from "@/store/modules/userInfo"; | |||||
const userInfoPinia = userInfoModules(); | |||||
const route = useRoute(); | const route = useRoute(); | ||||
const router = useRouter(); | |||||
const { params } = route; | const { params } = route; | ||||
const { width } = useWindowSize(); | const { width } = useWindowSize(); | ||||
const AccessToken = localStorage.getItem("AccessToken"); | |||||
// 当前语言状态与国际化组件 | |||||
const { locale } = useI18n(); | |||||
const lanChange = ref(locale); | |||||
function logout() { | |||||
const msg = | |||||
(lanChange.value as string) == "zh-cn" | |||||
? "确定退出登录吗?" | |||||
: "Are you sure to log out?"; | |||||
const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice"; | |||||
const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm"; | |||||
const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel"; | |||||
ElMessageBox.confirm(msg, notice, { | |||||
confirmButtonText: confirm, | |||||
cancelButtonText: cancel, | |||||
}).then(() => { | |||||
userInfoPinia.loginOut(); | |||||
router.push(`/login`); | |||||
localStorage.removeItem("AccessToken"); | |||||
}); | |||||
} | |||||
/** | /** | ||||
* 响应式布局容器固定宽度 | * 响应式布局容器固定宽度 | ||||
* | * | ||||
@@ -48,18 +100,7 @@ const { width } = useWindowSize(); | |||||
const WIDTH = 992; | const WIDTH = 992; | ||||
const appStore = useAppStore(); | const appStore = useAppStore(); | ||||
const settingsStore = useSettingsStore(); | |||||
const fixedHeader = computed(() => settingsStore.fixedHeader); | |||||
const showTagsView = computed(() => settingsStore.tagsView); | |||||
const showSettings = computed(() => settingsStore.showSettings); | |||||
const classObj = computed(() => ({ | |||||
hideSidebar: !appStore.sidebar.opened, | |||||
openSidebar: appStore.sidebar.opened, | |||||
withoutAnimation: appStore.sidebar.withoutAnimation, | |||||
mobile: appStore.device === "mobile", | |||||
})); | |||||
// const settingsStore = useSettingsStore(); | |||||
watchEffect(() => { | watchEffect(() => { | ||||
if (width.value < WIDTH) { | if (width.value < WIDTH) { | ||||
@@ -84,48 +125,109 @@ function handleOutsideClick() { | |||||
onMounted(() => {}); | onMounted(() => {}); | ||||
</script> | </script> | ||||
<!-- 新样式 --> | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.app-wrapper { | .app-wrapper { | ||||
&::after { | |||||
display: table; | |||||
clear: both; | |||||
content: ""; | |||||
width: 1920px; | |||||
display: flex; | |||||
} | |||||
.Sidebar { | |||||
width: 230px; | |||||
background-color: #000; | |||||
height: 100vh; | |||||
color: #fff; | |||||
.imgBox { | |||||
width: 100%; | |||||
height: 80px; | |||||
position: relative; | |||||
img { | |||||
max-width: 80%; | |||||
max-height: 80%; | |||||
} | |||||
} | } | ||||
.myRouter { | |||||
position: relative; | |||||
height: calc(100% - 80px); | |||||
padding: 200px 20px 0; | |||||
color: #fff; | |||||
// color: #868593; | |||||
&-item { | |||||
display: flex; | |||||
width: 100%; | |||||
height: 50px; | |||||
padding-left: 10px; | |||||
font-size: 20px; | |||||
font-weight: 500; | |||||
line-height: 50px; | |||||
text-align: center; | |||||
cursor: pointer; | |||||
// border-bottom: 2px solid #fff; | |||||
transition: all 0.3s; | |||||
border-radius: 5px; | |||||
margin-bottom: 20px; | |||||
margin-right: 20px; | |||||
.icon { | |||||
width: 40px; | |||||
height: 40px; | |||||
color: #fff; | |||||
border-radius: 50%; | |||||
.el-icon { | |||||
width: 25px; | |||||
height: 25px; | |||||
font-size: 25px; | |||||
// color: #797a9f; | |||||
color: #fff; | |||||
text-align: center; | |||||
vertical-align: sub; | |||||
} | |||||
} | |||||
&:hover { | |||||
// background: rgba(255, 255, 255, 0.2); | |||||
color: #000; | |||||
background: #fff; | |||||
.el-icon { | |||||
// color: #d4d0ff; | |||||
color: #000; | |||||
} | |||||
} | |||||
} | |||||
position: relative; | |||||
width: 100%; | |||||
height: 100%; | |||||
e &.mobile.openSidebar { | |||||
position: fixed; | |||||
top: 0; | |||||
.pricing { | |||||
position: absolute; | |||||
bottom: 60px; | |||||
width: calc(100% - 40px); | |||||
text-align: center; | |||||
} | |||||
.API { | |||||
position: absolute; | |||||
bottom: 0px; | |||||
width: calc(100% - 40px); | |||||
text-align: center; | |||||
} | |||||
} | } | ||||
} | } | ||||
.fixed-header { | |||||
position: fixed; | |||||
top: 0; | |||||
right: 0; | |||||
z-index: 9; | |||||
width: calc(100% - #{$sideBarWidth}); | |||||
transition: width 0.28s; | |||||
} | |||||
.hideSidebar .fixed-header { | |||||
width: calc(100% - 54px); | |||||
} | |||||
.mobile .fixed-header { | |||||
width: 100%; | |||||
} | |||||
.drawer-bg { | |||||
position: absolute; | |||||
top: 0; | |||||
z-index: 999; | |||||
width: 100%; | |||||
height: 100%; | |||||
// background: #1b213a; | |||||
background: #000; | |||||
opacity: 0.3; | |||||
.rightBox { | |||||
width: 1690px; | |||||
// background-color: #000; | |||||
.nav { | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
margin-right: 20px; | |||||
width: 100%; | |||||
height: 80px; | |||||
background-color: #000; | |||||
padding: 30px; | |||||
// padding: 30px 30px 0 1500px; | |||||
color: #fff; | |||||
.navItem { | |||||
font-size: 16px; | |||||
margin-right: 30px; | |||||
} | |||||
} | |||||
} | } | ||||
</style> | </style> |
@@ -1,5 +1,6 @@ | |||||
body { | body { | ||||
font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif; | font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif; | ||||
font-size: 14px; | |||||
} | } | ||||
.inmiddle { | .inmiddle { | ||||
@@ -2,6 +2,7 @@ | |||||
export {} | export {} | ||||
declare global { | declare global { | ||||
const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||||
declare module 'vue' { | declare module 'vue' { | ||||
interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | ||||
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||||
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
@@ -24,6 +24,7 @@ declare module '@vue/runtime-core' { | |||||
ElSelect: typeof import('element-plus/es')['ElSelect'] | ElSelect: typeof import('element-plus/es')['ElSelect'] | ||||
ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ||||
ElTabs: typeof import('element-plus/es')['ElTabs'] | ElTabs: typeof import('element-plus/es')['ElTabs'] | ||||
ElTooltip: typeof import('element-plus/es')['ElTooltip'] | |||||
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | ||||
Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | ||||
IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | ||||
@@ -6,8 +6,23 @@ | |||||
<div class="left"> | <div class="left"> | ||||
<!-- 选择模版弹出框 --> | <!-- 选择模版弹出框 --> | ||||
<div class="chooseModelBox" :class="showChooseModel ? '' : 'noModel'"> | <div class="chooseModelBox" :class="showChooseModel ? '' : 'noModel'"> | ||||
<!-- 箭头 --> | |||||
<!-- 伸缩按钮 --> | |||||
<div | <div | ||||
v-if="showChooseModel && videoType" | |||||
class="shrinkBtn" | |||||
@click="showChooseModel = false" | |||||
> | |||||
> | |||||
</div> | |||||
<div | |||||
v-if="!showChooseModel" | |||||
class="shrinkBtn" | |||||
@click="showChooseModel = true" | |||||
> | |||||
< | |||||
</div> | |||||
<!-- 箭头 --> | |||||
<!-- <div | |||||
v-if="showChooseModel && videoType" | v-if="showChooseModel && videoType" | ||||
class="openChooseModel" | class="openChooseModel" | ||||
@click="showChooseModel = false" | @click="showChooseModel = false" | ||||
@@ -20,8 +35,9 @@ | |||||
@click="showChooseModel = true" | @click="showChooseModel = true" | ||||
> | > | ||||
<img src="../../assets/img/arrowRight.png" alt="" /> | <img src="../../assets/img/arrowRight.png" alt="" /> | ||||
</div> | |||||
</div> --> | |||||
<!-- tab栏 --> | <!-- tab栏 --> | ||||
<p>性别</p> | |||||
<div class="tab" v-show="showChooseModel"> | <div class="tab" v-show="showChooseModel"> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
@@ -45,6 +61,30 @@ | |||||
女性 | 女性 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<p>视频比例</p> | |||||
<div class="tab" v-show="showChooseModel"> | |||||
<div | |||||
class="tabItem" | |||||
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" | |||||
@click="changeTabVideoType(0)" | |||||
> | |||||
全部 | |||||
</div> | |||||
<div | |||||
class="tabItem" | |||||
:class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''" | |||||
@click="changeTabVideoType(2)" | |||||
> | |||||
横屏 | |||||
</div> | |||||
<div | |||||
class="tabItem" | |||||
:class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''" | |||||
@click="changeTabVideoType(1)" | |||||
> | |||||
竖屏 | |||||
</div> | |||||
</div> | |||||
<!-- 模版列表 --> | <!-- 模版列表 --> | ||||
<div | <div | ||||
class="modeListBox" | class="modeListBox" | ||||
@@ -296,19 +336,32 @@ const lanChange = ref(locale); | |||||
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | ||||
//#region 选择模版弹出框 | //#region 选择模版弹出框 | ||||
const videoType = ref(null); //判断横屏2还是竖屏1 | |||||
const videoType = ref(null); //判断横屏2还是竖屏1,初始为没有,控制按钮显隐 | |||||
const showChooseModel = ref(true); // 控制弹窗显示隐藏 | const showChooseModel = ref(true); // 控制弹窗显示隐藏 | ||||
const modeList = ref([]); //模版列表 | const modeList = ref([]); //模版列表 | ||||
const modelImg = ref(null); //模版回显图 | const modelImg = ref(null); //模版回显图 | ||||
const modelTabItemActive = ref(0); //模版tab栏 | |||||
const modelTabItemActive = ref(0); //模版tab栏 性别 | |||||
const modelTabItemActive2 = ref(0); //模版tab栏 比例 | |||||
const modelPageNum = ref(1); | const modelPageNum = ref(1); | ||||
const modelPageSize = ref(20); | const modelPageSize = ref(20); | ||||
const overLoadModel = ref(true); //禁用模版加载更多 | const overLoadModel = ref(true); //禁用模版加载更多 | ||||
const modelId = ref(null); // 选中模版的id | const modelId = ref(null); // 选中模版的id | ||||
// 获取模版列表 | // 获取模版列表 | ||||
async function getModeList(sex, pageNum, pageSize) { | async function getModeList(sex, pageNum, pageSize) { | ||||
const res = await modeListApi(sex, pageNum, pageSize); | |||||
modeList.value = res.data.list; | |||||
let sexx = null; | |||||
if (sex == 0) { | |||||
sexx = ""; | |||||
} else { | |||||
sexx = sex; | |||||
} | |||||
const res = await modeListApi(sexx, pageNum, pageSize); | |||||
if (tabVideoType.value == 0) { | |||||
modeList.value = res.data.list; | |||||
} else { | |||||
modeList.value = res.data.list.filter( | |||||
(item) => item.videoType == tabVideoType.value | |||||
); | |||||
} | |||||
overLoadModel.value = false; | overLoadModel.value = false; | ||||
} | } | ||||
// 点击模版 | // 点击模版 | ||||
@@ -318,18 +371,45 @@ function clickModelItem(item) { | |||||
videoType.value = item.videoType; | videoType.value = item.videoType; | ||||
modelId.value = item.id; | modelId.value = item.id; | ||||
} | } | ||||
// tab栏切换 | |||||
// tab栏切换 性别 | |||||
// tab栏切换 横竖比例 videoType==1为竖,==2为横 | |||||
const tabSex = ref(0); | |||||
const tabVideoType = ref(0); | |||||
function changeTabSex(index) { | function changeTabSex(index) { | ||||
modeList.value = []; | modeList.value = []; | ||||
modelPageNum.value = 1; | modelPageNum.value = 1; | ||||
modelTabItemActive.value = index; | modelTabItemActive.value = index; | ||||
overLoadModel.value = false; | overLoadModel.value = false; | ||||
if (index == 0) { | |||||
getModeList("", modelPageNum.value, modelPageSize.value); | |||||
} else { | |||||
getModeList(index, modelPageNum.value, modelPageSize.value); | |||||
} | |||||
tabSex.value = index; | |||||
getModeList(index, modelPageNum.value, modelPageSize.value); | |||||
} | |||||
function changeTabVideoType(index) { | |||||
modeList.value = []; | |||||
modelPageNum.value = 1; | |||||
modelTabItemActive2.value = index; | |||||
overLoadModel.value = false; | |||||
tabVideoType.value = index; | |||||
getModeList(tabSex.value, modelPageNum.value, modelPageSize.value); | |||||
} | } | ||||
// watch(tabSex, (newVal, oldVal) => { | |||||
// if (newVal == 0) { | |||||
// getModeList("", modelPageNum.value, modelPageSize.value); | |||||
// } else { | |||||
// } | |||||
// }); | |||||
// function changeTabSex(index) { | |||||
// modeList.value = []; | |||||
// modelPageNum.value = 1; | |||||
// modelTabItemActive.value = index; | |||||
// overLoadModel.value = false; | |||||
// if (index == 0) { | |||||
// getModeList("", modelPageNum.value, modelPageSize.value); | |||||
// } else { | |||||
// getModeList(index, modelPageNum.value, modelPageSize.value); | |||||
// } | |||||
// } | |||||
// 触底刷新 | |||||
async function loadMoreModel(params) { | async function loadMoreModel(params) { | ||||
modelPageNum.value += 1; | modelPageNum.value += 1; | ||||
if (modelTabItemActive.value == 0) { | if (modelTabItemActive.value == 0) { | ||||
@@ -604,7 +684,10 @@ onMounted(async () => { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
height: calc(100vh - 80px); | height: calc(100vh - 80px); | ||||
// height: calc(100vh - 80px); | |||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 30px 0 0 0; | |||||
overflow: hidden; | |||||
} | } | ||||
.mask { | .mask { | ||||
position: absolute; | position: absolute; | ||||
@@ -623,16 +706,17 @@ onMounted(async () => { | |||||
position: absolute; | position: absolute; | ||||
top: 0px; | top: 0px; | ||||
left: 0px; | left: 0px; | ||||
width: 90%; | |||||
width: 30%; | |||||
height: 100%; | height: 100%; | ||||
padding: 30px; | padding: 30px; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
background-color: #f1f2f6; | |||||
// background-color: #f1f2f6; | |||||
background-color: #454545; | |||||
z-index: 9; | z-index: 9; | ||||
.openChooseModel, | .openChooseModel, | ||||
.closeChooseModel { | .closeChooseModel { | ||||
position: absolute; | position: absolute; | ||||
top: 10px; | |||||
top: 50%; | |||||
width: 50px; | width: 50px; | ||||
height: 20px; | height: 20px; | ||||
z-index: 999; | z-index: 999; | ||||
@@ -642,54 +726,97 @@ onMounted(async () => { | |||||
height: 100%; | height: 100%; | ||||
} | } | ||||
} | } | ||||
.openChooseModel { | |||||
right: 0px; | |||||
} | |||||
.closeChooseModel { | |||||
right: -50px; | |||||
// 伸缩按钮 | |||||
.shrinkBtn { | |||||
position: absolute; | |||||
top: 350px; | |||||
right: -40px; | |||||
width: 40px; | |||||
height: 100px; | |||||
line-height: 80px; | |||||
padding: 10px; | |||||
font-size: 30px; | |||||
background-color: #454545; | |||||
color: #fff; | |||||
&::before { | |||||
position: absolute; | |||||
top: -40px; | |||||
left: -0px; | |||||
content: ""; | |||||
width: 0; | |||||
height: 0px; | |||||
border-top: 20px solid transparent; | |||||
border-right: 20px solid transparent; | |||||
border-bottom: 20px solid #454545; | |||||
border-left: 20px solid #454545; | |||||
} | |||||
&::after { | |||||
position: absolute; | |||||
bottom: -40px; | |||||
left: -0px; | |||||
content: ""; | |||||
width: 0; | |||||
height: 0px; | |||||
border-top: 20px solid #454545; | |||||
border-right: 20px solid transparent; | |||||
border-bottom: 20px solid transparent; | |||||
border-left: 20px solid #454545; | |||||
} | |||||
} | } | ||||
// tab栏 | // tab栏 | ||||
p { | |||||
color: #fff; | |||||
font-size: 16px; | |||||
padding: 0 20px; | |||||
} | |||||
.tab { | .tab { | ||||
margin: auto; | margin: auto; | ||||
margin-top: 10px; | margin-top: 10px; | ||||
display: flex; | display: flex; | ||||
width: 100%; | width: 100%; | ||||
height: 50px; | |||||
background-color: #fff; | |||||
height: 40px; | |||||
// background-color: #fff; | |||||
margin-bottom: 10px; | margin-bottom: 10px; | ||||
border-radius: 25px; | border-radius: 25px; | ||||
color: #b9b9b9; | |||||
.tabItem { | .tabItem { | ||||
flex: 1; | flex: 1; | ||||
font-size: 16px; | |||||
text-align: center; | text-align: center; | ||||
line-height: 50px; | |||||
border-radius: 25px; | |||||
line-height: 40px; | |||||
border-radius: 15px; | |||||
transition: all 0.3s; | transition: all 0.3s; | ||||
cursor: pointer; | cursor: pointer; | ||||
margin: 0 10px; | |||||
background-color: #000; | |||||
} | } | ||||
.tabItemActive { | .tabItemActive { | ||||
background-color: #000; | |||||
color: #fff; | |||||
background-color: #fff; | |||||
color: #000; | |||||
} | } | ||||
} | } | ||||
// 模版列表 | // 模版列表 | ||||
.modeListBox { | .modeListBox { | ||||
display: flex; | display: flex; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
justify-content: flex-start; | |||||
width: 100%; | width: 100%; | ||||
height: calc(100% - 60px); | |||||
height: calc(100% - 180px); | |||||
padding: 20px; | padding: 20px; | ||||
border-radius: 20px; | border-radius: 20px; | ||||
background-color: #fff; | |||||
// background-color: #fff; | |||||
overflow: hidden; | overflow: hidden; | ||||
overflow-y: scroll; | overflow-y: scroll; | ||||
.modeListBoxItme { | .modeListBoxItme { | ||||
position: relative; | position: relative; | ||||
padding: 20px; | padding: 20px; | ||||
width: 300px; | |||||
height: 300px; | |||||
background: rgba(0, 0, 0, 0.1); | |||||
width: 45%; | |||||
height: 110px; | |||||
margin: 0 10px 10px 0; | margin: 0 10px 10px 0; | ||||
border-radius: 15px; | border-radius: 15px; | ||||
// background: rgba(0, 0, 0, 0.1); | |||||
background-color: #fff; | |||||
z-index: 2; | z-index: 2; | ||||
cursor: pointer; | cursor: pointer; | ||||
img { | img { | ||||
@@ -701,26 +828,13 @@ onMounted(async () => { | |||||
} | } | ||||
.modeListBoxItmeActive { | .modeListBoxItmeActive { | ||||
border: 3px solid #7264f5; | border: 3px solid #7264f5; | ||||
// &::before { | |||||
// content: ""; | |||||
// position: absolute; | |||||
// top: -5px; | |||||
// left: -5px; | |||||
// width: 310px; | |||||
// height: 310px; | |||||
// background: linear-gradient( | |||||
// 225deg, | |||||
// rgba(81, 217, 202, 1), | |||||
// rgba(114, 100, 245, 1) | |||||
// ); | |||||
// border-radius: 16px; | |||||
// } | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.noModel { | .noModel { | ||||
width: 0; | width: 0; | ||||
padding: 0; | padding: 0; | ||||
// opacity: 0; | |||||
} | } | ||||
// 展示区 | // 展示区 | ||||
.showModelImgBox { | .showModelImgBox { | ||||
@@ -9,7 +9,7 @@ | |||||
loop | loop | ||||
></video> | ></video> | ||||
</div> | </div> | ||||
<!-- 正常登录 --> | |||||
<!-- 正常登录 isLogin == 1--> | |||||
<el-form | <el-form | ||||
v-if="isLogin == 1" | v-if="isLogin == 1" | ||||
ref="loginFormRef" | ref="loginFormRef" | ||||
@@ -17,15 +17,22 @@ | |||||
:rules="loginRules" | :rules="loginRules" | ||||
class="login-form" | class="login-form" | ||||
> | > | ||||
<div class="flex text-white items-center py-4"> | |||||
<span class="text-2xl flex-1 text-center">{{ | |||||
<div class="flex text-white items-center"> | |||||
<span class="flex-1 text-center">{{ | |||||
$t("login.title") + " " + $t("login.login") | $t("login.title") + " " + $t("login.login") | ||||
}}</span> | }}</span> | ||||
<lang-select style="color: #fff" /> | |||||
<el-tooltip | |||||
class="box-item" | |||||
effect="dark" | |||||
:content="$t('navbar.LanguageChange')" | |||||
placement="top-start" | |||||
> | |||||
<lang-select class="navItem" style="color: #ffffff" /> | |||||
</el-tooltip> | |||||
</div> | </div> | ||||
<el-form-item prop="email"> | <el-form-item prop="email"> | ||||
<div class="p-2 text-white"> | |||||
<div class="text-white"> | |||||
<svg-icon icon-class="user" /> | <svg-icon icon-class="user" /> | ||||
</div> | </div> | ||||
<el-input | <el-input | ||||
@@ -39,7 +46,7 @@ | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="password"> | <el-form-item prop="password"> | ||||
<span class="p-2 text-white"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</span> | </span> | ||||
<el-input | <el-input | ||||
@@ -61,7 +68,7 @@ | |||||
<!-- 验证码 --> | <!-- 验证码 --> | ||||
<el-form-item prop="verifyCode"> | <el-form-item prop="verifyCode"> | ||||
<span class="p-2 text-white"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="verify_code" /> | <svg-icon icon-class="verify_code" /> | ||||
</span> | </span> | ||||
<el-input | <el-input | ||||
@@ -114,7 +121,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</el-form> | </el-form> | ||||
<!-- 注册账户 --> | |||||
<!-- 注册账户 isLogin == 2--> | |||||
<el-form | <el-form | ||||
v-if="isLogin == 2" | v-if="isLogin == 2" | ||||
ref="loginFormRef" | ref="loginFormRef" | ||||
@@ -122,15 +129,22 @@ | |||||
:rules="loginRules" | :rules="loginRules" | ||||
class="login-form" | class="login-form" | ||||
> | > | ||||
<div class="flex text-white items-center py-4"> | |||||
<span class="text-2xl flex-1 text-center">{{ | |||||
<div class="flex text-white items-center"> | |||||
<span class="flex-1 text-center">{{ | |||||
$t("login.title") + " " + $t("login.register") | $t("login.title") + " " + $t("login.register") | ||||
}}</span> | }}</span> | ||||
<lang-select style="color: #fff" /> | |||||
<el-tooltip | |||||
class="box-item" | |||||
effect="dark" | |||||
:content="$t('navbar.LanguageChange')" | |||||
placement="top-start" | |||||
> | |||||
<lang-select class="navItem" style="color: #ffffff" /> | |||||
</el-tooltip> | |||||
</div> | </div> | ||||
<el-form-item prop="email"> | <el-form-item prop="email"> | ||||
<div class="p-2 text-white"> | |||||
<div class="text-white"> | |||||
<svg-icon icon-class="user" /> | <svg-icon icon-class="user" /> | ||||
</div> | </div> | ||||
<el-input | <el-input | ||||
@@ -144,7 +158,7 @@ | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="password"> | <el-form-item prop="password"> | ||||
<span class="p-2 text-white"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</span> | </span> | ||||
<el-input | <el-input | ||||
@@ -164,7 +178,7 @@ | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="confirmPassword"> | <el-form-item prop="confirmPassword"> | ||||
<span class="p-2 text-white"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</span> | </span> | ||||
<el-input | <el-input | ||||
@@ -221,7 +235,75 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</el-form> | </el-form> | ||||
<!-- 忘记密码 --> | |||||
<!-- 注册账户之后输入短信验证码 isLogin == 6--> | |||||
<el-form | |||||
v-if="isLogin == 6" | |||||
ref="loginFormRef" | |||||
:model="loginData6" | |||||
:rules="loginRules" | |||||
class="login-form" | |||||
> | |||||
<div class="flex text-white items-center"> | |||||
<span class="flex-1 text-center">{{ | |||||
$t("login.title") + " " + $t("login.register") | |||||
}}</span> | |||||
<el-tooltip | |||||
class="box-item" | |||||
effect="dark" | |||||
:content="$t('navbar.LanguageChange')" | |||||
placement="top-start" | |||||
> | |||||
<lang-select class="navItem" style="color: #ffffff" /> | |||||
</el-tooltip> | |||||
</div> | |||||
<el-form-item prop="SMSCode"> | |||||
<div class="text-white"> | |||||
<svg-icon icon-class="user" /> | |||||
</div> | |||||
<el-input | |||||
class="flex-1" | |||||
ref="email" | |||||
size="large" | |||||
v-model="loginData6.SMSCode" | |||||
:placeholder="$t('login.SMSCode')" | |||||
name="email" | |||||
/> | |||||
</el-form-item> | |||||
<el-button | |||||
size="default" | |||||
:loading="loading" | |||||
type="primary" | |||||
class="loginBtn" | |||||
@click.prevent="handleRegister" | |||||
> | |||||
<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'"> | |||||
<div style="margin-bottom: 5px" @click="loginFlag(1)"> | |||||
<span class="join">{{ $t("login.signIn") }}</span> | |||||
</div> | |||||
</div> | |||||
</el-form> | |||||
<!-- 忘记密码 isLogin == 3--> | |||||
<el-form | <el-form | ||||
v-if="isLogin == 3" | v-if="isLogin == 3" | ||||
ref="loginFormRef" | ref="loginFormRef" | ||||
@@ -229,15 +311,22 @@ | |||||
:rules="loginRules" | :rules="loginRules" | ||||
class="login-form" | class="login-form" | ||||
> | > | ||||
<div class="flex text-white items-center py-4"> | |||||
<span class="text-2xl flex-1 text-center">{{ | |||||
<div class="flex text-white items-center"> | |||||
<span class="flex-1 text-center">{{ | |||||
$t("login.title") + " " + $t("login.forgetPwdTitle") | $t("login.title") + " " + $t("login.forgetPwdTitle") | ||||
}}</span> | }}</span> | ||||
<lang-select style="color: #fff" /> | |||||
<el-tooltip | |||||
class="box-item" | |||||
effect="dark" | |||||
:content="$t('navbar.LanguageChange')" | |||||
placement="top-start" | |||||
> | |||||
<lang-select class="navItem" style="color: #ffffff" /> | |||||
</el-tooltip> | |||||
</div> | </div> | ||||
<el-form-item prop="email"> | <el-form-item prop="email"> | ||||
<div class="p-2 text-white"> | |||||
<div class="text-white"> | |||||
<svg-icon icon-class="user" /> | <svg-icon icon-class="user" /> | ||||
</div> | </div> | ||||
<el-input | <el-input | ||||
@@ -249,6 +338,23 @@ | |||||
name="email" | name="email" | ||||
/> | /> | ||||
</el-form-item> | </el-form-item> | ||||
<!-- 验证码 --> | |||||
<el-form-item prop="code"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="verify_code" /> | |||||
</span> | |||||
<el-input | |||||
v-model="loginData3.code" | |||||
auto-complete="off" | |||||
:placeholder="$t('login.verifyCode')" | |||||
class="flex-1" | |||||
@keyup.enter="handleLogin" | |||||
/> | |||||
<span class="captcha"> | |||||
<img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" /> | |||||
</span> | |||||
</el-form-item> | |||||
<el-button | <el-button | ||||
size="default" | size="default" | ||||
@@ -282,7 +388,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</el-form> | </el-form> | ||||
<!-- 重置密码 --> | |||||
<!-- 重置密码 isLogin == 4--> | |||||
<el-form | <el-form | ||||
v-if="isLogin == 4" | v-if="isLogin == 4" | ||||
ref="loginFormRef" | ref="loginFormRef" | ||||
@@ -290,22 +396,29 @@ | |||||
:rules="loginRules" | :rules="loginRules" | ||||
class="login-form" | class="login-form" | ||||
> | > | ||||
<div class="flex text-white items-center py-4"> | |||||
<span class="text-2xl flex-1 text-center">{{ | |||||
<div class="flex text-white items-center"> | |||||
<span class="flex-1 text-center">{{ | |||||
$t("login.title") + " " + $t("login.resetPassword") | $t("login.title") + " " + $t("login.resetPassword") | ||||
}}</span> | }}</span> | ||||
<lang-select style="color: #fff" /> | |||||
<el-tooltip | |||||
class="box-item" | |||||
effect="dark" | |||||
:content="$t('navbar.LanguageChange')" | |||||
placement="top-start" | |||||
> | |||||
<lang-select class="navItem" style="color: #ffffff" /> | |||||
</el-tooltip> | |||||
</div> | </div> | ||||
<el-form-item prop="oldPassword"> | |||||
<span class="p-2 text-white"> | |||||
<el-form-item prop="verifyCode"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</span> | </span> | ||||
<el-input | <el-input | ||||
class="flex-1" | class="flex-1" | ||||
v-model="loginData4.oldPassword" | |||||
:placeholder="$t('login.oldPwd')" | |||||
:type="passwordVisible === false ? 'password' : 'input'" | |||||
v-model="loginData4.verifyCode" | |||||
:placeholder="$t('login.SMSCode')" | |||||
:type="'input'" | |||||
size="large" | size="large" | ||||
name="password" | name="password" | ||||
/> | /> | ||||
@@ -318,7 +431,7 @@ | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="password"> | <el-form-item prop="password"> | ||||
<span class="p-2 text-white"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</span> | </span> | ||||
<el-input | <el-input | ||||
@@ -338,7 +451,7 @@ | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="confirmPassword4"> | <el-form-item prop="confirmPassword4"> | ||||
<span class="p-2 text-white"> | |||||
<span class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</span> | </span> | ||||
<el-input | <el-input | ||||
@@ -387,16 +500,16 @@ | |||||
<div style="margin-bottom: 5px" @click="loginFlag(1)"> | <div style="margin-bottom: 5px" @click="loginFlag(1)"> | ||||
<span class="join">{{ $t("login.signIn") }}</span> | <span class="join">{{ $t("login.signIn") }}</span> | ||||
</div> | </div> | ||||
<div> | |||||
<!-- <div> | |||||
<span | <span | ||||
class="join" | class="join" | ||||
@click="router.push({ path: 'createVideo', params: {} })" | @click="router.push({ path: 'createVideo', params: {} })" | ||||
>{{ $t("login.gohome") }}</span | >{{ $t("login.gohome") }}</span | ||||
> | > | ||||
</div> | |||||
</div> --> | |||||
</div> | </div> | ||||
</el-form> | </el-form> | ||||
<!-- 忘记密码邮件返回 --> | |||||
<!-- 忘记密码邮件返回 isLogin == 5--> | |||||
<el-form | <el-form | ||||
v-if="isLogin == 5" | v-if="isLogin == 5" | ||||
ref="loginFormRef" | ref="loginFormRef" | ||||
@@ -404,15 +517,22 @@ | |||||
:rules="loginRules" | :rules="loginRules" | ||||
class="login-form" | class="login-form" | ||||
> | > | ||||
<div class="flex text-white items-center py-4"> | |||||
<span class="text-2xl flex-1 text-center">{{ | |||||
<div class="flex text-white items-center"> | |||||
<span class="flex-1 text-center">{{ | |||||
$t("login.title") + " " + $t("login.setNewPwd") | $t("login.title") + " " + $t("login.setNewPwd") | ||||
}}</span> | }}</span> | ||||
<lang-select style="color: #fff" /> | |||||
<el-tooltip | |||||
class="box-item" | |||||
effect="dark" | |||||
:content="$t('navbar.LanguageChange')" | |||||
placement="top-start" | |||||
> | |||||
<lang-select class="navItem" style="color: #ffffff" /> | |||||
</el-tooltip> | |||||
</div> | </div> | ||||
<el-form-item prop="newPwd"> | <el-form-item prop="newPwd"> | ||||
<div class="p-2 text-white"> | |||||
<div class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</div> | </div> | ||||
<el-input | <el-input | ||||
@@ -432,7 +552,7 @@ | |||||
</span> | </span> | ||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="confirmNewPwd"> | <el-form-item prop="confirmNewPwd"> | ||||
<div class="p-2 text-white"> | |||||
<div class="text-white"> | |||||
<svg-icon icon-class="password" /> | <svg-icon icon-class="password" /> | ||||
</div> | </div> | ||||
<el-input | <el-input | ||||
@@ -496,6 +616,7 @@ import { | |||||
sendRegisterEmail, | sendRegisterEmail, | ||||
getCodeImgUrl, | getCodeImgUrl, | ||||
sendUpdPwdEmailApi, | sendUpdPwdEmailApi, | ||||
doUpdPassApi, | |||||
resetPwdEmailApi, | resetPwdEmailApi, | ||||
resetPwdFormApi, | resetPwdFormApi, | ||||
} from "@/apis/login"; | } from "@/apis/login"; | ||||
@@ -560,9 +681,10 @@ const loginData2 = ref({ | |||||
}); | }); | ||||
const loginData3 = ref({ | const loginData3 = ref({ | ||||
email: "", | email: "", | ||||
code: "", | |||||
}); | }); | ||||
const loginData4 = ref({ | const loginData4 = ref({ | ||||
oldPassword: "", | |||||
verifyCode: "", | |||||
password: "", | password: "", | ||||
confirmPassword4: "", | confirmPassword4: "", | ||||
}); | }); | ||||
@@ -570,6 +692,9 @@ const loginData5 = ref({ | |||||
newPwd: "", | newPwd: "", | ||||
confirmNewPwd: "", | confirmNewPwd: "", | ||||
}); | }); | ||||
const loginData6 = ref({ | |||||
SMSCode: "", | |||||
}); | |||||
const loginRules = ref({ | const loginRules = ref({ | ||||
email: [ | email: [ | ||||
@@ -636,7 +761,7 @@ function loginFlag(type: number) { | |||||
*/ | */ | ||||
function saveInfo(data: any) { | function saveInfo(data: any) { | ||||
const userInfo = JSON.stringify({ | const userInfo = JSON.stringify({ | ||||
email: data.email, | |||||
email: data.phone, | |||||
password: data.password, | password: data.password, | ||||
}); | }); | ||||
// 将用户信息加密 | // 将用户信息加密 | ||||
@@ -665,18 +790,21 @@ function getInfo() { | |||||
function emailValidator(rule: any, value: any, callback: any) { | function emailValidator(rule: any, value: any, callback: any) { | ||||
const msg = | const msg = | ||||
currentLan.value == "zh-cn" | currentLan.value == "zh-cn" | ||||
? "邮箱不能为空!" | |||||
? "手机号不能为空!" | |||||
: "The E-amil can not be empty"; | : "The E-amil can not be empty"; | ||||
const msg2 = | const msg2 = | ||||
currentLan.value == "zh-cn" ? "邮箱格式不正确!" : "Incorrect email format"; | |||||
currentLan.value == "zh-cn" | |||||
? "手机号格式不正确!" | |||||
: "Incorrect email format"; | |||||
const phoneReg = /^[1][3-9]\d{9}$/; | |||||
const emailReg = | 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,}))$/; | /^(([^<>()[\]\\.,;:\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 (!value) { | if (!value) { | ||||
callback(new Error(msg)); | callback(new Error(msg)); | ||||
} else if (!emailReg.test(value)) { | |||||
} else if (!phoneReg.test(value)) { | |||||
callback(new Error(msg2)); | callback(new Error(msg2)); | ||||
} else { | } else { | ||||
callback(); | callback(); | ||||
@@ -773,7 +901,7 @@ function handleLogin() { | |||||
loginFormRef.value.validate((val: any) => { | loginFormRef.value.validate((val: any) => { | ||||
if (val) { | if (val) { | ||||
const data = { | const data = { | ||||
email: loginData.value.email, | |||||
phone: loginData.value.email, | |||||
password: loginData.value.password, | password: loginData.value.password, | ||||
code: loginData.value.verifyCode, | code: loginData.value.verifyCode, | ||||
}; | }; | ||||
@@ -795,7 +923,7 @@ function handleRegister() { | |||||
loginFormRef.value.validate((val: any) => { | loginFormRef.value.validate((val: any) => { | ||||
if (val) { | if (val) { | ||||
const data = { | const data = { | ||||
email: loginData2.value.email, | |||||
phone: loginData2.value.email, | |||||
password: loginData2.value.password, | password: loginData2.value.password, | ||||
}; | }; | ||||
isRegistering.value = true; | isRegistering.value = true; | ||||
@@ -815,17 +943,19 @@ function handleRegister() { | |||||
function sendEmailforgetPwd() { | function sendEmailforgetPwd() { | ||||
const msg = | const msg = | ||||
currentLan.value == "zh-cn" | currentLan.value == "zh-cn" | ||||
? "确认信息已发送至您的邮箱,请注意查收" | |||||
: "An email has been send to you, Please pay attention to confirm"; | |||||
? "短信验证码已发送至您的手机,请注意查收" | |||||
: "The SMS verification code has been sent to your mobile phone, please check it"; | |||||
loginFormRef.value.validate(async (val: any) => { | loginFormRef.value.validate(async (val: any) => { | ||||
if (val) { | if (val) { | ||||
const data = { | const data = { | ||||
email: loginData3.value.email, | |||||
phone: loginData3.value.email, | |||||
code: loginData3.value.code, | |||||
}; | }; | ||||
await sendUpdPwdEmailApi(data.email) | |||||
await sendUpdPwdEmailApi(data) | |||||
.then((res) => { | .then((res) => { | ||||
console.log(res, "res"); | console.log(res, "res"); | ||||
ElMessage.success(msg); | ElMessage.success(msg); | ||||
isLogin.value = 4; | |||||
}) | }) | ||||
.catch((err) => { | .catch((err) => { | ||||
console.log(err, "err"); | console.log(err, "err"); | ||||
@@ -878,14 +1008,20 @@ function resetPwdForm() { | |||||
loginFormRef.value.validate(async (val: any) => { | loginFormRef.value.validate(async (val: any) => { | ||||
if (val) { | if (val) { | ||||
try { | try { | ||||
const res = await resetPwdFormApi({ | |||||
oldpwd: loginData4.value.oldPassword, | |||||
newpwd: loginData4.value.password, | |||||
const res = await doUpdPassApi({ | |||||
phone: loginData3.value.email, | |||||
code: loginData4.value.verifyCode, | |||||
pwd: loginData4.value.password, | |||||
}); | }); | ||||
localStorage.removeItem("AccessToken"); | localStorage.removeItem("AccessToken"); | ||||
loginData.value.password = ""; | loginData.value.password = ""; | ||||
isLogin.value = 1; | isLogin.value = 1; | ||||
router.push({ path: "login", query: {} }); | |||||
ElMessage.success( | |||||
currentLan.value == "zh-cn" | |||||
? "重置密码成功!" | |||||
: "Reset password successfully" | |||||
); | |||||
// router.push({ path: "login", query: {} }); | |||||
} catch (error: any) { | } catch (error: any) { | ||||
ElMessage.error(error.message); | ElMessage.error(error.message); | ||||
console.log(error); | console.log(error); | ||||
@@ -920,16 +1056,16 @@ function getCode() { | |||||
*/ | */ | ||||
async function doRegister(data: object) { | async function doRegister(data: object) { | ||||
const msg = | const msg = | ||||
currentLan.value == "zh-cn" | |||||
? "确认信息已发送至您的邮箱,请注意查收" | |||||
: "An email has been send to you, Please pay attention to confirm"; | |||||
currentLan.value == "zh-cn" ? "注册成功!" : "Registered successfully"; | |||||
await register(data) | await register(data) | ||||
.then((res) => { | .then((res) => { | ||||
console.log(res, "res"); | console.log(res, "res"); | ||||
isRegistering.value = false; | isRegistering.value = false; | ||||
ElMessage.success(msg); | ElMessage.success(msg); | ||||
isLogin.value = 1; | |||||
// 注册成功将账号密码保存到本地 | // 注册成功将账号密码保存到本地 | ||||
saveInfo(data); | saveInfo(data); | ||||
router.go(0); | |||||
}) | }) | ||||
.catch((err) => { | .catch((err) => { | ||||
// 注册失败刷新验证码 | // 注册失败刷新验证码 | ||||
@@ -996,8 +1132,16 @@ onMounted(() => { | |||||
getCode(); | getCode(); | ||||
getInfo(); | getInfo(); | ||||
// 重置密码 | // 重置密码 | ||||
if (router.currentRoute.value.params.type) { | |||||
isLogin.value = Number(router.currentRoute.value.params.type); | |||||
// if (router.currentRoute.value.params.type) { | |||||
// // isLogin.value = Number(router.currentRoute.value.params.type); | |||||
// isLogin.value = 4; | |||||
// } | |||||
// if (router.currentRoute.value.params.type) { | |||||
// // isLogin.value = Number(router.currentRoute.value.params.type); | |||||
// isLogin.value = 4; | |||||
// } | |||||
if (route.query.type) { | |||||
isLogin.value = 4; | |||||
} | } | ||||
//有resetPwd则说明是重置密码邮件来的 | //有resetPwd则说明是重置密码邮件来的 | ||||
if (route.query.resetPwd) { | if (route.query.resetPwd) { | ||||
@@ -1011,6 +1155,8 @@ onMounted(() => { | |||||
.login-container { | .login-container { | ||||
position: relative; | position: relative; | ||||
width: 100%; | width: 100%; | ||||
// width: 1920px; | |||||
// height: 1080px; | |||||
min-height: 100%; | min-height: 100%; | ||||
overflow: hidden; | overflow: hidden; | ||||
// background-color: #2d3a4b; | // background-color: #2d3a4b; | ||||
@@ -1055,6 +1201,15 @@ onMounted(() => { | |||||
&:hover { | &:hover { | ||||
backdrop-filter: blur(7px); | backdrop-filter: blur(7px); | ||||
} | } | ||||
.items-center { | |||||
padding: 20px; | |||||
font-size: 30px; | |||||
} | |||||
.el-form-item { | |||||
.text-white { | |||||
padding: 8px; | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
@@ -18,6 +18,11 @@ | |||||
alt="" | alt="" | ||||
/> | /> | ||||
</div> | </div> | ||||
<div class="container"> | |||||
<div class="box red"></div> | |||||
<div class="box white"></div> | |||||
<div class="box green"></div> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -93,3 +98,40 @@ onMounted(() => { | |||||
} | } | ||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss" scoped> | |||||
.container { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
width: 80px; | |||||
height: 20px; | |||||
perspective: 500px; | |||||
transition: transform 0.5s; | |||||
} | |||||
.box { | |||||
width: 20px; | |||||
height: 20px; | |||||
transition: transform 0.5s; | |||||
transform-style: preserve-3d; | |||||
} | |||||
.red { | |||||
background-color: red; | |||||
} | |||||
.white { | |||||
background-color: white; | |||||
transform: translateZ(20px); | |||||
} | |||||
.green { | |||||
background-color: green; | |||||
transform: translateZ(-20px); | |||||
} | |||||
.container:hover .box { | |||||
transform: rotateY(180deg); | |||||
} | |||||
</style> |