retrievePassword.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  7. <meta name='apple-touch-fullscreen' content='yes'>
  8. <meta name="apple-mobile-web-app-capable" content="yes"/>
  9. <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11. <meta name="renderer" content="webkit">
  12. <meta name="apple-mobile-web-app-capable" content="yes"/>
  13. <meta name="keywords" content="电子烟,关键字"/>
  14. <meta name="Description" content="网站描述"/>
  15. <title>Reset password</title>
  16. <link rel="stylesheet" href="/assets/index/css/common.css?t=10100">
  17. <link rel="stylesheet" href="/assets/index/css/retrievePassword.css">
  18. </head>
  19. <body>
  20. <main id="main">
  21. <div class="pageContainer">
  22. <a href="/index/index/index.html">
  23. <div class="pageLogo">
  24. <img src="/assets/index/asstes/icon/logo.png" alt="">
  25. </div>
  26. </a>
  27. <section class="pageSection">
  28. <!-- 登录模块 -->
  29. <div id="loginModel">
  30. <h1 class="modelTitle">Reset Password</h1>
  31. <div class="modelContainer">
  32. <!-- 电子邮箱 -->
  33. <div class="modelItem">
  34. <p class="miTitle">Email Address</p>
  35. <input class="input" type="text" name="" id="email">
  36. </div>
  37. <!-- 验证码 -->
  38. <div class="modelItem">
  39. <p class="miTitle">Code</p>
  40. <input class="input" type="text" name="" id="vcode">
  41. <div class="modelItemButon" id="getCode">Get code</div>
  42. </div>
  43. <!-- 新密码 -->
  44. <div class="modelItem">
  45. <p class="miTitle">New Password</p>
  46. <input class="input" type="password" name="" id="password">
  47. </div>
  48. <!-- 确认新密码 -->
  49. <div class="modelItem">
  50. <p class="miTitle">Confirm Password</p>
  51. <input class="input" type="password" name="" id="confirmPassword">
  52. </div>
  53. <!-- 找回密码 -->
  54. <div class="pageButton" id="retrieve">Reset Password</div>
  55. </div>
  56. </div>
  57. </section>
  58. </div>
  59. </main>
  60. <!-- 吐司提示 -->
  61. <div id="toastContainer"></div>
  62. </body>
  63. <script src="/assets/index/js/jquery-1.12.0.js"></script>
  64. <script src="/assets/index/js/flexible.js"></script>
  65. <script src="/assets/index/js/public.js"></script>
  66. <script src="/assets/index/js/login.js?y=10"></script>
  67. <script>
  68. $(document).ready(function () {
  69. //用户存储token名
  70. //const VAPES_TOKEN = "vapes_token"
  71. //触屏事件 || 点击事件
  72. const tap = "ontouchstart" in window ? "touchstart" : "click";
  73. //倒计时秒数
  74. let countdown = 60;
  75. //定时器
  76. let countdownTimer;
  77. /**
  78. * 吐司提示
  79. * @param message 消息
  80. * @returns
  81. */
  82. function showToast(message) {
  83. var toastElement = $('#toastContainer');
  84. toastElement.text(message);
  85. toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
  86. }
  87. //获取验证码
  88. $("#getCode").on(tap, function (event) {
  89. event.preventDefault();
  90. // 如果倒计时已经在进行中,则忽略点击事件
  91. console.log(countdownTimer)
  92. if (countdownTimer) {
  93. return;
  94. }
  95. const emailEle = $("#email");
  96. if (!emailEle) {
  97. return
  98. }
  99. //邮箱
  100. const email = emailEle.val()
  101. if (!email || email == "") {
  102. emailEle.focus();
  103. return
  104. }
  105. //console.log("邮箱", email)
  106. // 点击后立即执行一次倒计时
  107. countdown = 60
  108. $(this).text(countdown + 's');
  109. countdown--;
  110. // 开始倒计时
  111. countdownTimer = setInterval(() => {
  112. if (countdown <= 0) {
  113. clearInterval(countdownTimer);
  114. countdownTimer = null;
  115. // 倒计时结束后恢复按钮状态
  116. $(this).text('Get code');
  117. } else {
  118. $(this).text(countdown + 's');
  119. countdown--;
  120. }
  121. }, 1000);
  122. const dp = {
  123. form: {
  124. mobile: email,
  125. }
  126. };
  127. $.ajax({
  128. url: "/index/captcha/sendEmailCaptcha",
  129. headers: {platform: 'H5'},
  130. dataType: 'json',
  131. data: JSON.stringify(dp),
  132. type: "POST",
  133. contentType: 'application/json',
  134. success: function (obj) {
  135. console.log(obj);
  136. //return false;
  137. //注册成功后进入
  138. if (obj.status === 200 || obj.status === '200') {
  139. showToast('The code has been sent.')
  140. } else {
  141. showToast('Please try again later.')
  142. }
  143. }
  144. })
  145. });
  146. //找回密码
  147. $("#retrieve").on(tap, function (event) {
  148. event.preventDefault();
  149. const emailEle = $("#email");
  150. const vcodeEle = $("#vcode");
  151. const passwordEle = $("#password");
  152. const confirmPasswordEle = $("#confirmPassword");
  153. //输入框不存在
  154. if (!emailEle || !vcodeEle || !passwordEle || !confirmPasswordEle) {
  155. return
  156. }
  157. //邮箱
  158. const email = emailEle.val()
  159. //验证码
  160. const vcode = vcodeEle.val()
  161. //密码
  162. const password = passwordEle.val()
  163. //确认密码
  164. const confirmPassword = confirmPasswordEle.val()
  165. if (!email || email == "") {
  166. emailEle.focus();
  167. return
  168. }
  169. if (!vcode || vcode == "") {
  170. vcodeEle.focus();
  171. return
  172. }
  173. if (!password || password == "") {
  174. passwordEle.focus();
  175. return
  176. }
  177. if (!confirmPassword || confirmPassword == "") {
  178. confirmPasswordEle.focus();
  179. return
  180. }
  181. //console.log("邮箱", email)
  182. //console.log("验证码", vcode)
  183. //console.log("密码", password)
  184. //console.log("确认密码", confirmPassword)
  185. if (password !== confirmPassword) {
  186. showToast("Make sure both passwords are the same.")
  187. return
  188. }
  189. var dp = {
  190. form: {
  191. mobile: email,
  192. smsCode: vcode,
  193. password: password,
  194. password1: confirmPassword,
  195. isParty: false,
  196. partyData: []
  197. }
  198. }
  199. $.ajax({
  200. url: "/index/passport/retrievePassword",
  201. headers: {platform: 'H5'},
  202. dataType: 'json',
  203. data: JSON.stringify(dp),
  204. type: "POST",
  205. contentType: 'application/json',
  206. success: function (obj) {
  207. //console.log(obj);
  208. //return false;
  209. //注册成功后进入
  210. if (obj.status === 200 || obj.status === '200') {
  211. showToast(obj.message)
  212. setTimeout(function () {
  213. window.location.replace('/index/passport/logIn.html');
  214. }, 3000)
  215. //localStorage.setItem(VAPES_TOKEN, obj.data.token)
  216. } else {
  217. showToast(obj.message)
  218. }
  219. }
  220. })
  221. });
  222. })
  223. </script>
  224. </html>