handwrittenSignature.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <style>
  10. html,
  11. body {
  12. position: relative;
  13. }
  14. .handle_operation_item {
  15. margin: 0 15px;
  16. height: 30px;
  17. position: fixed;
  18. left: 0;
  19. top: 220px;
  20. }
  21. .handle_operation_item_child ul {
  22. margin: 0 15px;
  23. height: 40px;
  24. display: flex;
  25. justify-content: space-between;
  26. }
  27. .handle_operation_item_child ul li {
  28. width: 80px;
  29. height: 30px;
  30. line-height: 30px;
  31. text-align: center;
  32. border-radius: 3px;
  33. color: #fff;
  34. }
  35. .handle_cancel {
  36. background: #f5222d
  37. }
  38. .handle_preservation {
  39. background: #1890ff;
  40. margin-left: 30px;
  41. }
  42. .handle_revoke {
  43. background: #bfbfbf;
  44. margin-left: 30px;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="handle_operation_item">
  50. <div class="handle_operation_item_child">
  51. <ul>
  52. <li class="handle_cancel" onclick="handleCancel()">取消</li>
  53. <li class="handle_revoke" onclick="handleRevoke()">撤销</li>
  54. <li class="handle_preservation" onclick="saveSignature()">保存</li>
  55. </ul>
  56. </div>
  57. </div>
  58. </body>
  59. </html>
  60. <script type="text/javascript" src="../../script/api.js"></script>
  61. <script src="../../script/config.js" charset="utf-8"></script>
  62. <script type="text/javascript">
  63. var headers
  64. apiready = function() {
  65. var info = $api.getStorage('data'),
  66. token = JSON.parse(info).data.access_token;
  67. headers = {
  68. "Authorization": "Bearer " + token
  69. };
  70. handwrittenSignature();
  71. };
  72. // 手写签名
  73. function handwrittenSignature() {
  74. var drawingBoard = api.require('drawingBoard');
  75. drawingBoard.open({
  76. rect: {
  77. x: 0,
  78. y: 70,
  79. w: '100%',
  80. h: 200
  81. },
  82. styles: {
  83. brush: {
  84. color: '#232627',
  85. width: 6
  86. },
  87. bgColor: '#f5f5f5'
  88. },
  89. fixedOn: api.frameName
  90. });
  91. }
  92. // 保存签名
  93. function saveSignature() {
  94. var drawingBoard = api.require('drawingBoard');
  95. var timestamp = new Date().getTime()
  96. drawingBoard.save({
  97. savePath: 'fs://drawingBoard' + timestamp + '.png',
  98. copyToAlbum: false,
  99. overlay: true
  100. }, function(ret) {
  101. api.ajax({
  102. url: UrlRouter.handleUpLoadSignature,
  103. method: 'post',
  104. headers: headers,
  105. data: {
  106. files: {
  107. sign: ret.absolutePath
  108. }
  109. }
  110. }, function(ret, err) {
  111. if (ret) {
  112. if (ret.code == 0) {
  113. api.toast({
  114. msg: '上传成功',
  115. duration: 2000,
  116. location: 'top'
  117. });
  118. api.closeWin();
  119. // 将签名图片在个人基本信息做更新
  120. api.sendEvent({
  121. name: 'updateUserInfo',
  122. extra: {}
  123. });
  124. } else {
  125. api.toast({
  126. msg: '上传失败',
  127. duration: 2000,
  128. location: 'top'
  129. });
  130. }
  131. } else {
  132. api.toast({
  133. msg: '网络错误',
  134. duration: 2000,
  135. location: 'top'
  136. });
  137. }
  138. });
  139. });
  140. }
  141. // 取消签名
  142. function handleCancel() {
  143. var drawingBoard = api.require('drawingBoard');
  144. drawingBoard.clear();
  145. }
  146. // 撤销上次写的容
  147. function handleRevoke() {
  148. var drawingBoard = api.require('drawingBoard');
  149. drawingBoard.revoke();
  150. }
  151. </script>