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

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
    </div>
    <div class="f-form">
      <div class="page-part">
        <mt-field placeholder="请输入当前密码"
                  auto-complete="off"
                  :state="state.password"
                  @blur.native.capture="hasPassword"
                  v-model="password"></mt-field>
      </div>
      <div class="page-part">
        <mt-button size="large" type="primary" @click="sureAccount('new')">下一步</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'step-before',
      data () {
        return {
          state: {
            password: 'error'
          },
          password: ''
        }
      },
      methods: {
        jump (type) {
          this.$emit('stepEvent', type)
        },
        // 警告弹窗
        downToast (type) {
          this.$toast({
            message: type,
            iconClass: 'el-icon-warning'
          })
        },
        // 验证密码
        hasPassword () {
          if (!this.password) {
            this.downToast('请填写当前密码')
            this.state.password = 'error'
          } else {
            this.state.password = 'success'
          }
        },
        sureAccount (type) {
          if (this.state.password !== 'success') {
            this.downToast('请确认填写部分是否有误')
          } else {
            this.$indicator.open('确认过程中...')
            let param = new FormData()
            param.append('password', this.password)
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            this.$http.post(`/sso/resetPwd/check/password`, param, config)
              .then(response => {
                this.$indicator.close()
                if (response.data.success) {
                  this.$emit('stepEvent', type)
                  this.$store.commit('login/GET_TOKEN', response.data.content.token)
                } else {
                  this.downToast(response.data.errMsg)
                }
              }).catch(() => {
                this.$indicator.close()
                this.downToast('请检查网络是否正常或联系服务商')
              })
          }
        }
      }
    }
</script>