密码重置（修改密码和忘记密码）

components/change/ChangeManager.vue

@@ -1,128 +1,124 @@
 <template>
   <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">
             <img src="/images/all/step01.png" alt=""/>
-            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></div>
-            <!--<a href="" class="return"><img src="/images/all/return.png" alt=""/></a>-->
+            <div class="step-item"><span class="active">身份验证</span><span>输入新管理员信息</span><span>更换完成</span></div>
           </div>
         </div>
         <div class="choose">
-          <div><img src="/images/all/icon01.png" alt="" class="first mob"/><span>通过验证手机</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon02.png" alt="" class="first"/><span>通过验证邮箱</span><i class="fa fa-angle-right second"></i></div>
-          <div class="active"><img src="/images/all/icon03.png" alt="" class="first"/><span>通过验证密保</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon04.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-top">
-          <h3>更换管理员</h3>
-          <div class="step">
-            <img src="/images/all/step01.png" alt=""/>
-            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></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>
-        <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>-->
+          <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 v-show="hasValidQuestionsWay"
+               @click="chooseWay(3)">
+            <img src="/images/all/icon03.png" alt="" class="first"/>
+            <span>通过验证密保</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="showManualAppeal"
+               @click="goChangeManagerAppeal()">
+            <img src="/images/all/icon04.png" alt="" class="first"/>
+            <span>通过人工申诉</span><i class="fa fa-angle-right second"></i>
           </div>
-          <button class="btn">下一步</button>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 2">
+      <div class="content" v-show="showPhoneValid">
         <div class="content-top">
           <h3>更换管理员</h3>
           <div class="step">
             <img src="/images/all/step01.png" alt=""/>
-            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></div>
+            <div class="step-item"><span class="active">身份验证</span><span>输入新管理员信息</span><span>更换完成</span></div>
+            <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@qq.com</em>进行验证，有效期7天</span>
-          <div class="warp"><button class="btn">发送验证请求</button></div>
+          <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>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 3">
+      <div class="content" v-show="showEmailValid">
         <div class="content-top">
           <h3>更换管理员</h3>
           <div class="step">
             <img src="/images/all/step01.png" alt=""/>
-            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></div>
+            <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>
-        <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="答案一"/>
-          </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="content-bottom">
+          <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" class="form-control" placeholder="答案二"/>
-          </div>
-          <button class="btn">下一步</button>
-        </form>
-      </div>
-      <div class="content" v-if="activeTab == 4">
-        <div class="content-top">
-          <h3>更换管理员</h3>
-          <div class="step">
-            <img src="/images/all/step02.png" alt=""/>
-            <div class="step-item"><span class="active step01">账号验证</span><span class="active step02">输入管理员信息</span><span>更换完成</span></div>
+          <div class="warp" v-show="emailSendSuccess">
+            <button class="btn" :disabled="emailSendSuccess">已发送验证邮件，请查收</button>
           </div>
         </div>
-        <form action="">
-          <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>
-          <div class="form-group">
-            <textarea type="text" class="form-control describe" placeholder="申诉说明"></textarea>
-            <span class="describe">请描述您申诉的原因，并尽可能多地列举出证明此企业账号为您所有的证据</span>
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="姓名"/>
-          </div>
-          <button class="btn" style="margin-top: 95px;">提交</button>
-        </form>
       </div>
-      <div class="content" v-if="activeTab == 5">
+      <div class="content" v-show="showQuestionsValid">
         <div class="content-top">
           <h3>更换管理员</h3>
           <div class="step">
-            <img src="/images/all/step03.png" alt=""/>
-            <div class="step-item"><span class="active step01">账号验证</span><span class="active step02">输入管理员信息</span><span class="active">更换完成</span></div>
+            <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">
-          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
-          <span>恭喜您，企业管理员已更换完毕！</span>
-          <div class="close-btn">关闭</div>
+        <div>
+          <el-form :model="validQuestion" :rules="rulesQuestion" ref="valid" label-width="100px" class="demo-ruleForm">
+            <el-form-item class="questions">
+              <span class="question">问题：{{question1}}</span>
+            </el-form-item>
+            <el-form-item prop="answer1">
+              <el-input type="text" v-model="validQuestion.answer1"
+                        auto-complete="off"
+                        placeholder="答案一"></el-input>
+            </el-form-item>
+            <el-form-item class="questions">
+              <span class="question">问题：{{question2}}</span>
+            </el-form-item>
+            <el-form-item prop="answer2">
+              <el-input type="text" v-model="validQuestion.answer2"
+                        auto-complete="off"
+                        placeholder="答案二"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <a class="btn finish"
+                 :disabled="!answer1SecondChecked || !answer2SecondChecked"
+                 @click="validQuestionSubmit">提交</a>
+            </el-form-item>
+          </el-form>
         </div>
       </div>
     </div>
