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

$(function () {
    // 格式化金钱的函数
    // s: 金额(number) 必传
    // n: 保留小数的位数(int:0-100)
    function formatMoney(s, n) {
        if (n === undefined) {
            n = -1
        } else {
            n = n > 0 && n <= 20 ? n : 2;
        }
        var intS = parseInt(s)
        var point = '.'
        var left;
        var right;
        s = parseFloat((s + '').replace(/[^\d\.-]/g, ''))
        // 没传n，默认(如果为整数，则不保留小数。如果为浮点数，则保留两位小数)
        if (n === -1) {
            if (s === intS) {
                n = 0
                right = ''
                point = ''
            } else {
                n = 2
                s = s.toFixed(n);
                right = s.split('.')[1];
            }
            s = s + ''
            left = s.split('.')[0].split("").reverse();
        } else {
            s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
            left = s.split('.')[0].split('').reverse();
            right = s.split('.')[1];
        }

        t = "";
        for (i = 0; i < left.length; i++) {
            t += left[i] + ((i + 1) % 3 == 0 && (i + 1) != left.length ? ',' : '');
        }

        var money = t.split('').reverse().join('') + point + right;
        return money;
    }


    //项目匹配开关
    var checkedflag = true;

    function setprojectmatch(index) {
        if (checkedflag) {
            checkedflag = false;
            $.post("/subscribepay/afterPay/setUserInfo", {pageType: "projectMatch", pmindex: index}, function (r) {
                if (r.flag) {
                    checkedflag = true;
                    reqData.projectmatch = index;
                    sessionStorage.setItem('sub_vip_state', JSON.stringify(reqData))
                }
            })
        }
    }

    function getDataWitXHR() {
        $DoPost('/subscribepay/vipsubscribe/getSubBuyMsg', {}, function (res) {
            if (!res.success) return;
            res.data.oldArea = res.data.area;
            res.data.oldIndustry = res.data.industry;
            var globalStateStr = JSON.stringify(res.data);
            sessionStorage.setItem('sub_vip_state', globalStateStr);
            globalState = JSON.parse(globalStateStr);
            init(res.data)
        })
    }

    //获取选择
    function getCount(area, industry) {
        if (industry[0] === "全部行业") industry = [];
        if (area["全国"]) area = {};
        //计算地区数量
        var count = {
            "areacount": -1,  //省份数量
            "buyerclasscount": -1,
            "citys": [] //购买省份中城市数量
        };
        //行业
        if (industry.length != 0) {
            count.buyerclasscount = industry.length
        }
        //地区
        if (!$.isEmptyObject(area)) {
            count.areacount = 0;
            for (var i in area) {
                var citys = area[i];
                var thisLen = citys.length;
                if (thisLen === 0) {
                    count.areacount++
                } else {
                    count.citys.push(thisLen)
                }
            }
        }
        return count
    }

    // 设置已选择的区域和行业
    /**
     * selected = {
     *      areacount: 2,
     *      buyerclasscount: 2,
     *      citys: [1, 2, 3]
     *  }
     */
    function setSelectedAreaAndInd(selected) {
        // selected = {
        //     areacount: 2,
        //     buyerclasscount: 2,
        //     citys: [1, 2, 3]
        // }

        // 设置已选择区域
        var citySum = arrSum(selected.citys)
        var text = {
            p: selected.areacount + '个省',
            c: citySum + '个市',
            s: '分布在' + selected.citys.length + '个省内'
        }

        if (selected.areacount === -1) {
            $('.vip-body .area .selected-area').text('全国')
        } else {
            if (selected.areacount === 0) {
                $('.vip-body .area .selected-area').text(text.c + '(' + text.s + ')')
            } else if (selected.citys.length === 0) {
                $('.vip-body .area .selected-area').text(text.p)
            } else {
                $('.vip-body .area .selected-area').text(text.p + '、' + text.c + '(' + text.s + ')')
            }
        }

        // 设置已选择行业
        if (selected.buyerclasscount === -1) {
            $('.vip-body .industry .selected-industry').text('全行业')
        } else {
            $('.vip-body .industry .selected-industry').text(selected.buyerclasscount + '个行业')
        }
    }


    // 设置已购买的区域和行业
    /**
     * buyset = {
     *      areacount: 2,
     *      buyerclasscount: 2,
     *      newcitys: [1, 2, 3]
     *  }
     */
    function setBuyAreaAndInd(buySet) {
        // 设置已购买区域
        var buySetCitySum = arrSum(buySet.newcitys)
        var text = {
            p: buySet.areacount + '个省',
            c: buySetCitySum + '个市',
            s: '分布在' + buySet.newcitys.length + '个省内'
        }

        if (buySet.areacount === -1) {
            $('.vip-body .area .buy-set-area').text('全国')
        } else {
            if (buySet.areacount === 0) {
                $('.vip-body .area .buy-set-area').text(text.c + '(' + text.s + ')')
            } else if (buySet.newcitys.length === 0) {
                $('.vip-body .area .buy-set-area').text(text.p)
            } else {
                $('.vip-body .area .buy-set-area').text(text.p + '、' + text.c + '(' + text.s + ')')
            }
        }

        // 设置已选择行业
        if (buySet.buyerclasscount === -1) {
            $('.vip-body .industry .buy-set-industry').text('全行业')
        } else {
            $('.vip-body .industry .buy-set-industry').text(buySet.buyerclasscount + '个行业')
        }
    }

    function clearSession() {
        sessionStorage.removeItem("vip_index_read");
        sessionStorage.removeItem('sub_vip_state');
    }

    function arrSum(arr) {
        var sum = 0
        arr.forEach(function (item, i) {
            sum += item
        })
        return sum
    }

    // picker的显示隐藏
    function pickerShow(selector, f) {
        if (f) {
            // 添加进场动画，并显示
            $(selector).find('.weui-mask').removeClass('weui-animate-fade-out').addClass('weui-animate-fade-in')
            $(selector).find('.weui-picker').removeClass('weui-animate-slide-down').addClass('weui-animate-slide-up')
            $(selector).show(300);
        } else {
            // 添加离场动画，并隐藏
            $(selector).find('.weui-mask').removeClass('weui-animate-fade-in').addClass('weui-animate-fade-out')
            $(selector).find('.weui-picker').removeClass('weui-animate-slide-up').addClass('weui-animate-slide-down')
            $(selector).hide(300);
        }
    }

    // 项目匹配问号点击事件
    $('.project-match .icon-bangzhu').on('click', function () {
        var str = '开启后，系统将根据你订阅的关键词自动匹配出相关联的项目，并将相关联项目的后续动态在VIP订阅内一并推送。'
        weui.alert(str, {
            title: '项目匹配',
            className: 'jy-alert',
            buttons: [{
                label: '我知道了'
            }]
        });
    })

    // 计算标准点击事件
    $('.billing-list-btn').on('click', function () {
        pickerShow('.billing-list-container', true)
    })
    // 计算标准隐藏
    $('.billing-list-container .dialog_hd__close').on('click', function () {
        pickerShow('.billing-list-container', false)
    })
    $('.weui-mask').on('click', function () {
        pickerShow('.billing-list-container', false)
    })

    // 阅读并接受协议前的模拟checkbox点击事件
    if (sessionStorage.getItem("vip_index_read") == "1") {
        $('.checkbox').addClass("checked")
        $('.vip-footer.upgrade .confirm').prop('disabled', false);
    }
    $('.checkbox').on('click', function () {
        $(this).toggleClass('checked');
        var state = $(this).hasClass('checked');
        $('.vip-footer.upgrade .confirm').prop('disabled', !state);
        sessionStorage.setItem("vip_index_read", state ? "1" : "0");
    });


    // switch点击切换
    $('.switch').on('click', function (e) {
        var $this = $(this);
        var hasChecked = $this.hasClass('checked');

        if (!hasChecked) {
            $this.addClass('checked');
            setprojectmatch(1);
        } else {
            $this.removeClass('checked');
            setprojectmatch(0);
            weui.toast('项目匹配已关闭', {
                duration: 1500,
                className: 'jy-toast',
                callback: function () {
                    console.log('close')
                }
            });
        }
    })

    //保存取消提示 module 1 修改 2升级
    function cancelTip(module) {
        weui.dialog({
            title: '提示信息',
            content: module == 1 ? '所选订阅设置已做修改，返回后修改的设置将不做保存。' : '所选订阅设置已超出购买范围，升级后方才生效，返回后修改的设置将不做保存。',
            className: 'jy-dialog',
            buttons: [
                {
                    label: module == 1 ? '保存修改' : '立即升级',
                    type: 'primary',
                    onClick: function () {
                        doSubmit();
                    }
                },
                {
                    label: '取消',
                    type: 'default',
                    onClick: function () {
                        clearSession()
                        window.history.go(-1);
                    }
                }
            ]
        });
    }

    function initCycleSelector() {
        $('.vip-body .body-item.cycle').on('click', function () {
            pickerShow('#time_cycle', true)
        })
        // 打开dialog
        $('#time_cycle .weui-mask').on('click', function () {
            pickerShow('#time_cycle', false)
        })
        // 关闭dialog
        $('#time_cycle .box_hd .cancel').on('click', function () {
            pickerShow('#time_cycle', false)
        })

        // 选择完成（确定）按钮的点击事件
        $('#enter_period').on('click', function () {
            var checkedValue = $('#time_cycle input:radio[name="time"]:checked').val();
            var result = null
            if (checkedValue == 'month') {
                result = $('#number_box_month .month_number').text() + '个月'
            } else if (checkedValue == 'year') {
                result = $('#number_box_year span.active').attr('data-id') + '年'
            }
            console.log(result)
            $('.vip-body .extend-cycle').show().text('延长订阅周期' + result)
            pickerShow('#time_cycle', false)
        })


        // 1. 对订阅时间选择的input绑定点击事件
        $('#time_cycle input:radio[name="time"]').on('click', function (e) {
            // 解除确认按钮的锁定
            $('#time_cycle .form-btn button').removeAttr('disabled')
            if ($(e.target).hasClass('monthly')) {
                // 按月订阅
                $('#number_box_month').addClass('active');
                $('#number_box_year span').removeClass('active');
            } else {
                // 按年订阅
                $('#number_box_month').removeClass('active');
                // $('#number_box_year span:eq(0)').addClass('active').siblings().removeClass('active');
            }
        })

        /* --------控制月份number_box的事件  点击加减号触发的事件------- */
        $('#number_box_month').on('click', 'button', function (e) {
            // 点击加减号让input radio选中
            $("#monthly").prop('checked', true);
            $('#yearly').prop('checked', false);
            $('.number_box span').removeClass('active')

            $('#number_box_month').addClass('active');

            var $number = $('#number_box_month span.month_number');
            var $monthlyInput = $('#monthly');
            // 未整理的data数组，里面的值都是字符串
            var preData = e.delegateTarget.dataset
            var currentNum = parseInt($number.text());
            var data = {};
            // 把字符串转换成数字
            for (var i in preData) {
                data[i] = preData[i] - 0
            }

            if (!$monthlyInput.prop('checked')) {
                return
            }
            // 判断是点击的是+ 还是-
            if ($(e.target).hasClass('add')) {
                // 点的+
                // currentNum = currentNum >= 12 ? 12 : currentNum + 1;
                currentNum = currentNum >= data.numboxMax ? data.numboxMax : currentNum + data
                    .numboxStep;
            } else {
                // 点的-
                // currentNum = currentNum <= 1 ? 1 : currentNum - 1;
                currentNum = currentNum <= data.numboxMin ? data.numboxMin : currentNum - data
                    .numboxStep;
            }
            $number.text(currentNum)
            var price = (5.8 * currentNum).toFixed(1);
            $('.computed_price').html('￥' + price)
            var firstButton = $('#number_box_month button:first')
            var lastButton = $('#number_box_month button:last')
            if (currentNum >= 10) {
                $('.profit_tips').show()
            } else {
                $('.profit_tips').hide()
            }
            // 如果为操作后的结果为1，则锁定减号按钮
            if (currentNum === data.numboxMin) {
                firstButton.attr('disabled', true)
            } else {
                firstButton.removeAttr('disabled')
            }
            // 如果为操作后的结果为12，则锁定加号按钮
            if (currentNum === data.numboxMax) {
                lastButton.attr('disabled', true)
            } else {
                lastButton.removeAttr('disabled')
            }
        })

        /* -------- 控制年份number_box的事件  点击1年 2年 3年触发的事件------- */
        $('#number_box_year').on('click', 'span', function (e) {
            $('#number_box_month').removeClass('active');
            console.log(e.target.dataset.id)
            var id = e.target.dataset.id;
            $('.profit_tips').hide()
            $(this).addClass('active').siblings().removeClass('active')
            $('#yearly').prop('checked', true);
            $("#monthly").prop('checked', false);
            // 渲染结果 保留一位小数
            var result = (Number(id) * 58).toFixed(1);
            $('.computed_price').html('￥' + result)
        })

        /* -------- 选择按月订阅  radio触发的事件------- */
        $('#monthly').on('change', function (e) {
            var isChecked = $(this).is(':checked')
            var val = $('.month_number').text();
            if (val >= 10) {
                $('.profit_tips').show()
            }
            if (!isChecked) {
                $('#number_box_month button').attr('disabled', true)
            } else {
                $('#number_box_month button').removeAttr('disabled')
            }

            if (val == 1) {
                $('#number_box_month button:eq(0)').prop('disabled', true)
            }
            if (val == 12) {
                $('#number_box_month button:eq(1)').prop('disabled', true)
            }

            var result = (Number(val) * 5.8).toFixed(1);
            $('.computed_price').html('￥' + result)

        })

        /* -------- 选择按年订阅  radio触发的事件------- */
        $('#yearly').on('change', function (e) {
            $('.profit_tips').hide()
            // console.log($(this).is(':checked'))
            var isChecked = $(this).is(':checked')
            // 按年订阅默认选择1年 
            var val = 1;
            $('.computed_price').html('￥' + Number(val) * 58)
            if (isChecked) {
                $('#number_box_year span:eq(0)').addClass('active').siblings().removeClass('active')
            }
        })
    }

    // 以下数据交互 -------------------
    // 定义全部变量state
    var globalState = {}
    var changeTime = [];
    var submitPrice = 0;

    function init(state) {
        // init 已选择的区域和行业
        var selectedAreaAndInd = getCount(state.area, state.industry)
        setSelectedAreaAndInd(selectedAreaAndInd)
        // 初始化，已购买的城市和行业
        setBuyAreaAndInd(state.buyset)

        // 初始化订阅周期
        var dStart = new Date(state.startTime * 1000).pattern('yyyy年MM月dd日')
        var dEnd
        var change = sessionStorage.getItem("vip_change_time");
        if (change) {
            var afterEndTime
            if (change.indexOf("月") > -1) {
                var monthNum = parseInt(change.replace("个月", ""));
                afterEndTime = getVipEndDate(2, monthNum, state.endTime)
                changeTime = [monthNum, 2]
            } else {
                var yearNum = parseInt(change.replace("年", ""));
                afterEndTime = getVipEndDate(1, yearNum, state.endTime)
                changeTime = [yearNum, 1]
            }
            dEnd = new Date(afterEndTime * 1000).pattern('yyyy年MM月dd日');
            $(".body-item.cycle .tip").show();
        } else {
            dEnd = new Date(state.endTime * 1000).pattern('yyyy年MM月dd日')
        }

        var sDuration = dStart + ' - ' + dEnd
        $('.body-item.cycle .buy-cycle').text(sDuration)

        // 初始化关键词
        if (state.items.lenght === 0) {
            $('.body-item.keywords .keywords-text').text('未分类')
        } else {
            var arr = []
            state.items.forEach(function (item, index) {
                arr.push(item['s_item'])
            })
            $('.body-item.keywords .keywords-text').text(arr.join('、'))
        }

        // 初始化信息类型
        if (state.infotype.length === 0) {
            $('.body-item.info-type .info-type-text').text('全部类型')
        } else {
            $('.body-item.info-type .info-type-text').text(state.infotype.join('、'))
        }

        // 推送设置初始化
        var pushSettingMap = {
            1: '实时推送',
            2: '每日推送',
            3: '每周推送',
            4: '每月推送',
        }
        $('.body-item.push-setting .push-setting-text').text(pushSettingMap[state.ratemode])

        // 初始化项目匹配
        if (state.projectmatch) {
            $('.switch').addClass('checked')
        } else {
            $('.switch').removeClass('checked')
        }
    }

    // 给订阅周期栏目绑定点击事件（订阅周期选择框显示与隐藏等各种操作）
    //initCycleSelector()

    var subVipState = sessionStorage.getItem('sub_vip_state');
    var reqData = JSON.parse(subVipState);
    if (subVipState) {
        init(reqData);
        //判断是否修改
        var IndustryNoChange = JSON.stringify(reqData.oldIndustry.sort()) === JSON.stringify(reqData.industry.sort());
        var tmp1 = getAreaClassArr(reqData.oldArea);
        var tmp2 = getAreaClassArr(reqData.area);
        var areaNoChange = (JSON.stringify(tmp1[0].sort()) === JSON.stringify(tmp2[0].sort())) && (JSON.stringify(tmp1[1].sort()) === JSON.stringify(tmp2[1].sort()));
        if (IndustryNoChange && areaNoChange && changeTime.length==0) {
            return
        }

        //判断是否需要升级
        var status = getUpgradeFinalStatus(getBuySet(reqData.area, reqData.industry), {
            "areacount": reqData.buyset.areacount,
            "buyerclasscount": reqData.buyset.buyerclasscount,
            "citys": reqData.buyset.newcitys
        }, changeTime, reqData.endTime, reqData.renewList);

        if (status[0] === -2) {
            alert("出错");
            return
        }

        if (status[0] === -1) {
            //直接修改
            $(".vip-footer.modify").show();

            $('.vip-footer .button-l.reset').on("click", function () {
                cancelTip(1);
            })
            return
        }

        if (status[0] > 0) {
            //需要付钱
            $(".vip-footer.upgrade").show();
            //价格展示
            $(".vip-footer.upgrade .billing-price").text("￥" + formatMoney(status[0]))
            submitPrice = status[0] * 100
        }
        //区域需要升级
        if (status[1]) {
            $(".body-item.area .tip-need-upgrade").show();
        }
        //行业需要升级
        if (status[2]) {
            $(".body-item.industry .tip-need-upgrade").show()
        }

        if (!status[1] && !status[2]) {
            $(".vip-footer.upgrade .confirm").text("立即续费");
        }

        $('.vip-footer .button-l.reset').on("click", function () {
            cancelTip(2);
        })
    } else {
        getDataWitXHR()

    }

    //提交请求
    $('.vip-footer .button-r.confirm').on('click', function () {
        $(this).attr("disabled", "disabled");
        doSubmit();
        $(this).removeAttr("disabled");
    })


    //保存 or 升级
    function doSubmit() {
        $DoPost('/subscribepay/vipsubscribe/saveChange', {
            "area": reqData.area["全国"] ? '{}' : JSON.stringify(reqData.area),
            "industry": reqData.industry.join(","),
            "payWay": "wx_js",
            "time": sessionStorage.getItem("vip_change_time"),
            "price": submitPrice
        }, function (res) {
            console.log(res)
        }, false);
    }

});