handPwd.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html>
  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. <style>
  9. html,
  10. body {
  11. background-color: #efeff4;
  12. overflow: hidden;
  13. }
  14. .mui-locker {
  15. margin: 35px auto;
  16. }
  17. #forget {
  18. display: block;
  19. margin-top: 10px;
  20. text-align: center;
  21. }
  22. a{
  23. color:#08b9a2 ;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <header class="mui-bar mui-bar-nav">
  29. <h1 class="mui-title">解锁</h1>
  30. </header>
  31. <div class="mui-content">
  32. <div class="mui-content-padded" style="margin: 10px 0px;">
  33. <div class="mui-locker" data-locker-options='{"ringColor":"#ddd","fillColor":"#fff","touchringColor":"#08b9a2","touchfillColor":"#fff","pointColor":"#08b9a2","lineColor":"#08b9a2","ringWidth":"2","lindeWidth":"2"}' data-locker-width='320' data-locker-height='320'>
  34. </div>
  35. </div>
  36. <a id='forget'>忘记手势密码?</a>
  37. </div>
  38. <script src="../../js/mui.min.js"></script>
  39. <script src="../../js/mui.locker.js"></script>
  40. <script src="../../js/app.js"></script>
  41. <script>
  42. (function($, doc) {
  43. $.init();
  44. $.plusReady(function() {
  45. var mainPage = $.preload({
  46. "id": 'main',
  47. "url": '../../tab-webview-main.html'
  48. });
  49. var toMain = function() {
  50. $.fire(mainPage, 'show', null);
  51. setTimeout(function() {
  52. $.openWindow({
  53. id: 'main',
  54. show: {
  55. aniShow: 'pop-in'
  56. },
  57. waiting: {
  58. autoShow: false
  59. }
  60. });
  61. }, 0);
  62. };
  63. var settings = app.getSettings();
  64. var forgetButton = doc.getElementById("forget");
  65. var locker = doc.querySelector('.mui-locker');
  66. var clearStateAndToLogin = function() {
  67. settings.gestures = '';
  68. settings.autoLogin = false;
  69. app.setSettings(settings);
  70. var state = app.getState();
  71. state.token = '';
  72. app.setState(state);
  73. $.openWindow({
  74. url: '../../login.html',
  75. id: 'login',
  76. show: {
  77. aniShow: 'pop-in'
  78. },
  79. waiting: {
  80. autoShow: false
  81. }
  82. });
  83. };
  84. forgetButton.addEventListener('tap', function(event) {
  85. clearStateAndToLogin();
  86. });
  87. var tryNumber = 5;
  88. locker.addEventListener('done', function(event) {
  89. var rs = event.detail;
  90. if (settings.gestures == rs.points.join('')) {
  91. toMain()
  92. rs.sender.clear();
  93. } else {
  94. tryNumber--;
  95. rs.sender.clear();
  96. if (tryNumber > 0) {
  97. plus.nativeUI.toast('解锁手势错误,还能尝试 ' + tryNumber + ' 次。');
  98. } else {
  99. clearStateAndToLogin();
  100. }
  101. }
  102. }, false);
  103. var backButtonPress = 0;
  104. $.back = function(event) {
  105. backButtonPress++;
  106. if (backButtonPress > 1) {
  107. plus.runtime.quit();
  108. } else {
  109. plus.nativeUI.toast('再按一次退出应用');
  110. }
  111. setTimeout(function() {
  112. backButtonPress = 0;
  113. }, 1000);
  114. return false;
  115. };
  116. });
  117. }(mui, document));
  118. </script>
  119. </body>
  120. </html>