新账号中心验证手机页面（手机验证）

components/validation/PhoneValidation.vue

@@ -42,7 +42,7 @@
           </div>
         </div>
         <div class="content-bottom">
-          <span class="use">使用手机号<em>183******08</em>接收验证码</span>
+          <span class="use">使用手机号<em>{{secretMobile}}</em>接收验证码</span>
           <div>
             <el-form :model="valid" :rules="rules" ref="valid" label-width="100px" class="demo-ruleForm">
               <el-form-item prop="code">
@@ -52,13 +52,14 @@
                           placeholder="短信验证码"></el-input>
                 <el-button type="primary" class="code"
                            v-show="sendAccountCode"
-                           @click="getCheckCode"
-                           :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
+                           @click="getCheckCode">获取验证码</el-button>
                 <el-button type="primary"  v-show="!sendAccountCode" class="code code-send">已发送({{account_time}}s)</el-button>
-                <!--<span v-show="codeErrorChecked" class="tip codeError-tip" >验证码输入错误</span>-->
+                <span v-show="codeErrorChecked" class="tip codeError-tip" >{{codeErrorMsg}}</span>
               </el-form-item>
               <el-form-item>
-                <a class="btn finish">下一步</a>
+                <a class="btn finish"
+                   :disabled="!codeChecked"
+                   @click="goNextStep">下一步</a>
               </el-form-item>
             </el-form>
           </div>
@@ -124,18 +125,34 @@
           </div>
         </div>
         <div class="content-bottom">
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="新手机号码"/>
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control msg" placeholder="短信验证码"/>
-            <span class="msg">获取验证码</span>
-            <!--<span class="msg send">已发送(54s)</span>-->
+          <div>
+            <el-form :model="valid2" :rules="rules2" ref="valid2" label-width="100px" class="demo-ruleForm">
+              <el-form-item prop="mobile">
+                <el-input v-model="valid2.mobile" placeholder="新手机号码"></el-input>
+              </el-form-item>
+              <el-form-item prop="code">
+                <el-input type="text" v-model="valid2.code"
+                          v-bind:class="{ active: this.secondStepCodeErrorChecked }"
+                          auto-complete="off"
+                          class="msg"
+                          placeholder="短信验证码"></el-input>
+                <el-button type="primary" class="code"
+                           v-show="showSecondStepCode"
+                           @click="getSecondCheckCode"
+                           :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
+                <el-button type="primary"  v-show="!showSecondStepCode" class="code code-send">已发送({{second_step_time}}s)</el-button>
+                <span v-show="secondStepCodeErrorChecked" class="tip codeError-tip">{{secondCodeErrorMsg}}</span>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn finish"
+                    :disabled="!mobileSecondChecked || !secondCodeChecked"
+                    @click="setNewMobile">确认</a>
+              </el-form-item>
+            </el-form>
           </div>
-          <button class="btn">确认</button>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 5">
+      <div class="content" v-show="goLastStep">
         <div class="content-top">
           <h3>验证手机</h3>
           <div class="step">
@@ -146,7 +163,7 @@
         <div class="content-bottom">
           <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
           <span>及时更换最新的手机号码能极大地提高账号安全性哦！</span>
-          <div class="close-btn">关闭</div>
+          <div class="close-btn" @click="goCloudCenter">关闭</div>
         </div>
       </div>
     </div>
