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

// 后端数据结构
var areaData = {
    "data": {
        "area": {
            // "北京": [],
            // "河南": [
            //     "洛阳市",
            //     "驻马店市",
            //     "周口市",
            //     // "郑州市"
            // ],
            // "澳门": [],
            // "甘肃": []
        },
        "buyset": {
            "areacount": -1,
            "buyerclasscount": 11,
            "citys": {
                //   "河南": 4
            }
        },
        "industry": [
            "党委办",
            "公共资源交易",
            "公安",
            "出版广电",
            "国资委",
            "地震",
            "安监",
            "工商",
            "法院",
            "电信行业",
            "财政"
        ]
    },
    "errMsg": "",
    "success": true
}

//加载数据
function getData() {
    $DoPost("/subscribepay/editSub/getSubBuyMsg", {}, function (r) {
        if (r.success) {
            areaData = r;
        }
    }, false);
}

// 渲染城市方法
function createMoreCity(arr) {
    var tempHtml = arr.map(function (v) {
        return '<button class="city">' + v.name + '</button>'
    }).join('')
    return tempHtml
}

// 省下拉市事件
function slideFun(obj) {
    if (obj.next('.tab_content:not(:animated)').css("display") == "block") {
        obj.children().children('i').css({
            "display": "inline-block",
            "transform": "rotate(0)"
        })
    } else {
        obj.children().children('i').css({
            "display": "inline-block",
            "transform": "rotate(-180deg)"
        })
    }
    obj.toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
    obj.parent().siblings().children('.tab').removeClass('selected');
}

var obj

// 改变选择结果方法
function getResult() {
    obj = {};
    //$('.result_name').empty();
    $('.province').each(function () {
        let provinceText = $(this).text().trim();//省份名称
        let isChecked = $(this).children('.checkbox').is(':checked');
        let isHalf = $(this).children('.checkbox').hasClass('half');
        let arr = [];
        if (isChecked) {
            obj[provinceText] = [];
        } else if (isHalf && !isChecked) {
            let $that = $(this);
            obj[$that.text().trim()] = [];
            $that.parent().siblings().find('.city').each(function () {
                let parent = $(this).parent().siblings().find('.province').text().trim();
                if ($(this).is('.active') && parent == $that.text().trim()) {
                    arr.push($(this).text().trim())
                }
            })
            obj[$that.text().trim()] = arr
        }
    })
    $('count').html($('.checkbox:not(.other):checked').length);
    //$('.result_name').append(getAreaClassArr_index(obj).join("、"));
//校验是否修改
    if (theSameAs(obj) || $.isEmptyObject(obj)) {
        $('#enter').attr("disabled", "disabled");
    } else {
        $('#enter').removeAttr("disabled");
    }
}

// 初始化页面方法
function init() {
    let p = areaData.data.area;
    let count = areaData.data.buyset.citys;
    // 1.渲染城市列表
    $(".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)
    })
    // 2.当areacount == -1时，全国为选中状态，为正数时为选中的省份数目，全国选项不显示
    let pLength = Object.keys(areaData.data.area).length;
    let cLength = Object.keys(areaData.data.buyset.citys).length
    console.log(pLength, cLength)
    if (areaData.data.buyset.areacount == -1 && pLength == 0 && cLength == 0) {
        // 当购买的全国切选中的是全国时
        // $('.optional_count').html("可选择全部区域")
        //$('.all_area').show()
        $('.optional_count').hide()
        $('.total').html('34')
        $('.count').html('34')
        $('.tab.whole').parent('li').show();
        $('.checkbox.other').prop('checked', true);
        // $('.checkbox:not(.other)').attr('disabled',true)
        //$('.result_name').append(`<span>全国</span>`);
    } else if (areaData.data.buyset.areacount == -1 && pLength != 0) {
        // 当购买的全国而没有选择全国，选择部分省市时
        //$('.all_area').show();
        $('.province').removeAttr('data-count');
        $('.optional_count').hide();
        $('.total').html('34');
        initResult()
    } else {
        //$('.all_area').hide()
        $('.optional_count').show()
        $('.total').html(areaData.data.buyset.areacount)
        $('.tab.whole').parent('li').hide();
        // $('.checkbox.other').attr('disabled',true);
        initResult()
    }

}

