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

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
    </div>
    <div class="f-form">
      <div class="page-part">
        <p class="security">密保问题一：<span v-text="questions[0].question"></span></p>
      </div>
      <div class="page-part">
        <mt-field placeholder="请填写答案一"
                  :state="state.answer1"
                  @blur.native.capture="validAnswer1"
                  v-model="valid.answer1"></mt-field>
      </div>
      <div class="page-part">
        <p class="security">密保问题二：<span v-text="questions[1].question"></span></p>
      </div>
      <div class="page-part">
        <mt-field placeholder="请填写答案二"
                  :state="state.answer2"
                  @blur.native.capture="validAnswer2"
                  v-model="valid.answer2"></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-security',
    props: ['tokenId'],
    data () {
      return {
        state: {
          answer1: 'error',
          answer2: 'error'
        },
        valid: {
          answer1: '',
          answer2: ''
        },
        questions: [
          {question: ''},
          {question: ''}
        ],
        token: ''
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.loadIssue()
      })
    },
    methods: {
      // 警告弹窗
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 验证密保答案一
      validAnswer1 () {
        if (!this.valid.answer1) {
          this.downToast('请填写问题一的正确答案')
          this.state.answer1 = 'error'
        } else {
          this.state.answer1 = 'success'
        }
      },
      // 验证密保答案二
      validAnswer2 () {
        if (!this.valid.answer2) {
          this.downToast('请填写问题二的正确答案')
          this.state.answer2 = 'error'
        } else {
          this.state.answer2 = 'success'
        }
      },
      // 获取密保问题
      loadIssue () {
        this.$http.get('/sso/resetPwd/check/question', {params: {token: this.$route.query.token ? this.$route.query.token : this.tokenId}})
          .then(response => {
            if (response.data.success) {
              this.questions = response.data.content.questions
              this.token = response.data.content.token
              if (this.questions.length === 0) {
                this.$emit('stepEvent', 'new')
              }
            } else {
              this.downToast(response.data.errMsg)
            }
          })
      },
      sureAccount (type) {
        if (this.state.answer1 !== 'success' || this.state.answer2 !== 'success') {
          this.downToast('请确认填写部分是否有误')
        } else {
          this.$indicator.open('验证过程中...')
          let param = new FormData()
          let answer = []
          answer.push({'answer': this.valid.answer1, id: this.questions[0].id}, {
            'answer': this.valid.answer2,
            id: this.questions[1].id
          })
          let answers = JSON.stringify(answer)
          param.append('answers', answers)
          param.append('token', this.token)
          param.append('pageToken', this.tokenId)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post(`/sso/resetPwd/check/question`, param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', type)
                this.$emit('tokenEvent', response.data.content.token)
              } else {
                this.downToast(response.data.errMsg)
              }
            }).catch((err) => {
              this.$indicator.close()
              this.downToast(err.errMsg)
            })
        }
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">

</style>