完成所有数据的验证信息

assets/scss/mobileCommon.scss

@@ -69,6 +69,10 @@
   }
   .f-form{
     padding-top:.6rem;
+    .security{
+      font-size: .32rem;
+      color:#666;
+    }
     .pwd{
       font-size: .14rem;
       color:#a0a0a0;

components/mobile/reset/stepAppeal.vue

@@ -7,7 +7,7 @@
     <div class="f-form">
       <div class="page-part">
         <mt-field placeholder="新手机号码"
-                  v-model="step1.mobile"
+                  v-model="valid.mobile"
                   :state="state.mobile"
                   type="tel"
                   @blur.native.capture="validateMobile"
@@ -16,7 +16,7 @@
       <div class="page-part">
         <mt-field auto-complete="off"
                   placeholder="短信验证码"
-                  v-model="step1.token"
+                  v-model="valid.token"
                   :state="state.token"
                   @blur.native.capture="validateCode">
           <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
@@ -24,43 +24,52 @@
       </div>
       <div class="page-part">
         <mt-field placeholder="新密码"
-                  v-model="step1.mobile"
-                  :state="state.mobile"
-                  @blur.native.capture="validateMobile"
-        ></mt-field>
+                  v-model="valid.password"
+                  :attr="{maxlength: 20}"
+                  :state="state.password"
+                  @input.native="validatePassword"
+                  @blur.native.capture="validatePasswordTip"></mt-field>
+        <template v-if="valid.password">
+          <p class="pwd">密码强度 <em :class="{sm:progress === '弱', md: progress === '中', ld:progress === '强'}"></em> <em :class="{md: progress === '中', ld:progress === '强'}"></em> <em :class="{ld:progress === '强'}"></em> <span :class="{smstep:progress === '弱', mdstep: progress === '中', ldstep:progress === '强'}" v-text="progress">强</span></p>
+          <p class="pwd">密码须为8-20字符的英文、数字混合</p>
+        </template>
       </div>
       <div class="page-part">
         <mt-field placeholder="确认密码"
-                  v-model="step1.mobile"
-                  :state="state.mobile"
-                  @blur.native.capture="validateMobile"
+                  v-model="valid.confirm"
+                  auto-complete="off"
+                  :state="state.confirm"
+                  @blur.native.capture="validateConfirm"
         ></mt-field>
       </div>
       <div class="page-part">
-        <mt-field placeholder="申诉说明" type="textarea" rows="4" v-model="step1.mobile"></mt-field>
+        <mt-field placeholder="申诉说明"
+                  type="textarea"
+                  rows="4"
+                  v-model="valid.description"></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"
+                  v-model="valid.contactName"
+                  :state="state.contactName"
+                  @blur.native.capture="validateContactName"
         ></mt-field>
       </div>
       <div class="page-part">
         <mt-field placeholder="联系电话"
-                  v-model="step1.mobile"
-                  :state="state.mobile"
+                  v-model="valid.contactTel"
+                  :state="state.contactTel"
                   type="tel"
-                  @blur.native.capture="validateMobile"
+                  @blur.native.capture="validateContactTel"
         ></mt-field>
       </div>
       <div class="page-part">
         <mt-field placeholder="电子邮箱"
-                  v-model="step1.mobile"
-                  :state="state.mobile"
+                  v-model="valid.contactEmail"
+                  :state="state.contactEmail"
                   type="email"
-                  @blur.native.capture="validateMobile"
+                  @blur.native.capture="validateContactEmail"
         ></mt-field>
       </div>
       <div class="page-part">
@@ -77,26 +86,34 @@
         return {
           state: {
             mobile: 'error',
-            captcha: 'error'
+            token: 'error',
+            password: 'error',
+            confirm: 'error',
+            contactName: 'error',
+            contactTel: 'error',
+            contactEmail: 'error'
           },
-          step1: {
+          valid: {
             mobile: '',
-            captcha: ''
+            token: '',
+            password: '',
+            confirm: '',
+            description: '',
+            contactName: '',
+            contactTel: '',
+            contactEmail: ''
           },
-          imgSrc: '',
-          tokenText: '3421'
+          tokenCode: '',
+          tokenTime: 60,
+          tokenText: '获取验证码',
+          progress: '弱'
         }
       },
-      mounted () {
-        this.$nextTick(() => {
-          this.getCode()
-        })
-      },
       methods: {
         jump (type) {
           this.$emit('stepEvent', type)
         },
-        // 警告弹窗
+        // 弹窗处理
         downToast (type) {
           this.$toast({
             message: type,
@@ -107,42 +124,204 @@
         validateMobile () {
           let reg = /^1[0-9]{10}$/
           if (!this.valid.mobile) {
-            this.downToast('请先填写手机号 ')
+            this.downToast('请先填写手机号')
           } else {
-            if (reg.test(this.valid.mobile)) {
-              this.state.mobile = 'success'
-            } else {
+            if (!reg.test(this.valid.mobile)) {
+              this.downToast('请填写正确的手机号')
               this.state.mobile = 'warning'
-              this.downToast('请填写正确的手机号码')
+            } else {
+              this.state.mobile = 'success'
             }
           }
         },
-        // 验证码验证
+        // 验证正确的验证码
         validateCode () {
-          if (!this.valid.captcha) {
-            this.downToast('请填写验证码信息')
+          if (!this.valid.token) {
+            this.downToast('请先填写验证码')
+          } else {
+            if (!this.valid.mobile) {
+              this.downToast('请先填写正确的手机号码')
+              this.state.token = 'warning'
+            } else {
+              if (this.tokenCode) {
+                let param = new FormData()
+                param.append('mobile', this.valid.mobile)
+                param.append('token', this.tokenCode)
+                param.append('code', this.valid.token)
+                let config = {
+                  headers: {'Content-Type': 'multipart/form-data'}
+                }
+                this.$http.post('/appeal/check/mobile', param, config)
+                  .then(response => {
+                    if (response.data.success) {
+                      this.state.token = 'success'
+                    } else {
+                      this.$toast({
+                        message: response.data.errMsg,
+                        iconClass: 'el-icon-error'
+                      })
+                    }
+                  }).catch(() => {
+                    this.downToast('请检查网络是否正常或联系服务商')
+                  })
+              } else {
+                this.downToast('请点击先获取验证码信息')
+                this.state.token = 'warning'
+              }
+            }
+          }
+        },
+        // 获取验证码
+        getCheckCode () {
+          if (this.tokenTime > 0 && this.tokenTime < 60) {
+            this.downToast('请稍后再点击，我在倒计时')
+          } else {
+            if (this.state.mobile !== 'success') {
+              this.downToast('请先输入正确的手机号')
+            } else {
+              this.$indicator.open('获取中...')
+              let _this = this
+              this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.valid.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('请检查网络是否正常或联系服务商')
+                })
+            }
+          }
+        },
+        // 验证密码强度
+        validatePassword () {
+          let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
+          let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+          let count = this.valid.password.length
+          if (count >= 20) {
+            this.downToast('密码须为8-20字符的英文、数字混合')
+          } else {
+            if (reg1.test(this.valid.password)) {
+              this.progress = '强'
+            } else if (reg2.test(this.valid.password)) {
+              this.progress = '中'
+            } else {
+              this.progress = '弱'
+            }
+          }
+        },
+        // 验证密码
+        validatePasswordTip () {
+          let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+          if (!this.valid.password) {
+            this.downToast('请输入密码')
+          } else {
+            if (!reg2.test(this.valid.password)) {
+              this.downToast('密码须为8-20字符的英文、数字混合')
+              this.state.password = 'warning'
+            } else {
+              this.state.password = 'success'
+            }
+          }
+        },
+        // 验证二次密码
+        validateConfirm () {
+          if (!this.valid.confirm) {
+            this.downToast('请再次输入密码')
+          } else {
+            if (this.valid.confirm === this.valid.password) {
+              this.state.confirm = 'success'
+            } else {
+              this.state.confirm = 'warning'
+              this.downToast('两次输入密码不一致，请重新输入')
+            }
+          }
+        },
+        // 验证姓名
+        validateContactName () {
+          if (!this.valid.contactName) {
+            this.downToast('请填写您的姓名')
           } else {
-            this.state.captcha = 'success'
+            if (this.valid.contactName.length > 20) {
+              this.downToast('输入长度过长，限定20个字符以内')
+              this.state.contactName = 'warning'
+            } else {
+              this.state.contactName = 'success'
+            }
+          }
+        },
+        // 验证电话
+        validateContactTel () {
+          let reg = /^1[0-9]{10}$/
+          if (!this.valid.contactTel) {
+            this.downToast('请填写联系电话')
+          } else {
+            if (!reg.test(this.valid.contactTel)) {
+              this.downToast('请填写正确的联系电话')
+              this.state.contactTel = 'warning'
+            } else {
+              this.state.contactTel = 'success'
+            }
+          }
+        },
+        // 验证邮箱
+        validateContactEmail () {
+          let reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
+          if (!this.valid.contactEmail) {
+            this.downToast('请填写联系电子邮箱')
+          } else {
+            if (!reg.test(this.valid.contactEmail)) {
+              this.downToast('请输入正确的邮箱地址格式')
+              this.state.contactEmail = 'warning'
+            } else {
+              this.state.contactEmail = 'success'
+            }
           }
         },
         sureAccount (type) {
-          if (this.state.mobile !== 'success' && this.state.captcha !== 'success') {
+          if (this.state.mobile !== 'success' &&
+            this.state.token !== 'success' &&
+            this.state.password !== 'success' &&
+            this.state.confirm !== 'success' &&
+            this.state.contactName !== 'success' &&
+            this.state.contactTel !== 'success' &&
+            this.state.contactEmail !== 'success') {
             this.downToast('请确认填写部分是否有误')
           } else {
             this.$indicator.open('验证过程中...')
             let param = new FormData()
             param.append('mobile', this.valid.mobile)
-            param.append('captcha', this.valid.captcha)
+            param.append('code', this.valid.code)
+            param.append('password', this.valid.password)
+            param.append('description', this.valid.description)
+            param.append('contactName', this.valid.contactName)
+            param.append('contactTel', this.valid.contactTel)
+            param.append('contactEmail', this.valid.contactEmail)
+            param.append('token', this.tokenCode)
             let config = {
               headers: {'Content-Type': 'multipart/form-data'}
             }
-            this.$http.post(`/sso/resetPwd/checkCaptcha`, param, config)
+            this.$http.post('/appeal/resetPwd', param, config)
               .then(response => {
                 this.$indicator.close()
                 if (response.data.success) {
                   this.$emit('stepEvent', type)
                 } else {
-                  this.getCode()
                   this.downToast(response.data.errMsg)
                 }
               }).catch(() => {
@@ -150,9 +329,6 @@
                 this.downToast('请检查网络是否正常或联系服务商')
               })
           }
-        },
-        getCode () {
-          this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
         }
       }
     }

components/mobile/reset/stepEmail.vue

@@ -9,7 +9,10 @@
         <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>
+        <mt-button :disabled="hasSend" size="large"
+                   type="primary"
+                   @click="sureAccount('select')"
+                   v-text="secretEmail">发送验证请求</mt-button>
       </div>
     </div>
   </div>
@@ -20,49 +23,39 @@
     name: 'step-email',
     data () {
       return {
-        state: {
-          mobile: 'error',
-          captcha: 'error'
-        },
-        valid: {
-          mobile: '',
-          captcha: ''
-        },
-        imgSrc: ''
+        secretEmail: '发送验证请求',
+        hasSend: false
       }
     },
     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('请检查网络是否正常或联系服务商')
-            })
-        }
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
       },
-      getCode () {
-        this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
+      // 发送邮件
+      sureAccount (type) {
+        this.$indicator.open('发送过程中...')
+        this.$http.get(`/sso/resetPwd/check/email`)
+          .then(response => {
+            this.$indicator.close()
+            if (response.data.success) {
+              this.$emit('stepEvent', type)
+              this.hasSend = true
+              this.secretEmail = '已发送验证邮件，请查收'
+            } else {
+              this.hasSend = false
+              this.downToast(response.data.errMsg)
+            }
+          }).catch(() => {
+            this.$indicator.close()
+            this.downToast('请检查网络是否正常或联系服务商')
+          })
       }
     }
   }