function initResult() {
    let isAll = areaData.data.buyset.areacount;
    let p = areaData.data.area;
    let count = areaData.data.buyset.citys;
    // 渲染已选择结果
    for (const k in p) {
        console.log(p[k], k)
        if (p[k].length == 0) {
            $('.province').each(function () {
                let t = $(this).text().trim();
                if (k == t && p[k].length == 0) {
                    // 如果购买的是全省，则不可点击下拉事件（不可修改城市）
                    if (isAll != -1) {
                        $(this).parent().siblings().children('.city').addClass('active').attr('disabled', true);
                        $(this).parent('.tab').parent('li').siblings().find('.checkbox:not(.half)').parents('.tab').unbind('click')
                    } else {
                        $(this).parent().siblings().children('.city').addClass('active').removeAttr('disabled')
                    }
                    $(this).children('.checkbox').prop('checked', true)
                }
            })
        } else {
            console.log(k, p[k].length)
            $('.city').each(function () {
                let t = $(this).text().trim();
                p[k].forEach(v => {
                    // console.log(v,t)
                    if (v == t) {
                        let that = $(this).parents('li').find('.tab:not(.municipality)');
                        console.log("v==t")
                        // 如果是可修改城市的省份，则可以进行下拉展示
                        that.bind('click', function () {
                            slideFun($(this));
                        })
                        $(this).addClass('active').parent().siblings('.tab').find('input').addClass('half');
                        return;
                    }
                })
            })
            for (const c in count) {
                if (p[k].length >= count[c]) {
                    if (isAll != -1) {
                        $('.city:not(.active)').attr('disabled', true)
                    } else {
                        $('.city:not(.active)').removeAttr('disabled')
                    }
                }
            }
        }
    }
    // 添加可选择城市文字 和自定义属性值
    if (areaData.data.buyset.areacount != -1) {
        for (const c in count) {
            $('.province').each(function () {
                let t = $(this).text().trim();
                if (c == t) {
                    $(this).attr("data-count", count[c]);
                    $(this).after(`<em class="optional">可选择 ${count[c]} 个市</em>`)
                    let that = $(this).parent('.tab:not(.municipality)');
                    that.bind('click', function () {
                        slideFun($(this));
                    })
                }
            })
        }
    }
    //$('.result_name').append(getAreaClassArr_index(areaData.data.area).join("、"));
    $('.count').html($('.checkbox:not(.other):checked').length)
    // 如果选中的省份数量等于购买的省份数量，则将其他未选中的省份禁用
    if ($('.checkbox:not(.other):checked').length == $('.total').html()) {
        $('.checkbox:not(:checked)').attr('disabled', true);
    }
    $('#enter').attr("disabled", "disabled");
}

