sso-ssr/components/mobile/encryptedSetting/StepNew.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>设置密保</p>
    </div>
    <div class="f-form">
      <div class="page-part">
        <select v-model="selectedQ1">
          <option disabled value=''>问题一</option>
          <option v-for="question1 in questionOne" v-bind:value="question1">{{question1}}</option>
        </select>
      </div>
      <div class="page-part">
        <mt-field placeholder="答案一"
                  v-model="valid.answer1"
                  :state="state.answer1"
                  @blur.native.capture="validateAnswer1"
        ></mt-field>
      </div>
      <div class="page-part">
        <select v-model="selectedQ2">
          <option disabled value=''>问题二</option>
          <option v-for="question2 in questionTwo" v-bind:value="question2">{{question2}}</option>
        </select>
      </div>
      <div class="page-part">
        <mt-field placeholder="答案二"
                  v-model="valid.answer2"
                  :state="state.answer2"
                  @blur.native.capture="validateAnswer2"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-button size="large" type="primary" @click="sureAccount('success')">提 交</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-one',
    props: ['tokenId'],
    data () {
      return {
        state: {
          answer1: 'error',
          answer2: 'error'
        },
        valid: {
          answer1: '',
          answer2: ''
        },
        questionOne: [],
        questionTwo: [],
        selectedQ1: '',
        selectedQ2: ''
      }
    },
    mounted () {
//      获取密保问题
      this.$http.get('/data/question.json').then(response => {
        this.questionOne = response.data.questionOne
        this.questionTwo = response.data.questionTwo
      })
    },
    methods: {
      // 弹窗处理
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 验证密保问题1
      validateAnswer1 () {
        if (!this.selectedQ1) {
          this.downToast('请先选择密保问题')
        } else {
          if (!this.valid.answer1) {
            this.downToast('请填写密保答案')
            this.state.answer1 = 'error'
          } else {
            this.state.answer1 = 'success'
          }
        }
      },
      // 验证密保问题2
      validateAnswer2 () {
        if (!this.selectedQ2) {
          this.downToast('请先选择密保问题')
        } else {
          if (!this.valid.answer2) {
            this.downToast('请填写密保答案')
            this.state.answer2 = 'error'
          } else {
            this.state.answer2 = 'success'
          }
        }
      },
      sureAccount (type) {
        if (this.state.answer1 !== 'success' ||
          this.state.answer1 !== 'success') {
          this.downToast('请确认填写部分是否有误')
        } else {
          this.$indicator.open('验证过程中...')
          let param = new FormData()
          let userQuestion = []
          userQuestion.push({'question': this.selectedQ1, 'answer': this.valid.answer1, 'sort': '1'}, {'question': this.selectedQ2, 'answer': this.valid.answer2, 'sort': '2'})
          let userQuestions = JSON.stringify(userQuestion)
          param.append('userQuestions', userQuestions)
          param.append('token', this.tokenId ? this.tokenId : this.$route.query.token)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/update/user/setQuestion', param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', type)
              } else {
                this.downToast(response.data.errMsg)
              }
            }).catch((err) => {
              this.$indicator.close()
              this.downToast(err.errMsg)
            })
        }
      }
    }
  }
</script>