222 lines
7.4 KiB
Vue
222 lines
7.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="pad-zy30">
|
|||
|
|
<status-nav navBarTitle="找回密码" returnColor="#c2c2c2"></status-nav>
|
|||
|
|
<container-subgroup>
|
|||
|
|
<view slot="content" style="margin: 0 -30rpx;">
|
|||
|
|
<view class="fon52 bold mar-sx50">忘记密码 ？</view>
|
|||
|
|
<view class="fon28">
|
|||
|
|
<view class="forget-title mar-x10">手机号码</view>
|
|||
|
|
<view class="forget-input-box posir">
|
|||
|
|
<input @blur="inputBlurEv(0)" @focus="inputFocusEv(0)" @input="inputFocusEv(0)" class="fon24" type="number" maxlength="11" v-model="forget_phone" placeholder="请输入您的手机号码" placeholder-style="color:#c8c8c8;" />
|
|||
|
|
<!-- 清除按钮 -->
|
|||
|
|
<view class="clear-box" v-show="ifPhone" @tap="clearInput(0)"><view class="clear-close"><span></span><span></span></view></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="forget-title mar-x10">手机验证码</view>
|
|||
|
|
<view class="forget-input-box posir">
|
|||
|
|
<input @blur="inputBlurEv(1)" @focus="inputFocusEv(1)" @input="inputFocusEv(1)" class="fon24" type="number" maxlength="6" v-model="forget_code" placeholder="请输入手机验证码" placeholder-style="color:#c8c8c8;" />
|
|||
|
|
<view class="forget-obtain-code" @tap="getCode">{{codeText}}</view>
|
|||
|
|
<!-- 清除按钮 -->
|
|||
|
|
<view class="clear-box" v-show="ifCode" @tap="clearInput(1)" style="right: 260rpx;"><view class="clear-close"><span></span><span></span></view></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="forget-title mar-x10">新密码</view>
|
|||
|
|
<view class="forget-input-box posir">
|
|||
|
|
<input @blur="inputBlurEv(2)" @focus="inputFocusEv(2)" @input="inputFocusEv(2)" class="fon24" type="text" password v-model="forget_password" placeholder="请输入新密码" placeholder-style="color:#c8c8c8;" />
|
|||
|
|
<!-- 清除按钮 -->
|
|||
|
|
<view class="clear-box" v-show="ifPassword" @tap="clearInput(2)"><view class="clear-close"><span></span><span></span></view></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="forget-title mar-x10">确认密码</view>
|
|||
|
|
<view class="forget-input-box posir">
|
|||
|
|
<input @blur="inputBlurEv(3)" @focus="inputFocusEv(3)" @input="inputFocusEv(3)" class="fon24" type="text" password v-model="forget_qpassword" placeholder="请再次确认密码" placeholder-style="color:#c8c8c8;" />
|
|||
|
|
<!-- 清除按钮 -->
|
|||
|
|
<view class="clear-box" v-show="ifqpassword" @tap="clearInput(3)"><view class="clear-close"><span></span><span></span></view></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="forget-title mar-x10">单位名称</view>
|
|||
|
|
<view class="forget-input-box posir">
|
|||
|
|
<input @blur="inputBlurEv(4)" @focus="inputFocusEv(4)" @input="inputFocusEv(4)" class="fon24" type="text" v-model="forget_unitname" placeholder="请输入单位名称" placeholder-style="color:#c8c8c8;" />
|
|||
|
|
<!-- 清除按钮 -->
|
|||
|
|
<view class="clear-box" v-show="ifUnitname" @tap="clearInput(4)"><view class="clear-close"><span></span><span></span></view></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 立即修改 -->
|
|||
|
|
<view class="forget-btn" @tap="submitEv">立即修改</view>
|
|||
|
|
</view>
|
|||
|
|
</container-subgroup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
ifPhone:false,
|
|||
|
|
forget_phone:'',
|
|||
|
|
ifCode:false,
|
|||
|
|
forget_code:'',
|
|||
|
|
ifPassword:false,
|
|||
|
|
forget_password:'',
|
|||
|
|
ifqpassword:false,
|
|||
|
|
forget_qpassword:'',
|
|||
|
|
ifUnitname:false,
|
|||
|
|
forget_unitname:'',
|
|||
|
|
codeText:'获取验证码' ,// 获取验证码按钮文字
|
|||
|
|
flagCode:true ,// 允许点击获取验证码
|
|||
|
|
countDown:null//验证码倒计时事件
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 提交事件
|
|||
|
|
submitEv(){
|
|||
|
|
if(this.checkEmpty()){
|
|||
|
|
let params = {
|
|||
|
|
phone: this.forget_phone, // 手机号码
|
|||
|
|
sms_code:this.forget_code, // 短信验证码
|
|||
|
|
password: this.forget_password, // 密码
|
|||
|
|
confirm_password: this.forget_qpassword, // 确认密码
|
|||
|
|
affiliation: this.forget_unitname ,//单位名称
|
|||
|
|
}
|
|||
|
|
this.$requst.post('/universal/api.login/password_find',params).then(res=>{
|
|||
|
|
if(res.code==1) {
|
|||
|
|
this.$toolAll.tools.showToast('找回成功');
|
|||
|
|
setTimeout(()=>{uni.navigateBack({delta:1})},1000)
|
|||
|
|
} else {
|
|||
|
|
this.$toolAll.tools.showToast(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取验证码
|
|||
|
|
getCode(){
|
|||
|
|
if(this.$toolAll.tools.isPhone(this.forget_phone)) {
|
|||
|
|
this.$toolAll.tools.showToast('请输入正确的手机号');
|
|||
|
|
} else {
|
|||
|
|
if(this.flagCode) {
|
|||
|
|
this.flagCode = false;
|
|||
|
|
let count = 60;
|
|||
|
|
this.codeText = `${count}S重新获取`
|
|||
|
|
this.countDown = setInterval(()=>{
|
|||
|
|
count--;
|
|||
|
|
count < 10 ? this.codeText = `0${count}S重新获取` : this.codeText = `${count}S重新获取`;
|
|||
|
|
if(count==0) {
|
|||
|
|
this.codeText = `重新获取`;
|
|||
|
|
clearInterval(this.countDown);
|
|||
|
|
this.flagCode = true;
|
|||
|
|
}
|
|||
|
|
},1000)
|
|||
|
|
// 调用获取短信事件
|
|||
|
|
this.getMessage(this.forget_phone);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取短信事件
|
|||
|
|
getMessage(phone){
|
|||
|
|
this.$requst.post('/universal/api.login/send_sms',{phone}).then(res=>{
|
|||
|
|
this.$toolAll.tools.showToast(res.msg);
|
|||
|
|
if(res.code==0) {
|
|||
|
|
clearInterval(this.countDown);
|
|||
|
|
this.codeText = `获取验证码`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 检测是否某个输入框为空
|
|||
|
|
checkEmpty(){
|
|||
|
|
let ifEmpty = true;
|
|||
|
|
if(this.$toolAll.tools.isPhone(this.forget_phone)) {
|
|||
|
|
this.$toolAll.tools.showToast('手机号格式不正确');
|
|||
|
|
ifEmpty = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!this.forget_code) {
|
|||
|
|
this.$toolAll.tools.showToast('请输入验证码');
|
|||
|
|
ifEmpty = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!this.forget_password) {
|
|||
|
|
this.$toolAll.tools.showToast('密码不能为空');
|
|||
|
|
ifEmpty = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!this.forget_qpassword) {
|
|||
|
|
this.$toolAll.tools.showToast('确认密码不能为空');
|
|||
|
|
ifEmpty = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(this.forget_password != this.forget_qpassword) {
|
|||
|
|
this.$toolAll.tools.showToast('两次输入的密码必须相同');
|
|||
|
|
ifEmpty = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!this.forget_unitname) {
|
|||
|
|
this.$toolAll.tools.showToast('请输入单位名称');
|
|||
|
|
ifEmpty = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
return ifEmpty;
|
|||
|
|
},
|
|||
|
|
// 输入框获取焦点
|
|||
|
|
inputFocusEv(index){
|
|||
|
|
switch (index){
|
|||
|
|
case 0:
|
|||
|
|
this.forget_phone ? this.ifPhone = true : this.ifPhone = false;
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
this.forget_code ? this.ifCode = true : this.ifCode = false;
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
this.forget_password ? this.ifPassword = true : this.ifPassword = false;
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
this.forget_qpassword ? this.ifqpassword = true : this.ifqpassword = false;
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
this.forget_unitname ? this.ifUnitname = true : this.ifUnitname = false;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 输入框失去焦点
|
|||
|
|
inputBlurEv(index){
|
|||
|
|
switch (index){
|
|||
|
|
case 0:
|
|||
|
|
setTimeout(()=>{this.ifPhone = false;},100)
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
setTimeout(()=>{this.ifCode = false;},100)
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
setTimeout(()=>{this.ifPassword = false;},100)
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
setTimeout(()=>{this.ifqpassword = false;},100)
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
setTimeout(()=>{this.ifUnitname = false;},100)
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 清除手机号
|
|||
|
|
clearInput(index){
|
|||
|
|
switch (index){
|
|||
|
|
case 0:
|
|||
|
|
this.forget_phone = '';
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
this.forget_code = '';
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
this.forget_password = '';
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
this.forget_qpassword = '';
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
this.forget_unitname = '';
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page{background-color: #FFFFFF;}
|
|||
|
|
</style>
|