@@ -157,23 +174,24 @@
   export default {
     name: 'validation',
     data () {
-      var validateCode = (rule, value, callback) => {
+//      第一步校验验证码
+      var validateFirstCode = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('请填写正确的验证码'))
           this.codeErrorChecked = false
           this.codeChecked = false
         } else {
-          if (this.enterprise.code !== '') {
+          if (this.valid.code !== '') {
             if (this.token !== '') {
-              if (this.enterprise.code !== '' && this.enterprise.mobile !== '') {
+              if (this.valid.code !== '' && this.getMobile !== '') {
                 let param = new FormData()
-                param.append('mobile', this.enterprise.mobile)
-                param.append('code', this.enterprise.code)
+                param.append('mobile', this.getMobile)
+                param.append('code', this.valid.code)
                 param.append('token', this.token)
                 let config = {
                   headers: {'Content-Type': 'multipart/form-data'}
                 }
-                this.$http.post(`/sso/personal/register/checkCode`, param, config)
+                this.$http.post(`/update/user/checkCode/mobile`, param, config)
                   .then(response => {
                     if (response.data.success) {
                       this.codeChecked = true
@@ -184,7 +202,63 @@
                       return Promise.reject(response.data)
                     }
                   }).catch(err => {
-                    this.$message.error(err.errMsg)
+                    this.codeErrorMsg = err.errMsg
+                  })
+              }
+            } else {}
+          }
+          callback()
+        }
+      }
+//      第二步
+      var validateSecondMobile = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的手机号'))
+          this.getCodeBtnIsDisabled = true
+          this.mobileSecondChecked = false
+        } else {
+          if (this.valid2.mobile !== '') {
+            var reg = /^1[0-9]{10}$/
+            if (!reg.test(value)) {
+              callback(new Error('请填写正确的手机号'))
+              this.getCodeBtnIsDisabled = true
+              this.mobileSecondChecked = false
+            } else {
+              this.getCodeBtnIsDisabled = false
+              this.mobileSecondChecked = true
+            }
+          }
+          callback()
+        }
+      }
+      var validateSecondCode = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的验证码'))
+          this.secondStepCodeErrorChecked = false
+          this.secondCodeChecked = false
+        } else {
+          if (this.valid2.code !== '') {
+            if (this.secondToken !== '') {
+              if (this.valid2.code !== '' && this.valid2.mobile !== '') {
+                let param = new FormData()
+                param.append('mobile', this.valid2.mobile)
+                param.append('code', this.valid2.code)
+                param.append('token', this.secondToken)
+                let config = {
+                  headers: {'Content-Type': 'multipart/form-data'}
+                }
+                this.$http.post(`/update/user/checkCode/mobile`, param, config)
+                  .then(response => {
+                    if (response.data.success) {
+                      this.secondCodeChecked = true
+                      this.secondStepCodeErrorChecked = false
+                    } else {
+                      this.secondStepCodeErrorChecked = true
+                      this.secondCodeChecked = false
+                      return Promise.reject(response.data)
+                    }
+                  }).catch(err => {
+                    this.secondCodeErrorMsg = err.errMsg
                   })
               }
             } else {}
@@ -196,6 +270,7 @@
         activeTab: 0,
         goFirstStep: true,
         goSecondStep: false,
+        goLastStep: false,
         hasValidPhoneWay: false,
         hasValidQuestionsWay: false,
         hasValidEmailWay: false,
@@ -203,22 +278,46 @@
         showPhoneValid: false,
         showEmailValid: false,
         showQuestionsValid: false,
-        sendAccountCode: false,
+        sendAccountCode: true,
         account_time: 0,
+        second_step_time: 0,
+        codeErrorChecked: false,
+        secondStepCodeErrorChecked: false,
+        codeChecked: false,
+        secondCodeChecked: false,
+        secretMobile: '',
+        getMobile: '',
+        codeErrorMsg: '',
+        secondCodeErrorMsg: '',
+        firstStepToken: '',
+        mobileSecondChecked: false,
         getCodeBtnIsDisabled: true,
+        showSecondStepCode: true,
         valid: {
           code: ''
         },
+        valid2: {
+          mobile: '',
+          code: ''
+        },
         rules: {
           code: [
-            {validator: validateCode, trigger: 'blur'}
+            {validator: validateFirstCode, trigger: 'blur'}
+          ]
+        },
+        rules2: {
+          mobile: [
+            {validator: validateSecondMobile, trigger: 'blur'}
+          ],
+          code: [
+            {validator: validateSecondCode, trigger: 'blur'}
           ]
         }
       }
     },
     computed: {
       logged () {
-//        console.log(this.$store.state.option.isLogin.data.content.isLogin)
+//        console.log(this.$store.state.option.isLogin.data.content)
         return this.$store.state.option.isLogin.data.content
       }
     },
