SEEC-Portal-Front/pages/resetPassword.vue

<template>
  <div class="page-container login-container">
    <el-card class="login-card">
      <h2 class="login-card__title login-card__item">重置密码</h2>
      <el-input ref="password" v-model="password" type="password" placeholder="请输入密码, 长度为6-20个字符" maxlength="20" class="login-card__item"></el-input>
      <el-input ref="passwordConfirm" v-model="passwordConfirm" type="password" placeholder="请再次输入密码" maxlength="20" class="login-card__item"></el-input>
      <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
      <el-input ref="identifyCode" v-model="identifyCode" placeholder="请输入验证码" maxlength="6" class="login-card__short-item"></el-input>
      <el-button :disabled="disabled" @click="sendMessage" class="login-card__right-button">{{buttonText}}</el-button>
      <el-button type="primary" class="login-card__item" @click="resetPassword" :loading="loading" round>重置密码</el-button>
      <div class="login-card__bottom"><router-link to="/login" class="login-card__link">记得密码？前往登录</router-link></div>
    </el-card>
    <div class="clear"></div>
    <router-link to="/"><img src="/image/seec-logo--horizontal.png" class="login-card__logo"/></router-link>
  </div>
</template>

<script>
export default {
  name: 'resetPassword',
  layout: 'blank',
  data () {
    return {
      phone: '',
      password: '',
      identifyCode: '',
      passwordConfirm: '',
      buttonText: '获取验证码',
      disabled: false,
      loading: false,
      email: ''
    }
  },
  methods: {
    sendMessage () {
      if (this.phone.length < 11) {
        if (this.phone.length === 0) {
          this.$message({
            showClose: true,
            message: '请填写手机号码',
            type: 'error'
          })
        } else {
          this.$message({
            showClose: true,
            message: '手机号码格式有误',
            type: 'error'
          })
        }
        this.$refs.phone.focus()
        return
      }
      this.disabled = true
      let time = 60
      const myScroll = setInterval(() => {
        time--
        if (time >= 0) {
          this.buttonText = time + 's后可重发'
        } else {
          this.buttonText = '获取验证码'
          this.disabled = false // 倒计时结束能够重新点击发送的按钮
          clearTimeout(myScroll) // 清除定时器
          time = 60 // 设置循环重新开始条件
        }
      }, 1000)
      this.$api.post('/user/sendMessage', { phone: this.phone }).then(res => {
        if (res.data.code === 0) {
          this.$message({
            showClose: true,
            message: '发送成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    checkValid () {
      if (this.password.length < 6) {
        if (this.password.length === 0) {
          this.$message({
            showClose: true,
            message: '密码不得为空',
            type: 'error'
          })
        } else {
          this.$message({
            showClose: true,
            message: '密码长度不足',
            type: 'error'
          })
        }
        this.$refs.password.focus()
        return false
      }
      if (this.password.length > 20) {
        this.$message({
          showClose: true,
          message: '密码过长',
          type: 'error'
        })
        this.$refs.password.focus()
        return false
      }

      if (this.passwordConfirm !== this.password) {
        this.$message({
          showClose: true,
          message: '密码前后不一致',
          type: 'error'
        })
        this.$refs.passwordConfirm.focus()
        return false
      }

      if (this.phone.length !== 11) {
        if (this.phone.length === 0) {
          this.$message({
            showClose: true,
            message: '手机号码不得为空',
            type: 'error'
          })
        } else {
          this.$message({
            showClose: true,
            message: '手机号码格式有误',
            type: 'error'
          })
        }

        this.$refs.phone.focus()
        return false
      }

      if (this.identifyCode.length === 0) {
        this.$message({
          showClose: true,
          message: '未填写验证码',
          type: 'error'
        })
        this.$refs.identifyCode.focus()
        return false
      }
      if (this.identifyCode.length !== 6) {
        this.$message({
          showClose: true,
          message: '验证码长度错误',
          type: 'error'
        })
        this.$refs.identifyCode.focus()
        return false
      }

      return true
    },
    resetPassword () {
      this.loading = true
      const isValid = this.checkValid()

      if (!isValid) {
        return
      }

      this.$api.$post('/user/resetPassword', {
        phone: this.phone,
        password: this.password,
        identifyCode: this.identifyCode
      }).then((res) => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: '重置成功，前往登录',
            type: 'success'
          })
          this.$router.push('/login')
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }
      )
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~/assets/css/login.scss';
</style>