case-info.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>案件详情</title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <link href="../css/mui.css" rel="stylesheet" />
  9. <link href="../css/mui.picker.css" rel="stylesheet" />
  10. <link href="../css/mui.poppicker.css" rel="stylesheet" />
  11. <!-- 引入APP样式 -->
  12. <link href="../css/app.css" rel="stylesheet" />
  13. <!-- 引入案件详情样式 -->
  14. <link rel="stylesheet" type="text/css" href="../css/case.info.css" />
  15. <!-- 引入腾讯字体 -->
  16. <link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css"/>
  17. <!-- 本页面独有样式 -->
  18. <style type="text/css">
  19. /* 页面整体样式 */
  20. html,
  21. body {
  22. height: 100%;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="mui-content" style="padding: 4px;">
  28. <div style="padding: 10px 10px;">
  29. <div class="mui-segmented-control" style="margin: 0px;padding: 0px;">
  30. <a class="mui-control-item" href="#item1" id="seg1">
  31. 基础信息
  32. </a>
  33. <a class="mui-control-item" href="#item2" id="seg2">
  34. 案件清单
  35. </a>
  36. </div>
  37. </div>
  38. <div class="mui-scroll-wrapper" style="top: 60px;padding: 10px;">
  39. <div id="item1" class="mui-control-content">
  40. <div class="mui-content-padded">
  41. <form class="mui-input-group">
  42. <div class="mui-input-row">
  43. <label class="key">案件编号</label>
  44. <label class="value" id="lblCaseNum">JJKCQ20210126123452</label>
  45. </div>
  46. <div class="mui-input-row">
  47. <label class="key">所属乡镇</label>
  48. <label class="value" id="lblSSXZ">经济技术开发</label>
  49. </div>
  50. <div class="mui-input-row">
  51. <label class="key">所属村庄</label>
  52. <label class="value" id="lblSSCZ">经济技术开发</label>
  53. </div>
  54. <div class="mui-input-row">
  55. <label class="key">现状地类</label>
  56. <label class="value" id="lblXZDL">经济技术开发</label>
  57. </div>
  58. <div class="mui-input-row">
  59. <label class="key">规划地类</label>
  60. <label class="value" id="lblGHDL">经济技术开发</label>
  61. </div>
  62. <div class="mui-input-row">
  63. <label class="key">占地面积</label>
  64. <label class="value" id="lblTBMJ">123.5亩</label>
  65. </div>
  66. </form>
  67. </div>
  68. </div>
  69. <div id="item2" class="mui-control-content mui-scroll">
  70. <div class="mui-content-padded">
  71. <ul id="listTable" class="layui-timeline">
  72. </ul>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </body>
  78. </html>
  79. <!-- 引入mui脚本 -->
  80. <script src="../js/mui.min.js"></script>
  81. <!-- 引入网络交互脚本 -->
  82. <script src="../js/ajax.js"></script>
  83. <!-- 引入通用脚本 -->
  84. <script src="../js/common.js"></script>
  85. <!-- 引入存储脚本 -->
  86. <script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
  87. <!-- 引入案件脚本 -->
  88. <script src="../js/case.js" type="text/javascript" charset="utf-8"></script>
  89. <!-- 引入案件详情脚本 -->
  90. <script src="../js/case-info.js" type="text/javascript" charset="utf-8"></script>
  91. <script type="text/javascript">
  92. mui.init();
  93. /* 设置滚动条 否则无法滚动 */
  94. mui(".mui-scroll-wrapper").scroll({
  95. scrollY: true, //是否竖向滚动
  96. scrollX: true, //是否横向滚动
  97. startX: 0, //初始化时滚动至x
  98. startY: 0, //初始化时滚动至y
  99. indicators: false, //是否显示滚动条
  100. deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
  101. bounce: false, //是否启用回弹
  102. });
  103. /* 获取变量 */
  104. var domTable = document.getElementById("listTable");
  105. var domCaseNum = document.getElementById("lblCaseNum");
  106. var domSSXZ = document.getElementById("lblSSXZ");
  107. var domSSCZ = document.getElementById("lblSSCZ");
  108. var domXZDL = document.getElementById("lblXZDL");
  109. var domGHDL = document.getElementById("lblGHDL");
  110. var domTBMJ = document.getElementById("lblTBMJ");
  111. var userInfo;
  112. /* 页面加载完成 Plus初始化完成 */
  113. mui.plusReady(function() {
  114. var self = plus.webview.currentWebview();
  115. resetPage(self);
  116. });
  117. /**
  118. * 自定义事件监听
  119. * @param {Object} event 事件
  120. */
  121. window.addEventListener("new", function(event) {
  122. resetPage(event.detail);
  123. });
  124. /**
  125. * 刷新页面 获取详细信息数据
  126. * @param {Object} caseModel 传递的模型数据
  127. */
  128. function resetPage(caseModel) {
  129. //重置顶部标题栏内容
  130. plus.webview.currentWebview().setStyle({
  131. "titleNView": {
  132. backgroundColor: colorBackground,
  133. titleColor: colorTitle,
  134. titleText: "案件详情",
  135. splitLine: {
  136. color: colorLine
  137. },
  138. autoBackButton: true,
  139. }
  140. });
  141. //删除所有子节点
  142. domTable.innerHTML = "";
  143. /* 获取本地用户信息 */
  144. getSaveUserInfo({
  145. success: function(uInfo) {
  146. userInfo = uInfo;
  147. sendAjax({
  148. url: 'appQueryCaseLifes',
  149. type: 'post',
  150. waitMessage: '正在查询...',
  151. data: caseModel,
  152. success: function(data) {
  153. for (var i = 0; i < data.length; i++) {
  154. var li = CreateItem(data[i]);
  155. domTable.appendChild(li);
  156. }
  157. //加载最后一项
  158. var li = CtreateNextLi(caseModel.state);
  159. domTable.appendChild(li);
  160. },
  161. error: function(err) {
  162. muiAlertError(err);
  163. }
  164. })
  165. },
  166. error: function(err) {
  167. muiAlertError(err);
  168. }
  169. })
  170. /* 赋值基础信息 */
  171. domCaseNum.innerHTML = caseModel.casenum;
  172. domSSXZ.innerHTML = caseModel.caseVillagesAndTowns;
  173. domSSCZ.innerHTML = caseModel.caseVillage;
  174. domXZDL.innerHTML = caseModel.xzdl;
  175. domGHDL.innerHTML = caseModel.ghdl;
  176. domTBMJ.innerHTML = caseModel.tbmj;
  177. /* 切换选项卡 主要是第二次加载时页面已经存在 */
  178. mui.trigger(document.getElementById("seg2"), 'touchstart');
  179. mui.trigger(document.getElementById("seg2"), 'tap');
  180. }
  181. </script>