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

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

    // 已经购买过的城市数量
    var alreadyBuy = {
        country: 0,
        province: 0,
        city: {
            // 一共买了多少个城市
            totalCount: 0,
            // 分布在几个省份
            pCount: 0
        }
    }

    // ----------------- 以下定义功能函数 ----------------------------
    function createMoreCity(arr) {
        var tempHtml = arr.map(function (v) {
            return '<button class="city">' + v.name + '</button>'
        }).join('')
        return tempHtml
    }

    // 数组求和
    function arrSum(arr) {
        var sum = 0
        arr.forEach(function (item, i) {
            sum += item
        })
        return sum
    }

    // 是否锁定按钮
    function isLockedTipButtons(f) {
        $('.tips_btn button.save-btn').prop('disabled', f)
    }

    // 省下拉市事件
    var isAnimating = false

    function slideFunc() {
        if (isAnimating) return
        isAnimating = true
        if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
            $(this).children().children('i').removeClass('rotate-arrow')
        } else {
            $(this).children().children('i').addClass('rotate-arrow')
        }
        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
        $(this).parent().siblings().children('.tab').removeClass('selected');
        setTimeout(function () {
            isAnimating = false
        }, 500)
    }

    // 新增求值 ---- 统计数量，不做视图操作
    function getResult() {
        var selectedCount = {
            country: 0,
            province: 0,
            city: {
                // 一共选了多少个城市
                totalCount: 0,
                // 分布在几个省份
                pCount: 0
            }
        }
        // 获取所有点亮的城市的值
        var selected = getActiveCityDetail()
        if (Object.keys(selected).length === 0) {
            isLockedTipButtons(true)
        } else {
            isLockedTipButtons(false)
        }

        //是否需要升级
        if (needUpgrade(getBuySet(selected, areaData.data.industry), {
            areacount: areaData.data.buyset.areacount,
            citys: areaData.data.buyset.newcitys,
            buyerclasscount: areaData.data.buyset.buyerclasscount
        })[1]) {
            if (areaData.data.isTrial) {
                $(".result-selected .info-tip").text("已超出现订单购买范围，需购买");
            }
            $(".result-selected .info-tip").show();
        } else {
            $(".result-selected .info-tip").hide();
        }

        for (var p in selected) {
            if (p === '全国') {
                selectedCount = {
                    country: -1,
                    province: 0,
                    city: {
                        totalCount: 0,
                        pCount: 0
                    }
                }
                return setDataInResult(selectedCount);
            }

            if (selected[p].length === 0) {
                selectedCount.province++
            } else {
                selectedCount.city.pCount++
                selected[p].forEach(function (item, index) {
                    selectedCount.city.totalCount++
                })
            }
        }
        setDataInResult(selectedCount);
    }

    function setDataInResult(selected) {
        // 已选择数量数据渲染
        if (selected.country === -1) {
            $('.result-selected .result-info .info-overview').text('全国')
            return
        } else {
            // 已选择数量
            var count = {
                p: selected.province + '个省',
                c: selected.city.totalCount + '个市',
                s: '分布在' + selected.city.pCount + '个省内'
            }
            if (selected.province === 0) {
                $('.result-selected .result-info .info-overview').text(count.c + '(' + count.s + ')')
            } else if (selected.city.totalCount === 0) {
                $('.result-selected .result-info .info-overview').text(count.p)
            } else {
                $('.result-selected .result-info .info-overview').text(count.p + '、' + count.c + '(' + count.s + ')')
            }
        }
    }

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

                // 是否是直辖市或自治区
                if (isMunicipality) {
                    if ($dom.find('input:not([disabled])').is(':checked')) {
                        arr.push(selectedObj)

                    }
                } else {
                    var allCitylength = $dom.find('button').length

                    if ($dom.find('button.active').length === allCitylength) {
                        arr.push(selectedObj)
                    } else {
                        $dom.find('button.active').each(function (c, buttonDOM) {
                            var cName = $(buttonDOM).text().replace(/\s+ | [\r\n]/g, '')
                            selectedObj.children.push(cName)
                        })
                        if (selectedObj.children.length) {
                            arr.push(selectedObj)
                        }
                    }
                }
            })

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

    // 初始选择的城市恢复，根据传入的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 () {
                    var t = $(this).text().trim();
                    if (k == t && p[k].length == 0) {
                        var li = $(this).parents('li')
                        // 改变按钮状态
                        li.find('.city').addClass('active')
                        // 改变input的状态
                        li.find('input.checkbox').prop('checked', true)
                    }
                })
            } else {
                $('.city').each(function () {
                    var t = $(this).text().trim();
                    p[k].forEach(v => {
                        if (v !== t) return
                        // 改变按钮状态
                        $this = $(this)
                        $this.addClass('active')
                        // 改变input的样式
                        $this.parents('li').find('input.checkbox').addClass('opt')
                    })
                })
            }
        }
    }

    function resetButtonLock(f) {
        $('#cancel').prop('disabled', f)
    }


    // 根据数据进行求总数 --- 上方已购买数据信息的初始化
    function initAlreadyBuy(buyset, citys) {
        if (buyset.areacount === -1) {
            $('.result-purchased .result-info .buy-set-info').text('全国')
            alreadyBuy = {
                country: -1,
                province: 0,
                city: {
                    totalCount: 0,
                    pCount: 0
                }
            }
            return
        } else {
            // 购买的全省的数量（不包含市）
            alreadyBuy.province = buyset.areacount;
            // 购买的城市总数量
            alreadyBuy.city.pCount = citys.length
            alreadyBuy.city.totalCount = arrSum(citys)

            var buySetInfo = {
                p: alreadyBuy.province + '个省',
                c: alreadyBuy.city.totalCount + '个市',
                s: '分布在' + alreadyBuy.city.pCount + '个省内'
            }

            if (alreadyBuy.province === 0) {
                $('.result-purchased .result-info .buy-set-info').text(buySetInfo.c + '(' + buySetInfo.s + ')')
            } else if (alreadyBuy.city.totalCount === 0) {
                $('.result-purchased .result-info .buy-set-info').text(buySetInfo.p)
            } else {
                $('.result-purchased .result-info .buy-set-info').text(buySetInfo.p + '、' + buySetInfo.c + '(' + buySetInfo.s + ')')
            }
        }
    }

    // 初始化方法
    function init() {
        var data = areaData.data
        var buyset = data.buyset;
        var citys = buyset.newcitys;
        initAlreadyBuy(buyset, citys)
        // 根据返回数据进行渲染(默认选中已选择的)
        renderSelectedCityActive(data.area)
        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.省下拉市
    $(".select-area-box .tab:not(.municipality)").on('click', slideFunc)
    // 2.点击全国按钮onchange事件；
    $('.checkbox.other').on('change', function () {
        var isChecked = $(this).is(':checked')
        if (isChecked) {
            $(this).prop('checked', true);
            $('.checkbox:not(.other):not([disabled])').prop('checked', false).removeClass('opt');
            $('.city:not([disabled])').removeClass('active');
            $('.tab_content').slideUp();
        }
        getResult()
    })
    // 3.点击非全国按钮onchange事件
    $('.checkbox:not(.other)').on('change', function () {
        $('.checkbox.other').prop('checked', false);
        var isChecked = $(this).is(':checked');
        if (isChecked) {
            $(this).prop('checked', true).removeClass('opt');
            $(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();
    })
    // 4.点击城市按钮触发的事件
    $('.tab_content').on('click', '.city', function () {
        // 全国取消选中
        $('.checkbox.other').prop('checked', false);
        $(this).toggleClass('active')
        // 省下所有选中的地市数量
        var activeCityLength = $(this).parent().find('.city.active').length;
        // 省下一共有几个城市
        var cityLength = $(this).parent().find('.city').length;
        var oInput = $(this).parents('li').find('input.checkbox')

        if (activeCityLength === cityLength) {//当选中的城市数量等于该省下所有城市总数时，即为全选
            if ($(this).siblings('.city[disabled]').length === 0) {
                oInput.removeClass('opt').prop('checked', true)
            }
        } else if (activeCityLength === 0) {
            oInput.prop('checked', false).removeClass('opt')
        } else {//半选
            oInput.prop("checked", false).addClass('opt')
        }
        getResult();
    })
    // 5. 重置按钮点击事件
    $('.reset-btn').on('click', function () {
        alreadyBuy = {
            country: 0,
            province: 0,
            city: {
                // 一共买了多少个城市
                totalCount: 0,
                // 分布在几个省份
                pCount: 0
            }
        }
        $('.checkbox').prop('checked', false).removeAttr('disabled');
        $('.city').removeClass('active');
        $('input').removeClass('opt')
        $('.tab_content').slideUp();
        $('.tab .iconfont').removeClass('rotate-arrow')
        init();
    })

    // 6.锚点跳转
    $("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 getDataWitXHR() {
        $DoPost('/subscribepay/vipsubscribe/getSubBuyMsg', {}, function (res) {
            if (!res.success) return
            areaData.data = res.data
            sessionStorage.setItem('sub_vip_state', JSON.stringify(res.data))
            init()
        })
    }

    var subVipState = sessionStorage.getItem('sub_vip_state')
    if (subVipState) {
        areaData.data = JSON.parse(subVipState)
        init()
    } else {
        getDataWitXHR()
    }

    // 确认按钮事件
    $('.save-btn').on('click', function () {
        // 获取点亮的城市详情
        areaData.data.area = getActiveCityDetail()
        sessionStorage.setItem('sub_vip_state', JSON.stringify(areaData.data))
        history.back()
    })

    // 获取点亮的城市的列表详情（带省名和城市名）
    // getActiveCityDetail()

    // 回显为蓝色激活样式
    // renderSelectedCityActive()
})