jy/src/web/staticres/vipsubscribe/js/updateArea.js

$(function () {
    // 后端数据结构
//  var areaData = {
//      'data': {
//          // 选择的数量
//          'area': {
//              '北京': [],
//              '河南': [
//                  '洛阳市',
//                  '驻马店市',
//                  '周口市',
//                  '郑州市'
//              ],
//              '湖南':['长沙市'],
//              '澳门': [],
//              '甘肃': []
//          },
//          'buyset': {
//              // 购买的全省的数量(不带市)
//              'areacount': 7,
//              'buyerclasscount': 11,
//              // 购买的城市
//              'citys': {
//                  '河南': 4,
//                  '湖南': 3,
//                  '吉林': 2
//              }
//          }
//      },
//      'errMsg': '',
//      'success': true
//  };
    var areaData = {
        'data': {
            // 选择的数量
            'area': {},
            'buyset': {
                // 购买的全省的数量(不带市)
                'areacount': 7,
                'buyerclasscount': 11,
                // 购买的城市
                'citys': {}
            }
        },
        'errMsg': '',
        'success': true
    };
    

    // 已经购买过的城市数量
    let alreadyBuy = {
        province: {
            totalCount: 0,
            selectedCount: 0
        },
        city: {
            totalCount: 0,
            selectedCount: 0
        }
    }
    // 新增城市数量（排除修改的数量）
    let newlyAdded = {
        province: 0,
        city: 0
    }
	
    // ----------------- 以下定义功能函数 ----------------------------
    function createMoreCity(arr) {
        var tempHtml = arr.map(function (v) {
            return '<button class="city">' + v.name + '</button>'
        }).join('')
        return tempHtml
    }

    // 新增求值 ---- 统计数量，不做视图操作
    function getResult(callback) {
        if (areaData.data.buyset.areacount === -1) {
            $('.result_text.add_new .added-info').hide()
            return
        }
        // 升级新增清空
        $('.result_text.add_new .added-info').text('')

        let isWholeSelected = $('.tab.whole input').is(':checked')
        let isWholeDisabled = $('.tab.whole input').prop('disabled')
        
        // 已购买省份改变的数量
        let dBuySetProvinceCount = 0
        // 已购买省份改变的数量
        let dAddedProvinceCount = 0
        
        // 已购买城市改变的数量
        let dBuySetCityCount = 0
        // 新增城市的数量
        let dAddedCityCount = 0
        $('.area-list li:not(.index)').each(function(i, dom){
            if ($(dom).children('.tab').hasClass('whole')) return true
            // 统计非全国的数量
            // 没有'data-buy-city-count'属性的 $(dom).attr('data-buy-city-count') 为undefined
            if ($(dom).attr('data-buy-city-count')) {
                /********  此处判断的是已购买的城市下的  ********************/
                // 获取购买城市的数量
                let buyCount = $(dom).attr('data-buy-city-count') - 0   // 隐式转换成Number
                // 获取城市不可点击的数量
                let alreadySelectedCount = $(dom).find('button[disabled]').length
                // 选择城市的数量(包括不可点击的)
                let hasActiveCount = $(dom).find('button.active').length

                if (hasActiveCount > buyCount) {
                    dBuySetCityCount += buyCount
                    dAddedCityCount += (hasActiveCount - buyCount)
                } else {
                    // 操作已购买的数量
                    dBuySetCityCount += hasActiveCount
                }
            } else {
                // 是不是直辖市或自治区，在有data-buy-count没必要判断
                let hasCities = $(dom).find('.tab').hasClass('municipality')
                // 是否购买过该省份(还需要判断该省份下面的城市是否全部disabled --- 同时满足才算购买过全省)
                let provinceInput = $(dom).find('input')
                // 循环着的当前的省份是否可选 和 是否被选中
                let isBoughtProvince = provinceInput.prop('disabled')
                let isChecked = provinceInput.is(':checked')

                // 可得到已经购买的省份的数量(循环完成后可得到，循环过程中的值可能不全)

                // 判断是否为购买过的城市
                if (isBoughtProvince) {
                    // 将已购买(选中但不能单击的)城市选中
                    if (isChecked) {
                        dBuySetProvinceCount ++
                    }
                } else {
                    // 判断是否是直辖市或自治区(省份下面没有城市的和有城市的分开计算)
                    if (hasCities) {
                        // 直辖市、自治区 -----直接进行省份的操作
                        // 并且没有购买过该省的，并且选中的
                        if (isChecked) {
                            dAddedProvinceCount ++
                        }
                    } else {
                        // 带有市的省份城市(该省份下以前没有购买过任何城市)
                        // 两种情况：1. 全选    2. 不全选
                        let allCityLength = $(dom).find('button').length
                        let otherTotalAddCount = $(dom).find('button.active').length

                        if (allCityLength === otherTotalAddCount && isChecked) {
                            // 选中了省份下的所有城市
                            dAddedProvinceCount ++
                        } else {
                            // 对城市做新增操作
                            dAddedCityCount += otherTotalAddCount
                        }
                    }
                }
            }
        })

        // 循环完成判断已经选择的省份数量 是否 大于购买过的数量
        if (dBuySetProvinceCount + dAddedProvinceCount > alreadyBuy.province.totalCount) {
            // 如果已选择的数量和新增的数量大于已购买过的数量，说明我有购买新的城市
            dAddedProvinceCount -= (alreadyBuy.province.totalCount - dBuySetProvinceCount)
            dBuySetProvinceCount = alreadyBuy.province.totalCount
        } else {
            dBuySetProvinceCount += dAddedProvinceCount
            dAddedProvinceCount = 0
        }

        // 已购买城市下选项改变，状态更新
        alreadyBuy.city.selectedCount = dBuySetCityCount
        newlyAdded.city = dAddedCityCount

        alreadyBuy.province.selectedCount = dBuySetProvinceCount
        newlyAdded.province = dAddedProvinceCount

        callback && callback()

        setDataInResult()

        // 全国被选中了
        if (isWholeSelected && !isWholeDisabled) {
            $('.result_text.add_new .added-info').text('全国')
            $('.result_text.add_new').show()
            isLockedTipButtons(false)
        }
    }

    function setDataInResult() {
        let buySetInfo = {
            p: `省级区域${alreadyBuy.province.selectedCount}/${alreadyBuy.province.totalCount}、`,
            c: `地市${alreadyBuy.city.selectedCount}/${alreadyBuy.city.totalCount}`
        }
        let addedInfo = {
            p: `省级区域 ${newlyAdded.province}、`,
            c: `地市 ${newlyAdded.city}`
        }

        // 修改数量并进行重新赋值
        $('.result_text.already .buy-set-info').text(buySetInfo.p + buySetInfo.c)
        // 升级新增赋值
        $('.result_text.add_new .added-info').text(addedInfo.p + addedInfo.c)

        if (newlyAdded.province !== 0 || newlyAdded.city !== 0) {
            $('.result_text.add_new').show()
            isLockedTipButtons(false)
        } else {
            $('.result_text.add_new').hide()
            isLockedTipButtons(true)
        }
    }

    // 求需要M的数量
    function getResultWithMCount() {
        let added = {
            country: 0,
            province: 0,
            city: {
                // '河南': 1,
                // '吉林': 1
            }
        }
        // 购买过的省份数量
        let buySetProvinceCount = $('.area-list').attr('data-buy-province-count') - 0  // 隐式转换成Number
        
        $('.area-list li:not(.index)').each(function(i, dom) {
            if ($(dom).children('.tab').hasClass('whole')) {
                // 判断是否被选中
                if ($(dom).find('input.other').is(':checked')) {
                    added.country = -1
                    added.province = 0
                    added.city = {}
                    return false
                }
            } else {
                added.country = 0
                let pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
                // 获取当前dom下有几个按钮有active样式
                let activeButtonLength = $(dom).find('button.active').length

                // 判断该省是否有购买过的城市
                if ($(dom).attr('data-buy-city-count')) {
                    let buyCityCount = $(dom).attr('data-buy-city-count') - 0
                    let aCityCount = activeButtonLength - buyCityCount
                    if (aCityCount > 0) {
                        added.city[pName] = aCityCount
                    } else {
                        // 选不到购买的个数
                    }
                } else {
                    // 判断是否是直辖市
                    let isMunicipality = $(dom).find('.tab').hasClass('municipality')
                    let allCitylength = $(dom).find('button').length

                    if (isMunicipality) {
                        if ($(dom).find('input').is(':checked')) {
                            added.province ++
                        }
                    } else {
                        if (activeButtonLength === allCitylength) {
                            added.province ++
                        } else {
                            if (activeButtonLength !== 0) added.city[pName] = activeButtonLength
                        }
                    }
                }
            }
        })

        // 循环完成判断计算省份
        let aProvinceCount = added.province - buySetProvinceCount
        if (aProvinceCount > 0) {
            added.province = aProvinceCount
        } else {
            added.province = 0
        }
        return added
    }

    // 点亮的城市数量详情(需要省和城市名称)
    function getActiveCityDetail(state = '') {
        let isWholeCountry = $('.tab.whole input').is(':checked')
        if (isWholeCountry) {
            // 选择全国
            let str = $('.area-list li .tab.whole .province').text().replace(/\s+ | [\r\n]/g, '')
            let obj = {}
            obj[str] = []
            return obj
        } else {
            let arr = []
            $('.area-list li:not(.index)').each(function(i, dom) {
                if ($(dom).children('.tab').hasClass('whole')) return
                let isMunicipality = $(dom).find('.tab').hasClass('municipality')
                let pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
                let selectedObj = {
                    name: pName,
                    children: []
                }
                
                // 是否是直辖市或自治区
                if (isMunicipality) {
                    if ($(dom).find('input:not([disabled])').is(':checked')) {
                        arr.push(selectedObj)
                    }
                } else {
                    let allCitylength = $(dom).find('button').length

                    if (state === 'disabled') {
                        // 判断是否全省被选中
                        if ($(dom).find('button.active').length === allCitylength) {
                            // 判断省下有没有不可点击的按钮
                            if ($(dom).attr('data-buy-city-count')) {
                                $(dom).find('button.active').each(function(c, dom) {
                                    let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
                                    selectedObj.children.push(cName)
                                })
                                if (selectedObj.children.length) {
                                    arr.push(selectedObj)
                                }
                            } else {
                                arr.push(selectedObj)
                            }
                        } else {
                            $(dom).find('button.active').each(function(c, dom) {
                                let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
                                selectedObj.children.push(cName)
                            })
                            if (selectedObj.children.length) {
                                arr.push(selectedObj)
                            }
                        }
                    } else {
                        // 判断是否全省被选中
                        if ($(dom).find('button.active:not([disabled])').length === allCitylength) {
                            arr.push(selectedObj)
                        } else {
                            $(dom).find('button.active:not([disabled])').each(function(c, dom) {
                                let cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
                                selectedObj.children.push(cName)
                            })
                            if (selectedObj.children.length) {
                                arr.push(selectedObj)
                            }
                        }
                    }
                }
            })

            // 处理arr
            // [
            //     {
            //         name: '安徽',
            //         children: ["合肥市", "蚌埠市", "阜阳市"]
            //     },
            //     {
            //         name: '海南',
            //         children: ["三亚市", "文昌市"]
            //     },
            //     {
            //         name: '河南',
            //         children: ["郑州市", "信阳市"]
            //     }
            // ]
            let selectedCityDetail = {}
            arr.forEach(function(item, i) {
                selectedCityDetail[item.name] = item.children
            })
            return selectedCityDetail
        }
    }

    // 初始选择的城市恢复，根据传入的p恢复为Disabled灰色按钮
    function renderSelectedCityDisabled(p = {}) {
        for (const k in p) {
            if (p[k].length == 0) {
                // 购买的省份
                $('.province').each(function () {
                    let t = $(this).text().trim();
                    if (k == t) {
                        $(this).children('.checkbox').prop('checked',true).attr('disabled',true);
                        $(this).parents('li').children('.tab_content').find('.city').addClass('active').attr('disabled',true);
                    }
                })
            } else {
                $('.city').each(function () {
                    let t = $(this).text().trim();
                    p[k].forEach(v =>{
                        if(v !== t) return
                        // let that = $(this).parents('li').find('.tab:not(.municipality)');
                        // 改变状态按钮
                        $(this).addClass('active').attr('disabled',true).parent().siblings('.tab').find('input').addClass('half').attr('disabled',true);
                    })
                })
            }
        }
    }

    // 初始选择的城市恢复，根据传入的p恢复为Active蓝色按钮
    // 需要放到init之后
    function renderSelectedCityActive(p = {}) {
        for (const k in p) {
            if (k === '全国') {
                $('.area-list li:not(.index):eq(0)').find('input').trigger('click')
                return
            }
            
            if (p[k].length == 0) {
                // 购买的省份
                $('.province').each(function () {
                    let t = $(this).text().trim();
                    if (k == t && p[k].length == 0) {
                        $(this).parent().siblings().find('.city').trigger('click')
                    }
                })
            } else {
                $('.city').each(function () {
                    let t = $(this).text().trim();
                    p[k].forEach(v =>{
                        if(v !== t) return
                        // let that = $(this).parents('li').find('.tab:not(.municipality)');
                        // 改变状态按钮
                        $(this).trigger('click')
                    })
                })
            }
        }
        getResult()
    }

    function isLockedTipButtons(f) {
        $('.tips_btn button').prop('disabled', f)
    }

    // 根据数据进行求总数 --- 上方提示数据信息的初始化
    function initAlreadyBuy(p, buyset, citys) {
        // 此处在数据返回后根据数据进行求值
        if (buyset.areacount === -1) {
            $('.result_text.already .buy-set-info').text('全国')
            $('.result_text.add_new .added-info').hide().text('')
        }

        // 选择的省和市的数量
        for (let a in p) {
            if (p[a].length) {
                // 已经选择的市的数量
                alreadyBuy.city.selectedCount += p[a].length
            } else {
                // 已经选择的省的数量
                alreadyBuy.province.selectedCount ++
            }
        }

        // 购买的全省的数量（不包含市）
        alreadyBuy.province.totalCount = buyset.areacount;
        // 购买的城市数量
        for (const c in citys) {
            alreadyBuy.city.totalCount += citys[c]
        }
        // console.log(alreadyBuy)
        let buySetInfo = {
            p: `省级区域${alreadyBuy.province.selectedCount}/${alreadyBuy.province.totalCount}、`,
            c: `地市${alreadyBuy.city.selectedCount}/${alreadyBuy.city.totalCount}`
        }
        $('.result_text.already .buy-set-info').text(buySetInfo.p + buySetInfo.c)
        $('.result_text.add_new .added-info').text('')
    }

    // 初始化方法
    function init() {
        let data = areaData.data
        let buyset = data.buyset;
        let citys = buyset.citys;
        initAlreadyBuy(data.area, buyset, citys)
        // 1.根据返回数据进行渲染
        if (buyset.areacount === -1) {
            // 购买全国
            if (Object.keys(data.area).length === 0) {
                // 选中全国
                // 不能操作
                $('.checkbox.other').prop('disabled', true).prop('checked', true)
                $('.checkbox:not(.other)').prop('disabled', true)
                $('.city').attr('disabled', true)
            } else {
                renderSelectedCityDisabled(data.area)
            }
            isLockedTipButtons(true)
            $('.result_text.already .buy-set-info').text('全国')
        } else {
            // 购买的非全国
            renderSelectedCityDisabled(data.area)
        }
        // 2.根据数据绑定data-buy-count，并赋值
        // area-list上绑定购买的省份数量
        $('.area-list').attr('data-buy-province-count', buyset.areacount)
        $('.area-list li:not(.index)').each(function(i, dom){
            if ($(dom).children('.tab').hasClass('whole')) return
            // 获取省的名字，并去空格.回车.换行
            let provinceName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
            for (let c in citys) {
                if (c === provinceName) {
                    $(dom).attr('data-buy-city-count', citys[c])
                }
            }
        })
        $('.add_new').hide()
        getResult()
    }

    // ----------------- 以下绑定事件 ----------------------------
    // 0.渲染城市列表
    $(".select-area-box ul li:not('.index')").each(function () {
        var text = $(this).find(".province").text().trim()
        var data = null
        chinaMapJSON.some(function (v) {
            data = v
            return v.name.indexOf(text) !== -1
        })
        var box = $(this).find('div.tab_content')
        var html = createMoreCity(data.city)
        box.html(html)
    })
    // fastClick初始化: https://github.com/ftlabs/fastclick
	//  FastClick.attach(document.body)
    // 1.省下拉市
    let isAnimating = false
    $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
        if (isAnimating) return
        isAnimating = true
        if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
            $(this).children().children('i').css({
                "display": "inline-block",
                "transform": "rotate(0)"
            })
        } else {
            $(this).children().children('i').css({
                "display": "inline-block",
                "transform": "rotate(-180deg)"
            })
        }
        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
        $(this).parent().siblings().children('.tab').removeClass('selected');
        setTimeout(() => {
            isAnimating = false
        }, 500)
    })
    // 2.点击全国按钮onchange事件；
    $('.checkbox.other').on('change', function () {
        let isChecked = $(this).is(':checked')
        if(isChecked){
            $(this).prop('checked',true);
            $('.checkbox:not(.other):not([disabled])').prop('checked',false).removeClass('half');
            $('.city:not([disabled])').removeClass('active');
            $('.tab_content').slideUp();
        }
        getResult()
    })
    // 3.点击非全国按钮onchange事件
    $('.checkbox:not(.other)').on('change', function () {
        $('.checkbox.other').prop('checked',false);
        let isChecked = $(this).is(':checked');
        if(isChecked){
            $(this).prop('checked',true).removeClass('half');
            $(this).parents('li').find('.city').addClass('active');
            // 控制点击checkbox时候是否展开下方的城市列表
            // $(this).parent().parent('.tab:not(.municipality)').siblings('.tab_content').slideDown();
        }else{
            $(this).prop('checked',false);
            $(this).parents('li').find('.city').removeClass('active');
        };
        getResult();
        showOther();
    })
    // 4.点击半选按钮触发的事件
