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)
    }
    // dev4.5.5选中区域文案修改
    var new_selected
    // 新增求值 ---- 统计数量，不做视图操作
    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
                    }
                }
                new_selected = selected
                return setDataInResult('.result-selected .result-info .info-overview', getBuySet(selected, []));
            }

            if (selected[p].length === 0) {
                selectedCount.province++
            } else {
                selectedCount.city.pCount++
                selected[p].forEach(function (item, index) {
                    selectedCount.city.totalCount++
                })
            }
        }
        if ($.isEmptyObject(selected)) {
        //    1. 隐藏提示，并清空已选择
            $('.result .info-tip').hide().siblings('.info-overview').text('');
        } else {
            new_selected = selected
            setDataInResult('.result-selected .result-info .info-overview', getBuySet(selected, []));
        }
    }

    // 参数1：selector 需要赋值的选择器
    // 参数2：selectedData 数据
    // 注意：selectedData的数据结构
    function setDataInResult (selector ,selectedData) {
        // selectedData = {
        //     areacount: 2,
        //     buyerclasscount: 2,
        //     newcitys: []
        // }
        // 设置已选择区域
        var citySum = arrSum(selectedData.citys);
        var text = {
            p: selectedData.areacount === 0 ? '' : selectedData.areacount + '个省',
            c: citySum === 0 ? '' : citySum + '个市',
            s: selectedData.citys.length === 1 ? '' : '(分布在' + selectedData.citys.length + '个省内)'
        };

        if (selectedData.areacount === -1) {
            $(selector).text('全国')
        } else {
            var dunhao = '';
            if (citySum !== 0 && selectedData.areacount !== 0) {
                dunhao = '、'
            }
            if (citySum === 0 || citySum === 1) {
                text.s = ''
            }
            let proStr = ''
            Object.keys(new_selected).forEach(function(item,index) {
                if(new_selected[item].length == 0) {
                    proStr += item + '、'
                } else {
                    proStr += item+ '(' + new_selected[item].length+ '个市' + ')' + '、'
                }
            })
            if(proStr[proStr.length - 1] == '、') {
                proStr = proStr.substr(0,proStr.length - 1);
            }
            // $(selector).text(text.p + dunhao + text.c + text.s);
            $(selector).text(Object.keys(new_selected).length+'个省：'+proStr + ',');
        }
    }

    // 点亮的城市数量详情(需要省和城市名称)
    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) {

        if (Object.keys(p).length === 0) {
            $('.area-list li:not(.index):eq(0)').find('input').trigger('click')
            return
        }

        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) {
        // 购买的全省的数量（不包含市）
        alreadyBuy.province = buyset.areacount;
        // 购买的城市总数量
        alreadyBuy.city.pCount = citys.length
        alreadyBuy.city.totalCount = arrSum(citys)

        var text = {
            p: alreadyBuy.province === 0 ? '' : alreadyBuy.province + '个省',
            c: alreadyBuy.city.totalCount === 0 ? '' : alreadyBuy.city.totalCount + '个市',
            s: alreadyBuy.city.pCount === 1 ? '' : '(分布在' + alreadyBuy.city.pCount + '个省内)'
        }
        if (buyset.areacount === -1) {
            $('.result-purchased .result-info .buy-set-info').text('全国')
        } else {
            var dunhao = '';
            if (alreadyBuy.city.totalCount !== 0 && alreadyBuy.province !== 0) {
                dunhao = '、'
            }
            if (alreadyBuy.city.totalCount === 0 || alreadyBuy.city.totalCount === 1) {
                text.s = ''
            }
            $('.result-purchased .result-info .buy-set-info').text(text.p + dunhao + text.c + text.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).parents('.all-country').addClass('active');
            $('.checkbox:not(.other):not([disabled])').prop('checked', false).removeClass('opt');
            $('.city:not([disabled])').removeClass('active');
            $('.tab_content').slideUp();
        } else{
          $(this).prop('checked', false).parents('.all-country').removeClass('active');
        }
        getResult()
    })
    // 3.点击非全国按钮onchange事件
    $('.checkbox:not(.other)').on('change', function () {
        $('.checkbox.other').prop('checked', false).parents('.all-country').removeClass('active');
        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).parents('.all-country').removeClass('active');;
        $(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');
        $('.all-country').removeClass('active')
        $('.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
            if(!res.data.area) {
                res.data.area = {}
            }
            if(!res.data.industry) {
                res.data.industry = []
            }
            areaData.data = res.data
            res.data.oldArea = res.data.area;
            res.data.oldIndustry = res.data.industry;
            sessionStorage.setItem('sub_vip_state', JSON.stringify(res.data))
            init()
        })
    }
    // 2021-5-21修改 需要每次都从接口里查询订阅条件
    var subVipState = sessionStorage.getItem('sub_vip_state')
    if (subVipState && !getParam('header')) {
        areaData.data = JSON.parse(subVipState)
        init()
    } else {
        getDataWitXHR()
    }

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

        // 超级订阅新套餐 修改订阅条件需要提交后台保存， 因是共用页面,为不影响其他页面逻辑，url加上参数进行判断
        var params = {
          area: JSON.stringify(areaData.data.area).indexOf('全国') > -1 ? '{}' : JSON.stringify(areaData.data.area),
          industry: (areaData.data.industry).join(',')
        }
        if (getParam('header') === 'save') {
          let url = ''
          if(getParam('subvip') === 'free') {
            url = '/subscribepay/vipsubscribe/freeSaveChange'
          } else {
            url = '/subscribepay/vipsubscribe/saveChange'
          }
          $DoPost(url, params, function (res) {
            if (res.data && res.data.doSuccess) {
              weui.toast('修改成功', {
                duration: 2000,
                className: 'custom-toast',
                callback: function() {
                  history.back()
                }
              });
            } else {
              weui.toast(res.errMsg, {
                duration: 2000,
                className: 'custom-toast'
              });
            }
          })
        } else {
          sessionStorage.setItem('sub_vip_state', JSON.stringify(areaData.data))
          history.back()
        }
        
    })

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

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