对密码重置的页面开发，完成相关逻辑，创建用户退出页面

assets/scss/mobileCommon.scss

@@ -15,12 +15,14 @@
   border:1px solid #b5b5b5;
 }
 .page-part a{
+  transition: all .2s ease;
   color:#333;
   &:hover{
     color:#666;
   }
 }
 .page-part a.rgba{
+  transition: all .2s ease;
   color:#2d8cf0;
   &:hover{
     color:#f44336;
@@ -30,6 +32,7 @@
   background: #fff;
   padding:0.55rem .3rem 1.1rem;
   .content-top{
+    border-bottom:1px solid #b5b5b5;
     position:relative;
     p{
       font-size: .4rem;
@@ -37,6 +40,7 @@
       margin-bottom:.35rem;
     }
     a.go{
+      transition: all .2s ease;
       position: absolute;
       top: 0;
       right: 0;
@@ -45,9 +49,25 @@
         margin-right: .06rem;
       }
     }
+    a.back{
+      transition: all .2s ease;
+      &:hover{
+        border:.02rem solid #f44336;
+      }
+      position: absolute;
+      top: 0;
+      right: 0;
+      display:inline-block;
+      border:.02rem solid #2d8cf0;
+      padding: .05rem;
+      border-radius:50%;
+      i{
+        font-size: .3rem;
+        font-weight: bold;
+      }
+    }
   }
   .f-form{
-    border-top:1px solid #b5b5b5;
     padding-top:.6rem;
     .pwd{
       font-size: .14rem;
@@ -78,3 +98,21 @@
     }
   }
 }
+
+.page-last{
+  text-align: center;
+  margin-bottom:1.3rem;
+  h4{
+    margin:.65rem auto;
+    font-weight: normal;
+    span{
+      font-size: .7rem;
+      margin-left:.2rem;
+      color:#29b300;
+    }
+  }
+  p{
+    font-size: .28rem;
+    color:#8b8b8b;
+  }
+}

components/login/Login.vue

