unlock.html 3.0 KB

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