121 lines
3.2 KiB
Vue
121 lines
3.2 KiB
Vue
|
<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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</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()
|
||
|
|
const ruleForm = reactive({
|
||
|
|
email: [{ validator: validateEmail, trigger: 'change' }],
|
||
|
|
password: [{ validator: validatePass, trigger: 'change' }]
|
||
|
|
})
|
||
|
|
const isVisible = ref(false)
|
||
|
|
const showPasswordTip = 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)
|
||
|
|
ForgotPassword({
|
||
|
|
email: formData.email,
|
||
|
|
newPassword: md5(formData.password),
|
||
|
|
verificationCode: code
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
if (res) router.push({ name: 'login' })
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.warn(error)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
@import './less/style.less';
|
||
|
|
</style>
|