login.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. <!DOCTYPE html>
  2. <html class="ui-page-login">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="css/mui.min.css" rel="stylesheet" />
  8. <link href="css/style.css" rel="stylesheet" />
  9. <style>
  10. .area {
  11. margin: 20px auto 0px auto;
  12. }
  13. .mui-input-group {
  14. margin-top: 10px;
  15. }
  16. .mui-input-group:first-child {
  17. margin-top: 20px;
  18. }
  19. .mui-input-group label {
  20. width: 22%;
  21. }
  22. .mui-input-row label~input,
  23. .mui-input-row label~select,
  24. .mui-input-row label~textarea {
  25. width: 78%;
  26. }
  27. .mui-checkbox input[type=checkbox],
  28. .mui-radio input[type=radio] {
  29. top: 6px;
  30. }
  31. .mui-content-padded {
  32. margin-top: 25px;
  33. }
  34. .mui-btn {
  35. padding: 10px;
  36. }
  37. .link-area {
  38. display: block;
  39. margin-top: 25px;
  40. text-align: center;
  41. }
  42. .spliter {
  43. color: #bbb;
  44. padding: 0px 8px;
  45. }
  46. .oauth-area {
  47. position: absolute;
  48. bottom: 20px;
  49. left: 0px;
  50. text-align: center;
  51. width: 100%;
  52. padding: 0px;
  53. margin: 0px;
  54. }
  55. .oauth-area .oauth-btn {
  56. display: inline-block;
  57. width: 50px;
  58. height: 50px;
  59. background-size: 30px 30px;
  60. background-position: center center;
  61. background-repeat: no-repeat;
  62. margin: 0px 20px;
  63. /*-webkit-filter: grayscale(100%); */
  64. border: solid 1px #ddd;
  65. border-radius: 25px;
  66. }
  67. .oauth-area .oauth-btn:active {
  68. border: solid 1px #aaa;
  69. }
  70. .oauth-area .oauth-btn.disabled {
  71. background-color: #ddd;
  72. }
  73. .redFont {
  74. color: red;
  75. }
  76. .blue {
  77. color: #007aff;
  78. }
  79. </style>
  80. </head>
  81. <body>
  82. <header class="mui-bar mui-bar-nav">
  83. <h1 class="mui-title">登录</h1>
  84. </header>
  85. <div class="mui-content">
  86. <div class="" style="width:100%;height:auto;text-align: center;margin-top: 20px;">
  87. <img src="images/ico.png" />
  88. </div>
  89. <form id='login-form' class="mui-input-group">
  90. <div class="mui-input-row">
  91. <label>仓库</label>
  92. <input id='warehouseCode' type="text" class="mui-input-clear mui-input" placeholder="请输入仓库代码">
  93. </div>
  94. <div class="mui-input-row">
  95. <label>用户</label>
  96. <input id='userCode' type="text" class="mui-input-clear mui-input" placeholder="请输入用户代码">
  97. </div>
  98. <div class="mui-input-row">
  99. <label>密码</label>
  100. <input id='password' type="text" class="mui-input-clear mui-input" placeholder="请输入用户密码">
  101. </div>
  102. </form>
  103. <form class="mui-input-group">
  104. <ul class="mui-table-view mui-table-view-chevron">
  105. <li class="mui-table-view-cell">
  106. 记住用户
  107. <div id="autoLogin" class="mui-switch">
  108. <div class="mui-switch-handle"></div>
  109. </div>
  110. </li>
  111. </ul>
  112. </form>
  113. <div class="mui-content-padded">
  114. <button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
  115. <div class="link-area"><a id='reg'>设置服务器</a> <span class="spliter">
  116. </div>
  117. </div>
  118. <div class="mui-content-padded oauth-area">
  119. </div>
  120. </div>
  121. <script src="js/mui.min.js"></script>
  122. <script src="js/mui.enterfocus.js"></script>
  123. <script src="js/app.js"></script>
  124. <!--
  125. <script src="js/update.js"></script>
  126. -->
  127. <script src="js/wms/upversion.js"></script>
  128. <script>
  129. var timer = setInterval(function(){
  130. checkServerUrl();
  131. },500);
  132. //初始化
  133. var checkServerUrl = function() {
  134. //是否已经设置服务器地址
  135. var serverUrl = localStorage.getItem('$serverUrl');
  136. if(serverUrl == null || serverUrl == ''){
  137. //$("#reg").addClass('redFont');
  138. document.getElementById('reg').classList.add('redFont');
  139. document.getElementById('reg').classList.remove('blue');
  140. } else {
  141. //$("#reg").removeClass('redFont');
  142. document.getElementById('reg').classList.remove('redFont');
  143. document.getElementById('reg').classList.add('blue');
  144. clearInterval(timer);
  145. }
  146. }
  147. </script>
  148. <script>
  149. (function($, doc) {
  150. $.init({
  151. statusBarBackground: '#f7f7f7'
  152. });
  153. $.plusReady(function() {
  154. plus.screen.lockOrientation("portrait-primary");
  155. document.addEventListener("netchange", checkNetwork, false);
  156. function checkNetwork() {
  157. if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
  158. mui.toast("网络异常,请检查网络设置!");
  159. }
  160. }
  161. var settings = app.getSettings();
  162. var state = app.getState();
  163. var mainPage = plus.webview.getWebviewById("main");
  164. var main_loaded_flag = false;
  165. if(!mainPage){
  166. mainPage = $.preload({
  167. "id": 'main',
  168. "url": 'main.html'
  169. });
  170. } else {
  171. main_loaded_flag = true;
  172. }
  173. mainPage.addEventListener("loaded",function () {
  174. main_loaded_flag = true;
  175. });
  176. var toMain = function() {
  177. //使用定时器的原因:
  178. //可能执行太快,main页面loaded事件尚未触发就执行自定义事件,此时必然会失败
  179. var id = setInterval(function () {
  180. if(main_loaded_flag){
  181. clearInterval(id);
  182. $.fire(mainPage, 'show', null);
  183. mainPage.show("pop-in");
  184. }
  185. },20);
  186. };
  187. app.setState(null);
  188. if (settings.autoLogin) {
  189. //记住用户
  190. var warehouseCode = localStorage.getItem('$warehouseCode');
  191. var userCode = localStorage.getItem('$userCode');
  192. var password = localStorage.getItem('$password');
  193. if(warehouseCode!=null){
  194. document.getElementById('warehouseCode').value = warehouseCode;
  195. //$("#warehouseCode").val(warehouseCode);
  196. }
  197. if(userCode!=null){
  198. document.getElementById('userCode').value = userCode;
  199. //$("#userCode").val(userCode);
  200. }
  201. if(password!=null){
  202. document.getElementById('password').value = password;
  203. //$("#password").val(password);
  204. }
  205. }
  206. // close splash
  207. setTimeout(function() {
  208. //关闭 splash
  209. plus.navigator.closeSplashscreen();
  210. }, 600);
  211. //检查 "登录状态/锁屏状态" 结束
  212. var loginButton = doc.getElementById('login');
  213. var warehouseCodeBox = doc.getElementById('warehouseCode');
  214. var userCodeBox = doc.getElementById('userCode');
  215. var passwordBox = doc.getElementById('password');
  216. var autoLoginButton = doc.getElementById("autoLogin");
  217. var regButton = doc.getElementById('reg');
  218. //登录
  219. loginButton.addEventListener('tap', function(event) {
  220. var loginInfo = {
  221. warehouseCode: warehouseCodeBox.value,
  222. userCode: userCodeBox.value,
  223. password: passwordBox.value
  224. };
  225. app.login(loginInfo, function(err) {
  226. if (err) {
  227. plus.nativeUI.toast(err);
  228. return;
  229. }
  230. toMain();
  231. });
  232. });
  233. $.enterfocus('#login-form input', function() {
  234. $.trigger(loginButton, 'tap');
  235. });
  236. //记住用户
  237. autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active');
  238. autoLoginButton.addEventListener('toggle', function(event) {
  239. setTimeout(function() {
  240. var isActive = event.detail.isActive;
  241. settings.autoLogin = isActive;
  242. app.setSettings(settings);
  243. }, 50);
  244. }, false);
  245. //设置服务器
  246. regButton.addEventListener('tap', function(event) {
  247. $.openWindow({
  248. url: 'reg.html',
  249. id: 'reg',
  250. preload: true,
  251. show: {
  252. aniShow: 'pop-in'
  253. },
  254. styles: {
  255. popGesture: 'hide'
  256. },
  257. waiting: {
  258. autoShow: false
  259. }
  260. });
  261. }, false);
  262. //
  263. window.addEventListener('resize', function() {
  264. oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
  265. }, false);
  266. //
  267. var backButtonPress = 0;
  268. $.back = function(event) {
  269. backButtonPress++;
  270. if (backButtonPress > 1) {
  271. plus.runtime.quit();
  272. } else {
  273. plus.nativeUI.toast('再按一次退出应用');
  274. }
  275. setTimeout(function() {
  276. backButtonPress = 0;
  277. }, 1000);
  278. return false;
  279. };
  280. });
  281. }(mui, document));
  282. </script>
  283. </body>
  284. </html>