完成部分数据交互

components/mobile/reset/stepAppeal.vue

@@ -331,6 +331,7 @@
                 this.$indicator.close()
                 if (response.data.success) {
                   this.$emit('stepEvent', type)
+                  this.$emit('lastEvent', 'appeal')
                 } else {
                   this.downToast(response.data.errMsg)
                 }

components/mobile/reset/stepEmail.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="f-form">
       <div class="page-part">
-        <span>使用电子邮箱 <strong>183****08@qq.com</strong> 进行验证，有效期7天</span>
+        <span>使用电子邮箱 <strong>{{info | hide}}</strong> 进行验证，有效期7天</span>
       </div>
       <div class="page-part">
         <mt-button :disabled="hasSend" size="large"
@@ -21,12 +21,23 @@
 <script>
   export default {
     name: 'step-email',
+    props: ['info'],
     data () {
       return {
         secretEmail: '发送验证请求',
         hasSend: false
       }
     },
+    filters: {
+      hide: function (value) {
+        let getEmailIndex = value.indexOf('@')
+        if (getEmailIndex > 3) {
+          let len = value.substring(3, getEmailIndex)
+          value = value.replace(len, '***')
+        }
+        return value
+      }
+    },
     methods: {
       jump (type) {
         this.$emit('stepEvent', type)

components/mobile/reset/stepLast.vue

@@ -9,7 +9,7 @@
         <p>请妥善保管好自己的密码，保障自身的利益</p>
       </div>
       <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount('select')">完 成</mt-button>
+        <mt-button size="large" type="primary" @click="sureAccount()">完 成</mt-button>
       </div>
     </template>
     <template v-if="stepLast === 'appeal'">
@@ -18,7 +18,7 @@
         <p>申诉内容已提交，请耐心等待审核</p>
       </div>
       <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount('select')">确 认</mt-button>
+        <mt-button size="large" type="primary" @click="sureAccount()">确 认</mt-button>
       </div>
     </template>
   </div>
@@ -37,8 +37,8 @@
       }
     },
     methods: {
-      sureAccount (type) {
-        this.$emit('stepEvent', type)
+      sureAccount () {
+        this.$router.push('/')
       }
     }
   }

components/mobile/reset/stepMobile.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="f-form">
       <div class="page-part">
-        <span>使用手机号<strong v-text="mobileText">183*****08</strong>接收验证码</span>
+        <span>使用手机号<strong>{{info | hide}}</strong>接收验证码</span>
       </div>
       <div class="page-part">
         <mt-field auto-complete="off"
@@ -18,7 +18,7 @@
         </mt-field>
       </div>
       <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount('select')">确定</mt-button>
+        <mt-button size="large" type="primary" @click="sureAccount">确 定</mt-button>
       </div>
     </div>
   </div>
@@ -27,18 +27,24 @@
 <script>
   export default {
     name: 'step-mobile',
+    props: ['info'],
     data () {
       return {
         state: {
           token: 'error'
         },
-        mobileText: '183*****08',
         token: '',
         tokenCode: '',
         tokenText: '获取验证码',
         tokenTime: '60'
       }
     },
+    filters: {
+      hide: function (value) {
+        let reg = /^(\d{3})\d{6}(\d{2})$/
+        return value.replace(reg, '$1******$2')
+      }
+    },
     methods: {
       jump (type) {
         this.$emit('stepEvent', type)
@@ -66,7 +72,7 @@
         } else {
           this.$indicator.open('获取中...')
           let _this = this
-          this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.mobile}})
+          this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.info}})
             .then(response => {
               this.$indicator.close()
               if (response.data) {
@@ -99,7 +105,7 @@
         } else {
           this.$indicator.open('验证过程中...')
           let param = new FormData()
-          param.append('code', this.valid.token)
+          param.append('code', this.token)
           param.append('token', this.tokenCode)
           let config = {
             headers: {'Content-Type': 'multipart/form-data'}
@@ -108,10 +114,9 @@
             .then(response => {
               this.$indicator.close()
               if (response.data.success) {
-                this.$emit('stepEvent', type)
-                this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                this.$emit('stepEvent', 'security')
+                this.$emit('tokenEvent', response.data.content.token)
               } else {
-                this.getCode()
                 this.downToast(response.data.errMsg)
               }
             }).catch(() => {

components/mobile/reset/stepNew.vue

@@ -33,6 +33,7 @@
 <script>
   export default {
     name: 'step-new',
+    props: ['tokenId'],
     data () {
       return {
         progress: '',
@@ -109,8 +110,8 @@
         } else {
           this.$indicator.open('验证中...')
           let param = new FormData()
-          param.append('password', this.newPassword.password)
-          param.append('token', this.firstStepToken)
+          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'}
           }
@@ -119,6 +120,7 @@
               this.$indicator.close()
               if (response.data.success) {
                 this.$emit('stepEvent', type)
+                this.$emit('lastEvent', 'new')
               } else {
                 this.downToast(response.data.errMsg)
               }

components/mobile/reset/stepSecurity .vue

@@ -5,22 +5,26 @@
     </div>
     <div class="f-form">
       <div class="page-part">
-        <p class="security">请选择密码问题一</p>
-        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
+        <p class="security">密保问题一：<span v-text="questions[0].question"></span></p>
       </div>
       <div class="page-part">
-        <mt-field placeholder="请填写答案一"></mt-field>
+        <mt-field placeholder="请填写答案一"
+                  :state="state.answer1"
+                  @blur.native.capture="validAnswer1"
+                  v-model="valid.answer1"></mt-field>
       </div>
       <div class="page-part">
-        <p class="security">请选择密码问题二</p>
-        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
+        <p class="security">密保问题二：<span v-text="questions[1].question"></span></p>
       </div>
       <div class="page-part">
-        <mt-field placeholder="请填写答案二"></mt-field>
+        <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('last')">下一步</mt-button>
+        <mt-button size="large" type="primary" @click="sureAccount('new')">下一步</mt-button>
       </div>
     </div>
   </div>
@@ -29,39 +33,98 @@
 <script>
   export default {
     name: 'step-security',
+    props: ['tokenId'],
     data () {
       return {
+        state: {
+          answer1: 'error',
+          answer2: 'error'
+        },
         valid: {
-          mobile: '',
-          captcha: ''
+          answer1: '',
+          answer2: ''
         },
-        slots: [
-          {
-            flex: 1,
-            values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
-            className: 'slot1',
-            textAlign: 'right'
-          }, {
-            divider: true,
-            content: '-',
-            className: 'slot2'
-          }, {
-            flex: 1,
-            values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
-            className: 'slot3',
-            textAlign: 'left'
-          }
-        ]
+        questions: '',
+        token: ''
       }
     },
+    mounted () {
+      this.$nextTick(() => {
+        this.loadIssue()
+      })
+    },
     methods: {
-      onValuesChange (picker, values) {
-        if (values[0] > values[1]) {
-          picker.setSlotValue(1, values[0])
+      // 警告弹窗
+      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.tokenId}})
+          .then(response => {
+            if (response.data.success) {
+              this.questions = response.data.content.questions
+              this.token = response.data.content.token
+            } else {
+              this.downToast(response.data.errMsg)
+            }
+          })
+      },
       sureAccount (type) {
-        this.$emit('stepEvent', type)
+        // this.$emit('stepEvent', 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.isShowLoading = false
+              if (response.data.success) {
+                console.log(response.data, type)
+                // this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                // this.$router.push({ path: '/reset/passwordResetNewPassword' })
+              } else {
+                return Promise.reject(response.data)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
       }
     }
   }

components/mobile/reset/stepSelect.vue

@@ -35,7 +35,9 @@
     name: 'step-two',
     data () {
       return {
-        hasEmail: false
+        hasEmail: false,
+        mobile: '',
+        email: ''
       }
     },
     mounted () {
@@ -46,15 +48,21 @@
     methods: {
       jump (type) {
         this.$emit('stepEvent', type)
+        if (type === 'mobile') {
+          this.$emit('setDataEvent', this.mobile)
+        } else if (type === 'email') {
+          this.$emit('setDataEvent', this.email)
+        }
       },
       // 获取验证方式
       getVerifyWay () {
         this.$http.get('/sso/resetPwd/checkType/' + (this.$store.state.option.isLogin.data.content.isLogin ? 'update' : 'reset'))
           .then(response => {
             if (response.data.success) {
-              console.log(response.data)
+              this.mobile = response.data.content.mobile
               if (response.data.content.email) {
                 this.hasEmail = true
+                this.email = response.data.content.email
               }
             }
           }).catch(err => {

pages/reset/forgetPasswordValidationAccount.vue

@@ -2,13 +2,13 @@
   <div>
     <template v-if="isMobile">
       <step-first v-if="step === 'first'" @stepEvent="setStep"/>
-      <step-select v-if="step === 'select'" @stepEvent="setStep"/>
+      <step-select v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
       <step-before v-if="step === 'before'" @stepEvent="setStep"/>
-      <step-email v-if="step === 'email'" @stepEvent="setStep"/>
-      <step-mobile v-if="step === 'mobile'" @stepEvent="setStep"/>
-      <step-appeal v-if="step === 'appeal'" @stepEvent="setStep"/>
-      <step-security v-if="step === 'security'" @stepEvent="setStep"/>
-      <step-new v-if="step === 'new'" @stepEvent="setStep" :stepLast="stepLast"/>
+      <step-email v-if="step === 'email'" @stepEvent="setStep" :info="info"/>
+      <step-mobile v-if="step === 'mobile'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
+      <step-appeal v-if="step === 'appeal'" @stepEvent="setStep" @lastEvent="setStepLast"/>
+      <step-security v-if="step === 'security'" @stepEvent="setStep" :tokenId="tokenId"/>
+      <step-new v-if="step === 'new'" @stepEvent="setStep" @lastEvent="setStepLast" :stepLast="stepLast" :tokenId="tokenId"/>
       <step-Last v-if="step === 'last'" @stepEvent="setStep" :stepLast="stepLast"/>
     </template>
     <template v-else>
@@ -32,7 +32,9 @@
     data () {
       return {
         step: 'first',
-        stepLast: 'new'
+        stepLast: 'new',
+        info: '',
+        tokenId: ''
       }
     },
     components: {
@@ -49,7 +51,9 @@
       StepAppeal
     },
     mounted () {
-      if (this.$store.state.option.isLogin.data.content.isLogin) {
+      if (this.$route.query.token) {
+        this.step = 'new'
+      } else if (this.$store.state.option.isLogin.data.content.isLogin) {
         this.step = 'select'
       }
     },
@@ -59,6 +63,15 @@
       }
     },
     methods: {
+      setStepLast (type) {
+        this.stepLast = type
+      },
+      loadToken (type) {
+        this.tokenId = type
+      },
+      setInfo (type) {
+        this.info = type
+      },
       setStep (type) {
         this.step = type
       }

store/index.js

@@ -108,15 +108,5 @@ export const actions = {
       }, err => {
         commit('formConfig/GET_FORMDATA_FAILURE', err)
       })
-  },
-  // 获取密保问题
-  loadQuestion ({commit}, params = {}) {
-    commit('option/REQUEST_ISSUE')
-    return axios.get.get('/sso/resetPwd/check/question', {params})
-      .then(response => {
-        commit('option/GET_ISSUE_SUCCESS', response.data)
-      }, err => {
-        commit('option/GET_ISSUE_FAILURE', err)
-      })
   }
 }

store/reset.js

@@ -1,19 +0,0 @@
-export const state = () => ({
-  issue: {
-    data: [],
-    fetching: false
-  }
-})
-
-export const mutations = {
-  REQUEST_ISSUE (state) {
-    state.issue.fetching = true
-  },
-  GET_ISSUE_SUCCESS (state, result) {
-    state.issue.fetching = false
-    state.issue.data = result
-  },
-  GET_ISSUE_FAILURE (state) {
-    state.issue.fetching = true
-  }
-}