创建密码重置功能

assets/scss/mobileCommon.scss

@@ -3,9 +3,13 @@
   min-height:100vh;
   background: #eaeaea;
   color:#333;
+  padding-top:.15rem;
 }
 .page-part{
   margin-bottom:.4rem;
+  img{
+    margin-left:.1rem;
+  }
 }
 .mint-cell-wrapper{
   border:1px solid #b5b5b5;
@@ -22,3 +26,55 @@
     color:#f44336;
   }
 }
+.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;
+        background: #999;
+      }
+      .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;
+      margin-left: .1rem;
+      color:#2d8cf0;
+    }
+  }
+}

components/mobile/headerMobile.vue

@@ -13,7 +13,7 @@
 <style scoped type="text/scss" lang="scss">
 .header{
   text-align: center;
-  line-height: 1.7rem;
+  line-height: 1.5rem;
   h3{
     margin:0;
     color:#333;

components/mobile/loginMobile.vue

@@ -5,6 +5,9 @@
   </div>
   <div class="page-part">
     <mt-field placeholder="密码" v-model="login.password" type="password"></mt-field>
+    <template>
+      <p class="pwd"><a href="/reset/forgetPasswordValidationAccount" class="rgba">忘记密码？</a></p>
+    </template>
   </div>
   <template v-if="showCheckCode">
     <div class="page-part">
@@ -188,6 +191,12 @@
     -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     background: rgba(0, 0, 0, 0.2);
   }
+  .pwd {
+    font-size: .14rem;
+    color: #a0a0a0;
+    margin: .2rem auto;
+    text-align: right;
+  }
   .itemgreen{
     color:#2d8cf0;
   }

components/mobile/registerEnterprise/index.vue

@@ -70,6 +70,9 @@
                     :state="state.password"
                     type="password"
                     @blur.native.capture="validatePasswordTipHas"></mt-field>
+          <template v-if="!step2.password">
+            <p class="pwd" style="text-align:right;"><a href="/reset/forgetPasswordValidationAccount">忘记密码?</a></p>
+          </template>
           <template v-if="step2.password">
             <p class="pwd">手机号已注册，请输入原密码</p>
           </template>

components/mobile/registerPersonal/index.vue

@@ -276,57 +276,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;
-          background: #999;
-        }
-        .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;
-        margin-left: .1rem;
-        color:#2d8cf0;
-      }
-    }
-  }
-</style>

components/mobile/reset/index.js

@@ -0,0 +1,7 @@
+import StepOne from './stepOne.vue'
+import StepTwo from './stepTwo.vue'
+import StepThree from './stepThree.vue'
+import StepFour from './stepFour.vue'
+import StepFive from './stepFive'
+
+export {StepOne, StepTwo, StepThree, StepFour, StepFive}

components/mobile/reset/stepFive.vue

@@ -0,0 +1,44 @@
+<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/stepFour.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>密码重置4</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(5)">下一步</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/stepOne.vue

@@ -0,0 +1,61 @@
+<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/stepThree.vue

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,44 @@
+<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/reset/forgetPasswordValidationAccount.vue

@@ -1,17 +1,54 @@
 <template>
   <div>
-    <accountCenter-header/>
-    <forgetPassword-validationAccount/>
+    <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"/>
+    </template>
+    <template v-else>
+      <accountCenter-header/>
+      <forgetPassword-validationAccount/>
+    </template>
   </div>
 </template>
 <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'
   export default {
-    layout: 'default',
+    layout (context) {
+      return context.store.state.option.isMobile ? 'mobile' : 'default'
+    },
+    data () {
+      return {
+        step: 1
+      }
+    },
     components: {
       AccountCenterHeader,
-      ForgetPasswordValidationAccount
+      ForgetPasswordValidationAccount,
+      StepOne,
+      StepTwo,
+      StepThree,
+      StepFour,
+      StepFive
+    },
+    mounted () {
+      if (this.$store.state.option.isLogin.data.isLogin) {
+        this.step = 2
+      }
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
+    },
+    methods: {
+      setStep (type) {
+        this.step = type
+      }
     }
   }
 </script>