<template>
|
<el-container id="portal-layout">
|
<el-header class="portal-layout-header" style="height: 100px;">
|
<div class="portal-layout-header-title">
|
<el-row>
|
<el-col :span="8">
|
<el-image class="portal-layout-header-title-logo" fit="fill" src="/favicon.ico"></el-image>
|
</el-col>
|
<el-col :span="2">
|
</el-col>
|
<el-col :span="14">
|
<p class="portal-layout-header-title-text">
|
{{ $t('message.title') }} | {{ $t('message.retrievepassword') }}
|
</p>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="portal-layout-header-controls">
|
|
</div>
|
</el-header>
|
<el-divider :style="{'background-color':'#eceef9', 'margin':'1px 0px'}"></el-divider>
|
<el-main style="padding: 0px;overflow-y: scroll;">
|
<el-row>
|
<el-col :span="2" align="left"></el-col>
|
<el-col :span="20" align="left">
|
<el-card style="margin: 100px; padding: 50px; background-color: white">
|
<el-steps :active="activestep" finish-status="success">
|
<el-step :title="$t('label.Account')" :icon="icon.User"/>
|
<el-step :title="$t('label.SecurityVerification')" :icon="icon.Lock"/>
|
<el-step :title="$t('label.NewPassword')" :icon="icon.Key"/>
|
<el-step :title="$t('label.Done')" :icon="icon.Finished"/>
|
</el-steps>
|
<div style="padding: 40px;">
|
<el-row v-if="activestep===0">
|
<el-col :span="24" align="center">
|
<el-form size="default" :rules="rules" ref="oneStepForm" v-loading="loading"
|
:model="model">
|
<el-form-item prop="username" :label="$t('label.username')" label-width="135px">
|
<el-input size="default" link maxlength="64"
|
:prefix-icon="icon.User"
|
v-model="model.username" auto-complete="off"
|
style="width: calc(100% - 150px); "
|
:placeholder="`${$t('message.pleaseinput')}${$t('label.username')}!`"></el-input>
|
</el-form-item>
|
<el-form-item prop="verifycode" :label="$t('label.verifycode')"
|
label-width="135px">
|
<el-input size="default" link v-model="model.verifycode" maxlength="64"
|
auto-complete="off"
|
style="width: calc(100% - 150px); "
|
:placeholder="`${$t('message.pleaseinput')}${$t('label.verifycode')}!`"></el-input>
|
<el-image :src="vcUrl" size="default" @click="updateVerifyCode"
|
fit="fill"
|
style="width: 120px; height: 32px;"/>
|
</el-form-item>
|
<el-button type="primary" @click="accountVerify" :icon="icon.CircleCheck"
|
size="default">
|
{{ $t('label.Verify')}}
|
</el-button>
|
</el-form>
|
</el-col>
|
</el-row>
|
<el-row v-else-if="activestep===1">
|
<el-col :span="24" align="center">
|
<el-form size="default" :rules="rules" ref="towStepForm" v-loading="loading"
|
:model="model">
|
<el-form-item prop="username" :label="$t('label.username')" label-width="135px">
|
<el-input size="default" link maxlength="64"
|
:prefix-icon="icon.User"
|
v-model="model.username" auto-complete="off"
|
style="width: calc(100% - 150px); "
|
:placeholder="`${$t('message.pleaseinput')}${$t('label.username')}!`"></el-input>
|
</el-form-item>
|
<el-form-item prop="verifycode" :label="$t('label.verifycode')"
|
label-width="135px">
|
<el-input size="default" link v-model="model.verifycode" maxlength="64"
|
auto-complete="off"
|
style="width: calc(100% - 150px); "
|
:placeholder="`${$t('message.pleaseinput')}${$t('label.verifycode')}!`"></el-input>
|
<el-image :src="vcUrl" size="default" @click="updateVerifyCode"
|
fit="fill"
|
style="width: 120px; height: 32px;"/>
|
</el-form-item>
|
<el-button type="primary" @click="securityVerify" :icon="icon.CircleCheck"
|
size="default">
|
{{ $t('label.Verify')}}
|
</el-button>
|
</el-form>
|
</el-col>
|
</el-row>
|
<el-row v-else-if="activestep===2">
|
<el-col :span="24" align="center">
|
<el-form :rules="rules" ref="threeStepForm" v-loading="loading"
|
:model="model" size="default">
|
<el-form-item prop="newpassword" :label="$t('label.newpassword')"
|
label-width="135px">
|
<el-input size="default" type="password" maxlength="64"
|
:prefix-icon="icon.Key"
|
v-model="model.newpassword" auto-complete="off"
|
style="width: calc(100% - 150px); "
|
:placeholder="`${$t('message.pleaseinput')}${$t('label.newpassword')}！`"></el-input>
|
</el-form-item>
|
<el-form-item prop="confirmpassword" :label="$t('label.confirmpassword')"
|
label-width="135px">
|
<el-input size="default" type="password" maxlength="64"
|
:prefix-icon="icon.Key"
|
v-model="model.confirmpassword" auto-complete="off"
|
style="width: calc(100% - 150px); "
|
:placeholder="`${$t('message.pleaseinput')}${$t('label.confirmpassword')}！`"></el-input>
|
</el-form-item>
|
<el-button type="primary" @click="resetPassword" :icon="icon.CircleCheck"
|
size="default">
|
{{$t('label.Verify')}}
|
</el-button>
|
</el-form>
|
</el-col>
|
</el-row>
|
<el-row v-else-if="activestep===3">
|
<el-col :span="24" align="center">
|
<svg-icon width="100" height="100" name="done"></svg-icon>
|
<br/>
|
<br/>
|
<br/>
|
<el-link type="success" @click="finishRetrievePassword"
|
:icon="icon.CircleCheck"
|
size="default" link>
|
{{$t('button.ReLogin')}}
|
</el-link>
|
</el-col>
|
</el-row>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="2" align="left"></el-col>
|
</el-row>
|
</el-main>
|
<el-footer class="portal-layout-footer" style="height: 40px; bottom: 0px">
|
<div class="portal-layout-footer-context">
|
<p>Copyright © 2021 www.wisdomdeliver.com {{ $t('message.AllRightReserved')}} | 津ICP备2021008314号-1 </p>
|
</div>
|
</el-footer>
|
</el-container>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs} from "vue";
|
import {getVerifyCodeUrl} from "@/api/admin/security";
|
|
export default {
|
name: "RetrievePassword",
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const state = reactive({
|
loading: false,
|
activestep: 0,
|
vcUrl: "",
|
model: {
|
username: '',
|
password: '',
|
newpassword: '',
|
confirmpassword: '',
|
verifycode: ''
|
},
|
rules: {
|
username: [{
|
required: true,
|
message: `${proxy.$t('message.isrequirded', {name: proxy.$t('label.username')})}`,
|
trigger: 'blur'
|
}],
|
newpassword: [{
|
required: true,
|
message: `${proxy.$t('message.isrequirded', {name: proxy.$t('label.newpassword')})}`,
|
trigger: 'blur'
|
}],
|
confirmpassword: [{
|
required: true,
|
message: `${proxy.$t('message.isrequirded', {name: proxy.$t('label.confirmpassword')})}`,
|
trigger: 'blur'
|
}],
|
verifycode: [{
|
required: true,
|
message: `${proxy.$t('message.isrequirded', {name: proxy.$t('label.verifycode')})}`,
|
trigger: 'blur'
|
}]
|
}
|
});
|
|
onMounted(() => {
|
Init();
|
LoadData();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
updateVerifyCode();
|
};
|
const LoadData = () => {
|
|
};
|
const key = () => {
|
return Math.random();
|
};
|
const updateVerifyCode = () => {
|
state.vcUrl = getVerifyCodeUrl();
|
state.model.verifycode = '';
|
};
|
const accountVerify = () => {
|
proxy.$refs.oneStepForm.validate((valid) => {
|
if (valid) {
|
state.loading = true;
|
state.activestep++;
|
state.loading = false;
|
} else {
|
return false;
|
}
|
});
|
}
|
const securityVerify = () => {
|
proxy.$refs.towStepForm.validate((valid) => {
|
if (valid) {
|
state.loading = true;
|
state.activestep++;
|
state.loading = false;
|
} else {
|
return false;
|
}
|
});
|
}
|
const resetPassword = () => {
|
proxy.$refs.threeStepForm.validate((valid) => {
|
if (valid) {
|
state.loading = true;
|
state.activestep++;
|
state.loading = false;
|
} else {
|
return false;
|
}
|
});
|
}
|
const finishRetrievePassword = () => {
|
proxy.$router.replace("/admin/login");
|
}
|
|
return {
|
...toRefs(state), key, icon,
|
updateVerifyCode,
|
accountVerify,
|
securityVerify,
|
resetPassword,
|
finishRetrievePassword,
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
