验证手机设置新手机、完成设置页面

assets/scss/mobileCommon.scss

@@ -1,5 +1,5 @@
 .fade-enter-active, .fade-leave-active {
-  transition: opacity 2.5s
+  transition: opacity 0.5s
 }
 .fade-enter, .fade-leave-active {
   opacity: 0

components/mobile/reset/stepSecurity .vue

@@ -81,7 +81,7 @@
       },
       // 获取密保问题
       loadIssue () {
-        this.$http.get('/sso/resetPwd/check/question', {params: {token: this.tokenId}})
+        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

components/mobile/validation/ValidationPhoneStepMobile.vue

@@ -93,7 +93,6 @@
             .then(response => {
               this.$indicator.close()
               if (response.data) {
-                console.log('token', response.data.content.token)
                 this.tokenCode = response.data.content.token
                 this.$toast({
                   message: '验证码已经发送到您的手机，请注意查收',
@@ -133,9 +132,8 @@
             .then(response => {
               this.$indicator.close()
               if (response.data.success) {
-                console.log('123', response.data)
                 this.$emit('stepEvent', 'new')
-                this.$emit('tokenEvent', response.data.content.token)
+                this.$emit('tokenEvent', response.data.content)
               } else {
                 this.downToast(response.data.errMsg)
               }

components/mobile/validation/ValidationPhoneStepNew.vue

@@ -2,17 +2,28 @@
   <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> 进行验证，有效期7天</span>
+        <mt-field placeholder="新手机号码"
+                  v-model="valid.mobile"
+                  :state="state.mobile"
+                  type="tel"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
       </div>
       <div class="page-part">
-        <mt-button :disabled="hasSend" size="large"
-                   type="primary"
-                   @click="sureAccount()"
-                   v-text="secretEmail">发送验证请求</mt-button>
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="valid.token"
+                  :state="state.token"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText" v-if="state.mobile === 'success'">获取验证码</span>
+          <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
       </div>
     </div>
   </div>
@@ -20,53 +31,159 @@
 
 <script>
   export default {
-    name: 'step-email',
-    props: ['info'],
+    name: 'step-one',
+    props: ['tokenId'],
     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
+        state: {
+          mobile: 'error',
+          token: 'error'
+        },
+        valid: {
+          mobile: '',
+          token: ''
+        },
+        tokenCode: '',
+        tokenTime: 60,
+        tokenText: '获取验证码'
       }
     },
     methods: {
-      jump (type) {
-        this.$emit('stepEvent', type)
-      },
-      // 警告弹窗
+      // 弹窗处理
       downToast (type) {
         this.$toast({
           message: type,
           iconClass: 'el-icon-warning'
         })
       },
-      // 发送邮件
-      sureAccount () {
-        this.$indicator.open('发送过程中...')
-        this.$http.get(`/update/user/check/email`, {params: {email: this.info, operate: 'mobile'}})
-          .then(response => {
-            this.$indicator.close()
-            if (response.data.success) {
-              console.log('email', response.data)
-              this.hasSend = true
-              this.secretEmail = '已发送验证邮件，请查收'
+      // 验证手机号
+      validateMobile () {
+        let reg = /^1[0-9]{10}$/
+        if (!this.valid.mobile) {
+          this.downToast('请先填写手机号')
+          this.state.mobile = 'error'
+        } else {
+          if (!reg.test(this.valid.mobile)) {
+            this.downToast('请填写正确的手机号')
+            this.state.mobile = 'warning'
+          } else {
+            this.$http.get(`/update/user/mobile/hasRegister`, {params: {mobile: this.valid.mobile}})
+              .then(response => {
+                if (response.data.content.hasRegister) {
+                  this.$toast({
+                    message: '该手机号已被注册',
+                    iconClass: 'el-icon-error'
+                  })
+                } else {
+                  this.state.mobile = 'success'
+                }
+              })
+          }
+        }
+      },
+      // 验证正确的验证码
+      validateCode () {
+        if (!this.valid.token) {
+          this.downToast('请先填写验证码')
+          this.state.token = 'error'
+        } else {
+          if (!this.valid.mobile) {
+            this.downToast('请先填写正确的手机号码')
+            this.state.token = 'warning'
+          } else {
+            if (this.tokenCode) {
+              let param = new FormData()
+              param.append('mobile', this.valid.mobile)
+              param.append('token', this.tokenCode)
+              param.append('code', this.valid.token)
+              let config = {
+                headers: {'Content-Type': 'multipart/form-data'}
+              }
+              this.$http.post('/update/user/checkCode/mobile', param, config)
+                .then(response => {
+                  if (response.data.success) {
+                    this.state.token = 'success'
+                  } else {
+                    this.$toast({
+                      message: response.data.errMsg,
+                      iconClass: 'el-icon-error'
+                    })
+                    this.state.token = 'error'
+                  }
+                }).catch(() => {
+                  this.downToast('请检查网络是否正常或联系服务商')
+                })
             } else {
-              this.hasSend = false
-              this.downToast(response.data.errMsg)
+              this.downToast('请点击先获取验证码信息')
+              this.state.token = 'warning'
             }
-          }).catch(() => {
-            this.$indicator.close()
-            this.downToast('请检查网络是否正常或联系服务商')
-          })
+          }
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        console.log('获取', this.tokenId)
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          if (this.state.mobile === 'success') {
+            this.$indicator.open('获取中...')
+            let _this = this
+            this.$http.get('/update/user/setMobile', {params: {mobile: this.valid.mobile, token: this.$route.query.token ? this.$route.query.token : this.tokenId}})
+              .then(response => {
+                console.log('de', response.data)
+                this.$indicator.close()
+                if (response.data) {
+                  this.tokenCode = response.data.content.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.mobile !== 'success' ||
+          this.state.token !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('mobile', this.valid.mobile)
+          param.append('code', this.valid.token)
+          param.append('token', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/update/user/setMobile', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+                this.$emit('lastEvent', 'last')
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
       }
     }
   }

components/mobile/validation/ValidationPhoneStepSecurity.vue

@@ -2,6 +2,7 @@
   <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">
@@ -33,7 +34,6 @@
 <script>
   export default {
     name: 'step-security',
-    props: ['tokenId'],
     data () {
       return {
         state: {
@@ -54,6 +54,9 @@
       })
     },
     methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
       // 警告弹窗
       downToast (type) {
         this.$toast({
@@ -84,7 +87,6 @@
         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)
@@ -98,21 +100,18 @@
           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
+          answer.push({'answer': this.valid.answer1, sort: this.questions[0].sort}, {
+            'answer': this.valid.answer2, sort: this.questions[1].sort
           })
           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)
+          this.$http.post(`/update/user/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 {

components/mobile/validation/ValidationPhoneStepSelect.vue

@@ -33,14 +33,14 @@
 <script>
   export default {
     name: 'step-select',
-    middleware: 'authenticated',
+    // middleware: 'authenticated',
     data () {
       return {
         hasEmail: false,
         hasQuestion: false,
         mobile: '',
         email: '',
-        question: ''
+        questions: ''
       }
     },
     mounted () {
@@ -57,6 +57,8 @@
           this.$emit('setDataEvent', this.email)
         } else if (type === 'questions') {
           this.$emit('setDataEvent', this.questions)
+        } else if (type === 'appeal') {
+          // 跳转到申诉页面
         }
       },
       // 获取验证方式
@@ -64,7 +66,6 @@
         this.$http.get('/update/user/checkType')
           .then(response => {
             if (response.data.success) {
-              console.log(response.data)
               this.mobile = response.data.content.mobile
               if (response.data.content.email) {
                 this.hasEmail = true

components/mobile/validation/ValidationPhoneStepSuccess.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>验证手机</p>
+    </div>
+    <template>
+      <div class="page-part page-last">
+        <h4><img src="/images/all/pass.png"><span>重置成功</span></h4>
+        <p>及时更新最的手机号码能极大地提高账号安全性！</p>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount()">完 成</mt-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-success',
+    methods: {
+      sureAccount () {
+        this.$router.push('/')
+      }
+    }
+  }
+</script>

components/mobile/validation/index.js

@@ -3,5 +3,6 @@ import ValidationPhoneStepMobile from './ValidationPhoneStepMobile.vue'
 import ValidationPhoneStepEmail from './ValidationPhoneStepEmail.vue'
 import ValidationPhoneStepSecurity from './ValidationPhoneStepSecurity'
 import ValidationPhoneStepNew from './ValidationPhoneStepNew.vue'
+import ValidationPhoneStepSuccess from './ValidationPhoneStepSuccess.vue'
 
-export {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew}
+export {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew, ValidationPhoneStepSuccess}

pages/cloudcenter/enterprise/index.vue

@@ -29,7 +29,7 @@
               </tr>
               </tbody>
             </table>
-            <div style="text-align: center;color:#333;height:100px;line-height: 100px;" v-if="member.content.length === 0">现在没有可以申请的列表哦！</div>
+            <div style="text-align: center;color:#333;height:100px;line-height: 100px;" v-if="member.content.length === 0">暂时没有成员列表哦！</div>
             <page :total="member.totalElements" :page-size="count"
                   :current="page" @childEvent="handleMemberChange">
             </page>
@@ -75,7 +75,7 @@
               </tr>
               </tbody>
             </table>
-            <div style="text-align: center; color:#333;height:100px;line-height: 100px;" v-if="apple.content.length === 0">现在没有可以申请的列表哦！</div>
+            <div style="text-align: center; color:#333;height:100px;line-height: 100px;" v-if="apple.content.length === 0">现在没有需要处理的加入申请！</div>
             <page :total="apple.totalElements" :page-size="count"
                   :current="page" @childEvent="handleApplyChange">
             </page>

pages/reset/passwordResetValidQuestion.vue

@@ -10,8 +10,8 @@
   export default {
     layout: 'default',
     mounted () {
-      if (this.store.state.option.isMobile) {
-        this.$router.path('/reset/forgetPasswordValidationAccount?token=' + this.$route.query.token)
+      if (this.$store.state.option.isMobile) {
+        this.$router.push('/reset/forgetPasswordValidationAccount?token=' + this.$route.query.token)
       }
     },
     components: {

pages/validation/phoneValidation.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
     <template v-if="isMobile">
-      <validationPhone-stepSelect v-if="step === 'first'" @stepEvent="setStep" @setDataEvent="setInfo"/>
+      <validationPhone-stepSelect v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
       <validationPhone-stepMobile v-if="step === 'mobile'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
       <validationPhone-stepEmail v-if="step === 'email'" @stepEvent="setStep" :info="info"/>
-      <validationPhone-stepSecurity v-if="step === 'questions'" @stepEvent="setStep" @tokenEvent="loadToken" :tokenId="tokenId"/>
+      <validationPhone-stepSecurity v-if="step === 'questions'" @stepEvent="setStep" @tokenEvent="loadToken"/>
       <validationPhone-stepNew v-if="step === 'new'" @stepEvent="setStep" @lastEvent="setStepLast" :stepLast="stepLast" :tokenId="tokenId"/>
+      <validationPhone-stepSuccess v-if="step === 'last'" @stepEvent="setStep" :stepLast="stepLast"/>
     </template>
     <template v-else>
       <accountCenter-header/>
@@ -16,18 +17,19 @@
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import PhoneValidation from '~components/validation/PhoneValidation.vue'
-  import {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew} from '~components/mobile/validation'
+  import {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew, ValidationPhoneStepSuccess} from '~components/mobile/validation'
   export default {
     layout (context) {
       return context.store.state.option.isMobile ? 'mobile' : 'default'
     },
+    middleware: 'authenticated',
     transition: {
       name: 'fade',
       mode: 'out-in'
     },
     data () {
       return {
-        step: 'first',
+        step: 'select',
         info: '',
         tokenId: '',
         stepLast: 'new'
@@ -40,13 +42,17 @@
       ValidationPhoneStepMobile,
       ValidationPhoneStepEmail,
       ValidationPhoneStepSecurity,
-      ValidationPhoneStepNew
+      ValidationPhoneStepNew,
+      ValidationPhoneStepSuccess
     },
     computed: {
       isMobile () {
         return this.$store.state.option.isMobile
       }
     },
+    mounted () {
+      this.$route.query.token ? this.step = 'new' : this.step = 'select'
+    },
     methods: {
       setStep (type) {
         this.step = type
@@ -58,7 +64,6 @@
         this.tokenId = token
       },
       setStepLast (type) {
-        console.log(type)
         this.stepLast = type
       }
     }

pages/validation/phoneValidationSecondStep.vue

@@ -12,6 +12,11 @@
     components: {
       AccountCenterHeader,
       PhoneValidationSecondStep
+    },
+    mounted () {
+      if (this.$store.state.option.isMobile) {
+        this.$router.push('/validation/phoneValidation?token=' + this.$route.query.token)
+      }
     }
   }
 </script>

store/index.js

@@ -46,7 +46,7 @@ export const actions = {
     commit('option/REQUEST_IS_LOGIN')
     return axios.get('/sso/login/isLogin')
     .then(response => {
-      // console.log(response.data)
+      console.log(response.data)
       commit('option/REQUEST_IS_LOGIN_SUCCESS', response.data)
     }, err => {
       commit('option/REQUEST_IS_LOGIN_FAILURE', err)