updateArea.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787
  1. $(function () {
  2. // 后端数据结构
  3. // var areaData = {
  4. // 'data': {
  5. // // 选择的数量
  6. // 'area': {
  7. // '北京': [],
  8. // '河南': [
  9. // '洛阳市',
  10. // '驻马店市',
  11. // '周口市',
  12. // '郑州市'
  13. // ],
  14. // '湖南':['长沙市'],
  15. // '澳门': [],
  16. // '甘肃': []
  17. // },
  18. // 'buyset': {
  19. // // 购买的全省的数量(不带市)
  20. // 'areacount': 7,
  21. // 'buyerclasscount': 11,
  22. // // 购买的城市
  23. // 'citys': {
  24. // '河南': 4,
  25. // '湖南': 3,
  26. // '吉林': 2
  27. // }
  28. // }
  29. // },
  30. // 'errMsg': '',
  31. // 'success': true
  32. // };
  33. var areaData = {
  34. 'data': {
  35. // 选择的数量
  36. 'area': {},
  37. 'buyset': {
  38. // 购买的全省的数量(不带市)
  39. 'areacount': 7,
  40. 'buyerclasscount': 11,
  41. // 购买的城市
  42. 'citys': {}
  43. }
  44. },
  45. 'errMsg': '',
  46. 'success': true
  47. };
  48. // 已经购买过的城市数量
  49. let alreadyBuy = {
  50. province: {
  51. totalCount: 0,
  52. selectedCount: 0
  53. },
  54. city: {
  55. totalCount: 0,
  56. selectedCount: 0
  57. }
  58. }
  59. // 新增城市数量(排除修改的数量)
  60. let newlyAdded = {
  61. province: 0,
  62. city: 0
  63. }
  64. // ----------------- 以下定义功能函数 ----------------------------
  65. function createMoreCity(arr) {
  66. var tempHtml = arr.map(function (v) {
  67. return '<button class="city">' + v.name + '</button>'
  68. }).join('')
  69. return tempHtml
  70. }
  71. // 新增求值 ---- 统计数量,不做视图操作
  72. function getResult(callback) {
  73. if (areaData.data.buyset.areacount === -1) {
  74. $('.result_text.add_new .added-info').hide()
  75. return
  76. }
  77. // 升级新增清空
  78. $('.result_text.add_new .added-info').text('')
  79. let isWholeSelected = $('.tab.whole input').is(':checked')
  80. let isWholeDisabled = $('.tab.whole input').prop('disabled')
  81. // 已购买省份改变的数量
  82. let dBuySetProvinceCount = 0
  83. // 已购买省份改变的数量
  84. let dAddedProvinceCount = 0
  85. // 已购买城市改变的数量
  86. let dBuySetCityCount = 0
  87. // 新增城市的数量
  88. let dAddedCityCount = 0
  89. $('.area-list li:not(.index)').each(function(i, dom){
  90. if ($(dom).children('.tab').hasClass('whole')) return true
  91. // 统计非全国的数量
  92. // 没有'data-buy-city-count'属性的 $(dom).attr('data-buy-city-count') 为undefined
  93. if ($(dom).attr('data-buy-city-count')) {
  94. /******** 此处判断的是已购买的城市下的 ********************/
  95. // 获取购买城市的数量
  96. let buyCount = $(dom).attr('data-buy-city-count') - 0 // 隐式转换成Number
  97. // 获取城市不可点击的数量
  98. let alreadySelectedCount = $(dom).find('button[disabled]').length
  99. // 选择城市的数量(包括不可点击的)
  100. let hasActiveCount = $(dom).find('button.active').length
  101. if (hasActiveCount > buyCount) {
  102. // dBuySetCityCount += buyCount
  103. // dAddedCityCount += (hasActiveCount - buyCount)
  104. if (alreadySelectedCount - hasActiveCount === 0) {
  105. dBuySetCityCount += buyCount
  106. dBuySetProvinceCount ++
  107. } else {
  108. dBuySetCityCount += buyCount
  109. dAddedCityCount += (hasActiveCount - buyCount)
  110. }
  111. } else {
  112. // 操作已购买的数量
  113. dBuySetCityCount += hasActiveCount
  114. }
  115. } else {
  116. // 是不是直辖市或自治区,在有data-buy-count没必要判断
  117. let hasCities = $(dom).find('.tab').hasClass('municipality')
  118. // 是否购买过该省份(还需要判断该省份下面的城市是否全部disabled --- 同时满足才算购买过全省)
  119. let provinceInput = $(dom).find('input')
  120. // 循环着的当前的省份是否可选 和 是否被选中
  121. let isBoughtProvince = provinceInput.prop('disabled')
  122. let isChecked = provinceInput.is(':checked')
  123. // 可得到已经购买的省份的数量(循环完成后可得到,循环过程中的值可能不全)
  124. // 判断是否为购买过的城市
  125. if (isBoughtProvince) {
  126. // 将已购买(选中但不能单击的)城市选中
  127. if (isChecked) {
  128. dBuySetProvinceCount ++
  129. }
  130. } else {
  131. // 判断是否是直辖市或自治区(省份下面没有城市的和有城市的分开计算)
  132. if (hasCities) {
  133. // 直辖市、自治区 -----直接进行省份的操作
  134. // 并且没有购买过该省的,并且选中的
  135. if (isChecked) {
  136. dAddedProvinceCount ++
  137. }
  138. } else {
  139. // 带有市的省份城市(该省份下以前没有购买过任何城市)
  140. // 两种情况:1. 全选 2. 不全选
  141. let allCityLength = $(dom).find('button').length
  142. let otherTotalAddCount = $(dom).find('button.active').length
  143. if (allCityLength === otherTotalAddCount && isChecked) {
  144. // 选中了省份下的所有城市
  145. dAddedProvinceCount ++
  146. } else {
  147. // 对城市做新增操作
  148. dAddedCityCount += otherTotalAddCount
  149. }
  150. }
  151. }
  152. }
  153. })
  154. // 循环完成判断已经选择的省份数量 是否 大于购买过的数量
  155. if (dBuySetProvinceCount + dAddedProvinceCount > alreadyBuy.province.totalCount) {
  156. // 如果已选择的数量和新增的数量大于已购买过的数量,说明我有购买新的城市
  157. dAddedProvinceCount -= (alreadyBuy.province.totalCount - dBuySetProvinceCount)
  158. dBuySetProvinceCount = alreadyBuy.province.totalCount
  159. } else {
  160. dBuySetProvinceCount += dAddedProvinceCount
  161. dAddedProvinceCount = 0
  162. }
  163. // 已购买城市下选项改变,状态更新
  164. alreadyBuy.city.selectedCount = dBuySetCityCount
  165. newlyAdded.city = dAddedCityCount
  166. alreadyBuy.province.selectedCount = dBuySetProvinceCount
  167. newlyAdded.province = dAddedProvinceCount
  168. callback && callback()
  169. setDataInResult()
  170. // 全国被选中了
  171. if (isWholeSelected && !isWholeDisabled) {
  172. $('.result_text.add_new .added-info').text('全国')
  173. $('.result_text.add_new').show()
  174. isLockedTipButtons(false)
  175. }
  176. }
  177. function setDataInResult() {
  178. let buySetInfo = {
  179. p: `省级区域${alreadyBuy.province.selectedCount}/${alreadyBuy.province.totalCount}、`,
  180. c: `地市${alreadyBuy.city.selectedCount}/${alreadyBuy.city.totalCount}`
  181. }
  182. let addedInfo = {
  183. p: `省级区域 ${newlyAdded.province}、`,
  184. c: `地市 ${newlyAdded.city}`
  185. }
  186. // 修改数量并进行重新赋值
  187. $('.result_text.already .buy-set-info').text(buySetInfo.p + buySetInfo.c)
  188. // 升级新增赋值
  189. $('.result_text.add_new .added-info').text(addedInfo.p + addedInfo.c)
  190. if (newlyAdded.province !== 0 || newlyAdded.city !== 0) {
  191. $('.result_text.add_new').show()
  192. isLockedTipButtons(false)
  193. } else {
  194. $('.result_text.add_new').hide()
  195. isLockedTipButtons(true)
  196. }
  197. }
  198. // 求需要M的数量
  199. window.getResultWithMCount = getResultWithMCount
  200. function getResultWithMCount() {
  201. let added = {
  202. country: 0,
  203. province: 0,
  204. city: {
  205. // '河南': 1,
  206. // '吉林': 1
  207. }
  208. }
  209. // 购买过的省份数量
  210. let buySetProvinceCount = $('.area-list').attr('data-buy-province-count') - 0 // 隐式转换成Number
  211. $('.area-list li:not(.index)').each(function(i, dom) {
  212. if ($(dom).children('.tab').hasClass('whole')) {
  213. // 判断是否被选中
  214. if ($(dom).find('input.other').is(':checked')) {
  215. added.country = -1
  216. added.province = 0
  217. added.city = {}
  218. return false
  219. }
  220. } else {
  221. added.country = 0
  222. let pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
  223. // 获取当前dom下有几个按钮有active样式(点亮和灰色按钮的总数)
  224. let activeButtonLength = $(dom).find('button.active').length
  225. // 判断该省是否有购买过的城市
  226. if ($(dom).attr('data-buy-city-count')) {
  227. let buyCityCount = $(dom).attr('data-buy-city-count') - 0
  228. // 获取城市不可点击的数量(灰色按钮的数量)
  229. let alreadySelectedCount = $(dom).find('button[disabled]').length
  230. // 得到你需要付钱的数量(可能是负值)
  231. let aCityCount = activeButtonLength - buyCityCount
  232. if (aCityCount > 0) {
  233. // 说明有购买的城市
  234. if (activeButtonLength - alreadySelectedCount === 0) {
  235. added.province ++
  236. } else {
  237. added.city[pName] = aCityCount
  238. }
  239. } else {
  240. // 选不到购买的个数
  241. }
  242. } else {
  243. // 判断是否是直辖市
  244. let isMunicipality = $(dom).find('.tab').hasClass('municipality')
  245. let allCitylength = $(dom).find('button').length
  246. if (isMunicipality) {
  247. if ($(dom).find('input').is(':checked')) {
  248. added.province ++
  249. }
  250. } else {
  251. if (activeButtonLength === allCitylength) {
  252. added.province ++
  253. } else {
  254. if (activeButtonLength !== 0) added.city[pName] = activeButtonLength
  255. }
  256. }
  257. }
  258. }
  259. })
  260. // 循环完成判断计算省份
  261. let aProvinceCount = added.province - buySetProvinceCount
  262. if (aProvinceCount > 0) {
  263. added.province = aProvinceCount
  264. } else {
  265. added.province = 0
  266. }
  267. return added
  268. }
  269. // 点亮的城市数量详情(需要省和城市名称)
  270. function getActiveCityDetail(state = '') {
  271. let isWholeCountry = $('.tab.whole input').is(':checked')
  272. if (isWholeCountry) {
  273. // 选择全国
  274. let str = $('.area-list li .tab.whole .province').text().replace(/\s+ | [\r\n]/g, '')
  275. let obj = {}
  276. obj[str] = []
  277. return obj
  278. } else {
  279. let arr = []
  280. $('.area-list li:not(.index)').each(function(i, dom) {
  281. if ($(dom).children('.tab').hasClass('whole')) return
  282. let isMunicipality = $(dom).find('.tab').hasClass('municipality')
  283. let pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
  284. let selectedObj = {
  285. name: pName,
  286. children: []
  287. }
  288. // 是否是直辖市或自治区
  289. if (isMunicipality) {
  290. if ($(dom).find('input:not([disabled])').is(':checked')) {
  291. arr.push(selectedObj)
  292. }
  293. } else {
  294. let allCitylength = $(dom).find('button').length
  295. if (state === 'disabled') {
  296. // 判断是否全省被选中
  297. if ($(dom).find('button.active').length === allCitylength) {
  298. // 判断省下有没有不可点击的按钮
  299. if ($(dom).attr('data-buy-city-count')) {
  300. $(dom).find('button.active').each(function(c, dom) {
  301. let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
  302. selectedObj.children.push(cName)
  303. })
  304. if (selectedObj.children.length) {
  305. arr.push(selectedObj)
  306. }
  307. } else {
  308. arr.push(selectedObj)
  309. }
  310. } else {
  311. $(dom).find('button.active').each(function(c, dom) {
  312. let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
  313. selectedObj.children.push(cName)
  314. })
  315. if (selectedObj.children.length) {
  316. arr.push(selectedObj)
  317. }
  318. }
  319. } else {
  320. // 判断是否全省被选中
  321. if ($(dom).find('button.active:not([disabled])').length === allCitylength) {
  322. arr.push(selectedObj)
  323. } else {
  324. $(dom).find('button.active:not([disabled])').each(function(c, dom) {
  325. let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
  326. selectedObj.children.push(cName)
  327. })
  328. if (selectedObj.children.length) {
  329. arr.push(selectedObj)
  330. }
  331. }
  332. }
  333. }
  334. })
  335. // 处理arr
  336. // [
  337. // {
  338. // name: '安徽',
  339. // children: ["合肥市", "蚌埠市", "阜阳市"]
  340. // },
  341. // {
  342. // name: '海南',
  343. // children: ["三亚市", "文昌市"]
  344. // },
  345. // {
  346. // name: '河南',
  347. // children: ["郑州市", "信阳市"]
  348. // }
  349. // ]
  350. let selectedCityDetail = {}
  351. arr.forEach(function(item, i) {
  352. selectedCityDetail[item.name] = item.children
  353. })
  354. return selectedCityDetail
  355. }
  356. }
  357. // 初始选择的城市恢复,根据传入的p恢复为Disabled灰色按钮
  358. function renderSelectedCityDisabled(p = {}) {
  359. for (const k in p) {
  360. if (p[k].length == 0) {
  361. // 购买的省份
  362. $('.province').each(function () {
  363. let t = $(this).text().trim();
  364. if (k == t) {
  365. $(this).children('.checkbox').prop('checked',true).attr('disabled',true);
  366. $(this).parents('li').children('.tab_content').find('.city').addClass('active').attr('disabled',true);
  367. }
  368. })
  369. } else {
  370. $('.city').each(function () {
  371. let t = $(this).text().trim();
  372. p[k].forEach(v =>{
  373. if(v !== t) return
  374. // let that = $(this).parents('li').find('.tab:not(.municipality)');
  375. // 改变状态按钮
  376. $(this).addClass('active').attr('disabled',true).parent().siblings('.tab').find('input').addClass('half').attr('disabled',true);
  377. })
  378. })
  379. }
  380. }
  381. }
  382. // 初始选择的城市恢复,根据传入的p恢复为Active蓝色按钮
  383. // 需要放到init之后
  384. function renderSelectedCityActive(p = {}) {
  385. for (const k in p) {
  386. if (k === '全国') {
  387. $('.area-list li:not(.index):eq(0)').find('input').trigger('click')
  388. return
  389. }
  390. if (p[k].length == 0) {
  391. // 购买的省份
  392. $('.province').each(function () {
  393. let t = $(this).text().trim();
  394. if (k == t && p[k].length == 0) {
  395. $(this).parent().siblings().find('.city').trigger('click')
  396. }
  397. })
  398. } else {
  399. $('.city').each(function () {
  400. let t = $(this).text().trim();
  401. p[k].forEach(v =>{
  402. if(v !== t) return
  403. // let that = $(this).parents('li').find('.tab:not(.municipality)');
  404. // 改变状态按钮
  405. $(this).trigger('click')
  406. })
  407. })
  408. }
  409. }
  410. getResult()
  411. }
  412. function isLockedTipButtons(f) {
  413. $('.tips_btn button').prop('disabled', f)
  414. }
  415. // 根据数据进行求总数 --- 上方提示数据信息的初始化
  416. function initAlreadyBuy(p, buyset, citys) {
  417. // 此处在数据返回后根据数据进行求值
  418. if (buyset.areacount === -1) {
  419. $('.result_text.already .buy-set-info').text('全国')
  420. $('.result_text.add_new .added-info').hide().text('')
  421. }
  422. // 选择的省和市的数量
  423. for (let a in p) {
  424. if (p[a].length) {
  425. // 已经选择的市的数量
  426. alreadyBuy.city.selectedCount += p[a].length
  427. } else {
  428. // 已经选择的省的数量
  429. alreadyBuy.province.selectedCount ++
  430. }
  431. }
  432. // 购买的全省的数量(不包含市)
  433. alreadyBuy.province.totalCount = buyset.areacount;
  434. // 购买的城市数量
  435. for (const c in citys) {
  436. alreadyBuy.city.totalCount += citys[c]
  437. }
  438. // console.log(alreadyBuy)
  439. let buySetInfo = {
  440. p: `省级区域${alreadyBuy.province.selectedCount}/${alreadyBuy.province.totalCount}、`,
  441. c: `地市${alreadyBuy.city.selectedCount}/${alreadyBuy.city.totalCount}`
  442. }
  443. $('.result_text.already .buy-set-info').text(buySetInfo.p + buySetInfo.c)
  444. $('.result_text.add_new .added-info').text('')
  445. }
  446. // 初始化方法
  447. function init() {
  448. let data = areaData.data
  449. let buyset = data.buyset;
  450. let citys = buyset.citys;
  451. initAlreadyBuy(data.area, buyset, citys)
  452. // 1.根据返回数据进行渲染
  453. if (buyset.areacount === -1) {
  454. // 购买全国
  455. if (Object.keys(data.area).length === 0) {
  456. // 选中全国
  457. // 不能操作
  458. $('.checkbox.other').prop('disabled', true).prop('checked', true)
  459. $('.checkbox:not(.other)').prop('disabled', true)
  460. $('.city').attr('disabled', true)
  461. } else {
  462. renderSelectedCityDisabled(data.area)
  463. }
  464. isLockedTipButtons(true)
  465. $('.result_text.already .buy-set-info').text('全国')
  466. } else {
  467. // 购买的非全国
  468. renderSelectedCityDisabled(data.area)
  469. }
  470. // 2.根据数据绑定data-buy-count,并赋值
  471. // area-list上绑定购买的省份数量
  472. $('.area-list').attr('data-buy-province-count', buyset.areacount)
  473. $('.area-list li:not(.index)').each(function(i, dom){
  474. if ($(dom).children('.tab').hasClass('whole')) return
  475. // 获取省的名字,并去空格.回车.换行
  476. let provinceName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
  477. for (let c in citys) {
  478. // let areaLeng;
  479. // try{
  480. // areaLeng = data.area[c].length
  481. // if (c === provinceName && areaLeng !== 0) {
  482. // $(dom).attr('data-buy-city-count', citys[c])
  483. // }
  484. // }catch(e){
  485. //TODO handle the exception
  486. if (c === provinceName) {
  487. $(dom).attr('data-buy-city-count', citys[c])
  488. }
  489. // }
  490. }
  491. })
  492. $('.add_new').hide()
  493. getResult()
  494. }
  495. // ----------------- 以下绑定事件 ----------------------------
  496. // 0.渲染城市列表
  497. $(".select-area-box ul li:not('.index')").each(function () {
  498. var text = $(this).find(".province").text().trim()
  499. var data = null
  500. chinaMapJSON.some(function (v) {
  501. data = v
  502. return v.name.indexOf(text) !== -1
  503. })
  504. var box = $(this).find('div.tab_content')
  505. var html = createMoreCity(data.city)
  506. box.html(html)
  507. })
  508. // fastClick初始化: https://github.com/ftlabs/fastclick
  509. // FastClick.attach(document.body)
  510. // 1.省下拉市
  511. let isAnimating = false
  512. $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
  513. if (isAnimating) return
  514. isAnimating = true
  515. if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
  516. $(this).children().children('i').css({
  517. "display": "inline-block",
  518. "transform": "rotate(0)"
  519. })
  520. } else {
  521. $(this).children().children('i').css({
  522. "display": "inline-block",
  523. "transform": "rotate(-180deg)"
  524. })
  525. }
  526. $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
  527. $(this).parent().siblings().children('.tab').removeClass('selected');
  528. setTimeout(() => {
  529. isAnimating = false
  530. }, 500)
  531. })
  532. // 2.点击全国按钮onchange事件;
  533. $('.checkbox.other').on('change', function () {
  534. let isChecked = $(this).is(':checked')
  535. if(isChecked){
  536. $(this).prop('checked',true);
  537. $('.checkbox:not(.other):not([disabled])').prop('checked',false).removeClass('half');
  538. $('.city:not([disabled])').removeClass('active');
  539. $('.tab_content').slideUp();
  540. }
  541. getResult()
  542. })
  543. // 3.点击非全国按钮onchange事件
  544. $('.checkbox:not(.other)').on('change', function () {
  545. $('.checkbox.other').prop('checked',false);
  546. let isChecked = $(this).is(':checked');
  547. if(isChecked){
  548. $(this).prop('checked',true).removeClass('half');
  549. $(this).parents('li').find('.city').addClass('active');
  550. // 控制点击checkbox时候是否展开下方的城市列表
  551. // $(this).parent().parent('.tab:not(.municipality)').siblings('.tab_content').slideDown();
  552. }else{
  553. $(this).prop('checked',false);
  554. $(this).parents('li').find('.city').removeClass('active');
  555. };
  556. getResult();
  557. showOther();
  558. })
  559. // 4.点击半选按钮触发的事件
  560. // $('.checkbox.half').on('change', function () {
  561. // $('.checkbox.other').prop('checked', false)
  562. // let isChecked = $(this).is(':checked')
  563. // $(this).prop('checked', isChecked).removeClass('half')
  564. // console.log("!1")
  565. // getResult();
  566. // })
  567. // 5.点击城市按钮触发的事件
  568. $('.tab_content').on('click', '.city', function () {
  569. // 全国取消选中
  570. $('.checkbox.other').prop('checked',false);
  571. $(this).toggleClass('active')
  572. // 省下所有选中的地市数量
  573. let activeCityLength = $(this).parent().find('.city.active').length;
  574. // 省下一共有几个城市
  575. let cityLength = $(this).parent().find('.city').length;
  576. let oInput = $(this).parents('li').find('input.checkbox')
  577. if (activeCityLength === cityLength) {//当选中的城市数量等于该省下所有城市总数时,即为全选
  578. if ($(this).siblings('.city[disabled]').length === 0) {
  579. oInput.removeClass('half').prop('checked', true)
  580. }
  581. } else if (activeCityLength === 0){
  582. oInput.prop('checked', false).removeClass('half')
  583. } else {//半选
  584. oInput.prop("checked",false).addClass('half')
  585. }
  586. getResult();
  587. showCityTips(this)
  588. })
  589. // 6. 重置按钮点击事件
  590. $('.reset-btn').on('click', function() {
  591. // alreadyBuy = {
  592. // province: {
  593. // totalCount: 0,
  594. // selectedCount: 0
  595. // },
  596. // city: {
  597. // totalCount: 0,
  598. // selectedCount: 0
  599. // }
  600. // }
  601. // newlyAdded = {
  602. // province: 0,
  603. // city: 0
  604. // }
  605. sessionStorage.removeItem("vipAddCount");
  606. // 数组置0,在重新从数据中计算初始状态结果并返回
  607. for (let i in alreadyBuy) {
  608. for(let ii in alreadyBuy[i]) {
  609. alreadyBuy[i][ii] = 0
  610. }
  611. }
  612. for (let j in newlyAdded) {
  613. newlyAdded[j] = 0
  614. }
  615. $(".select-area-box .tab:not(.municipality) .icon").css({
  616. "display": "inline-block",
  617. "transform": "rotate(0)"
  618. });
  619. $('.checkbox').prop('checked', false).removeAttr('disabled');
  620. $('.city').removeClass('active');
  621. $('input').removeClass('half')
  622. $('.tab_content').slideUp();
  623. $('.optional').remove()
  624. init();
  625. $(".tips_d_text").hide();
  626. $(".btns .reset-btn").prop("disabled",false);
  627. $(".btns .save-btn").prop("disabled",false);
  628. })
  629. // 7.锚点跳转
  630. $("body").on('click', '.slide a', function () {
  631. var s = $(this).html()
  632. if (s == '#') {
  633. return;
  634. }
  635. document.querySelector('#' + s).scrollIntoView({
  636. block: 'center'
  637. });
  638. })
  639. // 阻止input checkbox选中取消 触发父元素下拉事件
  640. $('.checkbox').click(function (e) {
  641. e.stopPropagation();
  642. })
  643. function showCityTips(dom){
  644. let isAll = $(".area-list").attr("data-buy-province-count");
  645. if(Number(isAll)===-1){
  646. return
  647. }
  648. let activeCityLength = $(dom).parent().find('.city.active').length;
  649. let selectedCityLength = $(dom).parent().find('.city.active:not([disabled])').length;
  650. let disabledCityLength = $(dom).parent().find('.city[disabled]').length;
  651. let cityLength = $(dom).parent().find('.city').length;
  652. // let dataCount = Number($(dom).parent().parent().attr("data-buy-city-count"));
  653. // if(dataCount === undefined){
  654. // dataCount = 0;
  655. // }else{
  656. // if(Number(dataCount) !== disabledCityLength){
  657. // if(disabledCityLength === 0){
  658. // dataCount = 0;
  659. // }else{
  660. // dataCount = dataCount - disabledCityLength;
  661. // }
  662. // }
  663. // }
  664. // let countShow = 0;
  665. let showCounts = selectedCityLength + disabledCityLength;
  666. // let showCount = selectedCityLength - dataCount;
  667. if(showCounts > 2){
  668. if(selectedCityLength === 0){
  669. $(".tips_d_text").hide();
  670. }else{
  671. $(".tips_d_text").text("已选择"+showCounts+"个市,建议购买“全省”");
  672. $(".tips_d_text").show();
  673. }
  674. }else{
  675. $(".tips_d_text").hide();
  676. }
  677. if(showCounts === cityLength){
  678. showOther();
  679. }
  680. }
  681. function showOther(){
  682. let areaCount = areaData.data.buyset.areacount;
  683. let areaSelect = $('.checkbox:checked:not([disabled])').length;
  684. if(areaSelect === 0){
  685. $(".tips_d_text").hide();
  686. return
  687. }
  688. let showCounts = 0;
  689. if(areaCount === -1){
  690. $(".tips_d_text").hide();
  691. }else{
  692. showCounts = newlyAdded.province + areaCount;
  693. }
  694. if(showCounts > 9){
  695. $(".tips_d_text").text("已选择"+showCounts+"个省,建议购买“全国”")
  696. $(".tips_d_text").show();
  697. }else{
  698. $(".tips_d_text").hide();
  699. }
  700. }
  701. // ----------------------- 以下数据交互 ------------------
  702. $DoPost("/subscribepay/renewUpgrade/getBuyMsg", {}, function (data) {
  703. if(data){
  704. areaData["data"] = {
  705. "area" : data.area,
  706. "buyset" : data.buyset,
  707. }
  708. init();
  709. }
  710. }, false);
  711. // 确认按钮事件
  712. $('.save-btn').on('click', function(){
  713. // 获取added城市详情
  714. var activeCityDetail = getActiveCityDetail()
  715. let areaCount = getResultWithMCount()
  716. // console.log("111",areaCount)
  717. // console.log(JSON.stringify(activeCityDetail))
  718. // console.log(activeCityDetail)
  719. // console.log(areaData)
  720. // console.log(alreadyBuy)
  721. sessionStorage.vipAddCount = JSON.stringify(newlyAdded);
  722. sessionStorage.vipSubSelectCity = newlyAdded.city;
  723. sessionStorage.vipSubSelectAreaUpgrade = JSON.stringify(activeCityDetail);
  724. sessionStorage.vipSubSelectAreaAdd = JSON.stringify(areaCount);
  725. history.go(-1);
  726. })
  727. //
  728. if(sessionStorage.vipSubSelectAreaUpgrade!==undefined&&sessionStorage.vipSubSelectAreaUpgrade!==""){
  729. let areaObj = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
  730. renderSelectedCityActive(areaObj);
  731. }
  732. // 求需要M的城市数量
  733. // getResultWithMCount()
  734. // 获取点亮的城市的列表详情(带省名和城市名)
  735. // getActiveCityDetail()
  736. // 回显为蓝色激活样式
  737. // renderSelectedCityActive()
  738. // 回显为灰色不可点击样式
  739. // renderSelectedCityDisabled()
  740. })