11.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  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. <link rel="stylesheet" href="../../css/apiToast.css">
  10. <link rel="stylesheet" href="../../css/projeck.css">
  11. <style>
  12. html,body{
  13. background: #fff;
  14. }
  15. .api_layout{
  16. width: 100%;
  17. position: relative;
  18. padding: 10px 15px;
  19. -webkit-box-sizing: border-box;
  20. box-sizing: border-box;
  21. }
  22. .colmun{
  23. border: 0.5px solid #bdc3c7;
  24. -webkit-box-sizing: border-box;
  25. box-sizing: border-box;
  26. background: #fff;
  27. padding: 10px 15px;
  28. margin-bottom: 10px;
  29. }
  30. .title_text{
  31. font-weight: bold;
  32. width: 86%;
  33. }
  34. .date{
  35. color: #717478;
  36. font-size: 14px;
  37. margin: 5px 0;
  38. }
  39. .content{
  40. padding-bottom: 8px;
  41. overflow-x: scroll;
  42. }
  43. .content p{
  44. color: #000;
  45. font-size: 15px;
  46. line-height: 1.7;
  47. }
  48. .seach_more{
  49. font-size: 16px;
  50. color: #2a81b7;
  51. font-weight: bold;
  52. display: inline-block;
  53. margin-top: 8px;
  54. }
  55. .status_text{
  56. position: absolute;
  57. top: -3px;
  58. right: -6px;
  59. color: #fff;
  60. font-size: 14px;
  61. padding: 3px 7px;
  62. font-style: normal;
  63. background: #fc685c;
  64. line-height: normal;
  65. }
  66. .contents p{
  67. color:#717478
  68. }
  69. table tr th{
  70. text-align: center;
  71. }
  72. table tr td{
  73. text-align: center;
  74. }
  75. img{
  76. width: 100%;
  77. }
  78. .overflow_api{
  79. overflow: hidden;
  80. }
  81. .file-list{
  82. padding-left: 10px;
  83. }
  84. .file-list li{
  85. padding: 10px 0;
  86. }
  87. .content_img{
  88. text-indent: 30px;
  89. }
  90. .file-ico{
  91. width: 45px;
  92. height: 45px;
  93. margin-right: 10px;
  94. display: block;
  95. }
  96. .file-info span{
  97. display: block;
  98. }
  99. .file-title{
  100. font-size: 14px;
  101. color: #333;
  102. font-weight: bold;
  103. }
  104. .file-KB{
  105. font-size: 12px;
  106. color: #ccc;
  107. }
  108. </style>
  109. </head>
  110. <body>
  111. <div class="api_layout">
  112. <ul class="news_list" id="news_list">
  113. <li class="colmun">
  114. <div class="title relative">
  115. <h3 class="title_text">二维码二维码二维码二维码二维码二维码二维码二维码二维码</h3>
  116. <i class="status_text">未读</i>
  117. </div>
  118. <span class="date">2019-09-29</span>
  119. <div class="content relative after-border">
  120. <!--<p class="overflow_api">扫就哦啊手机吉大是激动啊手机哦你飒飒就哦啊是激动啊</p>-->
  121. <p class="overflow_api">
  122. <img src="../../image/demo.png" alt="">
  123. <span class="content_img">扫就哦啊手机吉大是激动啊手机哦你飒飒就哦啊是激动啊</span>
  124. </p>
  125. </div>
  126. <span class="seach_more">详情 > ></span>
  127. </li>
  128. <li class="colmun">
  129. <div class="title relative">
  130. <h3 class="title_text">二维码二维码二维码二维码二维码二维码二维码二维码二维码</h3>
  131. <i class="status_text">未读</i>
  132. </div>
  133. <span class="date">2019-09-29</span>
  134. <div class="content relative after-border">
  135. <ul class="overflow_api file-list">
  136. <li class="flex-start relative after-border">
  137. <img src="../../image/demo.png" alt="" class="file-ico">
  138. <div class="file-info">
  139. <span class="file-title">6月01日智慧班前会</span>
  140. <span class="file-KB">19KB</span>
  141. </div>
  142. </li>
  143. <li class="flex-start relative after-border">
  144. <img src="../../image/demo.png" alt="" class="file-ico">
  145. <div class="file-info">
  146. <span class="file-title">6月01日智慧班前会</span>
  147. <span class="file-KB">19KB</span>
  148. </div>
  149. </li>
  150. <li class="flex-start relative after-border">
  151. <img src="../../image/demo.png" alt="" class="file-ico">
  152. <div class="file-info">
  153. <span class="file-title">6月01日智慧班前会</span>
  154. <span class="file-KB">19KB</span>
  155. </div>
  156. </li>
  157. </ul>
  158. </div>
  159. <span class="seach_more">详情 > ></span>
  160. </li>
  161. </ul>
  162. </div>
  163. <div class="Nonews" id="nocode"></div>
  164. </body>
  165. </html>
  166. <script type="text/template" id="template">
  167. {{~it:value}}
  168. <li>
  169. <p class="time list_title">
  170. <i class="bg_start"></i>
  171. <span>{{=value.createDate}}</span>
  172. <i class="start1"></i>
  173. </p>
  174. <p class="texts texts01">{{=value.dataContent}}</p>
  175. <div style="text-align: right">
  176. <button class="btn bords" style="background:#009fe8;color: #ffffff;border: 1px solid #ffffff;" onclick="QRcodeDetaile('{{=value.pageId}},{{=value.id}},{{=value.departmentId}}')">查看详情</button>
  177. <button class="btn bord" onclick="QRcodeDetaile('{{=value.pageId}},{{=value.id}},{{=value.departmentId}}')">查看详情</button>
  178. </div>
  179. </li>
  180. {{~}}
  181. </script>
  182. <script type="text/javascript" src="../../script/api.js"></script>
  183. <script type="text/javascript" src="../../script/doT.min.js"></script>
  184. <!-- <script src="../../script/aui-toast.js" charset="utf-8"></script> -->
  185. <!-- <script src="../../script/fastclick.min.js"></script> -->
  186. <script src="../../script/config.js" charset="utf-8"></script>
  187. <script type="text/javascript">
  188. var depIDs = '',uuid='';
  189. var isLoadding = false;
  190. var skip = 1;
  191. var apiToast = new apiToast();
  192. apiready = function () {
  193. depIDs = api.pageParam.depIDs;
  194. var info = $api.getStorage('data'),
  195. user = JSON.parse(info).data.user;
  196. uuid = JSON.parse(info).data.user.staff_num;
  197. QRcodeListFun(uuid,depIDs,true);
  198. resetWidth();
  199. api.addEventListener({
  200. name : 'scrolltobottom',
  201. extra : {
  202. threshold : 0 //设置距离底部多少距离时触发,默认值为0,数字类型
  203. }
  204. }, function(ret, err) {
  205. if (!isLoadding) {
  206. isLoadding = true;
  207. QRcodeListFun(uuid,depIDs,true);
  208. }
  209. });
  210. }
  211. function QRcodeListFun(uuid,depID,isLoadMore){
  212. var filter = {
  213. "departmentId" : depID,
  214. 'userId':uuid,
  215. "pageNumber" : skip,
  216. "pageSize" : 10
  217. };
  218. $http.fnReuestDataNoW(UrlRouter.getPageDynamicApi,'','get',filter,function (ret, err) {
  219. apiToast.hide();
  220. if (ret.data.length == 0 && skip == 1) {
  221. document.getElementById("nocode").style.display = 'block';
  222. return false;
  223. }else {
  224. document.getElementById("nocode").style.display = 'none';
  225. }
  226. if (ret) {
  227. if (ret.data.length > 0) {
  228. skip += 1;
  229. $apis.append(List_QRcode,'#template',ret.data);
  230. } else {
  231. isLoadding = true;
  232. api.toast({
  233. msg: '没有更多数据',
  234. duration: 2000,
  235. location: 'bottom'
  236. });
  237. }
  238. } else {
  239. apiToast.hide();
  240. api.toast({
  241. msg: '加载超时,请检查网络',
  242. duration: 2000,
  243. location: 'bottom'
  244. });
  245. }
  246. });
  247. }
  248. function resetWidth() {
  249. var items = document.getElementsByClassName("texts");
  250. for (var i = 0; i < items.length; i++) {
  251. items[i].style.width = (api.frameWidth - 130) + "px";
  252. }
  253. }
  254. function QRcodeDetaile(pageid) {
  255. var pageidA = pageid.split(',');
  256. $event.openWin('QrcodeDetaile','QrcodeDetaile',{pageId:pageidA[0],id:pageidA[1],departmentId:pageidA[2],flag:true},'');
  257. }
  258. </script>