添加忘记密码
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
.retrieve-password,
|
||||
.register,
|
||||
.login {
|
||||
width: 100%;
|
||||
@@ -6,6 +7,7 @@
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
.retrieve-password > .left,
|
||||
.register > .left,
|
||||
.login > .left {
|
||||
flex: 1;
|
||||
@@ -13,12 +15,14 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.retrieve-password > .left > .bg,
|
||||
.register > .left > .bg,
|
||||
.login > .left > .bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.retrieve-password > .left > .logo,
|
||||
.register > .left > .logo,
|
||||
.login > .left > .logo {
|
||||
position: absolute;
|
||||
@@ -27,12 +31,14 @@
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.retrieve-password > .left > .logo > span,
|
||||
.register > .left > .logo > span,
|
||||
.login > .left > .logo > span {
|
||||
font-weight: 600;
|
||||
font-size: 3.3rem;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
.retrieve-password > .right,
|
||||
.register > .right,
|
||||
.login > .right {
|
||||
width: 99rem;
|
||||
@@ -44,11 +50,13 @@
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.retrieve-password > .right > .top,
|
||||
.register > .right > .top,
|
||||
.login > .right > .top {
|
||||
display: flex;
|
||||
padding: 3rem 0 0 3rem;
|
||||
}
|
||||
.retrieve-password > .right > .top > .back,
|
||||
.register > .right > .top > .back,
|
||||
.login > .right > .top > .back {
|
||||
width: 5rem;
|
||||
@@ -58,6 +66,7 @@
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.retrieve-password > .right > .box,
|
||||
.register > .right > .box,
|
||||
.login > .right > .box {
|
||||
min-width: 50rem;
|
||||
@@ -68,17 +77,20 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.retrieve-password > .right > .box > img,
|
||||
.register > .right > .box > img,
|
||||
.login > .right > .box > img {
|
||||
width: auto;
|
||||
height: 12rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.retrieve-password > .right > .box > .visible-code,
|
||||
.register > .right > .box > .visible-code,
|
||||
.login > .right > .box > .visible-code {
|
||||
margin-top: 1.7rem;
|
||||
margin-bottom: 7.2rem;
|
||||
}
|
||||
.retrieve-password > .right > .box > .title,
|
||||
.register > .right > .box > .title,
|
||||
.login > .right > .box > .title {
|
||||
font-weight: 600;
|
||||
@@ -88,12 +100,14 @@
|
||||
justify-content: center;
|
||||
color: #252727;
|
||||
}
|
||||
.retrieve-password > .right > .box > .title:deep(*),
|
||||
.register > .right > .box > .title:deep(*),
|
||||
.login > .right > .box > .title:deep(*) {
|
||||
margin-left: 1rem;
|
||||
font-family: LBold;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
.retrieve-password > .right > .box > .tip,
|
||||
.register > .right > .box > .tip,
|
||||
.login > .right > .box > .tip {
|
||||
font-weight: 400;
|
||||
@@ -102,16 +116,19 @@
|
||||
color: #666;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form),
|
||||
.register > .right > .box:deep(.el-form),
|
||||
.login > .right > .box:deep(.el-form) {
|
||||
margin-top: 5rem;
|
||||
width: 100%;
|
||||
font-family: Regular;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .el-form-item,
|
||||
.register > .right > .box:deep(.el-form) .el-form-item,
|
||||
.login > .right > .box:deep(.el-form) .el-form-item {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .el-form-item__label,
|
||||
.register > .right > .box:deep(.el-form) .el-form-item__label,
|
||||
.login > .right > .box:deep(.el-form) .el-form-item__label {
|
||||
color: #252727;
|
||||
@@ -119,6 +136,7 @@
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: Medium;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .el-input,
|
||||
.register > .right > .box:deep(.el-form) .el-input,
|
||||
.login > .right > .box:deep(.el-form) .el-input {
|
||||
--el-input-height: 5rem;
|
||||
@@ -127,6 +145,7 @@
|
||||
--el-border-color: #dfdfdf;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .forgetPassword,
|
||||
.register > .right > .box:deep(.el-form) .forgetPassword,
|
||||
.login > .right > .box:deep(.el-form) .forgetPassword {
|
||||
margin-top: -1.2rem;
|
||||
@@ -137,27 +156,32 @@
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .privacy,
|
||||
.register > .right > .box:deep(.el-form) .privacy,
|
||||
.login > .right > .box:deep(.el-form) .privacy {
|
||||
--el-checkbox-height: auto;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .privacy .el-checkbox__label,
|
||||
.register > .right > .box:deep(.el-form) .privacy .el-checkbox__label,
|
||||
.login > .right > .box:deep(.el-form) .privacy .el-checkbox__label {
|
||||
font-size: 1.6rem;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span,
|
||||
.register > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span,
|
||||
.login > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .el-form-item__error,
|
||||
.register > .right > .box:deep(.el-form) .el-form-item__error,
|
||||
.login > .right > .box:deep(.el-form) .el-form-item__error {
|
||||
padding-top: 1px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.retrieve-password > .right > .box:deep(.el-form) .submit,
|
||||
.register > .right > .box:deep(.el-form) .submit,
|
||||
.login > .right > .box:deep(.el-form) .submit {
|
||||
width: 100%;
|
||||
@@ -169,6 +193,7 @@
|
||||
font-weight: 600;
|
||||
font-family: SemiBold;
|
||||
}
|
||||
.retrieve-password > .right > .box > .tip-2,
|
||||
.register > .right > .box > .tip-2,
|
||||
.login > .right > .box > .tip-2 {
|
||||
font-weight: 400;
|
||||
@@ -176,12 +201,14 @@
|
||||
color: #666;
|
||||
font-family: Regular;
|
||||
}
|
||||
.retrieve-password > .right > .box > .tip-2:deep(span),
|
||||
.register > .right > .box > .tip-2:deep(span),
|
||||
.login > .right > .box > .tip-2:deep(span) {
|
||||
text-decoration: underline;
|
||||
color: #FF7A50;
|
||||
cursor: pointer;
|
||||
}
|
||||
.retrieve-password > .right > .box > .other-login,
|
||||
.register > .right > .box > .other-login,
|
||||
.login > .right > .box > .other-login {
|
||||
margin-top: 5rem;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
.retrieve-password,
|
||||
.register,
|
||||
.login {
|
||||
width: 100%;
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="forgetPassword">
|
||||
<span>{{ $t('Login.forgetPassword') }}</span>
|
||||
<span @click="onForgetPassword">{{ $t('Login.forgetPassword') }}</span>
|
||||
</div>
|
||||
<el-form-item prop="privacy" class="privacy">
|
||||
<el-checkbox v-model="formData.privacy">
|
||||
@@ -92,6 +92,9 @@
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
const onForgetPassword = () => {
|
||||
router.push({ name: 'retrievepass' })
|
||||
}
|
||||
const visibleCodeRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate?.((valid) => {
|
||||
|
||||
121
src/views/login/retrieve-password.vue
Normal file
121
src/views/login/retrieve-password.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="retrieve-password">
|
||||
<div class="left">
|
||||
<img class="bg" src="@/assets/images/login/left-bg.png" />
|
||||
<img class="logo" src="@/assets/images/logo-1.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="top">
|
||||
<button class="back" @click="onBack">
|
||||
<svg-icon name="arrow-left" size="37" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="box">
|
||||
<img src="@/assets/images/login/elephant.png" />
|
||||
<template v-if="!isVisible">
|
||||
<div class="title">{{ $t('Login.retrievePassword') }}</div>
|
||||
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
||||
<el-form-item :label="$t('Login.email')" prop="email">
|
||||
<el-input
|
||||
v-model="formData.email"
|
||||
:placeholder="$t('Login.enterEmail')"
|
||||
name="email"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('Login.password')" prop="password">
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
:placeholder="$t('Login.enterPassword')"
|
||||
type="password"
|
||||
show-password
|
||||
name="password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<br />
|
||||
<br />
|
||||
<el-form-item>
|
||||
<el-button class="submit" type="primary" @click="onSubmit">{{
|
||||
$t('submit')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<visible-code
|
||||
v-show="isVisible"
|
||||
type="FORGOT_PWD"
|
||||
ref="visibleCodeRef"
|
||||
:email="formData.email"
|
||||
@submit="onVerifyCode"
|
||||
/>
|
||||
<other-login />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import md5 from 'md5'
|
||||
import { ForgetPassword } from '@/api/login'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { validateEmail, validatePass } from './tools'
|
||||
import OtherLogin from './other-login.vue'
|
||||
import VisibleCode from './visible-code.vue'
|
||||
import { useUserInfoStore } from '@/stores'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const router = useRouter()
|
||||
const ruleForm = reactive({
|
||||
email: [{ validator: validateEmail, trigger: 'blur' }],
|
||||
password: [{ validator: validatePass, trigger: 'blur' }]
|
||||
})
|
||||
const isVisible = ref(false)
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
const formRef = ref(null)
|
||||
const onBack = () => {
|
||||
if (isVisible.value) {
|
||||
isVisible.value = false
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
const visibleCodeRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate?.((valid) => {
|
||||
if (valid) {
|
||||
// console.log('submit!')
|
||||
visibleCodeRef.value?.onSendCode().then(() => {
|
||||
isVisible.value = true
|
||||
})
|
||||
} else {
|
||||
console.warn('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
const onVerifyCode = (code: string) => {
|
||||
// console.log(code)
|
||||
ForgetPassword({
|
||||
email: formData.email,
|
||||
password: md5(formData.password),
|
||||
verificationCode: code
|
||||
})
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
// userInfoStore.setToken(res)
|
||||
// userInfoStore.setUserInfo({
|
||||
// email: formData.email
|
||||
// })
|
||||
// router.push({ name: 'mainInput' })
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn(error)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './less/style.less';
|
||||
</style>
|
||||
@@ -25,7 +25,10 @@
|
||||
const emit = defineEmits(['submit'])
|
||||
const props = defineProps({
|
||||
email: { type: String, required: true },
|
||||
type: { default: 'LOGIN', type: String as () => 'LOGIN' | 'REGISTER' },
|
||||
type: {
|
||||
type: String as () => 'LOGIN' | 'REGISTER' | 'FORGOT_PWD',
|
||||
required: true
|
||||
},
|
||||
password: { type: String, default: '' }
|
||||
})
|
||||
const code = ref('')
|
||||
|
||||
Reference in New Issue
Block a user