新账号中心验证邮箱页面、添加密保设置以及邮箱验证失败返回页面

components/encrypted-setting/EncryptedSetting.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="encrypted">
+  <div class="validation">
     <div class="container">
-      <div class="content" v-if="activeTab == 0">
+      <div class="content" v-show="goFirstStep">
         <div class="content-top">
           <h3>添加密保设置</h3>
           <div class="step">
@@ -10,393 +10,604 @@
           </div>
         </div>
         <div class="choose">
-          <div class="active"><i class="fa fa-mobile first"></i><span>通过验证手机</span><i class="fa fa-angle-right second"></i></div>
-          <div><i class="fa fa-envelope-o first"></i><span>通过验证邮箱</span><i class="fa fa-angle-right second"></i></div>
+          <div v-show="hasValidPhoneWay"
+               @click="chooseWay(1)">
+            <img src="/images/all/icon01.png" alt="" class="first mob"/>
+            <span>通过验证手机</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="hasValidEmailWay"
+               @click="chooseWay(2)">
+            <img src="/images/all/icon02.png" alt="" class="first"/>
+            <span>通过验证邮箱</span><i class="fa fa-angle-right second"></i>
+          </div>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 1">
+      <div class="content" v-show="showPhoneValid">
         <div class="content-top">
           <h3>添加密保设置</h3>
           <div class="step">
-            <img src="/images/all/step02.png" alt=""/>
+            <img src="/images/all/step01.png" alt=""/>
             <div class="step-item"><span class="active">账号验证</span><span>密保设置</span><span>设置完成</span></div>
-            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
+            <a @click="goPreviousStep" class="return"><img src="/images/all/return.png" alt=""/></a>
           </div>
         </div>
         <div class="content-bottom">
-          <span class="use">使用手机号<em>183******08</em>接收验证码</span>
-          <div class="form-group">
-            <input type="text" class="form-control msg" placeholder="短信验证码"/>
-            <span class="msg">获取验证码</span>
-            <!--<span class="msg send">已发送(54s)</span>-->
+          <span class="use">使用手机号<em>{{secretMobile}}</em>接收验证码</span>
+          <div>
+            <el-form :model="valid" :rules="rules" ref="valid" label-width="100px" class="demo-ruleForm" style="margin-top: 0;">
+              <el-form-item prop="code">
+                <el-input type="text" v-model="valid.code"
+                          v-bind:class="{ active: codeErrorChecked }"
+                          auto-complete="off" class="msg"
+                          placeholder="短信验证码"></el-input>
+                <el-button type="primary" class="code"
+                           v-show="sendAccountCode"
+                           @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" >{{codeErrorMsg}}</span>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn finish"
+                   :disabled="!codeChecked"
+                   @click="goNextStep">下一步</a>
+              </el-form-item>
+            </el-form>
           </div>
-          <button class="btn">下一步</button>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 2">
+      <div class="content" v-show="showEmailValid">
         <div class="content-top">
           <h3>添加密保设置</h3>
           <div class="step">
-            <img src="/images/all/step02.png" alt=""/>
+            <img src="/images/all/step01.png" alt=""/>
             <div class="step-item"><span class="active">账号验证</span><span>密保设置</span><span>设置完成</span></div>
             <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
           </div>
         </div>
         <div class="content-bottom">
-          <span class="use">使用电子邮箱<em>183****08@qq.com</em>进行验证，有效期7天</span>
-          <div class="warp"><button class="btn">发送验证请求</button></div>
-        </div>
-      </div>
-      <div class="content" v-if="activeTab == 3">
-        <div class="content-top">
-          <h3>添加密保设置</h3>
-          <div class="step">
-            <img src="/images/all/step03.png" alt=""/>
-            <div class="step-item"><span class="active">账号验证</span><span class="active">密保设置</span><span>设置完成</span></div>
-          </div>
-        </div>
-        <form action="">
-          <div class="form-group">
-            <input type="text" value="问题一" class="answer form-control"/>
-            <ul>
-              <li>您的母亲的生日是几月几日？</li>
-              <li>您最喜欢的宠物叫什么名字？</li>
-              <li>您最喜欢的电影片名是什么？</li>
-              <li>您的学号是？</li>
-            </ul>
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="答案一"/>
+          <span class="use">使用电子邮箱<em>{{secretEmail}}</em>进行验证，有效期7天</span>
+          <div class="warp"
+               @click="firstStepValidEmail"
+               v-show="!emailSendSuccess">
+            <button class="btn">发送验证请求</button>
           </div>
-          <div class="form-group">
-            <input type="text" value="问题一" class="answer form-control"/>
-            <ul>
-              <li>您的爷爷叫什么名字？</li>
-              <li>您的配偶的生日是几月几日？</li>
-              <li>您最喜欢的歌手是谁？</li>
-              <li>您就读的小学学校全称是？</li>
-            </ul>
+          <div class="warp" v-show="emailSendSuccess">
+            <button class="btn" :disabled="emailSendSuccess">已发送验证邮件，请查收</button>
           </div>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="答案二"/>
-          </div>
-          <button class="btn">提交</button>
-        </form>
+        </div>
       </div>
-      <div class="content" v-if="activeTab == 4">
-        <div class="content-top">
-          <h3>添加密保设置</h3>
-          <div class="step">
-            <img src="/images/all/step03.png" alt=""/>
-            <div class="step-item"><span class="active">账号验证</span><span class="active">密保设置</span><span class="active">设置完成</span></div>
+      <!--未验证手机弹出框-->
+      <div>
+        <el-dialog class="valid-phone"
+                   :visible.sync="goValidPhone"
+                   @click="goVaildPhoneStep"
+                   size="tiny">
+          <div class="set-tip" v-show="goValidPhone">
+            <p>您的账号的未验证手机，请先验证手机号</p>
+            <a href="/validation/phoneValidation">确定</a>
           </div>
-        </div>
-        <div class="content-bottom">
-          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
-          <span>添加密保之后，您的账号更安全了！</span>
-          <div class="close-btn">关闭</div>
-        </div>
+        </el-dialog>
       </div>
     </div>
   </div>
 </template>