@@ -131,10 +127,299 @@
 
 <script>
   export default {
-    name: 'change',
+    name: 'validation',
     data () {
+//      第一步校验验证码
+      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(`/sso/change/admin/check/newMobile`, 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 {}
+          }
+          callback()
+        }
+      }
+//      第二步验证密保
+      var validateSecondAnswer1 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的答案'))
+          this.answer1SecondChecked = false
+        } else {
+          if (this.validQuestion.answer1 !== '') {
+            this.answer1SecondChecked = true
+          }
+          callback()
+        }
+      }
+      var validateSecondAnswer2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的答案'))
+          this.answer2SecondChecked = false
+        } else {
+          if (this.validQuestion.answer2 !== '') {
+            this.answer2SecondChecked = true
+          }
+          callback()
+        }
+      }
       return {
-        activeTab: 4
+        goFirstStep: true,
+        hasValidPhoneWay: false,
+        hasValidQuestionsWay: false,
+        hasValidEmailWay: false,
+        showManualAppeal: false,
+        showPhoneValid: false,
+        showEmailValid: false,
+        showQuestionsValid: false,
+        sendAccountCode: true,
+        account_time: 0,
+        codeErrorChecked: false,
+        codeChecked: false,
+        secretMobile: '',
+        secretEmail: '',
+        getMobile: '',
+        getEmail: '',
+        getQuestions: '',
+        question1: '',
+        question2: '',
+        sort1: '',
+        sort2: '',
+        codeErrorMsg: '',
+        firstStepToken: '',
+        answer1SecondChecked: false,
+        answer2SecondChecked: false,
+        emailSendSuccess: false,
+        valid: {
+          code: ''
+        },
+        validQuestion: {
+          answer1: '',
+          answer2: ''
+        },
+        rules: {
+          code: [
+            {validator: validateFirstCode, trigger: 'blur'}
+          ]
+        },
+        rulesQuestion: {
+          answer1: [
+            {validator: validateSecondAnswer1, trigger: 'blur'}
+          ],
+          answer2: [
+            {validator: validateSecondAnswer2, 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) {
+//          console.log(this.logged.isLogin)
+//          未登录跳到登录页面
+          window.location.href = '/'
+        }
+      },
+//      获取验证方式
+      getVerifyWay () {
+        this.$http.get('/sso/change/admin/checkType').then(response => {
+          if (response.data.success) {
+            if (!response.data.content) {
+              this.goFirstStep = true
+              this.showManualAppeal = true
+              this.hasValidPhoneWay = false
+              this.hasValidQuestionsWay = false
+              this.hasValidEmailWay = false
+            } else {
+              if (response.data.content.mobile) {
+                this.hasValidPhoneWay = 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
+                this.getQuestions = response.data.content.questions
+                this.question1 = this.getQuestions[0].question || ''
+                this.question2 = this.getQuestions[1].question || ''
+                this.sort1 = this.getQuestions[0].sort || ''
+                this.sort2 = this.getQuestions[1].sort || ''
+              }
+              if (response.data.content.email) {
+                this.hasValidEmailWay = 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('')
+                }
+              }
+              this.goFirstStep = true
+              this.showManualAppeal = true
+            }
+          }
+        })
+      },
+//      选择方式
+      chooseWay (flag) {
+        if (flag === 1) {
+          this.showPhoneValid = true
+        } else if (flag === 2) {
+          this.showEmailValid = true
+        } else if (flag === 3) {
+          this.showQuestionsValid = true
+        }
+        this.goFirstStep = false
+      },
+//      跳转到人工申诉页面
+      goChangeManagerAppeal () {
+        window.location.href = '/appeals/changeManagerAppeal'
+      },
+//      返回上一步
+      goPreviousStep () {
+        this.goFirstStep = true
+        this.showPhoneValid = false
+        this.showEmailValid = false
+        this.showQuestionsValid = false
+      },
+//      获取第一步手机验证码
+      getCheckCode () {
+        this.$http.get(`/sso/change/admin/check/mobile`)
+          .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('code', this.valid.code)
+          param.append('token', this.token)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/change/admin/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: '/change/changeManagerSecondStep' })
+              } else {
+                this.showPhoneValid = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+//      第一步验证邮箱
+      firstStepValidEmail () {
+        this.$http.get(`/sso/change/admin/check/email`)
+          .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)
+          })
+      },
+//      第一步验证密保提交
+      validQuestionSubmit () {
+        if (this.answer1SecondChecked && this.answer2SecondChecked) {
+          let param = new FormData()
+          let answer = []
+          answer.push({'answer': this.validQuestion.answer1, 'sort': this.sort1}, {'answer': this.validQuestion.answer2, 'sort': this.sort2})
+          let answers = JSON.stringify(answer)
+          param.append('answers', answers)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/change/admin/check/question`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                this.showQuestionsValid = false
+                this.$router.push({ path: '/change/changeManagerSecondStep' })
+              } else {
+                this.showQuestionsValid = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
       }
     }
   }
@@ -177,31 +462,19 @@
     top: 45px;
     left: 265px;
   span{
-    margin-right: 85px;
+    margin-right: 57px;
     font-size: 14px;
     color: #b4b4b4;
   }
   span.active {
     color: #0076ad;
   }
-  span.step01{
-    margin-right: 65px;
-  }
-  span.step02{
-    margin-right: 65px;
-  }
   }
   }
   }
   form {
+    margin-top: 150px;
     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;
@@ -211,64 +484,6 @@
     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;
-  }
-  textarea.describe {
-    float: left;
-    padding: 10px 0 0 18px;
-    margin-bottom: 16px;
-    height: 120px;
-    width: 360px;
-    font-size: 14px;
-    color: #000;
-    border-radius: 0;
-  }
-  span.describe {
-    position: absolute;
-    top: 10px;
-    right: -250px;
-    width: 240px;
-    line-height: 21px;
-    text-align: left;
-    font-size: 13px;
-    color: #8c8c8c;
-  }
-  img.msg{
-    float: right;
-    margin: 0;
-    width: 130px;
-    height: 44px;
-    line-height: 44px;
-    text-align: center ;
-    font-size: 14px;
-    border: 1px solid #dcdcdc;
-    cursor: pointer;
-  }
   input.answer {
     background: url("/images/all/more.png") no-repeat 325px center;
     cursor: pointer;
@@ -311,6 +526,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;
@@ -318,21 +542,17 @@
     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;
     border-radius: 3px;
   }
   }
-  .forms{
-    margin-top: 37px;
-  }
   .content-bottom{
     margin: 155px auto 0;
     padding-bottom: 50px;
@@ -364,10 +584,12 @@
   }
   span{
     display: inline-block;
-    margin: 15px 0 140px 0;
     font-size: 14px;
     color: #8b8b8b;
   }
+  span.close-tip{
+    margin: 15px 0 140px 0;
+  }
   .close-btn{
     margin: 0 auto;
     width: 200px;
@@ -393,11 +615,54 @@
     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: 4px;
+    line-height: 44px;
     font-size: 16px;
     color: #fff;
     background: #0076AD;

components/change/ChangeManagerSecondStep.vue

@@ -0,0 +1,566 @@
+<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="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 prop="changeReason">
+                <el-input type="textarea" v-model="valid2.changeReason" placeholder="申诉说明"></el-input>
+                <span class="tip description" v-show="descriptionTip">请描述您申诉的原因，并尽可能多地列举出证明此企业账号为您所有的证据</span>
+              </el-form-item>
+              <el-form-item prop="contactTel">
+                <el-input type="text" v-model="valid2.contactTel" auto-complete="off" placeholder="联系电话"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn finish"
+                    :disabled="!mobileSecondChecked || !secondCodeChecked || !changeReasonChecked || !contactTelChecked"
+                    @click="setNewMobile">确认</a>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    data () {
+//      第二步验证手机
+      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(`/sso/change/admin/check/newMobile`, 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 {}
+          }
+          callback()
+        }
+      }
+      var validateSecondChangeReason = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写申诉说明'))
+          this.changeReasonChecked = false
+          this.descriptionTip = false
+        } else {
+          if (this.valid2.changeReason !== '') {
+            if (value.length >= 100) {
+              callback(new Error('输入长度过长，100个字符以内'))
+              this.changeReasonChecked = false
+              this.descriptionTip = false
+            } else {
+              this.changeReasonChecked = true
+              this.descriptionTip = false
+            }
+          }
+          callback()
+        }
+      }
+      var validateSecondContactTel = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的联系电话'))
+          this.contactTelChecked = false
+        } else {
+          if (this.valid2.contactTel !== '') {
+            var reg = /^1[0-9]{10}$/
+            if (!reg.test(value)) {
+              callback(new Error('请填写正确的联系电话'))
+              this.contactTelChecked = false
+            } else {
+              this.contactTelChecked = true
+            }
+          }
+          callback()
+        }
+      }
+      return {
+        second_step_time: 0,
+        codeErrorChecked: false,
+        secondStepCodeErrorChecked: false,
+        secondCodeChecked: false,
+        changeReasonChecked: false,
+        contactTelChecked: false,
+        descriptionTip: true,
+        secondCodeErrorMsg: '',
+        mobileSecondChecked: false,
+        getCodeBtnIsDisabled: true,
+        showSecondStepCode: true,
+        valid2: {
+          mobile: '',
+          code: '',
+          changeReason: '',
+          contactTel: ''
+        },
+        rules2: {
+          mobile: [
+            {validator: validateSecondMobile, trigger: 'blur'}
+          ],
+          code: [
+            {validator: validateSecondCode, trigger: 'blur'}
+          ],
+          changeReason: [
+            {validator: validateSecondChangeReason, trigger: 'blur'}
+          ],
+          contactTel: [
+            {validator: validateSecondContactTel, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    computed: {
+      firstStepToken () {
+        return this.$store.state.login.token.data
+      }
+    },
+    mounted () {
+//    获取邮箱token
+      this.$nextTick(() => {
+        this.getEmailLinkToken()
+      })
+    },
+    methods: {
+//      获取第二步手机验证码
+      getSecondCheckCode () {
+        this.$http.get(`/sso/change/admin/check/newMobile`, {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 && this.changeReasonChecked && this.contactTelChecked) {
+          let param = new FormData()
+          param.append('mobile', this.valid2.mobile)
+          param.append('code', this.valid2.code)
+          param.append('token', this.firstStepToken)
+          param.append('codeToken', this.secondToken)
+          param.append('changeReason', this.valid2.changeReason)
+          param.append('contactTel', this.valid2.contactTel)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/change/admin`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$router.push({ path: '/change/changeManagerThirdStep' })
+              } else {
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              console.log(err)
+            })
+        }
+      },
+//      获得邮箱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) {
+          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: 57px;
+                  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: 10px;
+                right: -243px;
+                width: 223px;
+                line-height: 18px;
+                text-align: left;
+                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/change/ChangeManagerThirdStep.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: 57px;
+                  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/change/index.js

