client.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  3. <head th:replace="common::header(~{::title},~{::link})">
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>科德信息咨询</title>
  8. <!-- 二级页面CSS -->
  9. <link rel="stylesheet" th:href="${portalHost+'/css/secode.css'}">
  10. <!-- 自定义动画样式 -->
  11. <link rel="stylesheet" th:href="${portalHost+'/css/swiper.min.css'}">
  12. </head>
  13. <body>
  14. <div class="app">
  15. <!-- 头部 -->
  16. <header>
  17. <div th:replace="common::nav('','')"></div>
  18. <!-- 新闻轮播图 -->
  19. <div class="swiper-containerx">
  20. <img th:src="${banners}==null?${portalHost+'/images/banner/news_bg.jpg'}:${avatarUploadHost}+${banners.bannerUrl}" />
  21. </div>
  22. <!-- 新闻轮播图 end -->
  23. </header>
  24. <!-- 头部 end -->
  25. <!-- 主体内容 -->
  26. <div class="client main">
  27. <div class="product-title">
  28. <h4>服务客户</h4>
  29. <p>已为26800企业,获得国家高新技术企业认证!</p>
  30. </div>
  31. <div class="container">
  32. <div class="client-list">
  33. <div id="trigger1">请选择选择区域、省份</div>
  34. <div class="quyu">
  35. <span>所属区域</span>
  36. <ul>
  37. <li class="active">全国</li>
  38. <li data-id="1">华中</li>
  39. <li data-id="2">华东</li>
  40. <li data-id="3">东北</li>
  41. <li data-id="4">华南</li>
  42. <li data-id="5">华北</li>
  43. <li data-id="6">西南</li>
  44. <li data-id="7">西北</li>
  45. </ul>
  46. </div>
  47. <div class="shengfen">
  48. <span>所属省份</span>
  49. <ul>
  50. </ul>
  51. </div>
  52. </div>
  53. <div class="client-list-box">
  54. <div class="client-item">
  55. </div>
  56. <!-- 分页 -->
  57. <div class="page_2"></div>
  58. <!-- 分页 end -->
  59. </div>
  60. </div>
  61. </div>
  62. <!-- 主体内容 end -->
  63. <!-- 底部 -->
  64. <footer>
  65. <div th:replace="common::copyright"></div>
  66. </footer>
  67. <!-- 底部 end -->
  68. </div>
  69. <div th:replace="common::footer(~{::script},'')">
  70. <!-- 手机端省级联动 -->
  71. <script type="text/javascript">
  72. var mobileSelect = new MobileSelect({
  73. trigger: '#trigger1',
  74. title: '区域/省份-选择',
  75. wheels: [
  76. {
  77. data: [
  78. {
  79. id: '1',
  80. value: '全国',
  81. childs: [
  82. {
  83. id: undefined,
  84. value: "全部"
  85. },
  86. {
  87. id: "7",
  88. value: "安徽"
  89. },
  90. {
  91. id: "15",
  92. value: "北京"
  93. },
  94. {
  95. id: "27",
  96. value: "重庆"
  97. },
  98. {
  99. id: "8",
  100. value: "福建"
  101. },
  102. {
  103. id: "30",
  104. value: "甘肃"
  105. },
  106. {
  107. id: "24",
  108. value: "广东"
  109. },
  110. {
  111. id: "20",
  112. value: "广西"
  113. },
  114. {
  115. id: "25",
  116. value: "贵州"
  117. },
  118. {
  119. id: "21",
  120. value: "海南"
  121. },
  122. {
  123. id: "13",
  124. value: "河北"
  125. },
  126. {
  127. id: "1",
  128. value: "黑龙江"
  129. },
  130. {
  131. id: "19",
  132. value: "河南"
  133. },
  134. {
  135. id: "22",
  136. value: "香港"
  137. },
  138. {
  139. id: "17",
  140. value: "湖北"
  141. },
  142. {
  143. id: "18",
  144. value: "湖南"
  145. },
  146. {
  147. id: "5",
  148. value: "江苏"
  149. },
  150. {
  151. id: "9",
  152. value: "江西"
  153. },
  154. {
  155. id: "3",
  156. value: "辽宁"
  157. },
  158. {
  159. id: "2",
  160. value: "吉林"
  161. },
  162. {
  163. id: "23",
  164. value: "澳门"
  165. },
  166. {
  167. id: "14",
  168. value: "内蒙古"
  169. },
  170. {
  171. id: "32",
  172. value: "宁夏"
  173. },
  174. {
  175. id: "31",
  176. value: "青海"
  177. },
  178. {
  179. id: "10",
  180. value: "山东"
  181. },
  182. {
  183. id: "4",
  184. value: "上海"
  185. },
  186. {
  187. id: "12",
  188. value: "山西"
  189. },
  190. {
  191. id: "34",
  192. value: "陕西"
  193. },
  194. {
  195. id: "29",
  196. value: "四川"
  197. },
  198. {
  199. id: "11",
  200. value: "台湾"
  201. },
  202. {
  203. id: "16",
  204. value: "天津"
  205. },
  206. {
  207. id: "33",
  208. value: "新疆"
  209. },
  210. {
  211. id: "28",
  212. value: "西藏"
  213. },
  214. {
  215. id: "26",
  216. value: "云南"
  217. },
  218. {
  219. id: "6",
  220. value: "浙江"
  221. },
  222. ]
  223. },
  224. {
  225. id: '2',
  226. value: '东北',
  227. childs: [
  228. { id: '1', value: '黑龙江' },
  229. { id: '2', value: '吉林' },
  230. { id: '3', value: '辽宁' }
  231. ]
  232. },
  233. {
  234. id: '3',
  235. value: '华东',
  236. childs: [
  237. { id: '4', value: '上海' },
  238. { id: '5', value: '江苏' },
  239. { id: '6', value: '浙江' },
  240. { id: '7', value: '安徽' },
  241. { id: '8', value: '福建' },
  242. { id: '9', value: '江西' },
  243. { id: '10', value: '山东' },
  244. { id: '11', value: '台湾' }
  245. ]
  246. },
  247. {
  248. id: '4',
  249. value: '华北',
  250. childs: [
  251. { id: '15', value: '北京' },
  252. { id: '16', value: '天津' },
  253. { id: '12', value: '山西' },
  254. { id: '13', value: '河北' },
  255. { id: '14', value: '内蒙古' }
  256. ]
  257. },
  258. {
  259. id: '4',
  260. value: '华中',
  261. childs: [
  262. { id: '19', value: '河南' },
  263. { id: '17', value: '湖北' },
  264. { id: '18', value: '湖南' }
  265. ]
  266. },
  267. {
  268. id: '5',
  269. value: '华南',
  270. childs: [
  271. { id: '24', value: '广东' },
  272. { id: '20', value: '广西' },
  273. { id: '21', value: '海南' },
  274. { id: '22', value: '香港' },
  275. { id: '23', value: '澳门' }
  276. ]
  277. },
  278. {
  279. id: '6',
  280. value: '西南',
  281. childs: [
  282. { id: '29', value: '四川' },
  283. { id: '25', value: '贵州' },
  284. { id: '26', value: '云南' },
  285. { id: '27', value: '重庆' },
  286. { id: '28', value: '西藏' }
  287. ]
  288. },
  289. {
  290. id: '6',
  291. value: '西北',
  292. childs: [
  293. { id: '34', value: '陕西' },
  294. { id: '30', value: '甘肃' },
  295. { id: '31', value: '青海' },
  296. { id: '32', value: '宁夏' },
  297. { id: '33', value: '新疆' }
  298. ]
  299. },
  300. ]
  301. }
  302. ],
  303. position: [0, 1],
  304. callback: function (indexArr, data) {
  305. let province = data[1].id
  306. $.ajax({
  307. url: api + "/open/listCustomerCase",
  308. data: {
  309. province
  310. },
  311. type: "GET",
  312. dataType: "json",
  313. success: function (data) {
  314. if (data.error && data.error.length) {
  315. alert("系统繁忙,请刷新页面");
  316. } else {
  317. var dataList = data.data.list;
  318. var html = "";
  319. if (dataList.length) {
  320. for (var d = 0; d < dataList.length; d++) {
  321. html +=
  322. "<div><img src=" +
  323. avatarUploadHost +
  324. dataList[d].pictureUrl +
  325. " /></div>";
  326. }
  327. $(".page_ctrl").css({
  328. display: "block"
  329. });
  330. window.sessionStorage.setItem("total", data.data.totalCount);
  331. window.sessionStorage.setItem("province", province);
  332. page()
  333. } else {
  334. var html = "<h4 style='text-align:center;margin-top:90px;color:#666' >暂无服务客户</h4>"
  335. $(".page_ctrl").css({
  336. display: "none"
  337. })
  338. }
  339. $(".client-item").html(html);
  340. }
  341. }
  342. });
  343. }
  344. });
  345. </script>
  346. <!-- 引入分页 -->
  347. <script th:src="${portalHost+'/js/page.js'}"></script>
  348. <script>
  349. function page() {
  350. var obj_1 = {
  351. obj_box: ".page_2",
  352. total_item: +window.sessionStorage.getItem("total"), //总共数据
  353. province: +window.sessionStorage.getItem("province"),
  354. per_num: 10, //每页显示数据
  355. current_page: 1, //当前页
  356. change_content: function (per_num, current_page) {
  357. per_num = per_num ? per_num : 10;
  358. current_page = current_page ? current_page : 1;
  359. var province = window.sessionStorage.getItem("province");
  360. if (province == "undefined") {
  361. var data = {
  362. pageNo: current_page
  363. };
  364. } else {
  365. var data = {
  366. province,
  367. pageNo: current_page
  368. };
  369. }
  370. $.ajax({
  371. url: api + "/open/listCustomerCase",
  372. data,
  373. type: "GET",
  374. dataType: "json",
  375. success: function (data) {
  376. if (data.error && data.error.length) {
  377. alert("系统繁忙,请刷新页面");
  378. } else {
  379. var dataList = data.data.list;
  380. var html = "";
  381. if (dataList.length) {
  382. for (var d = 0; d < dataList.length; d++) {
  383. html +=
  384. "<div><img src=" +
  385. avatarUploadHost +
  386. dataList[d].pictureUrl +
  387. " /></div>";
  388. }
  389. $(".page_ctrl").css({
  390. display: "block"
  391. });
  392. window.sessionStorage.setItem("total", data.data.totalCount);
  393. window.sessionStorage.setItem("province", province);
  394. } else {
  395. var html =
  396. "<h4 style='text-align:center;margin-top:90px;color:#666' >暂无服务客户</h4>";
  397. $(".page_ctrl").css({
  398. display: "none"
  399. });
  400. }
  401. $(".client-item").html(html);
  402. }
  403. }
  404. });
  405. }
  406. };
  407. //调用分页
  408. page_ctrl(obj_1);
  409. }
  410. </script>
  411. </div>
  412. </body>
  413. </html>