<!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>