@@ -0,0 +1,5 @@
+import ChangeManager from './ChangeManager.vue'
+import ChangeManagerSecondStep from './ChangeManagerSecondStep.vue'
+import ChangeManagerThirdStep from './ChangeManagerThirdStep.vue'
+
+export { ChangeManager, ChangeManagerSecondStep, ChangeManagerThirdStep }

components/encrypted-setting/EncryptedSetting.vue

@@ -191,7 +191,6 @@
       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 {

components/encrypted-setting/EncryptedSettingSecondStep.vue

@@ -151,8 +151,7 @@
           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' })
+                this.$router.push({ path: '/encrypted-setting/EncryptedSettingThirdStep' })
               } else {
                 return Promise.reject(response.data)
               }
@@ -174,7 +173,6 @@
         }
         this.Token = request['token'] || ''
         if (this.Token) {
-          console.log(this.Token)
           this.$store.commit('login/GET_TOKEN', this.Token)
         }
       }

components/login/Login.vue

@@ -126,7 +126,6 @@
                 }
               }, err => {
                 this.$message.error(err)
-                console.log(err)
               })
           }
           callback()

components/reset/ChangePasswordChooseStyle.vue

@@ -0,0 +1,677 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content" v-show="goFirstStep">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span>密码设置</span><span>设置完成</span></div>
+          </div>
+        </div>
+        <div class="choose">
+          <div v-show="hasValidPasswordWay"
+               @click="chooseWay(1)">
+            <img src="/images/all/icon03.png" alt="" class="first mob"/>
+            <span>通过登录密码</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="hasValidPhoneWay"
+               @click="chooseWay(2)">
+            <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(3)">
+            <img src="/images/all/icon02.png" alt="" class="first"/>
+            <span>通过验证邮箱</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="showManualAppeal"
+               @click="goPasswordSetAppeal">
+            <img src="/images/all/icon04.png" alt="" class="first"/>
+            <span>通过人工申诉</span><i class="fa fa-angle-right second"></i>
+          </div>
+        </div>
+      </div>
+      <div class="content" v-show="showPasswordValid">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <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">
+          <div>
+            <el-form :model="valid1" :rules="rules1" ref="valid1" label-width="100px" class="demo-ruleForm" style="margin-top: 0;">
+              <el-form-item prop="password">
+                <el-input type="password" v-model="valid1.password"
+                          auto-complete="off"
+                          placeholder="请输入当前密码"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn finish"
+                   :disabled="!oldPasswordChecked"
+                   @click="goPasswordNextStep">下一步</a>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+      <div class="content" v-show="showPhoneValid">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <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>{{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>
+        </div>
+      </div>
+      <div class="content" v-show="showEmailValid">
+        <div class="content-top">
+          <h3>验证手机</h3>
+          <div class="step">
+            <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>{{secretEmail}}</em>进行验证，有效期7天</span>
+          <div class="warp"
+               @click="firstStepValidEmail"
+               v-show="!emailSendSuccess">
+            <button class="btn">发送验证请求</button>
+          </div>
+          <div class="warp" v-show="emailSendSuccess">
+            <button class="btn" :disabled="emailSendSuccess">已发送验证邮件，请查收</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    data () {
+//      第一步校验验证码
+      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(`/sso/resetPwd/checkCode`, 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 {}
+          }
+          callback()
+        }
+      }
+//      第一步验证原密码
+      var validateFirstPassword = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写原密码'))
+          this.oldPasswordChecked = false
+        } else {
+          if (this.valid1.password !== '') {
+            this.oldPasswordChecked = true
+          }
+          callback()
+        }
+      }
+      return {
+        goFirstStep: true,
+        showManualAppeal: false,
+        hasValidPasswordWay: true,
+        hasValidPhoneWay: false,
+        hasValidEmailWay: false,
+        showPasswordValid: false,
+        showPhoneValid: false,
+        showEmailValid: false,
+        sendAccountCode: true,
+        account_time: 0,
+        codeErrorChecked: false,
+        oldPasswordChecked: false,
+        codeChecked: false,
+        secretMobile: '',
+        secretEmail: '',
+        getMobile: '',
+        getEmail: '',
+        codeErrorMsg: '',
+        firstStepToken: '',
+        emailSendSuccess: false,
+        valid: {
+          code: ''
+        },
+        valid1: {
+          password: ''
+        },
+        rules: {
+          code: [
+            {validator: validateFirstCode, trigger: 'blur'}
+          ]
+        },
+        rules1: {
+          password: [
+            {validator: validateFirstPassword, 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('/sso/resetPwd/checkType/update').then(response => {
+          if (response.data.success) {
+            if (!response.data.content) {
+              this.hasValidPhoneWay = false
+              this.hasValidEmailWay = false
+            } else {
+              if (response.data.content.mobile) {
+                this.hasValidPhoneWay = 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.email) {
+                this.hasValidEmailWay = 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('')
+                }
+              }
+            }
+            this.showManualAppeal = true
+            this.hasValidPasswordWay = true
+          }
+        })
+      },
+//      选择方式
+      chooseWay (flag) {
+        if (flag === 1) {
+          this.showPasswordValid = true
+        } else if (flag === 2) {
+          this.showPhoneValid = true
+        } else if (flag === 3) {
+          this.showEmailValid = true
+        }
+        this.goFirstStep = false
+      },
+//      跳转到人工申诉页面
+      goPasswordSetAppeal () {
+        window.location.href = '/appeals/passwordRestAppeal'
+      },
+//      获取第一步手机验证码
+      getCheckCode () {
+        this.$http.get(`/sso/resetPwd/check/mobile`)
+          .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)
+          })
+      },
+//      原密码验证
+      goPasswordNextStep () {
+        if (this.oldPasswordChecked) {
+          let param = new FormData()
+          param.append('password', this.valid1.password)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/resetPwd/check/password`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                this.showPhoneValid = false
+                this.$router.push({ path: '/reset/passwordResetValidQuestion' })
+              } else {
+                this.showPhoneValid = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+//      手机号验证下一步
+      goNextStep () {
+        if (this.codeChecked) {
+          let param = new FormData()
+          param.append('code', this.valid.code)
+          param.append('token', this.token)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/resetPwd/check/mobile`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                this.showPhoneValid = false
+                this.$router.push({ path: '/reset/passwordResetValidQuestion' })
+              } else {
+                this.showPhoneValid = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+//      第一步验证邮箱
+      firstStepValidEmail () {
+        this.$http.get(`/sso/resetPwd/check/email`)
+          .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: 85px;
+                  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/reset/ForgetPasswordChooseStyle.vue

@@ -0,0 +1,578 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content" v-show="goFirstStep">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span>密码设置</span><span>设置完成</span></div>
+          </div>
+        </div>
+        <div class="choose">
+          <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 v-show="showManualAppeal"
+               @click="goPasswordSetAppeal">
+            <img src="/images/all/icon04.png" alt="" class="first"/>
+            <span>通过人工申诉</span><i class="fa fa-angle-right second"></i>
+          </div>
+        </div>
+      </div>
+      <div class="content" v-show="showPhoneValid">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <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>{{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>
+        </div>
+      </div>
+      <div class="content" v-show="showEmailValid">
+        <div class="content-top">
+          <h3>验证手机</h3>
+          <div class="step">
+            <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>{{secretEmail}}</em>进行验证，有效期7天</span>
+          <div class="warp"
+               @click="firstStepValidEmail"
+               v-show="!emailSendSuccess">
+            <button class="btn">发送验证请求</button>
+          </div>
+          <div class="warp" v-show="emailSendSuccess">
+            <button class="btn" :disabled="emailSendSuccess">已发送验证邮件，请查收</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    data () {
+//      第一步校验验证码
+      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(`/sso/resetPwd/checkCode`, 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 {}
+          }
+          callback()
+        }
+      }
+      return {
+        goFirstStep: true,
+        showManualAppeal: false,
+        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,
+        valid: {
+          code: ''
+        },
+        rules: {
+          code: [
+            {validator: validateFirstCode, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    mounted () {
+//      获取验证方式
+      this.$nextTick(() => {
+        this.getVerifyWay()
+      })
+    },
+    methods: {
+//      获取验证方式
+      getVerifyWay () {
+        this.$http.get('/sso/resetPwd/checkType/reset').then(response => {
+          if (response.data.success) {
+            if (!response.data.content) {
+              this.hasValidPhoneWay = false
+              this.hasValidEmailWay = false
+            } else {
+              if (response.data.content.mobile) {
+                this.hasValidPhoneWay = 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.email) {
+                this.hasValidEmailWay = 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('')
+                }
+              }
+            }
+            this.showManualAppeal = true
+          }
+        })
+      },
+//      选择方式
+      chooseWay (flag) {
+        if (flag === 1) {
+          this.showPhoneValid = true
+        } else if (flag === 2) {
+          this.showEmailValid = true
+        } else if (flag === 3) {
+          this.showQuestionsValid = true
+        }
+        this.goFirstStep = false
+      },
+//      跳转到人工申诉页面
+      goPasswordSetAppeal () {
+        window.location.href = '/appeals/passwordRestAppeal'
+      },
+      //      获取第一步手机验证码
+      getCheckCode () {
+        this.$http.get(`/sso/resetPwd/check/mobile`)
+          .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('code', this.valid.code)
+          param.append('token', this.token)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/resetPwd/check/mobile`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                this.showPhoneValid = false
+                this.$router.push({ path: '/reset/passwordResetValidQuestion' })
+              } else {
+                this.showPhoneValid = true
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+//      第一步验证邮箱
+      firstStepValidEmail () {
+        this.$http.get(`/sso/resetPwd/check/email`)
+          .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: 85px;
+                  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/reset/ForgetPasswordValidationAccount.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>密码重置</h3>
+        </div>
+        <div>
+          <el-form :model="valid" :rules="rules" ref="valid" label-width="100px" class="demo-ruleForm">
+            <el-form-item prop="mobile">
+              <el-input v-model="valid.mobile" placeholder="原手机号"></el-input>
+            </el-form-item>
+            <el-form-item prop="captcha">
+              <el-input type="text" v-model="valid.captcha"
+                        auto-complete="off"
+                        class="msg"
+                        placeholder="验证码"></el-input>
+              <img src="/sso/resetPwd/checkCaptcha" class="msg" id="captchaImage" @click="changeCaptcha"/>
+            </el-form-item>
+            <el-form-item>
+              <a class="btn finish"
+                 :disabled="!mobileChecked || !captchaChecked"
+                 @click="sureAccount">下一步</a>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'reset',
+    data () {
+      var validateMobile = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的手机号'))
+          this.mobileChecked = false
+        } else {
+          if (this.valid.mobile !== '') {
+            var reg = /^1[0-9]{10}$/
+            if (!reg.test(value)) {
+              callback(new Error('请填写正确的手机号'))
+              this.mobileChecked = false
+            } else {
+              this.mobileChecked = true
+            }
+          }
+          callback()
+        }
+      }
+      var validateCode = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的验证码'))
+          this.captchaChecked = false
+        } else {
+          if (this.valid.captcha !== '') {
+            this.captchaChecked = true
+          }
+          callback()
+        }
+      }
+      return {
+        valid: {
+          mobile: '',
+          captcha: ''
+        },
+        mobileChecked: false,
+        captchaChecked: false,
+        rules: {
+          mobile: [
+            {validator: validateMobile, trigger: 'blur'}
+          ],
+          captcha: [
+            {validator: validateCode, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    methods: {
+      sureAccount () {
+        if (this.mobileChecked && this.captchaChecked) {
+          let param = new FormData()
+          param.append('mobile', this.valid.mobile)
+          param.append('captcha', this.valid.captcha)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/resetPwd/checkCaptcha`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$router.push({ path: '/reset/forgetPasswordChooseStyle' })
+              } else {
+                this.changeCaptcha()
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+      changeCaptcha () {
+        var imgSrc = document.getElementById('captchaImage')
+        imgSrc.setAttribute('src', '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf())
+      }
+    }
+  }
+</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: 85px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  }
+  }
+  }
+  form {
+    padding-bottom: 44px;
+    margin-top: 36px;
+  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;
+  }
+  img.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  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;
+  }
+  }
+  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;
+  }
+  }
+  .forms{
+    margin-top: 37px;
+  }
+  .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{
+    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: 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;
+  }
+  }
+  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/reset/PasswordResetNewPassword.vue

