user-forgetpwd.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html class="h100p">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>忘记密码-创业帮</title>
  6. <meta name="keywords" content="忘记密码-创业帮">
  7. <meta name="description" content="忘记密码-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="忘记密码-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/main.css">
  16. </head>
  17. <body class="h100p nopb">
  18. <div id="app" v-cloak>
  19. <div class="forgetpassword">
  20. <van-nav-bar title="忘记/修改密码" v-if="toptitleisshow" @click-left="goback" left-arrow>
  21. <template #left> <img src="./static/images/left.png" alt=""></template>
  22. </van-nav-bar>
  23. <div class="forgettitle c333 tc"> </div>
  24. <div class="login-box abs tc">
  25. <div class="f17 c333">为了您的账号安全,请验证身份</div>
  26. <van-field class="mb12" v-model="reg.Mobile" @input="checkValue" type="number" placeholder="请输入手机号"></van-field>
  27. <van-field class="user-phone mb12" center clearable placeholder="短信验证码" v-model="reg.MobileCode" @input="checkValue">
  28. <template #button>
  29. <van-button class="fl" plain color="#FD824D" @click="getsmscode" v-if="codeisclick">获取验证码</van-button>
  30. <van-button class="fl" plain color="#FD824D" disabled v-else>{{countdown}}s</van-button>
  31. </template>
  32. </van-field>
  33. <van-field class="mb12" v-model="reg.LoginPwd" @input="checkValue" :type="isShowPwd ? 'text' : 'password'" placeholder="填写新密码">
  34. <template #button>
  35. <van-button class="fr" @click="showPwd()"><img class="fr" :src="isShowPwd ? './static/images/show-icon@3x.png' : './static/images/noshow-icon@3x.png'" alt=""></van-button>
  36. </template>
  37. </van-field>
  38. <van-field v-model="surepassword" @input="checkValue" :type="isShowPwd ? 'text' : 'password'" placeholder="确认新密码"></van-field>
  39. <div class="pt16" v-cloak>
  40. <van-button type="primary" block round :disabled="canRegist ? false : true" color="#FD824D" @click="changepwd">确认</van-button>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <script src="./static/js/klm-vv.min.js"></script>
  46. <script src="./static/js/klm-axios-config.js"></script>
  47. <script>
  48. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  49. // 可以通过下面的方式手动注册
  50. Vue.use(vant.Lazyload);
  51. // 在 #app 标签下渲染一个按钮组件
  52. let app = new Vue({
  53. el: '#app',
  54. data() {
  55. return {
  56. toptitleisshow:false,
  57. active: 0,
  58. surepassword: '',
  59. isShowPwd: false,
  60. reg:{
  61. Mobile: '',
  62. MobileCode: '',
  63. LoginPwd:''
  64. },
  65. agreement: false,
  66. canRegist: false,
  67. codeisclick:true,
  68. countdown:60
  69. };
  70. },
  71. created(){
  72. this.toptitleisshow = toptitleisshow;
  73. },
  74. methods: {
  75. //- 显示密码
  76. showPwd(){
  77. this.isShowPwd = !this.isShowPwd;
  78. },
  79. //- 确定按钮是否能够使用
  80. checkValue(){
  81. this.canRegist = (this.reg.Mobile !== '' && this.reg.MobileCode !== '' && this.reg.LoginPwd !== '' && this.surepassword !== '') ? true : false;
  82. },
  83. //- 获取验证码
  84. async getsmscode(){
  85. if(verification(this.reg.Mobile)) return;
  86. this.codeisclick = false;
  87. setTimeout(()=>{
  88. this.codeisclick = true;
  89. },60000);
  90. const timer = setInterval(()=>{
  91. this.countdown--;
  92. if(this.countdown === 0) {
  93. this.countdown = 60;
  94. clearInterval(timer)
  95. };
  96. },1000);
  97. const res = await postRequest('/api/v1/mobilecodecheck/sendsms',JSON.stringify({Mobile:this.reg.Mobile}));
  98. if(res.status !== '1') tips(res.info);
  99. tips('验证码发送成功,请注意查收!');
  100. },
  101. //- 修改密码
  102. async changepwd(){
  103. if(verificationpassword(this.reg.LoginPwd)) return;
  104. if(verificationmobilecode(this.reg.MobileCode)) return;
  105. if(verification(this.reg.Mobile)) return;
  106. if(this.reg.LoginPwd !== this.surepassword){
  107. return tips('两次密码不一致,请重新输入!');
  108. };
  109. const res = await postRequest('/api/v1/merchantinfo/forgetpwd?t='+Math.random(6),JSON.stringify(this.reg));
  110. if(res.status !== '1') return tips(res.info);
  111. tips('修改密码成功,请返回登录');
  112. setTimeout(()=>{
  113. this.goback();
  114. },2000);
  115. },
  116. goback(){
  117. PublicLib.GoBack({Level:1});
  118. }
  119. }
  120. });
  121. </script>
  122. </body>
  123. </html>