-
 <script>
   export default {
-    name: 'EncryptedSetting',
+    name: 'validation',
     data () {
-      return {
-        activeTab: 0
-      }
-    }
-  }
-</script>
-<style lang="scss" scoped>
-  .encrypted {
-    margin: 0 auto;
-    width: 100%;
-    background: #eee;
-    .container{
-      padding-top: 50px;
-      margin: 0 auto;
-      width: 980px;
-      text-align: center;
-      .content{
-        padding: 0 50px;
-        margin: 50px auto 0;
-        width: 100%;
-        /*height: 540px;*/
-        text-align: center;
-        background: #fff;
-          .content-top{
-            height: 80px;
-            line-height: 80px;
-            h3{
-              margin-bottom: 0;
-              font-size: 24px;
-              color: #000;
-              border-bottom: 1px solid #dcdcdc;
-            }
-            .step{
-              position: relative;
-              margin-top: 10px;
-              img{
-                width: 315px;
-                height: 46px;
-              }
-              .step-item{
-                position: absolute;
-                top: 45px;
-                left: 265px;
-                span{
-                  margin-right: 85px;
-                  font-size: 14px;
-                  color: #b4b4b4;
-                }
-                span.active {
-                  color: #0076ad;
+//      第一步校验验证码
+      var validateFirstCode = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的验证码'))
+          this.codeErrorChecked = false
+          this.codeChecked = false
+        } else {
+          if (this.valid.code !== '') {
+            if (this.token !== '') {
+              if (this.valid.code !== '' && this.getMobile !== '') {
+                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/checkCode/mobile`, param, config)
+                  .then(response => {
+                    if (response.data.success) {
+                      this.codeChecked = true
+                      this.codeErrorChecked = false
+                    } else {
+                      this.codeErrorChecked = true
+                      this.codeChecked = false
+                      return Promise.reject(response.data)
+                    }
+                  }).catch(err => {
+                    this.codeErrorMsg = err.errMsg
+                  })
               }
-            }
+            } else {}
           }
-          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;
-                height: 44px;
-                line-height: 44px;
-                font-size: 14px;
-                color: #000;
-                border-radius: 0;
-              }
-              input.answer {
-                background: url("/images/all/more.png") no-repeat 325px center;
-                cursor: pointer;
-              }
-              ul{
-                display: none;
-                position: absolute;
-                top: 44px;
-                left: 0;
-                width: 360px;
-                background: #fff;
-                box-shadow: 0 0 5px rgba(0,0,0,.5);
-                -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
-                -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
-                -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
-                z-index: 10;
-                li{
-                  padding-left: 18px;
-                  width: 100%;
-                  height: 30px;
-                  line-height: 30px;
-                  text-align: left;
-                  font-size: 14px;
-                  color: #000;
-                  cursor: pointer;
-                  &:hover{
-                    background: #0076ad;
-                    color: #fff;
-                   }
-                }
+          callback()
+        }
+      }
+      return {
+        goFirstStep: true,
+        hasValidPhoneWay: false,
+        hasValidEmailWay: false,
+        showPhoneValid: false,
+        showEmailValid: false,
+        sendAccountCode: true,
+        account_time: 0,
+        codeErrorChecked: false,
+        codeChecked: false,
+        secretMobile: '',
+        secretEmail: '',
+        getMobile: '',
+        getEmail: '',
+        codeErrorMsg: '',
+        firstStepToken: '',
+        emailSendSuccess: false,
+        goValidPhone: false,
+        valid: {
+          code: ''
+        },
+        rules: {
+          code: [
+            {validator: validateFirstCode, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    computed: {
+      logged () {
+//        console.log(this.$store.state.option.isLogin.data.content)
+        return this.$store.state.option.isLogin.data.content
+      }
+    },
+    mounted () {
+//      验证是否登录
+      this.$nextTick(() => {
+        this.isLogin()
+        // 刷新统计信息
+        setInterval(() => {
+          this.isLogin()
+        }, 10000)
+      })
+//      获取验证方式
+      this.$nextTick(() => {
+        this.getVerifyWay()
+      })
+    },
+    methods: {
+//      判断用户是否登录
+      isLogin () {
+        if (!this.logged.isLogin) {
+//          未登录跳到登录页面
+          window.location.href = '/'
+        }
+      },
+//      获取验证方式
+      getVerifyWay () {
+        this.$http.get('/update/user/checkType').then(response => {
+          if (response.data.success) {
+            console.log(response.data.content)
+            if (!response.data.content.mobile) {
+              this.goValidPhone = true
+            } else {
+              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')
               }
-              span.tip{
-                position: absolute;
-                top: 0;
-                right: -238px;
-                font-size: 13px;
-                color: #8c8c8c;
-                a{
-                  font-size: 13px;
-                  color: #0076ad;
+              if (response.data.content.email) {
+                this.hasValidEmailWay = true
+                this.showManualAppeal = true
+                this.getEmail = response.data.content.email
+                let getEmailIndex = this.getEmail.indexOf('@')
+                if (getEmailIndex > 3) {
+                  let len = this.getEmail.substring(3, getEmailIndex)
+                  this.secretEmail = this.getEmail.replace(len, '*')
+                } else {
+                  this.getEmailArr = this.getEmail.split('')
+                  this.getEmailSplit = this.getEmailArr.splice(getEmailIndex, 0, '*')
+                  this.secretEmail = this.getEmailArr.join('')
                 }
               }
-              i{
-                position: absolute;
-                top: 13px;
-                left: 20px;
-                font-size: 20px;
-                color: #a0a0a0;
-              }
-            }
-            .btn {
-              margin: 34px 0 16px 0;
-              width: 360px;
-              height: 44px;
-              line-height: 4px;
-              font-size: 16px;
-              color: #fff;
-              background: #0076AD;
-              border-radius: 3px;
+              this.goValidPhone = false
+              this.goFirstStep = true
             }
           }
-          .content-bottom{
-            margin: 155px auto 0;
-            padding-bottom: 50px;
-            width: 360px;
-            div.warp{
-              padding-bottom: 65px;
-            }
-            p{
-              font-size: 24px;
-              color: #323232;
-              img{
-                margin-right: 20px;
-                width: 30px;
-                height: 28px;
-              }
-            }
-            p.pass{
-              font-size: 24px;
-              color: #e77405;
-              img{
-                height: 30px;
-              }
-            }
-            p.passed {
-              color: #2ab300;
-              img{
-                height: 30px;
-              }
-            }
-            span{
-              display: inline-block;
-              margin: 15px 0 140px 0;
-              font-size: 14px;
-              color: #8b8b8b;
-            }
-            .close-btn{
-              margin: 0 auto;
-              width: 200px;
-              height: 36px;
-              line-height: 36px;
-              font-size: 14px;
-              text-align: center;
-              color: #323232;
-              border: 1px solid #d2d2d2;
-              border-radius: 3px;
-              cursor: pointer ;
-            }
-            span.use{
-              display: inline-block;
-              margin-bottom: 30px;
-              width: 360px;
-              font-size: 14px;
-              color: #000;
-              text-align: left;
-              em{
-                font-size: 14px;
-                font-style: normal;
-                color: #000;
-              }
-            }
-            .form-group {
-              margin: 0 auto 16px;
-              position: relative;
-              width: 360px;
-              height: 44px;
-              line-height: 44px;
-              input.msg{
-                float: left;
-                width: 210px;
-                padding: 0 0 0 18px;
-                height: 44px;
-                line-height: 44px;
-                font-size: 14px;
-                color: #000;
-                border-radius: 0;
-              }
-              span.msg{
-                float: right;
-                margin: 0;
-                width: 130px;
-                height: 44px;
-                line-height: 44px;
-                font-size: 14px;
-                color: #5a5a5a;
-                background: #f4f4f4;
-                border: 1px solid #dcdcdc;
-                cursor: pointer;
-              }
-              span.msg.send{
-                background: #d2d2d2;
-                color: #fff;
-              }
-            }
-            .btn {
-              margin: 34px 0 10px 0;
-              width: 360px;
-              height: 44px;
-              line-height: 4px;
-              font-size: 16px;
-              color: #fff;
-              background: #0076AD;
-              border-radius: 3px;
-            }
-          }
-          .choose{
-            margin: 155px auto 0;
-            padding-bottom: 44px;
-            div{
-              padding: 0 15px;
-              margin: 0 auto 16px;
-              width: 360px;
-              height: 60px;
-              line-height: 60px;
-              text-align: left;
-              overflow: hidden;
-              border: 1px solid #d2d2d2;
-              cursor: pointer;
-              &:hover,&.active{
-                border-color: #0076ad;
-                span{
-                  color: #0076ad;
-                }
-                i.second {
-                  color: #0076ad;
-                }
-               }
-                i.first{
-                  float: left;
-                  margin: 20px 20px 0 0;
-                  font-size: 20px;
-                  color: #323232;
-                }
-                i.first.fa-mobile{
-                  margin: 16px 24px 0 5px;
-                  font-size: 28px;
-                }
-                i.second {
-                  float: right;
-                  margin: 20px 0 0 5px;
-                  font-size: 20px;
-                  color: #323232;
-                }
-                span{
-                  float: left;
-                  font-size: 14px;
-                  color: #323232;
+        })
+      },
+//      没验证手机将跳转到手机验证页面
+      goVaildPhoneStep () {
+        this.$router.push({ path: '/validation/phoneValidation' })
+      },
+//      选择方式
+      chooseWay (flag) {
+        if (flag === 1) {
+          this.showPhoneValid = true
+        } else if (flag === 2) {
+          this.showEmailValid = true
+        }
+        this.goFirstStep = false
+      },
+//      返回上一步
+      goPreviousStep () {
+        this.goFirstStep = true
+        this.showPhoneValid = false
+        this.showEmailValid = false
+      },
+//      获取第一步手机验证码
+      getCheckCode () {
+        this.$http.get(`/update/user/check/mobile`, {params: {mobile: this.getMobile}})
+          .then(response => {
+            this.token = response.data.content.token
+            if (this.token !== '') {
+              this.$message({
+                message: '验证码已经发送到您的手机，请注意查收',
+                type: 'success'
+              })
+              this.sendAccountCode = false
+              this.account_time = 60
+              var accountTime = setInterval(() => {
+                this.account_time--
+                if (this.account_time <= 0) {
+                  this.sendAccountCode = true
+                  clearInterval(accountTime)
                 }
+              }, 1000)
             }
+          }).catch(err => {
+            this.$message.error(err.errMsg)
+          })
+      },
+//      手机号验证下一步
+      goNextStep () {
+        if (this.codeChecked) {
+          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'}
           }
-        a.return{
-          position: absolute;
-          left: 0;
-          top: -15px;
-          img{
-            width: 34px !important;
-            height: 34px !important;
-          }
+          this.$http.post(`/update/user/check/mobile`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$store.commit('login/GET_TOKEN', response.data.content)
+                this.showPhoneValid = false
+                this.$router.push({ path: '/encrypted-setting/EncryptedSettingSecondStep' })
+              } else {
+                this.showPhoneValid = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
         }
+      },
+//      第一步验证邮箱
+      firstStepValidEmail () {
+        this.$http.get(`/update/user/check/email`, {params: {email: this.getEmail, operate: 'question'}})
+          .then(response => {
+            if (response.data.success) {
+              this.emailSendSuccess = true
+            } else {
+              this.emailSendSuccess = false
+              return Promise.reject(response.data)
+            }
+          }).catch(err => {
+            console.log(err)
+//          this.$message.error(err.errMsg)
+          })
       }
     }
   }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+  .container{
+    padding-top: 50px;
+    margin: 0 auto;
+    width: 980px;
+    text-align: center;
+  .content{
+    padding: 0 50px;
+    margin: 50px auto 0;
+    width: 100%;
+    /*height: 540px;*/
+    text-align: center;
+    background: #fff;
+  .content-top{
+    height: 80px;
+    line-height: 80px;
+  h3{
+    margin-bottom: 0;
+    font-size: 24px;
+    color: #000;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .step{
+    position: relative;
+    margin-top: 10px;
+  img{
+    width: 315px;
+    height: 46px;
+  }
+  .step-item{
+    position: absolute;
+    top: 45px;
+    left: 265px;
+  span{
+    margin-right: 78px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  }
+  }
+  }
+  form {
+    margin-top: 150px;
+    padding-bottom: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.answer {
+    background: url("/images/all/more.png") no-repeat 325px center;
+    cursor: pointer;
+  }
+  ul{
+    display: none;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    width: 360px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    z-index: 10;
+  li{
+    padding-left: 18px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+  &:hover{
+     background: #0076ad;
+     color: #fff;
+   }
+  }
+  }
+  span.tip{
+    position: absolute;
+    top: 0;
+    right: -238px;
+    font-size: 13px;
+    color: #8c8c8c;
+  a{
+    font-size: 13px;
+    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;
+    left: 20px;
+    font-size: 20px;
+    color: #a0a0a0;
+  }
+  .btn {
+    margin: 34px 0 16px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .content-bottom{
+    margin: 155px auto 0;
+    padding-bottom: 50px;
+    width: 360px;
+  div.warp{
+    padding-bottom: 65px;
+  }
+  p{
+    font-size: 24px;
+    color: #323232;
+  img{
+    margin-right: 20px;
+    width: 30px;
+    height: 28px;
+  }
+  }
+  p.pass{
+    font-size: 24px;
+    color: #e77405;
+  img{
+    height: 30px;
+  }
+  }
+  p.passed {
+    color: #2ab300;
+  img{
+    height: 30px;
+  }
+  }
+  span{
+    display: inline-block;
+    font-size: 14px;
+    color: #8b8b8b;
+  }
+  span.close-tip{
+    margin: 15px 0 140px 0;
+  }
+  .close-btn{
+    margin: 0 auto;
+    width: 200px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    text-align: center;
+    color: #323232;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    cursor: pointer ;
+  }
+  span.use{
+    display: inline-block;
+    margin-bottom: 30px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    text-align: left;
+  em{
+    font-size: 14px;
+    font-style: normal;
+    color: #000;
+  }
+  }
+  .form-group {
+    margin: 0 auto 16px;
+    position: relative;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    color: #5a5a5a;
+    background: #f4f4f4;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  span.msg.send{
+    background: #d2d2d2;
+    color: #fff;
+  }
+  }
+  .btn {
+    margin: 34px 0 10px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .choose{
+    margin: 155px auto 0;
+    padding-bottom: 44px;
+  div{
+    padding: 0 15px;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    overflow: hidden;
+    border: 1px solid #d2d2d2;
+    cursor: pointer;
+  &:hover,&.active{
+             border-color: #0076ad;
+  span{
+    color: #0076ad;
+  }
+  i.second {
+    color: #0076ad;
+  }
+  }
+  img.first{
+    float: left;
+    margin: 24px 20px 0 0;
+    font-size: 20px;
+    color: #323232;
+  }
+  img.first.mob{
+    margin: 22px 20px 0 5px;
+    font-size: 28px;
+  }
+  i.second {
+    float: right;
+    margin: 20px 0 0 5px;
+    font-size: 20px;
+    color: #323232;
+  }
+  span{
+    float: left;
+    font-size: 14px;
+    color: #323232;
+  }
+  }
+  }
+  a.return{
+    position: absolute;
+    left: 0;
+    top: -15px;
+  img{
+    width: 34px !important;
+    height: 34px !important;
+  }
+  }
+  }
+  }
+  }
 </style>

components/encrypted-setting/EncryptedSettingSecondStep.vue

@@ -0,0 +1,486 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>添加密保设置</h3>
+          <div class="step">
+            <img src="/images/all/step02.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span class="active">密保设置</span><span>设置完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <div>
+            <el-form :model="valid2" :rules="rules2" ref="valid2" label-width="100px" class="demo-ruleForm">
+              <el-form-item prop="question1">
+                <el-select v-model="valid2.question1" placeholder="问题一">
+                  <el-option label="您的母亲的生日是几月几日？" value="您的母亲的生日是几月几日？"></el-option>
+                  <el-option label="您最喜欢的宠物叫什么名字？" value="您最喜欢的宠物叫什么名字"></el-option>
+                  <el-option label="您最喜欢的电影片名是什么？" value="您最喜欢的电影片名是什么？"></el-option>
+                  <el-option label="您的学号是？" value="您的学号是？"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="answer1">
+                <el-input v-model="valid2.answer1" placeholder="答案一"></el-input>
+              </el-form-item>
+              <el-form-item prop="question2">
+              <el-select v-model="valid2.question2" placeholder="问题一">
+                <el-option label="您的爷爷叫什么名字？" value="您的爷爷叫什么名字？"></el-option>
+                <el-option label="您的配偶的生日是几月几日？" value="您的配偶的生日是几月几日？"></el-option>
+                <el-option label="您最喜欢的歌手是谁？" value="您最喜欢的歌手是谁？"></el-option>
+                <el-option label="您就读的小学学校全称是？" value="您就读的小学学校全称是？"></el-option>
+              </el-select>
+              </el-form-item>
+              <el-form-item prop="answer2">
+                <el-input v-model="valid2.answer2" placeholder="答案二"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn finish"
+                   :disabled="!answer1SecondChecked || !question1SecondChecked || !answer2SecondChecked || !question2SecondChecked"
+                   @click="questionSubmit">提交</a>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    data () {
+//      第二步验证手机
+      var validateSecondAnswer1 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的答案'))
+          this.answer1SecondChecked = false
+        } else {
+          if (this.valid2.answer1 !== '') {
+            this.answer1SecondChecked = true
+          }
+          callback()
+        }
+      }
+      var validateSecondAnswer2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的答案'))
+          this.answer2SecondChecked = false
+        } else {
+          if (this.valid2.answer2 !== '') {
+            this.answer2SecondChecked = true
+          }
+          callback()
+        }
+      }
+      var validateSecondQuestion1 = (rule, value, callback) => {
+        if (value === '') {
+          this.question1SecondChecked = false
+          callback(new Error('请选择问题'))
+        } else {
+          this.question1SecondChecked = true
+          callback()
+        }
+      }
+      var validateSecondQuestion2 = (rule, value, callback) => {
+        if (value === '') {
+          this.question2SecondChecked = false
+          callback(new Error('请选择问题'))
+        } else {
+          this.question2SecondChecked = true
+          callback()
+        }
+      }
+      return {
+        answer1SecondChecked: false,
+        question1SecondChecked: false,
+        answer2SecondChecked: false,
+        question2SecondChecked: false,
+        valid2: {
+          answer1: '',
+          question1: '',
+          answer2: '',
+          question2: ''
+        },
+        rules2: {
+          question1: [
+            { validator: validateSecondQuestion1, required: true, message: '请选择问题', trigger: 'change' }
+          ],
+          answer1: [
+            {validator: validateSecondAnswer1, trigger: 'blur'}
+          ],
+          question2: [
+            { validator: validateSecondQuestion2, required: true, message: '请选择问题', trigger: 'change' }
+          ],
+          answer2: [
+            {validator: validateSecondAnswer2, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    computed: {
+      firstStepToken () {
+        return this.$store.state.login.token.data
+      }
+    },
+    mounted () {
+//    获取邮箱token
+      this.$nextTick(() => {
+        this.getEmailLinkToken()
+      })
+//      密保问题
+//      this.$http.get('/data/question.json').then(response => {
+//        this.questionOne = response.data.questionOne
+//        this.questionTwo = response.data.questionTwo
+//      })
+    },
+    methods: {
+//      设置密保
+      questionSubmit () {
+        if (this.answer1SecondChecked && this.question1SecondChecked && this.answer2SecondChecked && this.question2SecondChecked) {
+          let param = new FormData()
+          let userQuestion = []
+          userQuestion.push({'question': this.valid2.question1, 'answer': this.valid2.answer1, 'sort': '1'}, {'question': this.valid2.question2, 'answer': this.valid2.answer2, 'sort': '2'})
+          let userQuestions = JSON.stringify(userQuestion)
+          param.append('userQuestions', userQuestions)
+          param.append('token', this.firstStepToken)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/update/user/setQuestion`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                console.log(response.data)
+//                this.$router.push({ path: '/encrypted-setting/EncryptedSettingThirdStep' })
+              } else {
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+//      获得邮箱token
+      getEmailLinkToken () {
+        var url = window.location.search
+        var request = {}
+        if (url.indexOf('?' !== -1)) {
+          var str = url.substr(1)
+          var strs = str.split('&')
+          for (var i = 0; i < strs.length; i++) {
+            request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
+          }
+        }
+        this.Token = request['token'] || ''
+        if (this.Token) {
+          console.log(this.Token)
+          this.$store.commit('login/GET_TOKEN', this.Token)
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+  .container{
+    padding-top: 50px;
+    margin: 0 auto;
+    width: 980px;
+    text-align: center;
+  .content{
+    padding: 0 50px;
+    margin: 50px auto 0;
+    width: 100%;
+    /*height: 540px;*/
+    text-align: center;
+    background: #fff;
+  .content-top{
+    height: 80px;
+    line-height: 80px;
+  h3{
+    margin-bottom: 0;
+    font-size: 24px;
+    color: #000;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .step{
+    position: relative;
+    margin-top: 10px;
+  img{
+    width: 315px;
+    height: 46px;
+  }
+  .step-item{
+    position: absolute;
+    top: 45px;
+    left: 265px;
+  span{
+    margin-right: 78px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  }
+  }
+  }
+  form {
+    margin-top: 150px;
+    padding-bottom: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.answer {
+    background: url("/images/all/more.png") no-repeat 325px center;
+    cursor: pointer;
+  }
+  ul{
+    display: none;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    width: 360px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    z-index: 10;
+  li{
+    padding-left: 18px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+  &:hover{
+     background: #0076ad;
+     color: #fff;
+   }
+  }
+  }
+  span.tip{
+    position: absolute;
+    top: 0;
+    right: -238px;
+    font-size: 13px;
+    color: #8c8c8c;
+  a{
+    font-size: 13px;
+    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;
+    left: 20px;
+    font-size: 20px;
+    color: #a0a0a0;
+  }
+  .btn {
+    margin: 34px 0 16px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .content-bottom{
+    margin: 155px auto 0;
+    padding-bottom: 50px;
+    width: 360px;
+  div.warp{
+    padding-bottom: 65px;
+  }
+  p{
+    font-size: 24px;
+    color: #323232;
+  img{
+    margin-right: 20px;
+    width: 30px;
+    height: 28px;
+  }
+  }
+  p.pass{
+    font-size: 24px;
+    color: #e77405;
+  img{
+    height: 30px;
+  }
+  }
+  p.passed {
+    color: #2ab300;
+  img{
+    height: 30px;
+  }
+  }
+  span{
+    display: inline-block;
+    font-size: 14px;
+    color: #8b8b8b;
+  }
+  span.close-tip{
+    margin: 15px 0 140px 0;
+  }
+  .close-btn{
+    margin: 0 auto;
+    width: 200px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    text-align: center;
+    color: #323232;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    cursor: pointer ;
+  }
+  span.use{
+    display: inline-block;
+    margin-bottom: 30px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    text-align: left;
+  em{
+    font-size: 14px;
+    font-style: normal;
+    color: #000;
+  }
+  }
+  .form-group {
+    margin: 0 auto 16px;
+    position: relative;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    color: #5a5a5a;
+    background: #f4f4f4;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  span.msg.send{
+    background: #d2d2d2;
+    color: #fff;
+  }
+  }
+  .btn {
+    margin: 34px 0 10px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .choose{
+    margin: 155px auto 0;
+    padding-bottom: 44px;
+  div{
+    padding: 0 15px;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    overflow: hidden;
+    border: 1px solid #d2d2d2;
+    cursor: pointer;
+  &:hover,&.active{
+             border-color: #0076ad;
+  span{
+    color: #0076ad;
+  }
+  i.second {
+    color: #0076ad;
+  }
+  }
+  img.first{
+    float: left;
+    margin: 24px 20px 0 0;
+    font-size: 20px;
+    color: #323232;
+  }
+  img.first.mob{
+    margin: 22px 20px 0 5px;
+    font-size: 28px;
+  }
+  i.second {
+    float: right;
+    margin: 20px 0 0 5px;
+    font-size: 20px;
+    color: #323232;
+  }
+  span{
+    float: left;
+    font-size: 14px;
+    color: #323232;
+  }
+  }
+  }
+  a.return{
+    position: absolute;
+    left: 0;
+    top: -15px;
+  img{
+    width: 34px !important;
+    height: 34px !important;
+  }
+  }
+  }
+  }
+  }
+</style>

components/encrypted-setting/EncryptedSettingThirdStep.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>添加密保设置</h3>
+          <div class="step">
+            <img src="/images/all/step03.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span class="active">密保设置</span><span class="active">设置完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
+          <span class="close-tip">添加密保之后，您的账号更安全了！</span>
+          <div class="close-btn" @click="goCloudCenter">关闭</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    methods: {
+//      跳转至云中心页面
+      goCloudCenter () {
+        window.location.href = '/cloudcenter'
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+  .container{
+    padding-top: 50px;
+    margin: 0 auto;
+    width: 980px;
+    text-align: center;
+  .content{
+    padding: 0 50px;
+    margin: 50px auto 0;
+    width: 100%;
+    /*height: 540px;*/
+    text-align: center;
+    background: #fff;
+  .content-top{
+    height: 80px;
+    line-height: 80px;
+  h3{
+    margin-bottom: 0;
+    font-size: 24px;
+    color: #000;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .step{
+    position: relative;
+    margin-top: 10px;
+  img{
+    width: 315px;
+    height: 46px;
+  }
+  .step-item{
+    position: absolute;
+    top: 45px;
+    left: 265px;
+  span{
+    margin-right: 78px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  }
+  }
+  }
+  form {
+    margin-top: 150px;
+    padding-bottom: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.answer {
+    background: url("/images/all/more.png") no-repeat 325px center;
+    cursor: pointer;
+  }
+  ul{
+    display: none;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    width: 360px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    z-index: 10;
+  li{
+    padding-left: 18px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+  &:hover{
+     background: #0076ad;
+     color: #fff;
+   }
+  }
+  }
+  span.tip{
+    position: absolute;
+    top: 0;
+    right: -238px;
+    font-size: 13px;
+    color: #8c8c8c;
+  a{
+    font-size: 13px;
+    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;
+    left: 20px;
+    font-size: 20px;
+    color: #a0a0a0;
+  }
+  .btn {
+    margin: 34px 0 16px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .content-bottom{
+    margin: 155px auto 0;
+    padding-bottom: 50px;
+    width: 360px;
+  div.warp{
+    padding-bottom: 65px;
+  }
+  p{
+    font-size: 24px;
+    color: #323232;
+  img{
+    margin-right: 20px;
+    width: 30px;
+    height: 28px;
+  }
+  }
+  p.pass{
+    font-size: 24px;
+    color: #e77405;
+  img{
+    height: 30px;
+  }
+  }
+  p.passed {
+    color: #2ab300;
+  img{
+    height: 30px;
+  }
+  }
+  span{
+    display: inline-block;
+    font-size: 14px;
+    color: #8b8b8b;
+  }
+  span.close-tip{
+    margin: 15px 0 140px 0;
+  }
+  .close-btn{
+    margin: 0 auto;
+    width: 200px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    text-align: center;
+    color: #323232;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    cursor: pointer ;
+  }
+  span.use{
+    display: inline-block;
+    margin-bottom: 30px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    text-align: left;
+  em{
+    font-size: 14px;
+    font-style: normal;
+    color: #000;
+  }
+  }
+  .form-group {
+    margin: 0 auto 16px;
+    position: relative;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    color: #5a5a5a;
+    background: #f4f4f4;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  span.msg.send{
+    background: #d2d2d2;
+    color: #fff;
+  }
+  }
+  .btn {
+    margin: 34px 0 10px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .choose{
+    margin: 155px auto 0;
+    padding-bottom: 44px;
+  div{
+    padding: 0 15px;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    overflow: hidden;
+    border: 1px solid #d2d2d2;
+    cursor: pointer;
+  &:hover,&.active{
+             border-color: #0076ad;
+  span{
+    color: #0076ad;
+  }
+  i.second {
+    color: #0076ad;
+  }
+  }
+  img.first{
+    float: left;
+    margin: 24px 20px 0 0;
+    font-size: 20px;
+    color: #323232;
+  }
+  img.first.mob{
+    margin: 22px 20px 0 5px;
+    font-size: 28px;
+  }
+  i.second {
+    float: right;
+    margin: 20px 0 0 5px;
+    font-size: 20px;
+    color: #323232;
+  }
+  span{
+    float: left;
+    font-size: 14px;
+    color: #323232;
+  }
+  }
+  }
+  a.return{
+    position: absolute;
+    left: 0;
+    top: -15px;
+  img{
+    width: 34px !important;
+    height: 34px !important;
+  }
+  }
+  }
+  }
+  }
+</style>

components/validation/EmailValidation.vue

@@ -125,6 +125,7 @@
       <div>
         <el-dialog class="valid-phone"
                    :visible.sync="goValidPhone"
+                   @close="goVaildPhoneStep"
                    size="tiny">
           <div class="set-tip" v-show="goValidPhone">
             <p>您的账号的未验证手机，请先验证手机号</p>
@@ -321,6 +322,10 @@
           }
         })
       },
+//      没验证手机将跳转到手机验证页面
+      goVaildPhoneStep () {
+        this.$router.push({ path: '/validation/phoneValidation' })
+      },
 //      选择方式
       chooseWay (flag) {
         if (flag === 1) {

components/validation/EmailValidationSecondStep.vue

@@ -75,35 +75,27 @@
     },
     mounted () {
 //      获取邮箱token
-      if (this.Token) {
-        this.$nextTick(() => {
-          this.getEmailLinkToken()
-        })
-      }
+      this.$nextTick(() => {
+        this.getEmailLinkToken()
+      })
     },
     methods: {
 //      设置新邮箱
       sendVerificationRequest () {
         if (this.emailSecondChecked) {
-          let param = new FormData()
-          param.append('email', this.valid2.email)
-          param.append('token', this.firstStepToken)
-          console.log(this.firstStepToken)
-          let config = {
-            headers: {'Content-Type': 'multipart/form-data'}
-          }
-          this.$http.post(`/update/user/setEmail`, param, config)
+          this.$http.get(`/update/user/setEmail`, {params: {email: this.valid2.email, token: this.firstStepToken}})
             .then(response => {
               if (response.data.success) {
                 console.log(response.data.success)
                 this.sendEmailSuccess = true
-                window.location.href = '/validation/emailValidationThirdStep'
+//                window.location.href = '/validation/emailValidationThirdStep'
               } else {
                 this.sendEmailSuccess = false
                 return Promise.reject(response.data)
               }
             }).catch(err => {
               console.log(err)
+//                  this.$message.error(err.errMsg)
             })
         }
       },
@@ -119,8 +111,10 @@
           }
         }
         this.Token = request['token'] || ''
-        console.log(this.Token)
-        this.$store.commit('login/GET_TOKEN', this.Token)
+        if (this.Token) {
+          console.log(this.Token)
+          this.$store.commit('login/GET_TOKEN', this.Token)
+        }
       }
     }
   }

components/validation/PhoneValidationSecondStep.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="validation">
     <div class="container">
-      <div class="content" v-show="goSecondStep">
+      <div class="content">
         <div class="content-top">
           <h3>验证手机</h3>
           <div class="step">
@@ -37,20 +37,6 @@
           </div>
         </div>
       </div>
-      <div class="content" v-show="!goSecondStep">
-        <div class="content-top">
-          <h3>验证手机</h3>
-          <div class="step">
-            <img src="/images/all/step03.png" alt=""/>
-            <div class="step-item"><span class="active">账号验证</span><span class="active">新手机号码</span><span class="active">设置完成</span></div>
-          </div>
-        </div>
-        <div class="content-bottom">
-          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
-          <span class="close-tip">及时更换最新的手机号码能极大地提高账号安全性哦！</span>
-          <div class="close-btn" @click="goCloudCenter">关闭</div>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -116,7 +102,6 @@
         }
       }
       return {
-        goSecondStep: true,
         second_step_time: 0,
         codeErrorChecked: false,
         secondStepCodeErrorChecked: false,
@@ -145,12 +130,10 @@
       }
     },
     mounted () {
-//      获取邮箱token
-      if (this.Token) {
-        this.$nextTick(() => {
-          this.getEmailLinkToken()
-        })
-      }
+//    获取邮箱token
+      this.$nextTick(() => {
+        this.getEmailLinkToken()
+      })
     },
     methods: {
 //      获取第二步手机验证码
@@ -190,10 +173,8 @@
           this.$http.post(`/update/user/setMobile`, param, config)
             .then(response => {
               if (response.data.success) {
-                console.log(response.data.success)
-                this.goSecondStep = false
+                this.$router.push({ path: '/validation/phoneValidationThirdStep' })
               } else {
-                this.goSecondStep = true
                 return Promise.reject(response.data)
               }
             }).catch(err => {
@@ -201,10 +182,6 @@
             })
         }
       },
-//      跳转至云中心页面
-      goCloudCenter () {
-        window.location.href = '/cloudcenter'
-      },
 //      获得邮箱token
       getEmailLinkToken () {
         var url = window.location.search
@@ -217,8 +194,10 @@
           }
         }
         this.Token = request['token'] || ''
-        console.log(this.Token)
-        this.$store.commit('login/GET_TOKEN', this.Token)
+        if (this.Token) {
+          console.log(this.Token)
+          this.$store.commit('login/GET_TOKEN', this.Token)
+        }
       }
     }
   }

components/validation/PhoneValidationThirdStep.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>验证手机</h3>
+          <div class="step">
+            <img src="/images/all/step03.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span class="active">新手机号码</span><span class="active">设置完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
+          <span class="close-tip">及时更换最新的手机号码能极大地提高账号安全性哦！</span>
+          <div class="close-btn" @click="goCloudCenter">关闭</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    methods: {
+//      跳转至云中心页面
+      goCloudCenter () {
+        window.location.href = '/cloudcenter'
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+    .container{
+      padding-top: 50px;
+      margin: 0 auto;
+      width: 980px;
+      text-align: center;
+      .content{
+        padding: 0 50px;
+        margin: 50px auto 0;
+        width: 100%;
+        /*height: 540px;*/
+        text-align: center;
+        background: #fff;
+          .content-top{
+            height: 80px;
+            line-height: 80px;
+            h3{
+              margin-bottom: 0;
+              font-size: 24px;
+              color: #000;
+              border-bottom: 1px solid #dcdcdc;
+            }
+            .step{
+              position: relative;
+              margin-top: 10px;
+              img{
+                width: 315px;
+                height: 46px;
+              }
+              .step-item{
+                position: absolute;
+                top: 45px;
+                left: 265px;
+                span{
+                  margin-right: 78px;
+                  font-size: 14px;
+                  color: #b4b4b4;
+                }
+                span.active {
+                  color: #0076ad;
+                }
+              }
+            }
+          }
+          form {
+            margin-top: 150px;
+            padding-bottom: 44px;
+              input{
+                padding: 0 0 0 18px;
+                width: 360px;
+                height: 44px;
+                line-height: 44px;
+                font-size: 14px;
+                color: #000;
+                border-radius: 0;
+              }
+              input.answer {
+                background: url("/images/all/more.png") no-repeat 325px center;
+                cursor: pointer;
+              }
+              ul{
+                display: none;
+                position: absolute;
+                top: 44px;
+                left: 0;
+                width: 360px;
+                background: #fff;
+                box-shadow: 0 0 5px rgba(0,0,0,.5);
+                -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+                -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+                -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+                z-index: 10;
+                li{
+                  padding-left: 18px;
+                  width: 100%;
+                  height: 30px;
+                  line-height: 30px;
+                  text-align: left;
+                  font-size: 14px;
+                  color: #000;
+                  cursor: pointer;
+                  &:hover{
+                    background: #0076ad;
+                    color: #fff;
+                   }
+                }
+              }
+              span.tip{
+                position: absolute;
+                top: 0;
+                right: -238px;
+                font-size: 13px;
+                color: #8c8c8c;
+                a{
+                  font-size: 13px;
+                  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;
+                left: 20px;
+                font-size: 20px;
+                color: #a0a0a0;
+              }
+            .btn {
+              margin: 34px 0 16px 0;
+              width: 360px;
+              height: 44px;
+              line-height: 44px;
+              font-size: 16px;
+              color: #fff;
+              background: #0076AD;
+              border-radius: 3px;
+            }
+          }
+          .content-bottom{
+            margin: 155px auto 0;
+            padding-bottom: 50px;
+            width: 360px;
+            div.warp{
+              padding-bottom: 65px;
+            }
+            p{
+              font-size: 24px;
+              color: #323232;
+              img{
+                margin-right: 20px;
+                width: 30px;
+                height: 28px;
+              }
+            }
+            p.pass{
+              font-size: 24px;
+              color: #e77405;
+              img{
+                height: 30px;
+              }
+            }
+            p.passed {
+              color: #2ab300;
+              img{
+                height: 30px;
+              }
+            }
+            span{
+              display: inline-block;
+              font-size: 14px;
+              color: #8b8b8b;
+            }
+            span.close-tip{
+              margin: 15px 0 140px 0;
+            }
+            .close-btn{
+              margin: 0 auto;
+              width: 200px;
+              height: 36px;
+              line-height: 36px;
+              font-size: 14px;
+              text-align: center;
+              color: #323232;
+              border: 1px solid #d2d2d2;
+              border-radius: 3px;
+              cursor: pointer ;
+            }
+            span.use{
+              display: inline-block;
+              margin-bottom: 30px;
+              width: 360px;
+              font-size: 14px;
+              color: #000;
+              text-align: left;
+              em{
+                font-size: 14px;
+                font-style: normal;
+                color: #000;
+              }
+            }
+            .form-group {
+              margin: 0 auto 16px;
+              position: relative;
+              width: 360px;
+              height: 44px;
+              line-height: 44px;
+              input{
+                padding: 0 0 0 18px;
+                width: 360px;
+                height: 44px;
+                line-height: 44px;
+                font-size: 14px;
+                color: #000;
+                border-radius: 0;
+              }
+              input.msg{
+                float: left;
+                width: 210px;
+                padding: 0 0 0 18px;
+                height: 44px;
+                line-height: 44px;
+                font-size: 14px;
+                color: #000;
+                border-radius: 0;
+              }
+              span.msg{
+                float: right;
+                margin: 0;
+                width: 130px;
+                height: 44px;
+                line-height: 44px;
+                text-align: center ;
+                font-size: 14px;
+                color: #5a5a5a;
+                background: #f4f4f4;
+                border: 1px solid #dcdcdc;
+                cursor: pointer;
+              }
+              span.msg.send{
+                background: #d2d2d2;
+                color: #fff;
+              }
+            }
+            .btn {
+              margin: 34px 0 10px 0;
+              width: 360px;
+              height: 44px;
+              line-height: 44px;
+              font-size: 16px;
+              color: #fff;
+              background: #0076AD;
+              border-radius: 3px;
+            }
+          }
+          .choose{
+            margin: 155px auto 0;
+            padding-bottom: 44px;
+            div{
+              padding: 0 15px;
+              margin: 0 auto 16px;
+              width: 360px;
+              height: 60px;
+              line-height: 60px;
+              text-align: left;
+              overflow: hidden;
+              border: 1px solid #d2d2d2;
+              cursor: pointer;
+              &:hover,&.active{
+                border-color: #0076ad;
+                span{
+                  color: #0076ad;
+                }
+                i.second {
+                  color: #0076ad;
+                }
+               }
+                img.first{
+                  float: left;
+                  margin: 24px 20px 0 0;
+                  font-size: 20px;
+                  color: #323232;
+                }
+                img.first.mob{
+                  margin: 22px 20px 0 5px;
+                  font-size: 28px;
+                }
+                i.second {
+                  float: right;
+                  margin: 20px 0 0 5px;
+                  font-size: 20px;
+                  color: #323232;
+                }
+                span{
+                  float: left;
+                  font-size: 14px;
+                  color: #323232;
+                }
+            }
+          }
+        a.return{
+          position: absolute;
+          left: 0;
+          top: -15px;
+          img{
+            width: 34px !important;
+            height: 34px !important;
+          }
+        }
+      }
+    }
+  }
+</style>

components/validation/ValidationFail.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>验证手机</h3>
+          <div class="step">
+            <img src="/images/all/step03.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span class="active">新手机号码</span><span class="active">设置完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置失败</p>
+          <span class="close-tip">失败！</span>
+          <div class="close-btn" @click="goCloudCenter">关闭</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    methods: {
+//      跳转至云中心页面
+      goCloudCenter () {
+        window.location.href = '/cloudcenter'
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+  .container{
+    padding-top: 50px;
+    margin: 0 auto;
+    width: 980px;
+    text-align: center;
+  .content{
+    padding: 0 50px;
+    margin: 50px auto 0;
+    width: 100%;
+    /*height: 540px;*/
+    text-align: center;
+    background: #fff;
+  .content-top{
+    height: 80px;
+    line-height: 80px;
+  h3{
+    margin-bottom: 0;
+    font-size: 24px;
+    color: #000;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .step{
+    position: relative;
+    margin-top: 10px;
+  img{
+    width: 315px;
+    height: 46px;
+  }
+  .step-item{
+    position: absolute;
+    top: 45px;
+    left: 265px;
+  span{
+    margin-right: 78px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  }
+  }
+  }
+  form {
+    margin-top: 150px;
+    padding-bottom: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.answer {
+    background: url("/images/all/more.png") no-repeat 325px center;
+    cursor: pointer;
+  }
+  ul{
+    display: none;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    width: 360px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    z-index: 10;
+  li{
+    padding-left: 18px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+  &:hover{
+     background: #0076ad;
+     color: #fff;
+   }
+  }
+  }
+  span.tip{
+    position: absolute;
+    top: 0;
+    right: -238px;
+    font-size: 13px;
+    color: #8c8c8c;
+  a{
+    font-size: 13px;
+    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;
+    left: 20px;
+    font-size: 20px;
+    color: #a0a0a0;
+  }
+  .btn {
+    margin: 34px 0 16px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .content-bottom{
+    margin: 155px auto 0;
+    padding-bottom: 50px;
+    width: 360px;
+  div.warp{
+    padding-bottom: 65px;
+  }
+  p{
+    font-size: 24px;
+    color: #323232;
+  img{
+    margin-right: 20px;
+    width: 30px;
+    height: 28px;
+  }
+  }
+  p.pass{
+    font-size: 24px;
+    color: #e77405;
+  img{
+    height: 30px;
+  }
+  }
+  p.passed {
+    color: #2ab300;
+  img{
+    height: 30px;
+  }
+  }
+  span{
+    display: inline-block;
+    font-size: 14px;
+    color: #8b8b8b;
+  }
+  span.close-tip{
+    margin: 15px 0 140px 0;
+  }
+  .close-btn{
+    margin: 0 auto;
+    width: 200px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    text-align: center;
+    color: #323232;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    cursor: pointer ;
+  }
+  span.use{
+    display: inline-block;
+    margin-bottom: 30px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    text-align: left;
+  em{
+    font-size: 14px;
+    font-style: normal;
+    color: #000;
+  }
+  }
+  .form-group {
+    margin: 0 auto 16px;
+    position: relative;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    color: #5a5a5a;
+    background: #f4f4f4;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  span.msg.send{
+    background: #d2d2d2;
+    color: #fff;
+  }
+  }
+  .btn {
+    margin: 34px 0 10px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .choose{
+    margin: 155px auto 0;
+    padding-bottom: 44px;
+  div{
+    padding: 0 15px;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    overflow: hidden;
+    border: 1px solid #d2d2d2;
+    cursor: pointer;
+  &:hover,&.active{
+             border-color: #0076ad;
+  span{
+    color: #0076ad;
+  }
+  i.second {
+    color: #0076ad;
+  }
+  }
+  img.first{
+    float: left;
+    margin: 24px 20px 0 0;
+    font-size: 20px;
+    color: #323232;
+  }
+  img.first.mob{
+    margin: 22px 20px 0 5px;
+    font-size: 28px;
+  }
+  i.second {
+    float: right;
+    margin: 20px 0 0 5px;
+    font-size: 20px;
+    color: #323232;
+  }
+  span{
+    float: left;
+    font-size: 14px;
+    color: #323232;
+  }
+  }
+  }
+  a.return{
+    position: absolute;
+    left: 0;
+    top: -15px;
+  img{
+    width: 34px !important;
+    height: 34px !important;
+  }
+  }
+  }
+  }
+  }
+</style>

components/validation/index.js

@@ -3,5 +3,6 @@ import PhoneValidationSecondStep from './PhoneValidationSecondStep.vue'
 import EmailValidation from './EmailValidation.vue'
 import EmailValidationSecondStep from './EmailValidationSecondStep.vue'
 import EmailValidationThirdStep from './EmailValidationThirdStep.vue'
+import ValidationFail from './ValidationFail.vue'
 
-export { PhoneValidation, PhoneValidationSecondStep, EmailValidation, EmailValidationSecondStep, EmailValidationThirdStep }
+export { PhoneValidation, PhoneValidationSecondStep, EmailValidation, EmailValidationSecondStep, EmailValidationThirdStep, ValidationFail }

pages/encrypted-setting/encryptedSettingSecondStep.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <accountCenter-header/>
+    <encryptedSetting-secondStep/>
+  </div>
+</template>
+<script>
+  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
+  import EncryptedSettingSecondStep from '~components/encrypted-setting/EncryptedSettingSecondStep.vue'
+  export default {
+    layout: 'default',
+    components: {
+      AccountCenterHeader,
+      EncryptedSettingSecondStep
+    }
+  }
+</script>

pages/encrypted-setting/encryptedSettingThirdStep.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <accountCenter-header/>
+    <encryptedSetting-thirdStep/>
+  </div>
+</template>
+<script>
+  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
+  import EncryptedSettingThirdStep from '~components/encrypted-setting/EncryptedSettingThirdStep.vue'
+  export default {
+    layout: 'default',
+    components: {
+      AccountCenterHeader,
+      EncryptedSettingThirdStep
+    }
+  }
+</script>

pages/validation/phoneValidationThirdStep.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <accountCenter-header/>
+    <phoneValidation-thirdStep/>
+  </div>
+</template>
+<script>
+  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
+  import PhoneValidationThirdStep from '~components/validation/PhoneValidationThirdStep.vue'
+  export default {
+    layout: 'default',
+    components: {
+      AccountCenterHeader,
+      PhoneValidationThirdStep
+    }
+  }
+</script>

pages/validation/validFail.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <accountCenter-header/>
+    <validation-fail/>
+  </div>
+</template>
+<script>
+  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
+  import ValidationFail from '~components/validation/ValidationFail.vue'
+  export default {
+    layout: 'default',
+    components: {
+      AccountCenterHeader,
+      ValidationFail
+    }
+  }
+</script>

static/data/question.json

@@ -0,0 +1,14 @@
+{
+    "questionOne":[
+        "您的母亲的生日是几月几日？",
+        "您最喜欢的宠物叫什么名字？",
+        "您最喜欢的电影片名是什么？",
+        "您的学号是？"
+    ],
+    "questionTwo":[
+        "您的爷爷叫什么名字？",
+        "您的配偶的生日是几月几日？",
+        "您最喜欢的歌手是谁？",
+        "您就读的小学学校全称是？"
+    ]
+}