@@ -0,0 +1,526 @@
+<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>
+          <el-form :model="newPassword" :rules="rulesQuestion" ref="newPassword" label-width="100px" class="demo-ruleForm">
+            <el-form-item prop="password">
+              <el-input type="password" v-model="newPassword.password" auto-complete="off" placeholder="新密码"></el-input>
+              <div class="pwd sm" v-show="showMsgTip1">密码强度 <em></em><em></em><em></em><span>弱</span></div>
+              <div class="pwd md" v-show="showMsgTip2">密码强度 <em></em><em></em><em></em><span>中</span></div>
+              <div class="pwd lar" v-show="showMsgTip3">密码强度 <em></em><em></em><em></em><span>强</span></div>
+              <div class="pwd low" v-show="showMsgTip4">密码强度 <em></em><em></em><em></em></div>
+            </el-form-item>
+            <el-form-item prop="confirm">
+              <el-input type="password" v-model="newPassword.confirm" auto-complete="off" placeholder="确认密码"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <a class="btn finish"
+                 :disabled="!passwordChecked || !confirmChecked"
+                 @click="passwordSubmit">提交</a>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'validation',
+    data () {
+//      验证密保
+      var validatePassword = (rule, value, callback) => {
+        if (this.newPassword.password !== '') {
+          if (value.length <= 20 && value.length >= 8) {
+            var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
+            var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+            if (reg1.test(value)) {
+//                callback(new Error('密码强度强'))
+              this.showMsgTip3 = true
+              this.showMsgTip2 = false
+              this.showMsgTip1 = false
+              this.showMsgTip4 = false
+              this.passwordChecked = true
+            } else if (reg2.test(value)) {
+//                callback(new Error('密码强度中'))
+              this.showMsgTip2 = true
+              this.showMsgTip3 = false
+              this.showMsgTip1 = false
+              this.showMsgTip4 = false
+              this.passwordChecked = true
+            } else {
+              this.showMsgTip1 = true
+              this.showMsgTip3 = false
+              this.showMsgTip2 = false
+              this.showMsgTip4 = false
+              this.passwordChecked = false
+            }
+          } else {
+            this.showMsgTip3 = false
+            this.showMsgTip2 = false
+            this.showMsgTip1 = false
+            this.showMsgTip4 = true
+            this.passwordChecked = false
+          }
+        }
+        callback()
+      }
+      var validatePasswordTip = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入密码'))
+          this.passwordChecked = false
+        } else {
+          if (this.newPassword.password !== '') {
+            if (value.length <= 20 && value.length >= 8) {
+              var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
+              var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+              if (reg1.test(value)) {
+                this.passwordChecked = true
+              } else if (reg2.test(value)) {
+                this.passwordChecked = true
+              } else {
+                callback(new Error('密码须为8-20字符的英文、数字混合'))
+                this.passwordChecked = false
+              }
+            } else {
+              callback(new Error('密码须为8-20字符的英文、数字混合'))
+              this.passwordChecked = false
+            }
+          }
+          callback()
+        }
+      }
+      var validateConfirm = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'))
+          this.confirmChecked = false
+        } else if (value !== this.newPassword.password) {
+          callback(new Error('两次输入密码不一致!'))
+          this.confirmChecked = false
+        } else {
+          this.confirmChecked = true
+          callback()
+        }
+      }
+      return {
+        showMsgTip1: false,
+        showMsgTip2: false,
+        showMsgTip3: false,
+        showMsgTip4: false,
+        passwordChecked: false,
+        confirmChecked: false,
+        getQuestions: '',
+        question1: '',
+        question2: '',
+        sort1: '',
+        sort2: '',
+        answer1SecondChecked: false,
+        answer2SecondChecked: false,
+        newPassword: {
+          password: '',
+          confirm: ''
+        },
+        rulesQuestion: {
+          password: [
+            { validator: validatePasswordTip, trigger: 'blur' },
+            { validator: validatePassword, trigger: 'change' }
+          ],
+          confirm: [
+            { validator: validateConfirm, trigger: 'blur' }
+          ]
+        }
+      }
+    },
+    computed: {
+      firstStepToken () {
+        return this.$store.state.login.token.data
+      }
+    },
+    mounted () {
+//      获取邮箱token
+      this.$nextTick(() => {
+        this.getEmailLinkToken()
+      })
+    },
+    methods: {
+      passwordSubmit () {
+        if (this.passwordChecked && this.confirmChecked) {
+          let param = new FormData()
+          param.append('password', this.newPassword.password)
+          param.append('token', this.firstStepToken)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/resetPwd`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$router.push({ path: '/reset/passwordResetSetSuccess' })
+              } 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) {
+          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: 85px;
+    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;
+  }
+  .pwd {
+    margin: 6px 0 -15px 0;
+    text-align: left;
+    font-size: 13px;
+  em{
+    display: inline-block;
+    margin: 0 8px 2px 0;
+    width: 24px;
+    height: 6px;
+  &:first-child{
+     margin-left: 10px;
+   }
+  }
+  span{
+    margin-left: 10px;
+    font-size: 13px;
+  }
+  }
+  .pwd.sm{
+    color: #8c8c8c;
+  em {
+    background: #bfbfbf;
+  &:first-child{
+     background: #ff4e00;
+   }
+  }
+  span{
+    color: #ff4e00;
+  }
+  }
+  .pwd.md{
+    color: #8c8c8c;
+  em {
+    background: #22ac38;
+  &:nth-child(3){
+     background: #bfbfbf;
+   }
+  }
+  span{
+    color: #22ac38;
+  }
+  }
+  .pwd.lar{
+    color: #8c8c8c;
+  em {
+    background: #00a0e9;
+  }
+  span{
+    color: #00a0e9;
+  }
+  }
+  .pwd.low{
+    color: #8c8c8c;
+  em{
+    background: #bfbfbf;
+  }
+  }
+  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/reset/PasswordResetSetSuccess.vue

@@ -0,0 +1,365 @@
+<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: 85px;
+    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;
+  }
+  .pwd {
+    margin: 6px 0 -15px 0;
+    text-align: left;
+    font-size: 13px;
+  em{
+    display: inline-block;
+    margin: 0 8px 2px 0;
+    width: 24px;
+    height: 6px;
+  &:first-child{
+     margin-left: 10px;
+   }
+  }
+  span{
+    margin-left: 10px;
+    font-size: 13px;
+  }
+  }
+  .pwd.sm{
+    color: #8c8c8c;
+  em {
+    background: #bfbfbf;
+  &:first-child{
+     background: #ff4e00;
+   }
+  }
+  span{
+    color: #ff4e00;
+  }
+  }
+  .pwd.md{
+    color: #8c8c8c;
+  em {
+    background: #22ac38;
+  &:nth-child(3){
+     background: #bfbfbf;
+   }
+  }
+  span{
+    color: #22ac38;
+  }
+  }
+  .pwd.lar{
+    color: #8c8c8c;
+  em {
+    background: #00a0e9;
+  }
+  span{
+    color: #00a0e9;
+  }
+  }
+  .pwd.low{
+    color: #8c8c8c;
+  em{
+    background: #bfbfbf;
+  }
+  }
+  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/reset/PasswordResetValidQuestion.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span>密码设置</span><span>设置完成</span></div>
+          </div>
+        </div>
+        <div>
+          <el-form :model="validQuestion" :rules="rulesQuestion" ref="valid" label-width="100px" class="demo-ruleForm">
+            <el-form-item class="questions">
+              <span class="question">问题：{{question1}}</span>
+            </el-form-item>
+            <el-form-item prop="answer1">
+              <el-input type="text" v-model="validQuestion.answer1"
+                        auto-complete="off"
+                        placeholder="答案一"></el-input>
+            </el-form-item>
+            <el-form-item class="questions">
+              <span class="question">问题：{{question2}}</span>
+            </el-form-item>
+            <el-form-item prop="answer2">
+              <el-input type="text" v-model="validQuestion.answer2"
+                        auto-complete="off"
+                        placeholder="答案二"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <a class="btn finish"
+                 :disabled="!answer1SecondChecked || !answer2SecondChecked"
+                 @click="validQuestionSubmit">提交</a>
+            </el-form-item>
+          </el-form>
+        </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.validQuestion.answer1 !== '') {
+            this.answer1SecondChecked = true
+          }
+          callback()
+        }
+      }
+      var validateSecondAnswer2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的答案'))
+          this.answer2SecondChecked = false
+        } else {
+          if (this.validQuestion.answer2 !== '') {
+            this.answer2SecondChecked = true
+          }
+          callback()
+        }
+      }
+      return {
+        getQuestions: '',
+        question1: '',
+        question2: '',
+        id1: '',
+        id2: '',
+        answer1SecondChecked: false,
+        answer2SecondChecked: false,
+        validQuestion: {
+          answer1: '',
+          answer2: ''
+        },
+        rulesQuestion: {
+          answer1: [
+            {validator: validateSecondAnswer1, trigger: 'blur'}
+          ],
+          answer2: [
+            {validator: validateSecondAnswer2, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    computed: {
+      firstStepToken () {
+        return this.$store.state.login.token.data
+      }
+    },
+    mounted () {
+//      获取邮箱token
+      this.$nextTick(() => {
+        this.getEmailLinkToken()
+      })
+      //      获取密保问题
+      this.$nextTick(() => {
+        this.getQuestion()
+      })
+    },
+    methods: {
+//      获得邮箱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) {
+          this.$store.commit('login/GET_TOKEN', this.Token)
+        }
+      },
+//      获取密保问题
+      getQuestion () {
+        this.$http.get('/sso/resetPwd/check/question', {params: {token: this.firstStepToken}})
+          .then(response => {
+            if (response.data.success) {
+              this.getQuestions = response.data.content.questions
+              this.question1 = this.getQuestions[0].question
+              this.question2 = this.getQuestions[1].question
+              this.id1 = this.getQuestions[0].id
+              this.id2 = this.getQuestions[1].id
+              this.questionToken = response.data.content.token
+            }
+          })
+      },
+//      第一步验证密保提交
+      validQuestionSubmit () {
+        if (this.answer1SecondChecked && this.answer2SecondChecked) {
+          let param = new FormData()
+          let answer = []
+          answer.push({'answer': this.validQuestion.answer1, id: this.id1}, {'answer': this.validQuestion.answer2, id: this.id2})
+          let answers = JSON.stringify(answer)
+          param.append('answers', answers)
+          param.append('token', this.questionToken)
+          param.append('pageToken', this.firstStepToken)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/resetPwd/check/question`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                this.$router.push({ path: '/reset/passwordResetNewPassword' })
+              } else {
+                return Promise.reject(response.data)
+              }
+            }).catch(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: 85px;
+    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/reset/ResetPassword.vue

@@ -1,489 +0,0 @@
-<template>
-  <div class="validation">
-    <div class="container">
-      <div class="content" v-if="activeTab == 0">
-        <div class="content-top">
-          <h3>密码重置</h3>
-        </div>
-        <form action="" class="forms">
-          <div class="form-group">
-            <input type="text"  class="form-control" placeholder="原手机号"/>
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control msg" placeholder="验证码"/>
-            <img src="/images/all/ide.png" class="msg"/>
-          </div>
-          <button class="btn">下一步</button>
-        </form>
-      </div>
-      <div class="content" v-if="activeTab == 1">
-        <div class="content-top">
-          <h3>密码重置</h3>
-          <div class="step">
-            <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="choose">
-          <div class="active"><img src="/images/all/icon03.png" alt="" class="first"/><span>通过登录密码</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon01.png" alt="" class="first mob"/><span>通过验证手机</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon02.png" alt="" class="first"/><span>通过验证邮箱</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon04.png" alt="" class="first"/><span>通过人工申诉</span><i class="fa fa-angle-right second"></i></div>
-        </div>
-      </div>
-      <div class="content" v-if="activeTab == 2">
-        <div class="content-top">
-          <h3>密码重置</h3>
-          <div class="step">
-            <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>
-        <form action="">
-          <div class="form-group">
-            <input type="text"  class="form-control" placeholder="请输入当前密码"/>
-          </div>
-          <button class="btn">下一步</button>
-        </form>
-      </div>
-      <div class="content" v-if="activeTab == 3">
-        <div class="content-top">
-          <h3>密码重置</h3>
-          <div class="step">
-            <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</em>接收验证码</span>
-          <div class="form-group">
-            <input type="text" class="form-control msg" placeholder="短信验证码"/>
-            <span class="msg">获取验证码</span>
-            <!--<span class="msg send">已发送(54s)</span>-->
-          </div>
-          <button class="btn">下一步</button>
-        </div>
-      </div>
-      <div class="content" v-if="activeTab == 4">
-        <div class="content-top">
-          <h3>密码重置</h3>
-          <div class="step">
-            <img src="/images/all/step01.png" alt=""/>
-            <div class="step-item"><span class="active">账号验证</span><span class="active">密码设置</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 == 5">
-        <div class="content-top">
-          <h3>密码重置</h3>
-          <div class="step">
-            <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>
-        <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="答案一"/>
-          </div>
-          <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="答案二"/>
-          </div>
-          <button class="btn">提交</button>
-        </form>
-      </div>
-      <div class="content" v-if="activeTab == 6">
-        <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>
-        <form action="">
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="新密码"/>
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="确认密码"/>
-          </div>
-          <button class="btn">下一步</button>
-        </form>
-      </div>
-      <div class="content" v-if="activeTab == 7">
-        <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>请妥善保管好自己的密码，保障自身的利益！</span>
-          <div class="close-btn">关闭</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'reset',
-    data () {
-      return {
-        activeTab: 1
-      }
-    }
-  }
-</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: 85px;
-    font-size: 14px;
-    color: #b4b4b4;
-  }
-  span.active {
-    color: #0076ad;
-  }
-  }
-  }
-  }
-  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.msg{
-    float: left;
-    width: 210px;
-    padding: 0 0 0 18px;
-    height: 44px;
-    line-height: 44px;
-    font-size: 14px;
-    color: #000;
-    border-radius: 0;
-  }
-  img.msg{
-    float: right;
-    margin: 0;
-    width: 130px;
-    height: 44px;
-    line-height: 44px;
-    text-align: center ;
-    font-size: 14px;
-    border: 1px solid #dcdcdc;
-    cursor: pointer;
-  }
-  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;
-  }
-  }
-  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;
-  }
-  }
-  .forms{
-    margin-top: 37px;
-  }
-  .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{
-    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: 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;
-  }
-  }
-  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/reset/index.js

