login.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <meta name="format-detection"content="telephone=no">
  8. <title>login</title>
  9. <link rel="stylesheet" type="text/css" href="./css/api.css"/>
  10. <link rel="stylesheet" href="./css/toast.css">
  11. <link rel="stylesheet" type="text/css" href="./css/style.css"/>
  12. <style>
  13. body,html{
  14. background: #fff;
  15. }
  16. .ap_logo{
  17. width: 100%;
  18. padding: 60px 0 30px 0;
  19. text-align: center;
  20. }
  21. .ap_logo img{
  22. width: 159px;
  23. margin: auto;
  24. }
  25. .ap_title{
  26. font-size: 20px;
  27. color: #000;
  28. text-align: center;
  29. margin-bottom: 30px;
  30. }
  31. .ap_formInput{
  32. width: 100%;
  33. padding: 0 60px;
  34. position: relative;
  35. box-sizing: border-box;
  36. margin-bottom: 22px;
  37. }
  38. .ap_formInput input{
  39. height: 42px;
  40. line-height: 42px;
  41. width: 100%;
  42. background: #F0F0F0;
  43. border-radius: 50px;
  44. padding: 0 60px;
  45. box-sizing: border-box;
  46. outline: none;
  47. }
  48. .ap_formInput input::-webkit-input-placeholder{
  49. font-size: 15px;
  50. position: relative;
  51. top: 0;
  52. /*line-height: 50px;*/
  53. }
  54. .ap_formInput img{
  55. width: 25px;
  56. height: 25px;
  57. position: absolute;
  58. top:8px;
  59. right: 80px;
  60. }
  61. .ap_formInput label{
  62. font-size: 15px;
  63. color: #000;
  64. position: absolute;
  65. left: 80px;
  66. top: 10px;
  67. }
  68. .ap_forget{
  69. font-size: 15px;
  70. text-align: center;
  71. color:#4E5457;
  72. }
  73. .ap_login{
  74. text-align: center;
  75. }
  76. .ap_loginBtn{
  77. width: 195px;
  78. height: 50px;
  79. line-height: 50px;
  80. background: #D9D9D9;
  81. text-align: center;
  82. font-size: 20px;
  83. margin: auto;
  84. border-radius: 50px;
  85. color: #fff;
  86. margin-top: 26px;
  87. outline: none;
  88. }
  89. .api-toast{
  90. background: rgba(255,255,255,.1);
  91. }
  92. </style>
  93. </head>
  94. <body>
  95. <div id="wrap" class="flex-wrap flex-vertical">
  96. <div id="main" class="flex-con">
  97. <div class="ap_logo">
  98. <img src="./image/logo.png" alt="">
  99. </div>
  100. <div class="ap_form">
  101. <p class="ap_title"></p>
  102. <div class="ap_formMain">
  103. <div class="ap_formInput">
  104. <label>工号</label>
  105. <input type="number" placeholder="请输入工号" value="" id="jobnumber" oninput="on_input(this.value)">
  106. <img src="./image/Avatar.png" alt="">
  107. </div>
  108. <div class="ap_formInput">
  109. <label>密码</label>
  110. <input type="password" placeholder="请输入密码" id="password" oninput="on_input(this.value)">
  111. <img src="./image/Password.png" alt="">
  112. </div>
  113. </div>
  114. </div>
  115. <p class="ap_forget">忘记密码?请联系信息科管理员重置</p>
  116. <div class="ap_login">
  117. <button type="button" name="button" class="ap_loginBtn" id="confirm" onclick="openIndex()">登陆</button>
  118. </div>
  119. </div>
  120. </div>
  121. </body>
  122. </html>
  123. <script type="text/javascript" src="script/api.js"></script>
  124. <script src="script/config.js" charset="utf-8"></script>
  125. <script type="text/javascript">
  126. var login = false;
  127. apiready = function () {
  128. $api.html($api.dom('.ap_title'), mineName);
  129. $api.fixStatusBar( $api.dom('header') );
  130. var header = document.querySelector('#header');
  131. api.setStatusBarStyle({
  132. color: 'rgba(0,0,0,0)',
  133. style: 'light'
  134. });
  135. var userName = JSON.parse($api.getStorage('userInfo')).username;
  136. var password = JSON.parse($api.getStorage('userInfo')).password;
  137. var info = $api.getStorage('data'),
  138. user = JSON.parse(info).data.user;
  139. token = JSON.parse(info).data.access_token,
  140. status = api.pageParam.status;
  141. if (token) {
  142. if (password == "" || status == true) {
  143. var jobnumber = $api.val($api.byId('jobnumber'),userName),password = $api.val($api.byId('password'),"");
  144. }else {
  145. api.openWin({
  146. slidBackEnabled:'false',
  147. reload:true,
  148. name: 'index',
  149. url: 'index.html',
  150. });
  151. }
  152. };
  153. api.addEventListener({
  154. name: 'keyback'
  155. }, function(ret, err) {
  156. api.confirm({
  157. title: '提示',
  158. msg: '是否退出应用',
  159. buttons: ['确定', '取消']
  160. }, function(ret, err) {
  161. if (ret.buttonIndex == 1) {
  162. // 关闭当前的主Widget,就可以实现推出APP的效果
  163. api.closeWidget({
  164. silent: true //直接退出,无需提示
  165. });
  166. }
  167. });
  168. })
  169. };
  170. var toast = new auiToast();
  171. function openIndex () {
  172. var jobnumber = $api.val($api.byId('jobnumber')),password = $api.val($api.byId('password'));
  173. var userInfo = {username:jobnumber,password:password}
  174. if (jobnumber!= '' && password != '') {
  175. toast.loading({
  176. title: "加载中",
  177. duration: 2000
  178. });
  179. var values = {
  180. username: jobnumber,
  181. password: password,
  182. }
  183. $http.fnReuestData(UrlRouter.loginApi,'','post',values,function (ret,err) {
  184. if (ret) {
  185. if (ret.code === 0 ) {
  186. api.toast({
  187. msg: '登陆成功',
  188. duration: 2000,
  189. location: 'top'
  190. });
  191. $api.setStorage('userInfo',JSON.stringify(userInfo));
  192. $api.setStorage('data',JSON.stringify( ret ));
  193. api.openWin({
  194. slidBackEnabled:'false',
  195. reload:true,
  196. name: 'index',
  197. url: 'index.html',
  198. });
  199. toast.hide();
  200. } else if (ret.code === 1002) {
  201. toast.hide();
  202. api.toast({
  203. msg: '密码错误',
  204. duration: 2000,
  205. location: 'top'
  206. });
  207. } else if (ret.code === 1001) {
  208. toast.hide();
  209. api.toast({
  210. msg: '用户不存在',
  211. duration: 2000,
  212. location: 'top'
  213. });
  214. }
  215. } else {
  216. toast.hide();
  217. api.toast({
  218. msg: '登陆超时,请检查网络',
  219. duration: 2000,
  220. location: 'top'
  221. });
  222. }
  223. });
  224. }else {
  225. api.toast({
  226. msg : '账号或密码不能为空'
  227. });
  228. }
  229. }
  230. function on_input(value) {
  231. var jobnumber = $api.val($api.byId('jobnumber')),password = $api.val($api.byId('password'));
  232. var canLogin = false;
  233. if (jobnumber != '' && password != '') {
  234. var confirm = $api.byId("confirm");
  235. confirm.style.backgroundColor = "#108BE2";
  236. canLogin = true;
  237. } else {
  238. var confirm = $api.byId("confirm");
  239. confirm.style.backgroundColor = "#D9D9D9";
  240. canLogin = false;
  241. }
  242. }
  243. </script>