$(function () {
    // 省下拉事件
    $('.tab:not(.municipality)').on('click', function () {
        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');
    });
    getData();
    // 初始化
    init();
    /**** 点击checkbox实现onchange事件 *****/
    // 1.点击全国按钮onchange事件；
    $('.checkbox.other').on('change', function () {
        let isChecked = $(this).is(':checked');
        if (isChecked) {
            $('.count').html('34')
            $('.checkbox:not(.other)').prop('checked', false).removeClass('half')
            $('.city').removeClass('active');
            $('.tab_content').slideUp()
            getResult()
        } else {
            $('.checkbox:not(.other)').removeAttr('disabled')
            $('.city').removeAttr('disabled')
            getResult()
        }
    })
    // 2.点击非全国按钮onchange事件；
    $('.checkbox:not(.other)').on('change', function () {
        $('.checkbox.other').prop('checked', false);
        let checkedLength = $('.checkbox:checked').length;
        let totalLength = $('.total').text();
        $('.count').html(checkedLength)
        if (checkedLength < totalLength) {
            $('.checkbox:not(.other)').removeAttr('disabled')
            getResult()
        } else {
            $('.checkbox:not(:checked)').attr('disabled', true)
            getResult()
        }
        if ($(this).is(':checked')) {
            if (areaData.data.buyset.areacount != -1) {
                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active').attr('disabled', true);
            } else {
                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active');
            }
            getResult()
        } else {
            $(this).prop('checked', false).removeClass('half').parent().parent().siblings().find('.city').removeClass('active').removeAttr('disabled');
            getResult()
        }

    })
    // 3.点击半选按钮触发的事件
    $('.checkbox.half').on('change', function () {
        console.log($(this).is(':checked'))
        if ($(this).is(':checked')) {
            if (areaData.data.buyset.areacount != -1) {
                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active').attr('disabled', true);
            } else {
                $(this).prop('checked', true).removeClass('half').parents('li').find('.city').addClass('active');
            }
            getResult()
        } else {
            $(this).prop('checked', false);
            $(this).parent().parent().siblings().find('.city').removeClass('active').removeAttr('disabled');
            $(this).parent().siblings('.optional').show();
            getResult()
        }
    })
    // 4.点击城市按钮触发的事件
    $('.tab_content').on('click', '.city', function () {
        let count = $(this).parent().siblings().find('.province').attr('data-count');
        $(this).toggleClass('active');
        $('.checkbox.other').prop('checked', false);
        var isActive = $(this).parent().find('.city.active').length
        let cityLength = $(this).parent().find('.city').length
        if (isActive === cityLength) {//当选中的城市数量等于该省下所有城市总数时，即为全选
            var oInput = $(this).parents('li').find('input.checkbox')
            oInput.removeClass('half').prop('checked', true)
            getResult()
        } else {//半选
            $(this).parents('li').find('input.checkbox').addClass('half').prop("checked", false)
            if (isActive > 0 && isActive != count) {
                $(this).parents('li').find('input.checkbox').addClass('half');
                $(this).parent('div').find('.city:not(.active)').removeAttr('disabled')
                getResult()
            } else if (isActive > 0 && isActive == count) {
                $(this).parents('li').find('input.checkbox').addClass('half');
                $(this).parent('div').find('.city:not(.active)').attr('disabled', true)
                getResult()
            } else {
                $(this).parent('div').find('.city:not(.active)').removeAttr('disabled')
                $(this).parents('li').find('input.checkbox').removeClass('half').prop('checked', false)
                getResult()
            }
        }
    })
    // 阻止input checkbox选中取消 触发父元素下拉事件
    $('.checkbox').click(function (e) {
        e.stopPropagation();
    })
    // 锚点跳转
    $("body").on('click', '.slide a', function () {
        var s = $(this).html()
        if (s == '#') {
            return;
        }
        document.querySelector('#' + s).scrollIntoView({
            block: 'center'
        });
    })
    // 取消按钮事件 返回上一页
    $('#cancel').click(function () {
        // window.history.go(-1)
        //$('.result_name').empty()
        $('.checkbox').prop('checked', false).removeAttr('disabled');
        $('.city').removeClass('active');
        $('.tab_content').slideUp();
        $('.optional').remove()
        init();
    })
    // 确定修改事件
    $('#enter').click(function () {
        $('#enter').attr("disabled", "disabled");
        $DoPost("/subscribepay/editSub/submit", {
            "type": "area",
            "value": JSON.stringify(obj)
        }, function (r) {
            if (r.success) {
                window.location.replace('/front/vipsubscribe/submitEditSubFinish');
            }
            $('#enter').removeAttr("disabled");
        }, false);
    })
});

function theSameAs(select) {
    let tmp1 = getAreaClassArr(select);
    let tmp2 = getAreaClassArr(areaData.data.area);
    return (JSON.stringify(tmp1[0].sort()) === JSON.stringify(tmp2[0].sort())) && (JSON.stringify(tmp1[1].sort()) === JSON.stringify(tmp2[1].sort()));
}