@@ -1,3 +1,8 @@
-import ResetPassword from './ResetPassword.vue'
+import ForgetPasswordValidationAccount from './ForgetPasswordValidationAccount.vue'
+import ForgetPasswordChooseStyle from './ForgetPasswordChooseStyle.vue'
+import PasswordResetValidQuestion from './PasswordResetValidQuestion.vue'
+import PasswordResetNewPassword from './PasswordResetNewPassword.vue'
+import PasswordResetSetSuccess from './PasswordResetSetSuccess.vue'
+import ChangePasswordChooseStyle from './ChangePasswordChooseStyle.vue'
 
-export { ResetPassword }
+export { ForgetPasswordValidationAccount, ForgetPasswordChooseStyle, PasswordResetValidQuestion, PasswordResetNewPassword, PasswordResetSetSuccess, ChangePasswordChooseStyle }

components/validation/EmailValidation.vue

@@ -282,7 +282,6 @@
       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 {

components/validation/EmailValidationSecondStep.vue

@@ -19,7 +19,7 @@
                 <a class="btn finish"
                     v-show="!sendEmailSuccess"
                     :disabled="!emailSecondChecked"
-                    @click="sendVerificationRequest">发送验证请求{{firstStepToken}}</a>
+                    @click="sendVerificationRequest">发送验证请求</a>
                 <a class="btn finish"
                    v-show="sendEmailSuccess"
                    :disabled="sendEmailSuccess">已发送验证邮件，请查收</a>
@@ -69,7 +69,6 @@
     },
     computed: {
       firstStepToken () {
-        console.log(this.$store.state.login.token.data)
         return this.$store.state.login.token.data
       }
     },
