imgTab.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>afaa</title>
  8. <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
  9. <link rel="stylesheet" type="text/css" href="css/default.css">
  10. <link rel="stylesheet" href="css/style.css">
  11. <link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
  12. <link href="css/bootstrap.min.css" rel="stylesheet">
  13. <link href="css/toastr.min.css" rel="stylesheet">
  14. <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  15. <script src="js/jquery.min.js"></script>
  16. <script src="js/toastr.min.js"></script>
  17. <script src="js/bootstrap.min.js"></script>
  18. <script src="js/jquery_cookie_min.js"></script>
  19. <script src="js/scripts.js"></script>
  20. <script src="js/jqhttpsdk.js"></script>
  21. <script src="js/jkcor.js"></script>
  22. <script src="js/pages.js"></script>
  23. <script src="js/datachange.js"></script>
  24. </head>
  25. <body>
  26. <div class="clear-backend">
  27. <div class="avatar">
  28. <div>
  29. <a href="javascript:void(0);" target="_blank">
  30. <img src="img/admin.png" alt="">
  31. </a>
  32. </div>
  33. </div>
  34. <!--
  35. <input type="radio" class="tab-1" name="tab" onclick="location.href='index.html'">
  36. <span>Home</span><i class="fa fa-home"></i>
  37. <input type="radio" class="tab-2" name="tab" onclick="location.href='langTab.html'">
  38. <span>Lang</span><i class="fa fa-medium"></i>
  39. <input type="radio" class="tab-3" name="tab" onclick="location.href='userTab.html'">
  40. <span>Users</span><i class="fa fa-user"></i>
  41. -->
  42. <div class="menu">
  43. <input type="radio" class="tab-4" name="tab" checked="checked">
  44. <span>Azimg</span><i class="fa fa-image"></i>
  45. </div>
  46. <!-- tab-top-bar -->
  47. <div class="top-bar">
  48. <ul>
  49. <li>
  50. <a href="login.html" title="Log Out">
  51. <i class="fa fa-sign-out"></i>
  52. </a>
  53. </li>
  54. <!--
  55. <li>
  56. <a href="javascript:void(0);" title="Messages">
  57. <i class="fa fa-envelope"></i>
  58. </a>
  59. </li>
  60. -->
  61. <li>
  62. <a href="javascript:void(0);" title="Edit" onclick="editSysFunc()">
  63. <i class="fa fa-edit"></i>
  64. </a>
  65. </li>
  66. </ul>
  67. </div>
  68. <!-- tab-content -->
  69. <div class="tab-content" style="overflow: auto">
  70. <section class="tab-item-4" style="height: 100%;width: 100%;display: block">
  71. <div class="container-fluid">
  72. <div class="row">
  73. <div class="col-md-12">
  74. <form class="form-inline" role="form">
  75. <div class="form-group">
  76. <label class="sr-only" for="asin_add_input">ASIN</label>
  77. <input type="text" class="form-control" id="asin_add_input"
  78. placeholder="请输入ASIN">
  79. </div>
  80. <div class="form-group">
  81. <label class="sr-only" for="url_add_input">链接</label>
  82. <input type="text" class="form-control" id="url_add_input"
  83. placeholder="请输入图片url">
  84. </div>
  85. <button type="submit" class="btn btn-primary" onclick="subAddImgAction();return false;">
  86. 保存
  87. </button>
  88. </form>
  89. </div>
  90. <div class="col-md-12">
  91. <form class="form-inline float-right" role="form">
  92. <div class="form-group">
  93. <input type="text" class="form-control" id="searchInput" placeholder="请输入搜索的ASIN">
  94. </div>
  95. <button type="submit" class="btn btn-primary" onclick="subSearchAsinAction();return false;">
  96. 搜索
  97. </button>
  98. </form>
  99. </div>
  100. </div>
  101. </div>
  102. <hr>
  103. <div class="container-fluid">
  104. <div class="row">
  105. <div class="col-md-12">
  106. <table class="table table-bordered table-hover">
  107. <thead id="tabHead">
  108. <tr>
  109. <th>编号</th>
  110. <th>ASIN</th>
  111. <th>图片URL</th>
  112. <th>MD5</th>
  113. <th>添加时间</th>
  114. <th>更新时间</th>
  115. <th>操作</th>
  116. </tr>
  117. </thead>
  118. <tbody id="tabBody"></tbody>
  119. </table>
  120. </div>
  121. </div>
  122. <div id="pagination"></div>
  123. </div>
  124. <!--模态框start-->
  125. <div class="container-fluid">
  126. <div class="row">
  127. <div class="col-md-12">
  128. <div class="modal fade" id="modal-container-edit" role="dialog"
  129. aria-labelledby="myModalLabel"
  130. aria-hidden="true">
  131. <div class="modal-dialog" role="document">
  132. <div class="modal-content">
  133. <div class="modal-header">
  134. <h5 class="modal-title" id="myModalLabel">
  135. 编辑
  136. </h5>
  137. <button type="button" class="close" data-dismiss="modal">
  138. <span aria-hidden="true">×</span>
  139. </button>
  140. </div>
  141. <div class="modal-body">
  142. <div class="form-group" id="edit_model_form">
  143. </div>
  144. </div>
  145. <div class="modal-footer">
  146. <button type="button" class="btn btn-primary editRowSaveBtn"
  147. onclick="editRow(this);return false;">
  148. 保存
  149. </button>
  150. <button type="button" class="btn btn-secondary" data-dismiss="modal">
  151. 关闭
  152. </button>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. <!--模态框end-->
  161. <!--修改推送邮箱 模态框start -->
  162. <div class="container-fluid">
  163. <div class="row">
  164. <div class="col-md-12">
  165. <div class="modal fade" id="modal-sys-edit" role="dialog"
  166. aria-labelledby="myModalLabel"
  167. aria-hidden="true">
  168. <div class="modal-dialog" role="document">
  169. <div class="modal-content">
  170. <div class="modal-header">
  171. <h5 class="modal-title" id="myModalLabel">
  172. 编辑
  173. </h5>
  174. <button type="button" class="close" data-dismiss="modal">
  175. <span aria-hidden="true">×</span>
  176. </button>
  177. </div>
  178. <div class="modal-body">
  179. <div class="form-group" id="edit_model_form">
  180. <label for="asimgMsgEmailInput">通知邮箱:</label>
  181. <input type="text" class="form-control" id="asimgMsgEmailInput">
  182. <label for="asIntervalINput">时间间隔(小时):</label>
  183. <input type="text" class="form-control" id="asIntervalINput">
  184. </div>
  185. </div>
  186. <div class="modal-footer">
  187. <button type="button" class="btn btn-primary editRowSaveBtn"
  188. onclick="SaveSysFunc(this);return false;">
  189. 保存
  190. </button>
  191. <button type="button" class="btn btn-secondary" data-dismiss="modal">
  192. 关闭
  193. </button>
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. <!--模态框end-->
  202. </section>
  203. </div>
  204. </div>
  205. <script type="text/javascript">
  206. let index_data;
  207. var line = 10;
  208. $(function () {
  209. toastr.options = {
  210. "closeButton": true,
  211. "debug": false,
  212. "newestOnTop": false,
  213. "progressBar": true,
  214. "positionClass": "toast-top-right",
  215. "preventDuplicates": false,
  216. "onclick": null,
  217. "showDuration": "300",
  218. "hideDuration": "500",
  219. "timeOut": "5000",
  220. "extendedTimeOut": "1000",
  221. "showEasing": "swing",
  222. "hideEasing": "linear",
  223. "showMethod": "fadeIn",
  224. "hideMethod": "fadeOut"
  225. };
  226. InitIndex()
  227. });
  228. function InitIndex() {
  229. var page = GetUrlParam('page');
  230. page = page.replace('#', '');
  231. if (!page) {
  232. page = 1
  233. }
  234. let post_data = {
  235. 'token': $.cookie('access_token'),
  236. 'page': page,
  237. 'line': line
  238. }
  239. console.log(isNaN(page))
  240. let searchAsin = $('#searchInput').val()
  241. if (searchAsin) {
  242. post_data['searchAsin'] = searchAsin
  243. }
  244. $('#pagination').empty()
  245. $.postJSON(
  246. http_ip_prot + 'asimg/query', JSON.stringify(post_data),
  247. function (data) {
  248. if (data['code'] == 0) {
  249. console.log(data)
  250. addTable(data['res']);
  251. let count_page = Math.ceil(data['count'] / line);
  252. $('#pagination').pagination({
  253. pages: count_page, //总页数
  254. // pages: 10000, //总页数
  255. edges: 2,
  256. cssStyle: 'pagination', //按纽大小pagination-lg或写入自定义css
  257. displayedPages: 5, //显示几个
  258. onPageClick: function (pageNumber, event) {
  259. //点击时调用
  260. // alert(pageNumber);
  261. queryData(pageNumber)
  262. },
  263. onInit: function (getid) {
  264. //刷新时或初始化调用
  265. // alert(getid);
  266. }
  267. });
  268. } else {
  269. alert(data['msg'])
  270. window.location.href = "http://" + domain + ":7724/web/login.html";
  271. }
  272. }
  273. );
  274. }
  275. function queryData(page) {
  276. let post_data = {
  277. 'token': $.cookie('access_token'),
  278. 'page': page,
  279. 'line': line
  280. };
  281. let searchAsin = $('#searchInput').val()
  282. if (searchAsin) {
  283. post_data['searchAsin'] = searchAsin
  284. }
  285. $.postJSON(
  286. http_ip_prot + 'asimg/query', JSON.stringify(post_data),
  287. function (data) {
  288. if (data['code'] == 0) {
  289. // console.log(data['res'])
  290. console.log(data)
  291. addTable(data['res'])
  292. } else {
  293. alert(data['msg'])
  294. }
  295. }
  296. );
  297. }
  298. function addTable(data) {
  299. index_data = data
  300. let body_html = ''
  301. $.each(data, function (idx, obj) {
  302. let edit_btn = '<a href="javascript:void(0);" title="Edit" onclick="editFunc(\'' + obj['id'] + '\')"><i class="fa fa-edit"></i></a>';
  303. let del_btn = '<a href="javascript:void(0);" title="Delete" onclick="delAsImg(\'' + obj['id'] + '\')"><i class="fa fa-ban"></i></a>';
  304. body_html += '<tr>' +
  305. '<td>' + obj['id'] + '</td>' +
  306. '<td>' + obj['asin'] + '</td>' +
  307. //'<td>' + obj['url'] + '</td>' +
  308. '<td><img width="50px" src="' + obj['url'] + '"/></td>' +
  309. '<td>' + obj['md5'] + '</td>' +
  310. '<td>' + $.DateChange.UnixToDate(obj['addTime'], true, 8) + '</td>' +
  311. '<td>' + $.DateChange.UnixToDate(obj['updTime'], true, 8) + '</td>' +
  312. '<td>' + edit_btn + '&nbsp;&nbsp;&nbsp;' + del_btn + '</td></tr>'
  313. })
  314. $('#tabBody').html(body_html)
  315. }
  316. function delAsImg(id) {
  317. let post_data = {
  318. 'token': $.cookie('access_token'),
  319. 'id': id
  320. }
  321. let cr = confirm('delete it ?')
  322. if (cr) {
  323. $.postJSON(
  324. http_ip_prot + 'asimg/delete', JSON.stringify(post_data),
  325. function (data) {
  326. if (data['code'] == 0) {
  327. console.log(data)
  328. // alert(data['msg'])
  329. window.location.reload()
  330. } else {
  331. alert(data['msg'])
  332. }
  333. }
  334. );
  335. }
  336. }
  337. function editFunc(id) {
  338. // alert(langKey)
  339. $('#modal-container-edit').modal('show')
  340. let html_edit = ''
  341. $.each(index_data, function (idx, obj) {
  342. if (id == obj['id']) {
  343. html_edit = '<input id="editIDInput" type="hidden" value="' + id + '"/>'
  344. html_edit += '<label for="editAsinInput">ASIN</label><input type="text" class="form-control" id="editAsinInput" value="' + obj['asin'] + '">'
  345. html_edit += '<label for="editUrlInput">图片URL</label><input type="text" class="form-control" id="editUrlInput" value="' + obj['url'] + '">'
  346. }
  347. });
  348. $('#edit_model_form').html(html_edit)
  349. }
  350. function editRow() {
  351. let asin = $('#editAsinInput').val()
  352. let url = $('#editUrlInput').val()
  353. let id = $('#editIDInput').val()
  354. let post_data = {
  355. 'token': $.cookie('access_token'),
  356. 'asin': asin,
  357. 'url': url,
  358. 'id': id
  359. }
  360. console.log(post_data)
  361. $.postJSON(
  362. http_ip_prot + 'asimg/update', JSON.stringify(post_data),
  363. function (data) {
  364. if (data['code'] == 0) {
  365. console.log(data)
  366. // alert(data['msg'])
  367. window.location.reload()
  368. } else {
  369. alert(data['msg'])
  370. }
  371. }
  372. );
  373. }
  374. function subAddImgAction() {
  375. let url = $("#url_add_input").val();
  376. let asin = $("#asin_add_input").val();
  377. let post_data = {
  378. 'url': url,
  379. 'asin': asin,
  380. 'token': $.cookie('access_token'),
  381. };
  382. $.postJSON(
  383. http_ip_prot + 'asimg/add',
  384. JSON.stringify(post_data),
  385. function (data) {
  386. if (data['code'] == 0) {
  387. // alert(data['msg'])
  388. toastr["success"]('保存成功')
  389. InitIndex()
  390. // window.location.reload()
  391. } else {
  392. toastr["success"]('保存失败')
  393. console.log(data['msg'])
  394. }
  395. }
  396. );
  397. }
  398. function subSearchAsinAction() {
  399. InitIndex()
  400. }
  401. function editSysFunc() {
  402. $('#modal-sys-edit').modal('show')
  403. let post_data = {
  404. 'token': $.cookie('access_token'),
  405. 'key_list': ['asimgEmail', 'asinterval']
  406. }
  407. $.postJSON(
  408. http_ip_prot + 'sysSet/query', JSON.stringify(post_data),
  409. function (data) {
  410. if (data['code'] == 0) {
  411. console.log('-------------------------------')
  412. console.log(data)
  413. console.log('===============================')
  414. $('#asIntervalINput').val(data['res']['asinterval']/3600)
  415. $('#asimgMsgEmailInput').val(data['res']['asimgEmail'])
  416. } else {
  417. alert(data['msg'])
  418. }
  419. }
  420. );
  421. }
  422. function SaveSysFunc() {
  423. let asinterval = parseInt($('#asIntervalINput').val())
  424. let asimgEmail = $('#asimgMsgEmailInput').val()
  425. let post_data = {
  426. 'update_data': [
  427. {'key': 'asimgEmail', 'val': asimgEmail},
  428. {'key': 'asinterval', 'val': asinterval*3600}
  429. ],
  430. 'token': $.cookie('access_token'),
  431. }
  432. $.postJSON(
  433. http_ip_prot + 'sysSet/update', JSON.stringify(post_data),
  434. function (data) {
  435. if (data['code'] == 0) {
  436. console.log(data);
  437. $('#modal-sys-edit').modal('hide')
  438. } else {
  439. console.log(data)
  440. }
  441. }
  442. )
  443. }
  444. </script>
  445. </body>
  446. </html>