登录页面
This commit is contained in:
李志鹏
@@ -1,120 +1,183 @@
|
||||
<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" />
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="ruleForm"
|
||||
label-position="top"
|
||||
ref="form1Ref"
|
||||
v-show="index === 0"
|
||||
>
|
||||
<div class="title">Please enter your email address below to verify your identity.</div>
|
||||
<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 class="submit-item">
|
||||
<button class="submit" type="submit" custom="black" @click.prevent="onSubmit1">
|
||||
SUBMIT
|
||||
</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">
|
||||
<password-tip :value="formData.password" v-show="showPasswordTip" />
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
:placeholder="$t('Login.enterPassword')"
|
||||
type="password"
|
||||
show-password
|
||||
name="password"
|
||||
@blur="showPasswordTip = false"
|
||||
@focus="showPasswordTip = true"
|
||||
/>
|
||||
</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>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="verify-box" v-if="index === 1">
|
||||
<email-verify
|
||||
type="FORGOT_PWD"
|
||||
:email="formData.email"
|
||||
@submit-email-code="onVerifyCode"
|
||||
:is-show-other-login="false"
|
||||
/>
|
||||
</div>
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="ruleForm"
|
||||
label-position="top"
|
||||
ref="form2Ref"
|
||||
v-show="index === 2"
|
||||
>
|
||||
<div class="title">
|
||||
Enter a new password for <br />
|
||||
<span>{{ formData.email }}</span>
|
||||
</div>
|
||||
<el-form-item :label="$t('Login.password')" prop="password">
|
||||
<password-tip :value="formData.password" v-show="showPasswordTip" />
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
:placeholder="$t('Login.enterPassword')"
|
||||
type="password"
|
||||
show-password
|
||||
name="password"
|
||||
@blur="showPasswordTip = false"
|
||||
@focus="showPasswordTip = true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="password-warning">
|
||||
<span class="icon"><svg-icon name="warning" size="12" /></span>
|
||||
<span class="label">You must satisfy ALL password conditions to register.</span>
|
||||
</div>
|
||||
<el-form-item :label="$t('Login.passwordConfirmation')" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="formData.confirmPassword"
|
||||
:placeholder="$t('Login.enterPasswordAgain')"
|
||||
type="password"
|
||||
show-password
|
||||
name="password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="submit-item">
|
||||
<button class="submit" type="submit" custom="black" @click.prevent="onSubmit2">
|
||||
SUBMIT
|
||||
</button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import md5 from 'md5'
|
||||
import { ForgotPassword } from '@/api/user'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { validateEmail, validatePass } from './tools'
|
||||
import OtherLogin from './other-login.vue'
|
||||
import emailVerify from './email-verify.vue'
|
||||
import PasswordTip from './password-tip.vue'
|
||||
import { useUserInfoStore } from '@/stores'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const router = useRouter()
|
||||
import EmailVerify from './email-verify.vue'
|
||||
const emit = defineEmits(['back'])
|
||||
const validateConfirmPassword = (rule: any, value: string, callback: any) => {
|
||||
if (value !== formData.password) {
|
||||
callback(new Error('Passwords do not match'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const index = ref(0)
|
||||
const ruleForm = reactive({
|
||||
email: [{ validator: validateEmail, trigger: 'change' }],
|
||||
password: [{ validator: validatePass, trigger: 'change' }]
|
||||
password: [{ validator: validatePass, trigger: 'change' }],
|
||||
confirmPassword: [{ validator: validateConfirmPassword, trigger: 'change' }]
|
||||
})
|
||||
const isVisible = ref(false)
|
||||
const showPasswordTip = ref(false)
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
code: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
const formRef = ref(null)
|
||||
const onBack = () => {
|
||||
if (isVisible.value) {
|
||||
isVisible.value = false
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
const form1Ref = ref(null)
|
||||
const visibleCodeRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate?.((valid) => {
|
||||
const form2Ref = ref(null)
|
||||
const onSubmit1 = () => {
|
||||
form1Ref.value?.validate?.((valid) => {
|
||||
if (valid) {
|
||||
// console.log('submit!')
|
||||
visibleCodeRef.value?.onSendCode().then(() => {
|
||||
isVisible.value = true
|
||||
})
|
||||
index.value = 1
|
||||
} else {
|
||||
console.warn('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
const onSubmit2 = () => {
|
||||
form2Ref.value?.validate?.((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
email: formData.email,
|
||||
code: formData.code,
|
||||
password: md5(formData.password)
|
||||
}
|
||||
console.log(data)
|
||||
emit('back')
|
||||
} else {
|
||||
console.warn('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
const onVerifyCode = (code: string) => {
|
||||
// console.log(code)
|
||||
ForgotPassword({
|
||||
email: formData.email,
|
||||
newPassword: md5(formData.password),
|
||||
verificationCode: code
|
||||
})
|
||||
.then((res) => {
|
||||
if (res) router.push({ name: 'login' })
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn(error)
|
||||
})
|
||||
if (!code) return
|
||||
formData.code = code
|
||||
index.value = 2
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './less/style.less';
|
||||
|
||||
.retrieve-password {
|
||||
flex: 1;
|
||||
&:deep(.el-form) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-form-item.submit-item {
|
||||
margin-top: auto;
|
||||
}
|
||||
.el-input {
|
||||
--el-input-height: 4.8rem;
|
||||
}
|
||||
.el-form-item:nth-last-child(2) {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
color: #585858;
|
||||
margin-top: auto;
|
||||
margin-bottom: 3rem;
|
||||
> span {
|
||||
font-family: KaiseiOpti-Medium;
|
||||
color: #252727;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .verify-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
&:deep(.email-verify) {
|
||||
> .tip {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
> .input-code {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
> .verify {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user