sso-ssr/components/mobile/reset/stepNew.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
    </div>
    <div class="f-form">
      <div class="page-part">
        <mt-field placeholder="新密码"
                  type="password"
                  :attr="{ maxlength: 20 }"
                  :state="state.password"
                  @blur.native.capture="validPasswordTip"
                  @input.native="validPassword"
                  v-model="news.password"></mt-field>
        <template v-if="news.password">
          <p class="pwd">密码强度 <em :class="{sm:progress === '弱', md: progress === '中', ld:progress === '强'}"></em> <em :class="{md: progress === '中', ld:progress === '强'}"></em> <em :class="{ld:progress === '强'}"></em> <span :class="{smstep:progress === '弱', mdstep: progress === '中', ldstep:progress === '强'}" v-text="progress">强</span></p>
          <p class="pwd">密码须为8-20字符的英文、数字混合</p>
        </template>
      </div>
      <div class="page-part">
        <mt-field placeholder="确认密码"
                  type="password"
                  :state="state.confirm"
                  auto-complet="off"
                  @blur.native.capture="validConfirm"
                  v-model="news.confirm"></mt-field>
      </div>
      <div class="page-part">
        <mt-button size="large" type="primary" @click="sureAccount('last')">下一步</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-new',
    props: ['tokenId'],
    data () {
      return {
        progress: '',
        state: {
          password: 'error',
          confirm: 'error'
        },
        news: {
          password: '',
          confirm: ''
        }
      }
    },
    methods: {
      // 弹窗处理
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 验证密码强度
      validPassword () {
        let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
        if (reg1.test(this.news.password)) {
          this.progress = '强'
        } else if (reg2.test(this.news.password)) {
          this.progress = '中'
        } else {
          this.progress = '弱'
        }
      },
      // 验证新密码
      validPasswordTip () {
        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
        if (!this.news.password) {
          this.downToast('请输入密码')
          this.state.password = 'error'
        } else {
          if (!reg2.test(this.news.password)) {
            this.downToast('密码须为8-20字符的英文、数字混合')
            this.state.password = 'warning'
          } else {
            this.state.password = 'success'
            if (this.news.confirm) {
              this.validConfirm()
            }
          }
        }
      },
      // 验证密码是否一致
      validConfirm () {
        if (!this.news.confirm) {
          this.downToast('请再次输入密码')
          this.state.confirm = 'error'
        } else {
          if (this.news.confirm === this.news.password) {
            this.state.confirm = 'success'
          } else {
            this.state.confirm = 'warning'
            this.downToast('两次输入密码不一致，请重新输入')
          }
        }
      },
      sureAccount (type) {
        if (this.state.password !== 'success' || this.state.confirm !== 'success') {
          this.downToast('请确认填写部分是否有误')
        } else {
          this.$indicator.open('验证中...')
          let param = new FormData()
          param.append('password', this.news.password)
          param.append('token', this.$route.query.token ? this.$route.query.token : this.tokenId)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post(`/sso/resetPwd`, param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', type)
                this.$emit('lastEvent', 'new')
              } else {
                this.downToast(response.data.errMsg)
              }
            }).catch((err) => {
              this.$indicator.close()
              this.downToast(err.errMsg)
            })
        }
      }
    }
  }
</script>