|
|
@@ -0,0 +1,133 @@
|
|
|
+<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: '',
|
|
|
+ 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('/update/user/check/question')
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ console.log('question', response.data.content.questions)
|
|
|
+ this.questions = response.data.content.questions
|
|
|
+ } 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) {
|
|
|
+ console.log(response.data, type)
|
|
|
+ this.$emit('stepEvent', type)
|
|
|
+ this.$emit('tokenEvent', response.data.content.token)
|
|
|
+ } else {
|
|
|
+ this.downToast(response.data.errMsg)
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$indicator.close()
|
|
|
+ this.downToast('请检查网络是否正常或联系服务商')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped type="text/scss" lang="scss">
|
|
|
+
|
|
|
+</style>
|