忘记密码

li-guang

2021-01-08 86773d61655cd653b3feb70401aa2edf242aa29c

 hive-app/pages/login/forgetPassword.vue

@@ -2,21 +2,87 @@
   <!-- 忘记密码 -->
   <view>
      <view class="input-box">
         <input placeholder="请输入手机号码" placeholder-class="placeholder" class="input-group-row"/>
         <input type="text" v-model="phone" placeholder="请输入手机号码" placeholder-class="placeholder" class="input-group-row"/>
         <view class="flex mt-10 ">
            <input placeholder="请输入验证码" placeholder-class="placeholder" class="input-group-row flex-1 mr-10"/>
            <navigator url="" hover-class="none" class="btn-box">
               <button class="btn blue-btn">获取验证码</button>
            </navigator>
            <input type="text" v-model="code" value="" placeholder="请输入验证码" placeholder-class="placeholder" class="input-group-row flex-1 mr-10"/>
            <view url="" hover-class="none" class="btn-box">
               <button class="btn blue-btn" :disabled="btnDisabled" @click="sendCode">{{btnTxt}}</button>
            </view>
         </view>
      </view>
      <navigator url="./newPassword" hover-class="none" class="sticky-footer">
         <button class="blue-btn">下一步</button>
      </navigator>
      <button class="blue-btn sticky-footer" @click="next">下一步</button>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            phone:'',
            code: '',
            btnTxt: '获取验证码',
            btnDisabled: false
         }
      },
      methods: {
         sendCode(){
            if (!this.$utils.checkPhone(this.phone)){
               this.$toast.info('请输入正确的手机号');
               return false;
            }
            this.btnDisabled = true;
            let second = 120;
            this.$httpUtils.request('/api/common/sendSmsCode',{
               telphone: this.phone.trim()
            },'POST').then((res)=>{
               console.log(res)
               if(res.status==200){
                  this.btnTxt = second + 's';
                  this.timer = setInterval(() => {
                     if(second<=1){
                        this._reset()
                     }else{
                        second--;
                        this.btnTxt = second + 's';
                     }
                  }, 1000);
                  this.$toast.info(res.info);
               } else {
                  this.$toast.info(res.info);
                  this.btnDisabled = false;
               }
            }).catch((err) => {
               this.$toast.info('发送失败');
               this._reset()
            })
         },
         _reset(){
            this.timer && clearInterval(this.timer);
            this.timer = null;
            this.btnTxt = '发送验证码';
            this.btnDisabled = false;
         },
         valid(){
            if(!this.phone.trim()){
               this.$toast.info('请输入手机号');
               return false;
            }
            if(!this.code.trim()){
               this.$toast.info('请输入验证码');
               return false;
            }
         },
         next(){
            if(this.valid() === false){
               return;
            }else{
               uni.navigateTo({
                  url:'./newPassword?code=123456&phone='+this.phone
               })
            }
         }
      }
   }
</script>

<style>