You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

446 lines
13 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>朱熹学堂—中国世界遗产之旅</title>
  6. <meta name="keywords" content="keyword1,keyword2,keyword3">
  7. <meta name="description" content="this is my page">
  8. <meta name="content-type" content="text/html; charset=UTF-8">
  9. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
  10. <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
  11. <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
  12. <link rel="stylesheet" type="text/css" href="css/base.css" />
  13. <link rel="stylesheet" type="text/css" href="css/areaList.css" />
  14. <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
  15. <script src="http://h5.qishichuangke.cn/html5/resources/js/zxxt/wx-config.js?vs=1.1.15" type="text/javascript" charset="utf-8"></script>
  16. </head>
  17. <body>
  18. <div class="wrap">
  19. <div class="box_cont">
  20. <div class="leftList">
  21. <ul>
  22. </ul>
  23. </div>
  24. <div class="rightCont">
  25. <div class="title">
  26. <img src="img/icon1.png" />世界遗产
  27. </div>
  28. <div class="imgList">
  29. <ul class="museumImg">
  30. </ul>
  31. </div>
  32. <div class="chooseList">
  33. <p><img src="img/unselected.png" />已选</p>
  34. <ul class="chooseName">
  35. </ul>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="deepBtn">提交</div>
  40. </div>
  41. <div class="tips">
  42. 请选择世界遗产
  43. </div>
  44. </body>
  45. </html>
  46. <script src="json/jibenxinxi.json?vs=1.1.0"></script>
  47. <script type="text/javascript">
  48. $('.wrap').css('height', $(window).height());
  49. $(function() {
  50. list();
  51. })
  52. getJssdk();
  53. wx.ready(function() {
  54. getReadyWorld(); //执行接口
  55. })
  56. var cseArr = [];
  57. var chooseArr = [];
  58. function list() {
  59. var datalist = [];
  60. var areaList = '';
  61. var selectArr = [];
  62. let idList = [];
  63. $.getJSON("json/jibenxinxi.json", function(data) {
  64. var ulList = '';
  65. //左侧
  66. datalist = data;
  67. $.each(data, function(i, item) {
  68. if(i == 0) {
  69. areaList += '<li class="active" leftid=' + item.id + ' data-name=' + item.pinyin + ' data-cityname=' + item.name + '><span class="name">' + item.name + '</span><span class="num">(0)</span></li>'
  70. } else {
  71. areaList += '<li class="" leftId=' + item.id + ' data-name=' + item.pinyin + '><span class="name">' + item.name + '</span><span class="num">(0)</span></li>'
  72. }
  73. ulList += '<ul class="museumImg">'
  74. $.each(item.bowuguan, function(index, val) {
  75. ulList += '<li class="" rightid=' + val.id + '></li>'
  76. })
  77. ulList += '</ul>'
  78. $('.imgList').html(ulList);
  79. })
  80. var bList = data[0].bowuguan;
  81. var rightCont = '';
  82. $.each(bList, function(i, item) {
  83. if(idList.indexOf(item.id) == -1) {
  84. rightCont += '<li class="" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
  85. } else {
  86. rightCont += '<li class="active" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
  87. }
  88. })
  89. $('.museumImg').eq(0).html(rightCont);
  90. $('.museumImg').eq(0).css('display', 'flex');
  91. $('.leftList ul').html(areaList);
  92. //左侧点击事件
  93. $('.leftList ul').on('click', 'li', function(e) {
  94. var rightCont = '';
  95. console.log(e)
  96. console.log(data[$(this).index()].bowuguan)
  97. var bList = data[$(this).index()].bowuguan;
  98. $.each(bList, function(i, item) {
  99. if(idList.indexOf(item.id) == -1) {
  100. rightCont += '<li class="" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
  101. } else {
  102. rightCont += '<li class="active" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
  103. }
  104. })
  105. $('.museumImg').eq($(this).index()).html(rightCont);
  106. $(this).addClass('active').siblings().removeClass('active')
  107. $('.imgList ul').eq($(this).index()).css('display', 'flex').siblings().css('display', 'none')
  108. })
  109. //右侧点击事件
  110. $('.imgList').on('click', 'li', function(e) {
  111. if($(this).hasClass('active')) {
  112. $(this).removeClass('active');
  113. let index = idList.indexOf($(this).attr('rightid'))
  114. delet(idList[index], index)
  115. // idList.splice(index, 1);
  116. } else {
  117. let q = $(this).parent().index();
  118. $(this).addClass('active');
  119. idList.push($(this).attr('rightid'))
  120. hot(idList)
  121. }
  122. let ons = $(this).parent().find('.active').length;
  123. if(ons > 0) {
  124. $('.leftList li').eq($(this).parent().index()).find('.num').show();
  125. $('.leftList li').eq($(this).parent().index()).find('.num').html('(' + ons + ')');
  126. } else {
  127. $('.leftList li').eq($(this).parent().index()).find('.num').hide();
  128. $('.leftList li').eq($(this).parent().index()).removeClass('select');
  129. }
  130. })
  131. function hot(id) {
  132. chooseArr = [];
  133. var m = null;
  134. var num = null;
  135. var choseCont = '';
  136. $.each(id, function(a, s) {
  137. $.each($('.imgList li'), function(i, v) {
  138. if(s == $(v).attr('rightid')) {
  139. $(v).addClass('active');
  140. m = $('.imgList>ul').index($(v).parent());
  141. $('.leftList li').eq(m).addClass('select');
  142. num = $(v).parent().find('.active').length;
  143. $('.leftList li').eq(m).find('.num').show();
  144. $('.leftList li').eq(m).find('.num').html('(' + $(v).parent().find('.active').length + ')');
  145. }
  146. });
  147. });
  148. $.each(id, function(index, val) {
  149. var split = val.split("_");
  150. $.each(datalist, function(index_1, val_1) {
  151. // console.log(index_1)
  152. if(split[0] == val_1.id) {
  153. console.log(val_1)
  154. if(chooseArr.length > 0) {
  155. var ifOf = true;
  156. for(var i = 0; i < chooseArr.length; i++) {
  157. for(var s = 0; s <= chooseArr[i].list; s++) {
  158. choseCont += '<li><span class="text">' + chooseArr[i].list[s] + '</span><span rightid=' + val.id + ' class="closeIcon"><img src="img/close.png"/></span></li>'
  159. }
  160. if(chooseArr[i].id == split[0]) {
  161. ifOf = false;
  162. chooseArr[i].list.push(val);
  163. $.each(val_1.bowuguan, function(b, name) {
  164. if(val == name.id) {
  165. chooseArr[i].bName.push(name.name);
  166. }
  167. })
  168. $.each(val_1.bowuguan, function(b, name) {
  169. if(val == name.id) {
  170. chooseArr[i].bUrl.push(name.url);
  171. }
  172. })
  173. chooseArr[i].num++;
  174. break;
  175. }
  176. }
  177. if(ifOf) {
  178. var info = {
  179. 'id': '',
  180. 'name': '',
  181. 'cityName': '',
  182. 'num': '',
  183. 'bName': [],
  184. 'bUrl': [],
  185. 'list': [],
  186. 'bNum': idList.length,
  187. }
  188. info.id = val_1.id;
  189. info.name = val_1.pinyin;
  190. info.cityName = val_1.name
  191. info.num = 1;
  192. info.list = [];
  193. info.list.push(val);
  194. $.each(val_1.bowuguan, function(b, name) {
  195. if(val == name.id) {
  196. info.bName.push(name.name);
  197. }
  198. })
  199. $.each(val_1.bowuguan, function(b, name) {
  200. if(val == name.id) {
  201. info.bUrl.push(name.url);
  202. }
  203. })
  204. chooseArr.push(info);
  205. xuanzhong()
  206. }
  207. } else {
  208. var info = {
  209. 'id': '',
  210. 'name': '',
  211. 'cityName': '',
  212. 'num': '',
  213. 'bName': [],
  214. 'bUrl': [],
  215. 'list': [],
  216. 'bNum': idList.length,
  217. }
  218. info.id = val_1.id;
  219. info.name = val_1.pinyin;
  220. info.cityName = val_1.name
  221. info.num = 1;
  222. info.list = [];
  223. info.list.push(val);
  224. $.each(val_1.bowuguan, function(b, name) {
  225. if(val == name.id) {
  226. info.bName.push(name.name);
  227. }
  228. })
  229. $.each(val_1.bowuguan, function(b, name) {
  230. if(val == name.id) {
  231. info.bUrl.push(name.url);
  232. }
  233. })
  234. chooseArr.push(info);
  235. xuanzhong();
  236. }
  237. }
  238. })
  239. });
  240. console.log(chooseArr)
  241. xuanzhong()
  242. }
  243. function delet(deletId, index) {
  244. idList.splice(index, 1);
  245. var idList2 = idList.length;
  246. Array.prototype.remove = function(val) {
  247. var index = this.indexOf(val);
  248. if(index > -1) {
  249. this.splice(index, 1);
  250. }
  251. };
  252. $.each($('.imgList li'), function(i, v) {
  253. if($(v).attr('rightid') == deletId) {
  254. $(v).removeClass('active');
  255. let a = $('.imgList>ul').index($(v).parent());
  256. if($(v).parent().find('.active').length <= 0) {
  257. $('.leftList li').eq(a).find('.num').hide();
  258. $('.leftList li').eq(a).removeClass('select')
  259. } else {
  260. $('.leftList li').eq(a).find('.num').html('(' + $(v).parent().find('.active').length + ')');
  261. }
  262. }
  263. })
  264. var split = deletId.split("_");
  265. $.each(datalist, function(index_1, val_1) {
  266. if(split[0] == val_1.id) {
  267. if(chooseArr.length > 0) {
  268. var ifOf = true;
  269. for(var i = 0; i < chooseArr.length; i++) {
  270. if(chooseArr[i].id == split[0]) {
  271. ifOf = false;
  272. chooseArr[i].list.remove(deletId);
  273. $.each(val_1.bowuguan, function(b, name) {
  274. if(deletId == name.id) {
  275. chooseArr[i].bName.remove(name.name);
  276. }
  277. })
  278. if(chooseArr[i].list.length == 0) {
  279. chooseArr.remove(chooseArr[i])
  280. } else {
  281. chooseArr[i].num--;
  282. }
  283. break;
  284. }
  285. }
  286. for(var i = 0; i < chooseArr.length; i++) {
  287. chooseArr[i].bNum = idList2;
  288. for(var j = 0; j <= chooseArr[i].bName; j++) {
  289. cseArr += '<li><span class="text">' + chooseArr[i].bName[j] + '</span><span class="closeIcon"><img src="img/close.png"/></span></li>'
  290. }
  291. }
  292. $('.chooseName').html(cseArr)
  293. // chooseName
  294. if(ifOf) {
  295. var info = {
  296. 'id': '',
  297. 'name': '',
  298. 'cityName': '',
  299. 'num': '',
  300. 'bName': [],
  301. 'bUrl': [],
  302. 'list': [],
  303. 'bNum': '',
  304. }
  305. info.id = val_1.id;
  306. info.name = val_1.pinyin;
  307. info.cityName = val_1.name
  308. info.num = 1;
  309. info.bNum = 1;
  310. info.list = [];
  311. info.list.remove(deletId);
  312. $.each(val_1.bowuguan, function(b, name) {
  313. if(deletId == name.id) {
  314. info.bName.remove(name.name);
  315. }
  316. })
  317. $.each(val_1.bowuguan, function(b, name) {
  318. if(deletId == name.id) {
  319. info.bUrl.remove(name.url);
  320. }
  321. })
  322. chooseArr.push(info);
  323. }
  324. } else {
  325. var info = {
  326. 'id': '',
  327. 'name': '',
  328. 'cityName': '',
  329. 'num': '',
  330. 'bName': [],
  331. 'bUrl': [],
  332. 'list': [],
  333. 'bNum': '',
  334. }
  335. info.id = val_1.id;
  336. info.name = val_1.pinyin;
  337. info.cityName = val_1.name
  338. info.num = 1;
  339. info.list = [];
  340. info.list.remove(deletId);
  341. $.each(val_1.bowuguan, function(b, name) {
  342. if(deletId == name.id) {
  343. info.bName.remove(name.name);
  344. }
  345. })
  346. $.each(val_1.bowuguan, function(b, name) {
  347. if(deletId == name.id) {
  348. info.bUrl.remove(name.url);
  349. }
  350. })
  351. info.bNum = 1;
  352. chooseArr.push(info);
  353. console.log(info)
  354. console.log(chooseArr)
  355. }
  356. }
  357. })
  358. console.log(chooseArr)
  359. xuanzhong()
  360. }
  361. function xuanzhong() {
  362. $('.tips').fadeOut(0);
  363. cseArr = '';
  364. $.each(chooseArr, function(ind, vals) {
  365. var dist = vals.bName.length;
  366. for(var j = 0; j < dist; j++) {
  367. console.log(j)
  368. cseArr += '<li><span class="text">' + vals.bName[j] + '</span><span rightid=' + vals.list[j] + ' class="closeIcon"><img src="img/close.png"/></span></li>'
  369. }
  370. });
  371. $('.chooseName').html(cseArr)
  372. }
  373. $('.chooseName').on('click', '.closeIcon', function() {
  374. console.log('111')
  375. $(this).removeClass('active');
  376. let index = idList.indexOf($(this).attr('rightid'))
  377. delet(idList[index], index)
  378. })
  379. })
  380. }
  381. var clickState = true;
  382. $('.deepBtn').click(function() {
  383. // console.log(chooseArr)
  384. if(chooseArr.length == 0) {
  385. $('.tips').fadeIn(500);
  386. setTimeout(function() {
  387. $('.tips').fadeOut(1000);
  388. }, 1000)
  389. } else {
  390. localStorage.setItem("chooseArr", JSON.stringify(chooseArr));
  391. console.log(chooseArr)
  392. // location.replace("http://h5.qishichuangke.cn/html5/zxxt/index/index-world");
  393. window.location.href = "worldShare.html"
  394. }
  395. })
  396. </script>