//  $('.checkbox.half').on('change', function () {
//      $('.checkbox.other').prop('checked', false)
//      let isChecked = $(this).is(':checked')
//      $(this).prop('checked', isChecked).removeClass('half')
//      console.log("!1")
//      getResult();
//  })
    // 5.点击城市按钮触发的事件
    $('.tab_content').on('click', '.city', function () {
        // 全国取消选中
        $('.checkbox.other').prop('checked',false);
        $(this).toggleClass('active')
        // 省下所有选中的地市数量
        let activeCityLength = $(this).parent().find('.city.active').length;
        // 省下一共有几个城市
        let cityLength = $(this).parent().find('.city').length;
        let oInput = $(this).parents('li').find('input.checkbox')
        
        if (activeCityLength === cityLength) {//当选中的城市数量等于该省下所有城市总数时，即为全选
            if ($(this).siblings('.city[disabled]').length === 0) {
                oInput.removeClass('half').prop('checked', true)
            }
        } else if (activeCityLength === 0){
            oInput.prop('checked', false).removeClass('half')
        } else {//半选
            oInput.prop("checked",false).addClass('half')
        }
        getResult();
        showCityTips(this)
    })
    // 6. 重置按钮点击事件
    $('.reset-btn').on('click', function() {
        // alreadyBuy = {
        //     province: {
        //         totalCount: 0,
        //         selectedCount: 0
        //     },
        //     city: {
        //         totalCount: 0,
        //         selectedCount: 0
        //     }
        // }
        // newlyAdded = {
        //     province: 0,
        //     city: 0
        // }

        // 数组置0，在重新从数据中计算初始状态结果并返回
        for (let i in alreadyBuy) {
            for(let ii in alreadyBuy[i]) {
                alreadyBuy[i][ii] = 0
            }
        }
        for (let j in newlyAdded) {
            newlyAdded[j] = 0
        }
        $(".select-area-box .tab:not(.municipality) .icon").css({
            "display": "inline-block",
            "transform": "rotate(0)"
        });

        $('.checkbox').prop('checked', false).removeAttr('disabled');
        $('.city').removeClass('active');
        $('input').removeClass('half')
        $('.tab_content').slideUp();
        $('.optional').remove()
        init();
        $(".tips_d_text").hide();
        $(".btns .reset-btn").prop("disabled",false);
        $(".btns .save-btn").prop("disabled",false);
    })

    // 7.锚点跳转
    $("body").on('click', '.slide a', function () {
        var s = $(this).html()
        if (s == '#') {
            return;
        }
        document.querySelector('#' + s).scrollIntoView({
            block: 'center'
        });
    })
    // 阻止input checkbox选中取消 触发父元素下拉事件
    $('.checkbox').click(function (e) {  
        e.stopPropagation();
    })

	function showCityTips(dom){
		let isAll = $(".area-list").attr("data-buy-province-count");
		if(Number(isAll)===-1){
			return
		}
		let activeCityLength = $(dom).parent().find('.city.active').length;
		let selectedCityLength = $(dom).parent().find('.city.active:not([disabled])').length;
		let disabledCityLength = $(dom).parent().find('.city[disabled]').length;
		let cityLength = $(dom).parent().find('.city').length;
		let dataCount = $(dom).parent().parent().attr("data-buy-city-count");
		if(dataCount === undefined){
			dataCount = 0;
		}else{
			if(Number(dataCount) === disabledCityLength){
				dataCount = 0;
			}else{
				dataCount = dataCount - disabledCityLength;
			}
		}
		let showCount = selectedCityLength - dataCount;
		if(showCount > 2){
			$(".tips_d_text").text("已新增"+showCount+"个市，建议新增“全省”");
			$(".tips_d_text").show();
		}else{
			$(".tips_d_text").hide();
		}
		if(showCount === cityLength){
			showOther();
		}
	}
	
	function showOther(){
		let showCounts = newlyAdded.province;
		if(showCounts > 9){
			$(".tips_d_text").text("已新增"+showCounts+"个省，建议新增“全国”")
			$(".tips_d_text").show();
		}else{
			$(".tips_d_text").hide();
		}
	}

    // ----------------------- 以下数据交互 ------------------
    $DoPost("/subscribepay/renewUpgrade/getBuyMsg", {}, function (data) {
    	if(data){
        	areaData["data"] = {
        		"area" : data.area,
        		"buyset" : data.buyset, 
        	}
        	init();
    	}
    }, false);
    // 确认按钮事件
    $('.save-btn').on('click', function(){
        // 获取added城市详情
        var activeCityDetail = getActiveCityDetail()
        let areaCount = getResultWithMCount()
//      console.log("111",areaCount)
//      console.log(JSON.stringify(activeCityDetail))
//      console.log(activeCityDetail)
//      console.log(areaData)
//      console.log(alreadyBuy)
        sessionStorage.vipAddCount = JSON.stringify(newlyAdded);
        sessionStorage.vipSubSelectCity = newlyAdded.city;
        sessionStorage.vipSubSelectAreaUpgrade = JSON.stringify(activeCityDetail);
        sessionStorage.vipSubSelectAreaAdd = JSON.stringify(areaCount);
        history.go(-1);
    })
	//
	if(sessionStorage.vipSubSelectAreaUpgrade!==undefined&&sessionStorage.vipSubSelectAreaUpgrade!==""){
		let areaObj = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
		renderSelectedCityActive(areaObj);
	}
    // 求需要M的城市数量
    // getResultWithMCount()
    // 获取点亮的城市的列表详情（带省名和城市名）
    // getActiveCityDetail()

    // 回显为蓝色激活样式
    // renderSelectedCityActive()
    // 回显为灰色不可点击样式
    // renderSelectedCityDisabled()
})