<template>
|
<!-- 忘记密码 -->
|
<view>
|
<view class="input-box">
|
<input type="text" v-model="phone" placeholder="请输入手机号码" placeholder-class="placeholder" class="input-group-row"/>
|
<view class="flex mt-10 ">
|
<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>
|
<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)=>{
|
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='+this.code+'&phone='+this.phone
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.input-box{
|
margin: 20px 15px;
|
}
|
.btn-box{
|
display: flex;
|
align-items: flex-end;
|
}
|
.btn{
|
margin: 0;
|
font-size: 12px;
|
line-height: 36px;
|
}
|
</style>
|