@@ -294,15 +294,19 @@
             .then(response => {
               this.isShowLoading = false
               if (response.data.success) {
-                // console.log(response.data.content)
                 if (response.data.content.spaces) {
 //                   弹框让用户选择企业
                   this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
                   this.dialogVisible = flag
                 } else if (response.data.content.loginUrls) {
 //                  遍历登录url循环让各应用登录(需要跨域)
-                  for (var i in response.data.content.loginUrls) {
-                    this.$jsonp(`${response.data.content.loginUrls[i]}`, function (err, data) {
+                  let param = response.data.content.data
+                  let a = ''
+                  for (let n in param) {
+                    a += (n + '=' + param[n] + '&')
+                  }
+                  for (let i in response.data.content.loginUrls) {
+                    this.$jsonp(`${response.data.content.loginUrls[i]}`, {param: a.substr(0, a.length - 1)}, function (err, data) {
                       if (err) throw err
                       console.log(data)
                     })

components/mobile/loginMobile.vue

@@ -98,6 +98,7 @@
               let count = response.data.content || ''
               if (count >= 3 && count < 5) {
                 this.showCheckCode = true
+                this.getCode()
                 this.$toast({
                   message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
                   iconClass: 'el-icon-warning'
@@ -144,8 +145,13 @@
                 this.popupVisible = flag
               } else if (response.data.content.loginUrls) {
                 // 遍历登录url循环让各个应用登录
+                let param = response.data.content.data
+                let a = ''
+                for (let n in param) {
+                  a += (n + '=' + param[n] + '&')
+                }
                 for (let i in response.data.content.loginUrls) {
-                  this.$jsonp(`${response.data.content.loginUrls[i]}`, function (err) {
+                  this.$jsonp(`${response.data.content.loginUrls[i]}`, {param: a.substr(0, a.length - 1)}, function (err) {
                     if (err) throw err
                   })
                 }
@@ -160,6 +166,7 @@
               let count = response.data.errorCount
               if (count >= 3 && count < 5) {
                 this.showCheckCode = true
+                this.getCode()
                 let _this = this
                 setTimeout(function () {
                   _this.getCode()

components/mobile/registerEnterprise/index.vue

@@ -447,57 +447,3 @@
     }
   }
 </script>
-
-<style scoped type="text/scss" lang="scss">
-  .f-main{
-    background: #fff;
-    padding:0.55rem .3rem 1.1rem;
-    .content-top{
-      position:relative;
-      p{
-        font-size: .4rem;
-        color:#787878;
-        margin-bottom:.35rem;
-      }
-      a.go{
-        position: absolute;
-        top: 0;
-        right: 0;
-        font-size: .28rem;
-        i{
-          margin-right: .06rem;
-        }
-      }
-    }
-    .f-form{
-      border-top:1px solid #b5b5b5;
-      padding-top:.6rem;
-      .pwd{
-        font-size: .14rem;
-        color:#a0a0a0;
-        margin: .2rem auto;
-        em{
-          display: inline-block;
-          line-height: .14rem;
-          margin:.05rem .2rem;
-          width: .45rem;
-          height: .1rem;
-        }
-        .sm{background:#ff4e00}
-        .md{background: #22ac38}
-        .ld{background: #00a0e9}
-        .smstep{color:#ff4e00}
-        .mdstep{color: #22ac38}
-        .ldstep{color: #00a0e9}
-      }
-      .token{
-        display:inline-block;
-        padding: 0 .5rem;
-        text-align: center;
-        border-left:1px solid #b5b5b5;
-        color:#2d8cf0;
-        margin-left: .1rem;
-      }
-    }
-  }
-</style>

components/mobile/reset/index.js

@@ -1,7 +1,11 @@
-import StepOne from './stepOne.vue'
-import StepTwo from './stepTwo.vue'
-import StepThree from './stepThree.vue'
-import StepFour from './stepFour.vue'
-import StepFive from './stepFive'
+import StepFirst from './stepFirst.vue'
+import StepSelect from './stepSelect.vue'
+import StepBefore from './stepBefore.vue'
+import StepMobile from './stepMobile.vue'
+import StepEmail from './stepEmail.vue'
+import StepAppeal from './stepAppeal.vue'
+import StepNew from './stepNew.vue'
+import StepSecurity from './stepSecurity .vue'
+import StepLast from './stepLast.vue'
 
-export {StepOne, StepTwo, StepThree, StepFour, StepFive}
+export {StepFirst, StepSelect, StepBefore, StepMobile, StepEmail, StepAppeal, StepNew, StepSecurity, StepLast}

components/mobile/reset/stepAppeal.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="新手机号码"
+                  v-model="step1.mobile"
+                  :state="state.mobile"
+                  type="tel"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="step1.token"
+                  :state="state.token"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="新密码"
+                  v-model="step1.mobile"
+                  :state="state.mobile"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="确认密码"
+                  v-model="step1.mobile"
+                  :state="state.mobile"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="申诉说明" type="textarea" rows="4" v-model="step1.mobile"></mt-field>
+        <p class="pwd">请描述您申诉的原因，并尽可能多地列举出证明此 账号为您所有的证据</p>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="姓名"
+                  v-model="step1.mobile"
+                  :state="state.mobile"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="联系电话"
+                  v-model="step1.mobile"
+                  :state="state.mobile"
+                  type="tel"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="电子邮箱"
+                  v-model="step1.mobile"
+                  :state="state.mobile"
+                  type="email"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: 'step-one',
+      data () {
+        return {
+          state: {
+            mobile: 'error',
+            captcha: 'error'
+          },
+          step1: {
+            mobile: '',
+            captcha: ''
+          },
+          imgSrc: '',
+          tokenText: '3421'
+        }
+      },
+      mounted () {
+        this.$nextTick(() => {
+          this.getCode()
+        })
+      },
+      methods: {
+        jump (type) {
+          this.$emit('stepEvent', type)
+        },
+        // 警告弹窗
+        downToast (type) {
+          this.$toast({
+            message: type,
+            iconClass: 'el-icon-warning'
+          })
+        },
+        // 验证手机号
+        validateMobile () {
+          let reg = /^1[0-9]{10}$/
+          if (!this.valid.mobile) {
+            this.downToast('请先填写手机号 ')
+          } else {
+            if (reg.test(this.valid.mobile)) {
+              this.state.mobile = 'success'
+            } else {
+              this.state.mobile = 'warning'
+              this.downToast('请填写正确的手机号码')
+            }
+          }
+        },
+        // 验证码验证
+        validateCode () {
+          if (!this.valid.captcha) {
+            this.downToast('请填写验证码信息')
+          } else {
+            this.state.captcha = 'success'
+          }
+        },
+        sureAccount (type) {
+          if (this.state.mobile !== 'success' && this.state.captcha !== 'success') {
+            this.downToast('请确认填写部分是否有误')
+          } else {
+            this.$indicator.open('验证过程中...')
+            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 => {
+                this.$indicator.close()
+                if (response.data.success) {
+                  this.$emit('stepEvent', type)
+                } else {
+                  this.getCode()
+                  this.downToast(response.data.errMsg)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        },
+        getCode () {
+          this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
+        }
+      }
+    }
+</script>

components/mobile/reset/stepBefore.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="请输入当前密码"
+                  auto-complete="off"
+                  :state="state.password"
+                  @blur.native.capture="hasPassword"
+                  v-model="password"></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('new')">下一步</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: 'step-before',
+      data () {
+        return {
+          state: {
+            password: 'error'
+          },
+          password: ''
+        }
+      },
+      methods: {
+        jump (type) {
+          this.$emit('stepEvent', type)
+        },
+        // 警告弹窗
+        downToast (type) {
+          this.$toast({
+            message: type,
+            iconClass: 'el-icon-warning'
+          })
+        },
+        // 验证密码
+        hasPassword () {
+          if (!this.password) {
+            this.downToast('请填写当前密码')
+          } else {
+            this.state.password = 'success'
+          }
+        },
+        sureAccount (type) {
+          if (this.state.password !== 'success') {
+            this.downToast('请确认填写部分是否有误')
+          } else {
+            this.$indicator.open('确认过程中...')
+            let param = new FormData()
+            param.append('password', this.password)
+            let config = {
+              headers: {'Content-Type': 'multipart/form-data'}
+            }
+            this.$http.post(`/sso/resetPwd/check/password`, param, config)
+              .then(response => {
+                this.$indicator.close()
+                if (response.data.success) {
+                  this.$emit('stepEvent', type)
+                  this.$store.commit('login/GET_TOKEN', response.data.content.token)
+                } else {
+                  this.downToast(response.data.errMsg)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        }
+      }
+    }
+</script>

components/mobile/reset/stepEmail.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <span>使用电子邮箱 <strong>183****08@qq.com</strong> 进行验证，有效期7天</span>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('select')">发送验证请求</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-email',
+    data () {
+      return {
+        state: {
+          mobile: 'error',
+          captcha: 'error'
+        },
+        valid: {
+          mobile: '',
+          captcha: ''
+        },
+        imgSrc: ''
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      sureAccount (type) {
+        if (this.state.mobile !== 'success' && this.state.captcha !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          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 => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+              } else {
+                this.getCode()
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      },
+      getCode () {
+        this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
+      }
+    }
+  }
+</script>

components/mobile/reset/stepFirst.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置</p>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="原手机号"
+                  :state="state.mobile"
+                  @blur.native.capture="validateMobile"
+                  v-model="valid.mobile"></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="验证码"
+                  :state="state.captcha"
+                  auto-complete="off"
+                  @blur.native.capture="validateCode"
+                  v-model="valid.captcha">
+          <img :src="imgSrc" height="45px" width="100px" @click="getCode">
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('select')">下一步</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: 'step-one',
+      data () {
+        return {
+          state: {
+            mobile: 'error',
+            captcha: 'error'
+          },
+          valid: {
+            mobile: '',
+            captcha: ''
+          },
+          imgSrc: ''
+        }
+      },
+      mounted () {
+        this.$nextTick(() => {
+          this.getCode()
+        })
+      },
+      methods: {
+        // 警告弹窗
+        downToast (type) {
+          this.$toast({
+            message: type,
+            iconClass: 'el-icon-warning'
+          })
+        },
+        // 验证手机号
+        validateMobile () {
+          let reg = /^1[0-9]{10}$/
+          if (!this.valid.mobile) {
+            this.downToast('请先填写手机号 ')
+          } else {
+            if (reg.test(this.valid.mobile)) {
+              this.state.mobile = 'success'
+            } else {
+              this.state.mobile = 'warning'
+              this.downToast('请填写正确的手机号码')
+            }
+          }
+        },
+        // 验证码验证
+        validateCode () {
+          if (!this.valid.captcha) {
+            this.downToast('请填写验证码信息')
+          } else {
+            this.state.captcha = 'success'
+          }
+        },
+        sureAccount (type) {
+          if (this.state.mobile !== 'success' && this.state.captcha !== 'success') {
+            this.downToast('请确认填写部分是否有误')
+          } else {
+            this.$indicator.open('验证过程中...')
+            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 => {
+                this.$indicator.close()
+                if (response.data.success) {
+                  this.$emit('stepEvent', type)
+                } else {
+                  this.getCode()
+                  this.downToast(response.data.errMsg)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        },
+        getCode () {
+          this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
+        }
+      }
+    }
+</script>

components/mobile/reset/stepFive.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="f-main">
-    <div class="content-top">
-      <p>密码重置5</p>
-    </div>
-    <div class="f-form">
-      <div class="page-part">
-        <mt-field placeholder="原手机号"></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="验证码">
-          <img src="imgSrc" height="45px" width="100px" @click="getCode">
-        </mt-field>
-      </div>
-      <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount(1)">下一步</mt-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'step-one',
-    data () {
-      return {
-        valid: {
-          mobile: '',
-          captcha: ''
-        }
-      }
-    },
-    methods: {
-      sureAccount (type) {
-        this.$emit('stepEvent', type)
-      },
-      getCode () {}
-    }
-  }
-</script>
-
-<style scoped type="text/scss" lang="scss">
-
-</style>

components/mobile/reset/stepLast.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置</p>
+    </div>
+    <template v-if="stepLast === 'new'">
+      <div class="page-part page-last">
+        <h4><img src="/images/all/pass.png"><span>重置成功</span></h4>
+        <p>请妥善保管好自己的密码，保障自身的利益</p>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('select')">完 成</mt-button>
+      </div>
+    </template>
+    <template v-if="stepLast === 'appeal'">
+      <div class="page-part page-last">
+        <h4><img src="/images/all/pass.png"><span>申诉已提交</span></h4>
+        <p>申诉内容已提交，请耐心等待审核</p>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('select')">确 认</mt-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-last',
+    props: ['stepLast'],
+    data () {
+      return {
+        valid: {
+          mobile: '',
+          captcha: ''
+        }
+      }
+    },
+    methods: {
+      sureAccount (type) {
+        this.$emit('stepEvent', type)
+      }
+    }
+  }
+</script>

components/mobile/reset/stepMobile.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <span>使用手机号<strong v-text="mobileText">183*****08</strong>接收验证码</span>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="token"
+                  :state="state.token"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('select')">确定</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-mobile',
+    data () {
+      return {
+        state: {
+          token: 'error'
+        },
+        mobileText: '183*****08',
+        token: '',
+        tokenCode: '',
+        tokenText: '获取验证码',
+        tokenTime: '60'
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证码验证
+      validateCode () {
+        if (!this.token) {
+          this.downToast('请填写验证码信息')
+        } else {
+          this.state.token = 'success'
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          this.$indicator.open('获取中...')
+          let _this = this
+          this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.mobile}})
+            .then(response => {
+              this.$indicator.close()
+              if (response.data) {
+                this.tokenCode = response.data.token
+                this.$toast({
+                  message: '验证码已经发送到您的手机，请注意查收',
+                  iconClass: 'el-icon-success'
+                })
+                this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                let setTime = setInterval(() => {
+                  _this.tokenTime--
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  if (this.tokenTime <= 0) {
+                    clearInterval(setTime)
+                    _this.tokenText = '获取验证码'
+                    _this.tokenTime = 60
+                  }
+                }, 1000)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      },
+      // 验证信息
+      sureAccount (type) {
+        if (this.state.mobile !== 'success' && this.state.captcha !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          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 => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+              } else {
+                this.getCode()
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

components/mobile/reset/stepNew.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置3</p>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="新密码"
+                  :state="state.password"
+                  @blur.native.capture="validPassword"
+                  v-model="valid.password"></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="确认密码"
+                  :state="state.confirm"
+                  @blur.native.capture="validConfirm"
+                  v-model="valid.confirm"></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('last')">下一步</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-new',
+    data () {
+      return {
+        state: {
+          password: 'error',
+          confirm: 'error'
+        },
+        valid: {
+          password: '',
+          confirm: ''
+        }
+      }
+    },
+    methods: {
+      // 验证新密码
+      validPassword () {},
+      // 验证密码是否一致
+      validConfirm () {
+      },
+      sureAccount (type) {
+        this.$emit('stepEvent', type)
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+
+</style>

components/mobile/reset/stepOne.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="f-main">
-    <div class="content-top">
-      <p>密码重置</p>
-    </div>
-    <div class="f-form">
-      <div class="page-part">
-        <mt-field placeholder="原手机号"
-                  :state="state.mobile"
-                  v-mobile="valid.mobile"></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="验证码"
-                  :state="state.captcha"
-                  auto-complete="off"
-                  v-mobile="valid.captcha">
-          <img :src="imgSrc" height="45px" width="100px" @click="getCode">
-        </mt-field>
-      </div>
-      <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount(2)">下一步</mt-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-    export default {
-      name: 'step-one',
-      data () {
-        return {
-          state: {
-            mobile: 'error',
-            captcha: 'error'
-          },
-          valid: {
-            mobile: '',
-            captcha: ''
-          },
-          imgSrc: ''
-        }
-      },
-      mounted () {
-        this.$nextTick(() => {
-          this.getCode()
-        })
-      },
-      methods: {
-        sureAccount (type) {
-          this.$emit('stepEvent', type)
-        },
-        getCode () {
-          this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
-        }
-      }
-    }
-</script>
-
-<style scoped type="text/scss" lang="scss">
-
-</style>

components/mobile/reset/stepFour.vue → components/mobile/reset/stepSecurity .vue

@@ -1,7 +1,7 @@
 <template>
   <div class="f-main">
     <div class="content-top">
-      <p>密码重置4</p>
+      <p>密码重置</p>
     </div>
     <div class="f-form">
       <div class="page-part">
@@ -21,7 +21,7 @@
 
 <script>
   export default {
-    name: 'step-one',
+    name: 'step-security',
     data () {
       return {
         valid: {

components/mobile/reset/stepSelect.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置</p>
+    </div>
+    <div>
+      <ul class="select-item">
+        <li class="item" @click="jump('before')">
+          <img src="/images/all/icon03.png">
+          <span>通过登录密码</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('mobile')">
+          <img src="/images/all/icon01.png">
+          <span>通过验证手机</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('email')">
+          <img src="/images/all/icon02.png">
+          <span>通过验证邮箱</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('appeal')">
+          <img src="/images/all/icon04.png">
+          <i></i><span>通过人工申诉</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-two',
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+.select-item {
+  padding-top:.5rem;
+  .item {
+    position:relative;
+    padding-left:.4rem;
+    margin-bottom:.2rem;
+    line-height: 1.5rem;
+    background: #f4f4f4;
+    font-size: .32rem;
+    span{
+      color:#505050;
+      margin-left:.4rem;
+    }
+    i{
+      display:inline-block;
+      position:absolute;
+      right:.4rem;
+      line-height: 1.5rem;
+      font-size:.45rem;
+
+    }
+  }
+}
+</style>

components/mobile/reset/stepThree.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="f-main">
-    <div class="content-top">
-      <p>密码重置3</p>
-    </div>
-    <div class="f-form">
-      <div class="page-part">
-        <mt-field placeholder="原手机号"></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="验证码">
-          <img src="imgSrc" height="45px" width="100px" @click="getCode">
-        </mt-field>
-      </div>
-      <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount(4)">下一步</mt-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'step-one',
-    data () {
-      return {
-        valid: {
-          mobile: '',
-          captcha: ''
-        }
-      }
-    },
-    methods: {
-      sureAccount (type) {
-        this.$emit('stepEvent', type)
-      },
-      getCode () {}
-    }
-  }
-</script>
-
-<style scoped type="text/scss" lang="scss">
-
-</style>

components/mobile/reset/stepTwo.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="f-main">
-    <div class="content-top">
-      <p>密码重置2</p>
-    </div>
-    <div class="f-form">
-      <div class="page-part">
-        <mt-field placeholder="原手机号"></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="验证码">
-          <img src="imgSrc" height="45px" width="100px" @click="getCode">
-        </mt-field>
-      </div>
-      <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount(3)">下一步</mt-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'step-one',
-    data () {
-      return {
-        valid: {
-          mobile: '',
-          captcha: ''
-        }
-      }
-    },
-    methods: {
-      sureAccount (type) {
-        this.$emit('stepEvent', type)
-      },
-      getCode () {}
-    }
-  }
-</script>
-
-<style scoped type="text/scss" lang="scss">
-
-</style>

pages/logquit/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="logout">
+    <template v-if="isMobile">
+
+    </template>
+    <template>
+      <loading/>
+    </template>
+  </div>
+</template>
+
+<script>
+  import Loading from '~components/common/loading/Loading.vue'
+  export default {
+    name: 'logout',
+    layout: 'mobile',
+    components: {
+      Loading
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
+    }
+  }
+</script>

pages/reset/forgetPasswordValidationAccount.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
     <template v-if="isMobile">
-      <step-one v-if="step === 1" @stepEvent="setStep"/>
-      <step-two v-if="step === 2" @stepEvent="setStep"/>
-      <step-three v-if="step === 3" @stepEvent="setStep"/>
-      <step-four v-if="step === 4" @stepEvent="setStep"/>
-      <step-five v-if="step === 5" @stepEvent="setStep"/>
+      <step-first v-if="step === 'first'" @stepEvent="setStep"/>
+      <step-select v-if="step === 'select'" @stepEvent="setStep"/>
+      <step-before v-if="step === 'before'" @stepEvent="setStep"/>
+      <step-email v-if="step === 'email'" @stepEvent="setStep"/>
+      <step-mobile v-if="step === 'mobile'" @stepEvent="setStep"/>
+      <step-appeal v-if="step === 'appeal'" @stepEvent="setStep"/>
+      <step-security v-if="step === 'security'" @stepEvent="setStep"/>
+      <step-new v-if="step === 'new'" @stepEvent="setStep" :stepLast="stepLast"/>
+      <step-Last v-if="step === 'last'" @stepEvent="setStep" :stepLast="stepLast"/>
     </template>
     <template v-else>
       <accountCenter-header/>
@@ -16,28 +20,33 @@
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import ForgetPasswordValidationAccount from '~components/reset/ForgetPasswordValidationAccount.vue'
-  import {StepOne, StepTwo, StepThree, StepFour, StepFive} from '~components/mobile/reset'
+  import {StepFirst, StepSelect, StepBefore, StepEmail, StepMobile, StepAppeal, StepNew, StepSecurity, StepLast} from '~components/mobile/reset'
   export default {
     layout (context) {
       return context.store.state.option.isMobile ? 'mobile' : 'default'
     },
     data () {
       return {
-        step: 1
+        step: 'before',
+        stepLast: 'new'
       }
     },
     components: {
       AccountCenterHeader,
       ForgetPasswordValidationAccount,
-      StepOne,
-      StepTwo,
-      StepThree,
-      StepFour,
-      StepFive
+      StepFirst,
+      StepSelect,
+      StepNew,
+      StepLast,
+      StepSecurity,
+      StepBefore,
+      StepMobile,
+      StepEmail,
+      StepAppeal
     },
     mounted () {
       if (this.$store.state.option.isLogin.data.isLogin) {
-        this.step = 2
+        this.step = 'select'
       }
     },
     computed: {