江苏电子凭证前端调用示例.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>江苏医保电子凭证解码调用示例</title>
  7. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  8. <style>
  9. body {
  10. font-family: 'Microsoft YaHei', Arial, sans-serif;
  11. max-width: 800px;
  12. margin: 0 auto;
  13. padding: 20px;
  14. background-color: #f5f5f5;
  15. }
  16. .container {
  17. background: white;
  18. padding: 30px;
  19. border-radius: 10px;
  20. box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  21. }
  22. h1 {
  23. color: #2c5aa0;
  24. text-align: center;
  25. margin-bottom: 30px;
  26. }
  27. .form-group {
  28. margin-bottom: 15px;
  29. }
  30. label {
  31. display: block;
  32. margin-bottom: 5px;
  33. font-weight: bold;
  34. color: #333;
  35. }
  36. input, select {
  37. width: 100%;
  38. padding: 10px;
  39. border: 1px solid #ddd;
  40. border-radius: 5px;
  41. box-sizing: border-box;
  42. }
  43. .btn {
  44. background-color: #2c5aa0;
  45. color: white;
  46. padding: 12px 30px;
  47. border: none;
  48. border-radius: 5px;
  49. cursor: pointer;
  50. font-size: 16px;
  51. margin-right: 10px;
  52. margin-top: 10px;
  53. }
  54. .btn:hover {
  55. background-color: #1e3d6f;
  56. }
  57. .btn-success {
  58. background-color: #28a745;
  59. }
  60. .btn-success:hover {
  61. background-color: #1e7e34;
  62. }
  63. .result {
  64. margin-top: 20px;
  65. padding: 15px;
  66. border-radius: 5px;
  67. white-space: pre-wrap;
  68. font-family: 'Courier New', monospace;
  69. }
  70. .success {
  71. background-color: #d4edda;
  72. border: 1px solid #c3e6cb;
  73. color: #155724;
  74. }
  75. .error {
  76. background-color: #f8d7da;
  77. border: 1px solid #f5c6cb;
  78. color: #721c24;
  79. }
  80. .info {
  81. background-color: #e2e3e5;
  82. border: 1px solid #d6d8db;
  83. color: #383d41;
  84. }
  85. .patient-info {
  86. background-color: #fff3cd;
  87. border: 1px solid #ffeaa7;
  88. color: #856404;
  89. padding: 15px;
  90. border-radius: 5px;
  91. margin-top: 15px;
  92. }
  93. .patient-info h3 {
  94. margin-top: 0;
  95. color: #856404;
  96. }
  97. </style>
  98. </head>
  99. <body>
  100. <div class="container">
  101. <h1>🏥 江苏医保电子凭证解码接口调用示例</h1>
  102. <div class="form-group">
  103. <label for="serverUrl">服务器地址:</label>
  104. <input type="text" id="serverUrl" value="http://localhost:8321" placeholder="例如: http://localhost:8321">
  105. </div>
  106. <div class="form-group">
  107. <label for="businessType">业务类型:</label>
  108. <select id="businessType">
  109. <option value="01101">01101 - 门诊挂号</option>
  110. <option value="01102">01102 - 住院建档</option>
  111. <option value="01103">01103 - 入院登记</option>
  112. <option value="01201">01201 - 问诊</option>
  113. <option value="01301">01301 - 门诊结算</option>
  114. <option value="01302">01302 - 取药</option>
  115. <option value="02121">02121 - 药店购药</option>
  116. </select>
  117. </div>
  118. <div class="form-group">
  119. <label for="operatorId">操作员编号:</label>
  120. <input type="text" id="operatorId" value="OP001" placeholder="操作员编号">
  121. </div>
  122. <div class="form-group">
  123. <label for="operatorName">操作员姓名:</label>
  124. <input type="text" id="operatorName" value="系统管理员" placeholder="操作员姓名">
  125. </div>
  126. <div class="form-group">
  127. <label for="officeId">科室编号:</label>
  128. <input type="text" id="officeId" value="32760" placeholder="科室编号">
  129. </div>
  130. <div class="form-group">
  131. <label for="officeName">科室名称:</label>
  132. <input type="text" id="officeName" value="医保科" placeholder="科室名称">
  133. </div>
  134. <button class="btn" onclick="initSystem()">🔧 初始化系统</button>
  135. <button class="btn btn-success" onclick="decodeElectronicCertificate()">🔍 解码电子凭证</button>
  136. <button class="btn" onclick="clearResult()">🗑️ 清空结果</button>
  137. <div id="result"></div>
  138. </div>
  139. <script>
  140. // 初始化系统
  141. function initSystem() {
  142. const serverUrl = document.getElementById('serverUrl').value;
  143. showLoading('正在初始化江苏医保系统...');
  144. $.ajax({
  145. url: `${serverUrl}/api/jiangsuec/init`,
  146. type: "POST",
  147. contentType: "application/json",
  148. data: JSON.stringify({
  149. config: {
  150. // 可以在这里配置具体的医院参数
  151. // IP: "10.61.165.3",
  152. // PORT: 8086,
  153. // ORG_ID: "H32132200561"
  154. }
  155. }),
  156. timeout: 10000,
  157. success: function(result) {
  158. if (result.success) {
  159. showResult(result, 'success');
  160. alert('✅ 系统初始化成功!');
  161. } else {
  162. showResult(result, 'error');
  163. alert('❌ 系统初始化失败: ' + result.message);
  164. }
  165. },
  166. error: function(xhr, status, error) {
  167. const errorMsg = `请求失败: ${error}\n状态: ${status}\nHTTP状态码: ${xhr.status}`;
  168. showResult({ error: errorMsg }, 'error');
  169. alert('❌ 网络请求失败,请检查服务器地址是否正确');
  170. }
  171. });
  172. }
  173. // 解码电子凭证
  174. function decodeElectronicCertificate() {
  175. const serverUrl = document.getElementById('serverUrl').value;
  176. const businessType = document.getElementById('businessType').value;
  177. const operatorId = document.getElementById('operatorId').value;
  178. const operatorName = document.getElementById('operatorName').value;
  179. const officeId = document.getElementById('officeId').value;
  180. const officeName = document.getElementById('officeName').value;
  181. showLoading('正在解码江苏医保电子凭证...');
  182. const requestData = {
  183. businessType: businessType,
  184. operatorId: operatorId,
  185. operatorName: operatorName,
  186. officeId: officeId,
  187. officeName: officeName
  188. };
  189. $.ajax({
  190. url: `${serverUrl}/api/jiangsuec/decode`,
  191. type: "POST",
  192. contentType: "application/json",
  193. data: JSON.stringify(requestData),
  194. timeout: 15000,
  195. success: function(result) {
  196. if (result.success) {
  197. showResult(result, 'success');
  198. showPatientInfo(result.data);
  199. alert('✅ 电子凭证解码成功!');
  200. } else {
  201. showResult(result, 'error');
  202. alert('❌ 电子凭证解码失败: ' + result.message);
  203. }
  204. },
  205. error: function(xhr, status, error) {
  206. const errorMsg = `请求失败: ${error}\n状态: ${status}\nHTTP状态码: ${xhr.status}`;
  207. showResult({ error: errorMsg }, 'error');
  208. alert('❌ 网络请求失败,请检查服务器地址和网络连接');
  209. }
  210. });
  211. }
  212. // 显示加载状态
  213. function showLoading(message) {
  214. const resultDiv = document.getElementById('result');
  215. resultDiv.innerHTML = `<div class="result info">⏳ ${message}</div>`;
  216. }
  217. // 显示结果
  218. function showResult(data, type) {
  219. const resultDiv = document.getElementById('result');
  220. const jsonStr = JSON.stringify(data, null, 2);
  221. resultDiv.innerHTML = `<div class="result ${type}">${jsonStr}</div>`;
  222. }
  223. // 显示患者信息
  224. function showPatientInfo(patientData) {
  225. if (!patientData) return;
  226. const patientInfoHtml = `
  227. <div class="patient-info">
  228. <h3>👤 患者信息</h3>
  229. <p><strong>姓名:</strong> ${patientData.userName || '未提供'}</p>
  230. <p><strong>身份证号:</strong> ${patientData.idNo || '未提供'}</p>
  231. <p><strong>证件类型:</strong> ${patientData.idType || '未提供'}</p>
  232. <p><strong>性别:</strong> ${patientData.gender || '未提供'}</p>
  233. <p><strong>出生日期:</strong> ${patientData.birthday || '未提供'}</p>
  234. <p><strong>参保地区:</strong> ${patientData.insuOrg || '未提供'}</p>
  235. <p><strong>电子凭证令牌:</strong> ${patientData.ecToken || '未提供'}</p>
  236. <p><strong>电子凭证索引号:</strong> ${patientData.ecIndexNo || '未提供'}</p>
  237. </div>
  238. `;
  239. document.getElementById('result').innerHTML += patientInfoHtml;
  240. }
  241. // 清空结果
  242. function clearResult() {
  243. document.getElementById('result').innerHTML = '';
  244. }
  245. // 页面加载完成后的初始化
  246. $(document).ready(function() {
  247. // 可以在这里添加页面初始化逻辑
  248. console.log('江苏医保电子凭证解码页面已加载');
  249. });
  250. </script>
  251. </body>
  252. </html>