<template> <el-dialog :lock-scroll="false" :visible.sync="resetDialogVisible" width="700px"> <el-page-header @back="goBack"></el-page-header> <div class="dialog-content"> <p>Reset Password</p> <p> Enter your email address and we'll send a link to reset your password. </p> <el-input v-model="email" placeholder="Email"></el-input> <el-button plain class="reset-btn" @click="debounceSendEmail" :disabled="disabledFlag"> {{ butonContent }} </el-button> </div> <reset-password-mail ref="resetPasswordMail" :mailData="mailData" v-show="false" /> </el-dialog> </template> <script> import AES from '~/plugins/AES.js' import _ from 'lodash' export default { name: 'resetPasswordDialog', data() { return { disabledFlag: false, resetDialogVisible: false, email: '', butonContent: 'SEND RESET EMAIL', time: 60, timer: null, mailData: { Url: '', name: '', email: '', }, } }, watch: { email: { handler(newValue, oldValue) { if (newValue) { let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ if (reg.test(this.email)) { this.disabledFlag = false } else { this.disabledFlag = true } this.getmailData() } }, immediate: true, }, }, mounted() { this.getmailData() }, methods: { goBack() { this.resetDialogVisible = false this.$emit('openLoginDialog') }, getmailData() { this.mailData.Url = location.origin + '/setNewPassword' this.mailData.name = this.email this.mailData.email = AES.encrypt(this.email + '&t='+ Date.now()) }, debounceSendEmail:_.debounce(function () { this.sendEmail() }, 200), sendEmail() { if (this.email) { this.disabledFlag = true this.getmailData() this.timer = setInterval(() => { if (this.time == 0) { this.resetData() } else { this.butonContent = 'Resend Passwords in ' + this.time + ' s' this.time-- } }, 1000) this.$axios .post('au/resetemail', { email: this.email, content: this.$refs.resetPasswordMail.$el.innerHTML, }) .then(res => { if (res.code == 1) { this.resetData() this.time = 60 this.$notify({ title: 'success', message: 'Sending an email successfully', type: 'success', duration: 3000, }) } }) .catch(() => { this.resetData() this.time = 60 // this.$message.error(error.response.data.msg); }) } }, resetData(boolean = false) { clearInterval(this.timer) this.disabledFlag = boolean this.butonContent = 'SEND RESET EMAIL' }, }, beforeDestroy() { clearInterval(this.timer) }, } </script> <style lang="scss" scoped> :deep(.el-dialog__header) { border-radius: 3px; border-top: 4px solid #00213b; position: relative; .el-dialog__headerbtn { position: absolute; top: -33px; right: 0; .el-icon-close:before { content: '\e78d'; color: #fff; font-size: 22px; } } } .dialog-content { font-family: Proxima Nova; padding: 10px 60px; text-align: center; p:nth-of-type(1) { font-size: 26px; font-weight: bold; color: #00213b; margin-bottom: 21px; } p:nth-of-type(2) { font-size: 16px; color: #666666; line-height: 24px; margin-bottom: 27px; } :deep(.el-input .el-input__inner) { height: 50px; line-height: 50px; border-radius: 6px; // background: #f1f1f1; // border: 0; } .reset-btn { font-family: Proxima Nova; background-color: #e90000; width: 220px; height: 50px; color: #fff; font-size: 14px; border-radius: 6px; margin-top: 24px; font-weight: 600; } } :deep(.el-page-header__left) { .el-page-header__title, .el-icon-back { font-family: Proxima Nova; font-size: 16px; color: #666666; font-weight: bold; } } </style>