取回密码

...
<div id="app" v-cloak>
   <el-form ref="form" :model="form" :rules="rules"  >

      <el-form-item  class="class-30 " prop="peoplePhone">
         <el-input  v-model="form.peoplePhone"
                    :disabled="false"
                    :style="{width:  '100%'}"
                    :clearable="true"
                    placeholder="请输入手机号">
         </el-input>
      </el-form-item>

      <el-form-item  class="class-23 " prop="rand_code">
         <el-input  v-model="form.rand_code"
                    :disabled="false"
                    :style="{width:  '100%'}"
                    :clearable="true"
                    placeholder="请输入验证码">
         </el-input>
      </el-form-item>

         <img :src="verificationCode" @click="code"
              class="class-25 " />
         <div>看不清</div>
         <div "@click="code">换一个</div>

      <el-form-item prop="peopleCode">
         <el-input  v-model="form.peopleCode"
                    :disabled="false"
                    :style="{width:  '100%'}"
                    :clearable="true"
                    placeholder="请输入验证码">
         </el-input>
      </el-form-item>

         <el-button  type="primary" @click="sendRandCode" :disabled="countdown ? true : false"  >
            <span v-text="countdown ? ''+countdown + 's重新发送':'获取验证码'"></span>
         </el-button>

      <el-form-item prop="peoplePassword">
         <el-input password type="password" v-model="form.peoplePassword"
                   :disabled="false"
                   :style="{width:  '100%'}"
                   :clearable="true"
                   placeholder="请输入设置6-18位字母数字组成的密码">
         </el-input>
      </el-form-item>

   </el-form>

   <div @click="changePassword">
      <el-button type="primary" :loading="operation" :disabled="form.peoplePassword  && form.peoplePhone && form.rand_code  && form.peopleCode ? false:true">确认</el-button>
   </div>

</div>
...

<script>
   var app = new Vue({
      el: '#app',
      data() {
         let isExistsPeoplePhone = (rule, value, callback) => {
            var that =this;
            ms.http.post(ms.base+"/isExists.do",{
               peoplePhone: that.form.peoplePhone,
            }).then(function (data) {
               if(!data.result) {
                  return  callback("该手机号未绑定");
               }
               callback();
            });
         }
         return {
            operation:false,
            countdown: 0,//验证码计时
            form:{
               peopleName:'',//用户名
               peoplePassword:'',//密码
               rePeoplePassword:'',//确认密码
               peoplePhone:'',//邮箱
               peopleCode:'',//验证码
               rand_code:'',//图片验证码
            },
            verificationCode: '',
            rules: {
               peoplePassword:[
                  { required: true, message: '请输入密码' },
                  {pattern:/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,18}$/, message: '请输入6-18位由字母数字组成的密码' },
               ],
               rand_code:[
                  { required: true, message: '请输入验证码' },
               ],
               peoplePhone:[
                  { required: true, message: '请输入手机号' },
                  {pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号' },
                  { validator: isExistsPeoplePhone ,trigger: 'blur'},
               ],
            },
         }
      },
      methods: {
         sendRandCode: function(){
            var that = this;
            if (that.countdown > 0){
               return;
            }
            that.$refs.form.validateField(['peoplePhone'],(valid) => {
               if(valid == ""){
                  ms.http.post(ms.base+"/sendCode.do",{
                     receive: that.form.peoplePhone,
                     "modelCode": "sms",
                     "type": "sms",
                     "isSession": false,
                     rand_code: that.form.rand_code
                  }).then(function (data) {
                     if(data.result) {
                        that.$notify.success('验证码已发送');
                     }
                     that.countdown = 60;
                     that.countdownSubtract();
                  });
               }
            });
         },
         //倒计时
         countdownSubtract: function() {
            if (this.countdown > 0) {
               setTimeout(() => {
                  this.countdown -= 1;
                  this.countdownSubtract()
               }, 1000)
            }
         },
         //验证码
         code:function() {
            this.verificationCode = ms.base + "/code?t=" + new Date().getTime();
         },
         login:function () {
            //location.href = ms.base+"登录页面";
         },
         changePassword:function(){
            var that =this;
            that.$refs.form.validate((valid) => {
               if (valid) {
                  that.operation=true;
                  ms.http.post(ms.base+"/checkResetPasswordCode.do",{
                     rand_code:that.form.rand_code,
                     peopleCode: that.form.peopleCode,
                  }).then(function (data) {
                     if(data.result){
                        ms.http.post(ms.base+"/resetPassword.do",{
                           rand_code:that.form.rand_code,
                           peopleCode:that.form.peopleCode,
                           peoplePassword:that.form.peoplePassword,
                        }).then(function (data) {
                           if(data.result){
                              that.$notify.success('重置密码成功，即将跳转到登录页面');
                              setTimeout(()=>{
                              //location.href = "跳转到登页面"
                              },2000);
                           }else{
                              that.operation = false;
                              that.$notify.error(data.resultMsg);
                           }
                        });
                     }else{
                        that.operation = false;
                        that.$notify.error(data.resultMsg);
                     }
                  });
               }else{
                  that.operation = false;
               }
            });
         }
      },
   })
</script>