@@ -248,7 +347,6 @@
 //      获取验证方式
       getVerifyWay () {
         this.$http.get('/update/user/checkType').then(response => {
-          console.log(response.data)
           if (response.data.success) {
             if (!response.data.content) {
               this.goSecondStep = true
@@ -258,6 +356,9 @@
               if (response.data.content.mobile) {
                 this.hasValidPhoneWay = true
                 this.showManualAppeal = true
+                this.getMobile = response.data.content.mobile
+                var reg = /^(\d{3})\d{6}(\d{2})$/
+                this.secretMobile = this.getMobile.replace(reg, '$1******$2')
               }
               if (response.data.content.questions) {
                 this.hasValidQuestionsWay = true
@@ -295,11 +396,12 @@
         this.showEmailValid = false
         this.showQuestionsValid = false
       },
-//      获取手机验证码
+//      获取第一步手机验证码
       getCheckCode () {
-        this.$http.get(`/update/user/check/mobile`, {params: {mobile: this.passwordRest.mobile}})
+        this.$http.get(`/update/user/check/mobile`, {params: {mobile: this.getMobile}})
           .then(response => {
             this.token = response.data.content.token
+            console.log(this.token)
             if (this.token !== '') {
               this.$message({
                 message: '验证码已经发送到您的手机，请注意查收',
@@ -318,6 +420,87 @@
           }).catch(err => {
             this.$message.error(err.errMsg)
           })
+      },
+//      手机号验证下一步
+      goNextStep () {
+        if (this.codeChecked) {
+          console.log(this.token)
+          let param = new FormData()
+          param.append('mobile', this.getMobile)
+          param.append('code', this.valid.code)
+          param.append('token', this.token)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/update/user/check/mobile`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.firstStepToken = response.data.content
+                this.goSecondStep = true
+                this.showPhoneValid = false
+              } else {
+                this.goSecondStep = false
+                this.showPhoneValid = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+//      获取第二步手机验证码
+      getSecondCheckCode () {
+        this.$http.get(`/update/user/setMobile`, {params: {mobile: this.valid2.mobile, token: this.firstStepToken}})
+          .then(response => {
+            this.secondToken = response.data.content.token
+            if (this.secondToken !== '') {
+              this.$message({
+                message: '验证码已经发送到您的手机，请注意查收',
+                type: 'success'
+              })
+              this.showSecondStepCode = false
+              this.second_step_time = 60
+              var secondStepTime = setInterval(() => {
+                this.second_step_time--
+                if (this.second_step_time <= 0) {
+                  this.showSecondStepCode = true
+                  clearInterval(secondStepTime)
+                }
+              }, 1000)
+            }
+          }).catch(err => {
+            console.log(err)
+          })
+      },
+//      设置新手机号
+      setNewMobile () {
+        if (this.mobileSecondChecked && this.secondCodeChecked) {
+          let param = new FormData()
+          param.append('mobile', this.valid2.mobile)
+          param.append('code', this.valid2.code)
+          param.append('token', this.secondToken)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/update/user/setMobile`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                console.log(response.data.success)
+                this.goLastStep = true
+                this.goSecondStep = false
+              } else {
+                this.goLastStep = false
+                this.goSecondStep = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              console.log(err)
+            })
+        }
+      },
+//      跳转至云中心页面
+      goCloudCenter () {
+        window.location.href = '/cloudcenter'
       }
     }
   }
@@ -360,7 +543,7 @@
                 top: 45px;
                 left: 265px;
                 span{
-                  margin-right: 85px;
+                  margin-right: 78px;
                   font-size: 14px;
                   color: #b4b4b4;
                 }
@@ -372,13 +555,6 @@
           }
           form {
             padding-bottom: 44px;
-            margin-top: 152px;
-            .form-group{
-              position: relative;
-              margin: 0 auto 16px;
-              width: 360px;
-              height: 44px;
-              line-height: 44px;
               input{
                 padding: 0 0 0 18px;
                 width: 360px;
@@ -430,6 +606,15 @@
                   color: #0076ad;
                 }
               }
+              span.tip.codeError-tip{
+                position: absolute;
+                top: 3px;
+                left: 378px;
+                width: 200px;
+                text-align: left;
+                color: #ff4949;
+                font-size: 12px;
+              }
               i{
                 position: absolute;
                 top: 13px;
@@ -437,12 +622,11 @@
                 font-size: 20px;
                 color: #a0a0a0;
               }
-            }
             .btn {
               margin: 34px 0 16px 0;
               width: 360px;
               height: 44px;
-              line-height: 4px;
+              line-height: 44px;
               font-size: 16px;
               color: #fff;
               background: #0076AD;
@@ -556,7 +740,7 @@
               margin: 34px 0 10px 0;
               width: 360px;
               height: 44px;
-              line-height: 4px;
+              line-height: 44px;
               font-size: 16px;
               color: #fff;
               background: #0076AD;