@@ -86,9 +85,7 @@
           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'
               } else {
                 this.sendEmailSuccess = false
                 return Promise.reject(response.data)
@@ -112,7 +109,6 @@
         }
         this.Token = request['token'] || ''
         if (this.Token) {
-          console.log(this.Token)
           this.$store.commit('login/GET_TOKEN', this.Token)
         }
       }

components/validation/PhoneValidation.vue

@@ -194,9 +194,9 @@
         hasValidQuestionsWay: false,
         hasValidEmailWay: false,
         showManualAppeal: false,
-        showPhoneValid: false,
-        showEmailValid: false,
         showQuestionsValid: false,
+        showEmailValid: false,
+        showPhoneValid: false,
         sendAccountCode: true,
         account_time: 0,
         codeErrorChecked: false,
@@ -270,9 +270,8 @@
       getVerifyWay () {
         this.$http.get('/update/user/checkType').then(response => {
           if (response.data.success) {
-//            console.log(response.data.content)
             if (!response.data.content) {
-              this.$router.push({ path: '/validation/phoneValidationSecondStep' })
+              this.showManualAppeal = true
             } else {
               if (response.data.content.mobile) {
                 this.hasValidPhoneWay = true

components/validation/PhoneValidationSecondStep.vue

@@ -195,7 +195,6 @@
         }
         this.Token = request['token'] || ''
         if (this.Token) {
-          console.log(this.Token)
           this.$store.commit('login/GET_TOKEN', this.Token)
         }
       }

components/validation/ValidationFail.vue

@@ -2,17 +2,10 @@
   <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>
+          <p class="passed"><img src="/images/all/times.png" alt=""/>链接已失效</p>
+          <span class="close-tip">邮箱链接因超时未点击或其他原因已失效，请重新验证！</span>
+          <div class="close-btn" @click="goCloudCenter">返回云中心</div>
         </div>
       </div>
     </div>
@@ -47,120 +40,8 @@
     /*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;
+    margin: 0 auto;
     padding-bottom: 50px;
     width: 360px;
   div.warp{
@@ -183,7 +64,8 @@
   }
   }
   p.passed {
-    color: #2ab300;
+    padding-top: 50px;
+    color: #e77405;
   img{
     height: 30px;
   }

pages/change/changeManagerSecondStep.vue

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

pages/reset/resetPassword.vue → pages/change/changeManagerThirdStep.vue

@@ -1,17 +1,17 @@
 <template>
   <div>
     <accountCenter-header/>
-    <reset-password/>
+    <changeManager-thirdStep/>
   </div>
 </template>
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
-  import ResetPassword from '~components/reset/ResetPassword.vue'
+  import ChangeManagerThirdStep from '~components/change/ChangeManagerThirdStep.vue'
   export default {
     layout: 'default',
     components: {
       AccountCenterHeader,
-      ResetPassword
+      ChangeManagerThirdStep
     }
   }
 </script>

pages/reset/changePasswordChooseStyle.vue

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

pages/reset/forgetPasswordChooseStyle.vue

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

pages/reset/forgetPasswordValidationAccount.vue

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

pages/reset/passwordResetNewPassword.vue

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

pages/reset/passwordResetSetSuccess.vue

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

pages/reset/passwordResetValidQuestion.vue

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