uk_front/components/resetPasswordDialog.vue

<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('/uk-api/uk/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>