验证手机通过手机方式

components/mobile/validation/ValidationPhoneStepMobile.vue

@@ -0,0 +1,130 @@
+<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">
+        <span>使用手机号<strong>{{info | hide}}</strong>接收验证码</span>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="token"
+                  :state="state.token"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount">确 定</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-mobile',
+    props: ['info'],
+    data () {
+      return {
+        state: {
+          token: 'error'
+        },
+        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)
+      },
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证码验证
+      validateCode () {
+        if (!this.token) {
+          this.downToast('请填写验证码信息')
+          this.state.token = 'error'
+        } else {
+          this.state.token = 'success'
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          this.$indicator.open('获取中...')
+          let _this = this
+          this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.info}})
+            .then(response => {
+              this.$indicator.close()
+              if (response.data) {
+                this.tokenCode = response.data.token
+                this.$toast({
+                  message: '验证码已经发送到您的手机，请注意查收',
+                  iconClass: 'el-icon-success'
+                })
+                this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                let setTime = setInterval(() => {
+                  _this.tokenTime--
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  if (this.tokenTime <= 0) {
+                    clearInterval(setTime)
+                    _this.tokenText = '获取验证码'
+                    _this.tokenTime = 60
+                  }
+                }, 1000)
+              }
+            }).catch(() => {
+            this.$indicator.close()
+            this.downToast('请检查网络是否正常或联系服务商')
+          })
+        }
+      },
+      // 验证信息
+      sureAccount (type) {
+        if (this.state.token !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('code', this.token)
+          param.append('token', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/resetPwd/check/mobile', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', 'security')
+                this.$emit('tokenEvent', response.data.content.token)
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+            this.$indicator.close()
+            this.downToast('请检查网络是否正常或联系服务商')
+          })
+        }
+      }
+    }
+  }
+</script>

components/mobile/validation/ValidationPhoneStepSelect.vue

@@ -6,17 +6,17 @@
     <div>
       <ul class="select-item">
         <li class="item" @click="jump('mobile')">
-          <img src="/images/all/icon03.png">
+          <img src="/images/all/icon01.png">
           <span>通过验证手机</span>
           <i class="fa fa-angle-right second"></i>
         </li>
         <li class="item" @click="jump('email')" v-if="hasEmail">
-          <img src="/images/all/icon01.png">
+          <img src="/images/all/icon02.png">
           <span>通过验证邮箱</span>
           <i class="fa fa-angle-right second"></i>
         </li>
-        <li class="item" @click="jump('question')">
-          <img src="/images/all/icon02.png">
+        <li class="item" @click="jump('question')" v-if="hasQuestion">
+          <img src="/images/all/icon03.png">
           <span>通过验证密保</span>
           <i class="fa fa-angle-right second"></i>
         </li>
@@ -32,10 +32,11 @@
 
 <script>
   export default {
-    name: 'step-two',
+    name: 'step-select',
     data () {
       return {
-        hasEmail: false
+        hasEmail: false,
+        hasQuestion: false
       }
     },
     mounted () {
@@ -49,17 +50,20 @@
       },
       // 获取验证方式
       getVerifyWay () {
-        this.$http.get('/sso/resetPwd/checkType/' + (this.$store.state.option.isLogin.data.content.isLogin ? 'update' : 'reset'))
+        this.$http.get('/update/user/checkType' + (this.$store.state.option.isLogin.data.content.isLogin ? 'update' : 'reset'))
           .then(response => {
             if (response.data.success) {
               console.log(response.data)
               if (response.data.content.email) {
                 this.hasEmail = true
               }
+              if (response.data.content.question) {
+                this.hasQuestion = true
+              }
             }
           }).catch(err => {
-          console.log(err)
-        })
+            console.log(err)
+          })
       }
     }
   }

components/mobile/validation/index.js

@@ -1,11 +1,4 @@
 import ValidationPhoneStepSelect from './ValidationPhoneStepSelect.vue'
-import StepSelect from './stepSelect.vue'
-import StepBefore from './stepBefore.vue'
-import StepMobile from './stepMobile.vue'
-import StepEmail from './stepEmail.vue'
-import StepAppeal from './stepAppeal.vue'
-import StepNew from './stepNew.vue'
-import StepSecurity from './stepSecurity .vue'
-import StepLast from './stepLast.vue'
+import ValidationPhoneStepMobile from './ValidationPhoneStepMobile.vue'
 
-export {ValidationPhoneStepSelect, StepSelect, StepBefore, StepMobile, StepEmail, StepAppeal, StepNew, StepSecurity, StepLast}
+export {ValidationPhoneStepSelect, ValidationPhoneStepMobile}

pages/validation/phoneValidation.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <template v-if="isMobile">
-      <validationPhone-stepSelect v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
+      <validationPhone-stepSelect v-if="step === 'first'" @stepEvent="setStep"/>
     </template>
     <template v-else>
       <accountCenter-header/>
@@ -12,7 +12,7 @@
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import PhoneValidation from '~components/validation/PhoneValidation.vue'
-  import {ValidationPhoneStepSelect} from '~components/mobile/reset'
+  import ValidationPhoneStepSelect from '~components/mobile/validation/ValidationPhoneStepSelect'
   export default {
     layout (context) {
       return context.store.state.option.isMobile ? 'mobile' : 'default'
@@ -21,6 +21,11 @@
       name: 'fade',
       mode: 'out-in'
     },
+    data () {
+      return {
+        step: 'first'
+      }
+    },
     components: {
       AccountCenterHeader,
       PhoneValidation,
@@ -30,6 +35,11 @@
       isMobile () {
         return this.$store.state.option.isMobile
       }
+    },
+    methods: {
+      setStep (type) {
+        this.step = type
+      }
     }
   }
 </script>