logIn.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <meta name='apple-touch-fullscreen' content='yes'>
  9. <meta name="apple-mobile-web-app-capable" content="yes"/>
  10. <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12. <meta name="renderer" content="webkit">
  13. <meta name="apple-mobile-web-app-capable" content="yes"/>
  14. <meta name="keywords" content="电子烟,关键字"/>
  15. <meta name="Description" content="网站描述"/>
  16. <title>登录|注册</title>
  17. <link rel="stylesheet" href="/assets/api/css/common.css?t=10100">
  18. <link rel="stylesheet" href="/assets/api/css/login.css?t=101">
  19. </head>
  20. <body>
  21. <main id="main">
  22. <div class="pageContainer">
  23. <div class="pageLogo">
  24. <img src="/assets/api/asstes/icon/logo.png" alt="">
  25. </div>
  26. <section class="pageSection">
  27. <!-- 登录模块 -->
  28. <div id="loginModel">
  29. <h1 class="modelTitle">Log in</h1>
  30. <div class="modelContainer">
  31. <!-- 电子邮箱 -->
  32. <div class="modelItem">
  33. <p class="miTitle">Email Address</p>
  34. <input class="input" type="text" name="" id="userName">
  35. </div>
  36. <!-- 密码 -->
  37. <div class="modelItem">
  38. <p class="miTitle">Password</p>
  39. <input class="input" type="password" name="" id="password">
  40. </div>
  41. <p class="forgotPassword">Forget Your Password?</p>
  42. <!-- 登录 -->
  43. <div class="pageButton" id="loginButton">Login</div>
  44. <!-- 没有账户 -->
  45. <div class="accountTips">
  46. <p>No account?</p>
  47. <span id="toRegister">Regist</span>
  48. </div>
  49. </div>
  50. </div>
  51. <!-- 注册模块 -->
  52. <div id="registerModel">
  53. <!-- 电子邮箱输入模块 -->
  54. <div id="emailInputModel">
  55. <h1 class="modelTitle">Register</h1>
  56. <div class="modelContainer">
  57. <!-- 电子邮箱地址 -->
  58. <div class="modelItem">
  59. <p class="miTitle">Email Address</p>
  60. <input class="input" type="text" name="" id="email">
  61. </div>
  62. <div class="pageButton" id="continueButton">Continue</div>
  63. <div class="accountTips">
  64. <p>Have an Account?</p>
  65. <span id="toLogin">Login</span>
  66. </div>
  67. </div>
  68. </div>
  69. <!-- 电子邮箱验证模块 -->
  70. <div id="emailVerifyModel">
  71. <h1 class="modelTitle">Verify Email Address</h1>
  72. <p class="modelTips">Captcha has been sent<span id="emailAddress"></span></p>
  73. <div class="modelContainer">
  74. <!-- 电子邮箱验证码 -->
  75. <div class="modelItem">
  76. <p class="miTitle">Captcha</p>
  77. <input class="input" type="text" name="" id="vcode">
  78. </div>
  79. <!-- 验证 -->
  80. <div class="pageButton" id="verifyButton">Verify</div>
  81. </div>
  82. </div>
  83. <!-- 设置密码 -->
  84. <div id="setPasswordModel">
  85. <h1 class="modelTitle">Password</h1>
  86. <div class="modelContainer">
  87. <!-- 设置密码 -->
  88. <div class="modelItem">
  89. <p class="miTitle">Password</p>
  90. <input class="input" type="password" name="" id="regPassword">
  91. </div>
  92. <!-- 注册 -->
  93. <div class="pageButton" id="registerButton">Regist</div>
  94. </div>
  95. </div>
  96. </div>
  97. </section>
  98. </div>
  99. </main>
  100. <!-- 年龄提示层 -->
  101. <section class="maskContainer">
  102. <div class="ageReminderBox">
  103. <img class="ageReminderBack"
  104. src="https://img1.baidu.com/it/u=3449617615,1431463931&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709485200&t=489bafcac7c5bebed91cf50c14356269"
  105. alt="">
  106. <div class="ageReminderInfo">
  107. <h3>ARE YOU OF LEAAL SMOKIND AGE?</h3>
  108. <div class="ageReminderButBox">
  109. <div class="ageRBut ageReminderNo"><span>NO</span></div>
  110. <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
  111. </div>
  112. </div>
  113. </div>
  114. </section>
  115. <!-- 吐司提示 -->
  116. <div id="toastContainer"></div>
  117. </body>
  118. <script src="/assets/api/js/jquery-1.12.0.js"></script>
  119. <script src="/assets/api/js/flexible.js"></script>
  120. <script src="/assets/api/js/public.js"></script>
  121. <script src="/assets/api/js/login.js?y=10"></script>
  122. <script>
  123. $(document).ready(function () {
  124. //用户存储token名
  125. const VAPES_TOKEN = "vapes_token"
  126. //触屏事件 || 点击事件
  127. const tap = "ontouchstart" in window ? "touchstart" : "click";
  128. /**
  129. * 吐司提示
  130. * @param message 消息
  131. * @returns
  132. */
  133. function showToast(message) {
  134. var toastElement = $('#toastContainer');
  135. toastElement.text(message);
  136. toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
  137. }
  138. //去登录
  139. $("#toLogin").on(tap, function () {
  140. $("#registerModel").hide(0)
  141. $("#loginModel").show(0)
  142. });
  143. //去注册
  144. $("#toRegister").on(tap, function () {
  145. $("#loginModel").hide(0)
  146. $("#registerModel").show(0)
  147. });
  148. //登录
  149. $("#loginButton").on(tap, function (event) {
  150. event.preventDefault();
  151. const userNameEle = $("#userName");
  152. const passwordEle = $("#password");
  153. //输入框不存在
  154. if (!userNameEle || !passwordEle) {
  155. return
  156. }
  157. //用户名
  158. const userName = userNameEle.val()
  159. //密码
  160. const password = passwordEle.val()
  161. if (!userName || userName == "") {
  162. userNameEle.focus();
  163. return
  164. }
  165. if (!password || password == "") {
  166. passwordEle.focus();
  167. return
  168. }
  169. console.log("用户名", userName)
  170. console.log("密码", password)
  171. var dp = {
  172. form: {
  173. mobile: userName,
  174. smsCode: '888888',
  175. password: password,
  176. isParty: false,
  177. partyData: []
  178. }
  179. }
  180. $.ajax({
  181. url: "/api/passport/login",
  182. headers: {platform: 'H5'},
  183. dataType: 'json',
  184. data: JSON.stringify(dp),
  185. type: "POST",
  186. contentType: 'application/json',
  187. success: function (obj) {
  188. console.log(obj);
  189. //return false;
  190. //注册成功后进入
  191. if (obj.status === 200 || obj.status === '200') {
  192. console.log("success",obj.data.token)
  193. localStorage.setItem(VAPES_TOKEN, obj.data.token)
  194. jumpPage()
  195. }
  196. }
  197. })
  198. });
  199. //继续(注册)
  200. $("#continueButton").on(tap, function (event) {
  201. event.preventDefault();
  202. console.log(2)
  203. const emailEle = $("#email");
  204. //输入框不存在
  205. if (!emailEle) {
  206. return
  207. }
  208. //电子邮箱地址
  209. const email = emailEle.val()
  210. if (!email || email == "") {
  211. emailEle.focus();
  212. return
  213. }
  214. //验证成功后进入
  215. if (true) {
  216. const parentElement = $(this).parent();
  217. parentElement.hide(0)
  218. parentElement.siblings().hide(0)
  219. $("#emailVerifyModel").show(0)
  220. $("#emailAddress").text(email)
  221. }
  222. });
  223. //验证电子邮箱(注册)
  224. $("#verifyButton").on(tap, function (event) {
  225. event.preventDefault();
  226. const vcodeEle = $("#vcode");
  227. //输入框不存在
  228. if (!vcodeEle) {
  229. return
  230. }
  231. //验证码
  232. const vcode = vcodeEle.val()
  233. if (!vcode || vcode == "") {
  234. vcodeEle.focus();
  235. return
  236. }
  237. console.log("验证码", vcode)
  238. //验证成功后进入
  239. if (true) {
  240. const parentElement = $(this).parent();
  241. parentElement.hide(0)
  242. parentElement.siblings().hide(0)
  243. $("#setPasswordModel").show(0)
  244. }
  245. });
  246. //确认注册(注册)
  247. $("#registerButton").on(tap, function (event) {
  248. event.preventDefault();
  249. const emailEle = $("#email");
  250. const vcodeEle = $("#vcode");
  251. const regPasswordEle = $("#regPassword");
  252. const email = emailEle.val()
  253. const vcode = vcodeEle.val()
  254. const password = regPasswordEle.val()
  255. if (!password || password == "") {
  256. regPasswordEle.focus();
  257. return
  258. }
  259. var dp = {
  260. form: {
  261. mobile: email,
  262. smsCode: vcode,
  263. password: password,
  264. isParty: false,
  265. partyData: []
  266. }
  267. }
  268. $.ajax({
  269. url: "/api/passport/login",
  270. headers: {platform: 'H5'},
  271. dataType: 'json',
  272. data: JSON.stringify(dp),
  273. type: "POST",
  274. contentType: 'application/json',
  275. success: function (obj) {
  276. console.log(obj);
  277. //return false;
  278. //注册成功后进入
  279. if (obj.status === 200 || obj.status === '200') {
  280. console.log("注册成功",obj.data.token)
  281. localStorage.setItem(VAPES_TOKEN, obj.data.token)
  282. jumpPage()
  283. }
  284. }
  285. })
  286. })
  287. function jumpPage() {
  288. const url = window.location.href;
  289. // 判断是否存在 return 参数 && 可返回上一页
  290. if (url.indexOf('return') != -1 && window.history.length > 1) {
  291. // 返回上一页
  292. window.history.back();
  293. } else {
  294. //跳转首页
  295. window.location.replace('/api/index/index.html');
  296. }
  297. }
  298. })
  299. </script>
  300. </html>