components/mobile/reset/stepMobile.vue

@@ -93,21 +93,22 @@
       },
       // 验证信息
       sureAccount (type) {
-        if (this.state.mobile !== 'success' && this.state.captcha !== 'success') {
+        if (this.state.token !== 'success') {
           this.downToast('请确认填写部分是否有误')
         } else {
           this.$indicator.open('验证过程中...')
           let param = new FormData()
-          param.append('mobile', this.valid.mobile)
-          param.append('captcha', this.valid.captcha)
+          param.append('code', this.valid.token)
+          param.append('token', this.tokenCode)
           let config = {
             headers: {'Content-Type': 'multipart/form-data'}
           }
-          this.$http.post(`/sso/resetPwd/checkCaptcha`, param, config)
+          this.$http.post('/sso/resetPwd/check/mobile', 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.getCode()
                 this.downToast(response.data.errMsg)

components/mobile/reset/stepNew.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="f-main">
     <div class="content-top">
-      <p>密码重置3</p>
+      <p>密码重置</p>
     </div>
     <div class="f-form">
       <div class="page-part">
         <mt-field placeholder="新密码"
+                  :attr="{ maxlength: 20 }"
                   :state="state.password"
-                  @blur.native.capture="validPassword"
-                  v-model="valid.password"></mt-field>
+                  @blur.native.capture="validPasswordTip"
+                  @input.native="validPassword"
+                  v-model="news.password"></mt-field>
+        <template v-if="news.password">
+          <p class="pwd">密码强度 <em :class="{sm:progress === '弱', md: progress === '中', ld:progress === '强'}"></em> <em :class="{md: progress === '中', ld:progress === '强'}"></em> <em :class="{ld:progress === '强'}"></em> <span :class="{smstep:progress === '弱', mdstep: progress === '中', ldstep:progress === '强'}" v-text="progress">强</span></p>
+          <p class="pwd">密码须为8-20字符的英文、数字混合</p>
+        </template>
       </div>
       <div class="page-part">
         <mt-field placeholder="确认密码"
                   :state="state.confirm"
+                  auto-complet="off"
                   @blur.native.capture="validConfirm"
-                  v-model="valid.confirm"></mt-field>
+                  v-model="news.confirm"></mt-field>
       </div>
       <div class="page-part">
         <mt-button size="large" type="primary" @click="sureAccount('last')">下一步</mt-button>
@@ -28,24 +35,81 @@
     name: 'step-new',
     data () {
       return {
+        progress: '',
         state: {
           password: 'error',
           confirm: 'error'
         },
-        valid: {
+        news: {
           password: '',
           confirm: ''
         }
       }
     },
     methods: {
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证密码强度
+      validPassword () {
+        let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
+        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+        let count = this.news.password.length
+        if (count >= 20) {
+          this.downToast('密码须为8-20字符的英文、数字混合')
+        } else {
+          if (reg1.test(this.news.password)) {
+            this.progress = '强'
+          } else if (reg2.test(this.news.password)) {
+            this.progress = '中'
+          } else {
+            this.progress = '弱'
+          }
+        }
+      },
       // 验证新密码
-      validPassword () {},
+      validPasswordTip () {},
       // 验证密码是否一致
       validConfirm () {
+        if (!this.news.confirm) {
+          this.downToast('请再次输入密码')
+        } else {
+          if (this.news.confirm === this.news.password) {
+            this.state.confirm = 'success'
+          } else {
+            this.state.confirm = 'warning'
+            this.downToast('两次输入密码不一致，请重新输入')
+          }
+        }
       },
       sureAccount (type) {
-        this.$emit('stepEvent', type)
+        if (this.state.password !== 'success' && this.state.confirm !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证中...')
+          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 => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
       }
     }
   }

components/mobile/reset/stepSecurity .vue

@@ -5,15 +5,22 @@
     </div>
     <div class="f-form">
       <div class="page-part">
-        <mt-field placeholder="原手机号"></mt-field>
+        <p class="security">请选择密码问题一</p>
+        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
       </div>
       <div class="page-part">
-        <mt-field placeholder="验证码">
-          <img src="imgSrc" height="45px" width="100px" @click="getCode">
-        </mt-field>
+        <mt-field placeholder="请填写答案一"></mt-field>
       </div>
       <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount(5)">下一步</mt-button>
+        <p class="security">请选择密码问题二</p>
+        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="请填写答案二"></mt-field>
+      </div>
+
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('last')">下一步</mt-button>
       </div>
     </div>
   </div>
@@ -27,14 +34,35 @@
         valid: {
           mobile: '',
           captcha: ''
-        }
+        },
+        slots: [
+          {
+            flex: 1,
+            values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
+            className: 'slot1',
+            textAlign: 'right'
+          }, {
+            divider: true,
+            content: '-',
+            className: 'slot2'
+          }, {
+            flex: 1,
+            values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
+            className: 'slot3',
+            textAlign: 'left'
+          }
+        ]
       }
     },
     methods: {
+      onValuesChange (picker, values) {
+        if (values[0] > values[1]) {
+          picker.setSlotValue(1, values[0])
+        }
+      },
       sureAccount (type) {
         this.$emit('stepEvent', type)
-      },
-      getCode () {}
+      }
     }
   }
 </script>

pages/reset/forgetPasswordValidationAccount.vue

@@ -27,7 +27,7 @@
     },
     data () {
       return {
-        step: 'before',
+        step: 'select',
         stepLast: 'new'
       }
     },

store/index.js

@@ -115,5 +115,15 @@ export const actions = {
       }, err => {
         commit('formConfig/GET_FORMDATA_FAILURE', err)
       })
+  },
+  // 获取密保问题
+  loadQuestion ({commit}, params = {}) {
+    commit('option/REQUEST_ISSUE')
+    return this.$http.get('/sso/resetPwd/check/question', {params})
+      .then(response => {
+        commit('option/GET_ISSUE_SUCCESS', response.data)
+      }, err => {
+        commit('option/GET_ISSUE_FAILURE', err)
+      })
   }
 }

store/reset.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  issue: {
+    data: [],
+    fetching: false
+  }
+})
+
+export const mutations = {
+  REQUEST_ISSUE (state) {
+    state.issue.fetching = true
+  },
+  GET_ISSUE_SUCCESS (state, result) {
+    state.issue.fetching = false
+    state.issue.data = result
+  },
+  GET_ISSUE_FAILURE (state) {
+    state.issue.fetching = true
+  }
+}