<!DOCTYPE html>
<html class="h100p">
<head>
<meta charset="utf-8">
<title>忘记密码-创业帮</title>
<meta name="keywords" content="忘记密码-创业帮">
<meta name="description" content="忘记密码-创业帮">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="apple-mobile-web-app-title" content="忘记密码-创业帮">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="./static/css/main.css">
</head>
<body class="bgc-back nopb pt0" style="padding-top:0;">
<div id="app" v-cloak>
<van-nav-bar class="bgc-back user_rank_explan_title" left-arrow @click-left="goback" v-if="toptitleisshow">
<template #left> <img src="./static/images/left.png" alt=""></template>
</van-nav-bar>
<div class="regist-box-input pt8 pb32 pl32 pr32">
<div class="f24 c333 b pb32">忘记密码</div>
<div class="f12 c666 mb6">手机号</div>
<van-field class="mb12" v-model="reg.Mobile" @input="checkValue" placeholder="请输入注册手机号"></van-field>
<div class="f12 c666 mb6">验证码</div>
<van-field class="user-phone mb12" center clearable type="number" inputmode="numeric" autocomplete="one-time-code" placeholder="请输入验证码" v-model="reg.MobileCode" @input="checkValue">
<template #button>
<van-button class="fl" plain color="#ff502a" @click="getsmscode" v-if="codeisclick">获取验证码</van-button>
<van-button class="fl" plain color="#ff502a" disabled v-else>{{countdown}}s</van-button>
</template>
</van-field>
<div class="f12 c666 mb6">登录密码</div>
<van-field class="mb12" v-model="reg.LoginPwd" @input="checkValue" :type="isShowPwd ? 'text' : 'password'" placeholder="请输入新的登录密码">
<template #button>
<van-button class="fr bgcfbfbfb" @click="showPwd()"><img class="fr" :src="isShowPwd ? './static/images/show-icon@3x.png' : './static/images/noshow-icon@3x.png'" alt=""></van-button>
</template>
</van-field>
<van-field v-model="surepassword" @input="checkValue" :type="isShowPwd ? 'text' : 'password'" placeholder="再次输入以确认"></van-field>
<div class="pt16 bc333" v-cloak>
<van-button type="primary" block color="#FFD500" :disabled="canRegist ? false : true" @click="changepwd">确认</van-button>
</div>
</div>
</div>
<script src="./static/js/klm-vv.min.js"></script>
<script src="./static/js/appfunc.min.js"></script>
<script src="./static/js/klm-axios-config.js"></script>
<script src="./static/js/publicfn.js"></script>
<script>
if ('OTPCredential' in window) {
// DOMContentLoaded 事件会等待 DOM树准备好
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
const ac = new AbortController();
// 用户可以自己输入验证码并且提交，使用 AbortController 终止 Web OTP API 的自动填充
// AbortController 还可以终止 fetch 的请求
// 监听终止事件 ac.signal.addEventListener('abort', function(){});
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
ac.abort(); // 终止 Web OTP API 的自动填充
});
}
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
// 在 #app 标签下渲染一个按钮组件
let app = new Vue({
el: '#app',
data() {
return {
toptitleisshow:false,
active: 0,
surepassword: '',
isShowPwd: false,
reg:{
Mobile: '',
RealName:'',
MobileCode: '',
LoginPwd:''
},
agreement: false,
canRegist: false,
codeisclick:true,
countdown:60
};
},
created(){
this.toptitleisshow = toptitleisshow;
},
methods: {
//- 显示密码
showPwd(){
this.isShowPwd = !this.isShowPwd;
},
//- 确定按钮是否能够使用
checkValue(){
this.canRegist = (this.reg.Mobile !== '' && this.reg.MobileCode !== '' && this.reg.LoginPwd !== '' && this.surepassword !== '') ? true : false;
},
//- 获取验证码
async getsmscode(){
if(verification(this.reg.Mobile)) return;
this.codeisclick = false;
setTimeout(()=>{
this.codeisclick = true;
},60000);
const timer = setInterval(()=>{
this.countdown--;
if(this.countdown === 0) {
this.countdown = 60;
clearInterval(timer);
};
},1000);
const res = await postRequest('api/v1/mobilecodecheck/sendsms?t='+Math.random(6),JSON.stringify({Mobile:this.reg.Mobile}));
if(res.status !== '1') tips(res.info);
tips('验证码发送成功，请注意查收！');
},
changepwd:undebounce(async function(){
if(verificationpassword(this.reg.LoginPwd)) return;
if(verificationmobilecode(this.reg.MobileCode)) return;
if(verification(this.reg.Mobile)) return;
if(this.reg.LoginPwd !== this.surepassword){
return tips('两次密码不一致，请重新输入!');
};
const res = await postRequest('api/v1/users/forgetpwd?t='+Math.random(6),JSON.stringify(this.reg));
if(res.status !== '1') return tips(res.info);
tips('修改密码成功，请返回登录');
setTimeout(()=>{
this.goback();
},2000);
},500),
goback(){
PublicLib.GoBack({Level:1});
}
}
});
</script>
</body>
</html>