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

var renew = {
    oldRules: Calculation.PriceRule.old,
    newRules: Calculation.PriceRule.new,
    requestRules: {},
    price: '', // 单位分
    timeSelect: [1, 2], // 续费周期(默认选中1个月)
    timeCheckOk: true,
    buyInfo: { // 购买的信息
        startTime: 0,
        endTime: 0,
        area: {},
        industry: [],
        buyset: {
            areacount: 0,
            newcitys: [],
            buyerclasscount: 0,
            upgrade: 0
        },
        isTrial: false,
        renewList: []
    },
    init: function () {
        this.initEvents()
        this.recoverState()
        this.getPrice()
        this.getBuySetInfo()
        this.setTimePickerSelected(this.timeSelect)
    },
    setAreaAndIndustry: function () {
        var buySet = this.buyInfo.buyset
        var result = {
            area: '',
            industry: ''
        }
        // 区域
        if (buySet.areacount === -1) {
            result.area = '全国'
        } else {
            var strArr = []
            if (buySet.areacount) {
                strArr.push(buySet.areacount + '个省')
            }
            if (buySet.newcitys && buySet.newcitys.length !== 0) {
                var count = 0
                buySet.newcitys.forEach(function (item) {
                    count += item
                })
                strArr.push(count + '个市(分布在' + buySet.newcitys.length + '个省内')
            }
            result.area = strArr.join('、')
        }

        // 行业
        if (buySet.buyerclasscount === -1) {
            result.industry = '全部行业'
        } else {
            result.industry = buySet.buyerclasscount + '个行业'
        }

        $('.area .item-r').text(result.area)
        $('.industry .item-r').text(result.industry)

        return result
    },
    initEvents: function () {
        this.initClickEvents()
        this.initPickerEvents()
    },
    getBuySetInfo: function () {
        var _this = this
        $.ajax({
            url: '/subscribepay/vipsubscribe/getSubBuyMsg',
            type: 'POST',
            success: function (r) {
                if (r.success && r.data) {
                    Object.assign(_this.buyInfo, r.data)
                    _this.setAreaAndIndustry()
                    _this.checkShowDueTip()
                    // 初始化默认续费周期
                    _this.calcDuration(true)
                    // 初始化价格计算类
                    Calculation.Init(
                        _this.buyInfo.isTrial,
                        new Buyset(
                            _this.buyInfo.buyset.areacount,
                            _this.buyInfo.buyset.newcitys,
                            _this.buyInfo.buyset.buyerclasscount,
                            _this.buyInfo.buyset.upgrade || 0
                        )
                    )
                    // 初始化默认金额
                    _this.setPrice(_this.calcPrice())
                }
            }
        })
    },
    getPrice: function () {
        var _this = this
        $.ajax({
            url: '/subscribepay/vipsubscribe/getPrice',
            type: 'POST',
            success: function (r) {
                if (r) {
                    _this.requestRules = r
                }
            }
        })
    },
    // 计算价格
    calcPrice: function (timeSelect) {
        return Calculation.GetTotal(undefined, timeSelect ? timeSelect : this.timeSelect)
    },
    // 设置价格
    setPrice: function (price) {
        this.price = price
        coupon.updatePrice(this.price / 100)
    },
    // 根据选中结果得到续费了多长时间的字符串
    getDuration: function (timeSelect) {
        var durationStr = ''
        if (timeSelect[1] === 1) {
            // 年
            durationStr = timeSelect[0] + '年'
        } else if (timeSelect[1] === 2) {
            // 月
            durationStr = timeSelect[0] + '个月'
        }
        return durationStr
    },
    // 计算续费后的日期区间
    calcDuration: function (needSet) {
        // 根据
        var endTime = this.buyInfo.endTime
        if (!endTime) {
            $('.select_cycle .duration').hide()
            return
        }
        var durationStamp = getVipEndDate(this.timeSelect[1], this.timeSelect[0], endTime) - endTime // 续费时间段时间戳
        var durationStr = this.getDuration(this.timeSelect) // 续费时间段字符串
        var buyEndTimeString = new Date(endTime * 1000).pattern('yyyy年MM月dd日') // svip到期时间
        var renewEndTimeString = new Date((endTime + durationStamp) * 1000).pattern('yyyy年MM月dd日') //续费后到期时间

        if (needSet) {
            $('.select_cycle .month').text(durationStr)
            $('.select_cycle .duration').text(buyEndTimeString + ' - ' + renewEndTimeString)
        } else {
            return {
                duration: durationStr, // 续费时间段字符串
                buyEndTimeString: buyEndTimeString, // svip到期时间
                renewEndTimeString: renewEndTimeString, //续费后到期时间
            }
        }
    },
    // 月份转年份（超过1年才会转）
    monthToYear: function (num) {
        var year = Math.floor(num / 12)
        var month = num % 12
        var str = ''
        if (year) {
            str += (year + '年')
        }
        if (month) {
            str += (month + '个月')
        }
        return {
            str: str,
            year: year,
            month: month
        }
    },
    checkOver3Years: function (timeSelect) {
        // 根据
        var endTime = this.buyInfo.endTime
        if (!endTime) {
            return
        }
        var maxEndMonth = 36 // 最大续费36个月
        var durationStamp = getVipEndDate(timeSelect[1], timeSelect[0], endTime) - endTime // 续费时间段时间戳

        // 最长订阅周期不可超过3年 ------------
        var nowStamp = Math.floor(Date.now() / 1000)
        // 已购买的套餐剩余月数
        var lastMonthStamp = endTime - nowStamp
        var lastMonth = Math.round(lastMonthStamp / (60 * 60 * 24 * 30))
        // 续费后套餐剩余月数（需要加上原剩余月数lastMonth）
        var renewMonthTotalStamp = lastMonthStamp + durationStamp
        var renewMonthTotal = Math.round(renewMonthTotalStamp / (60 * 60 * 24 * 30))

        if (renewMonthTotal > maxEndMonth) {
            var showTipText = '<div style="white-space: nowrap;">最长订阅周期不可超过3年</div>剩余周期：' + this.monthToYear(lastMonth).str
            weui.toast(showTipText, {
                duration: 3000,
                className: 'jy-toast',
            })
            // 确认按钮置灰
            $('#enter_period').prop('disabled', true)
        } else {
            $('#enter_period').prop('disabled', false)
        }
    },
    // 是否展示即将到期
    checkShowDueTip () {
        var endTime = this.buyInfo.endTime * 1000
        var timeSub = endTime - Date.now()
        if (timeSub > 0 && timeSub < 60 * 60 * 24 * 1000 * 3) {
            $('.vip-header').show()
        }
    },
    setTimePickerSelected: function (timeSelect) {
        if (timeSelect[1] == 1) {
            // 年
            var cButton = $('.year_number.j-button-select[data-id=' + timeSelect[0] + ']')
            if (cButton) {
                cButton.trigger('click')
            } else {
                $('input[value=year]').trigger('click')
            }
        } else if (timeSelect[1] == 2) {
            // 月
            $('input[value=month]').trigger('click')
            $('#number_box_month .month_number').text(timeSelect[0] - 1)
            $('#number_box_month button.add').trigger('click')
        }
    },
    getTimePickerSelected: function () {
        var timeSelectPicker = $('#time_cycle')
        var $checkInput = timeSelectPicker.find('input[name=time]:checked')
        if (!$checkInput) return
        // year/month(按年或者按月购买)
        var checkedType = $checkInput.val()
        // timeSelectedArr[0] 代表选择的内容
        // timeSelectedArr[1] 代表选择的类型 1年份 2月份
        var timeSelectedArr = []
        if (checkedType === 'month') {
            timeSelectedArr = [$('#number_box_month .month_number').text() - 0, 2]
        } else if (checkedType === 'year') {
            timeSelectedArr = [$('#number_box_year .year_number.active').attr('data-id') - 0, 1]
        }
        return timeSelectedArr
    },
    onTimePickerChange: function () {
        var timeSelect = this.getTimePickerSelected()
        var price = this.calcPrice(timeSelect)
        $('.computed_price').text(formatMoney(price / 100))
        this.checkOver3Years(timeSelect)
    },
    // 恢复数据
    recoverState: function () {
        var vipSubSelectTime = sessionStorage.getItem('vipSubSelectTime')
        if (vipSubSelectTime) {
            this.timeSelect = JSON.parse(vipSubSelectTime)
        }
        this.flushSubmit()
    },
    // 保存数据
    saveState: function () {
        sessionStorage.setItem('vipSubSelectTime', JSON.stringify(this.timeSelect))
    },
    // 是否可提交
    flushSubmit: function () {
        if (this.timeCheckOk && sessionStorage.getItem("vipSub_read") === "true") {
            $('.vip-footer.renew .confirm').prop('disabled', false)
            coupon.checkboxStatus = true
            coupon.$refs.couponRef.submitStatus = false
        } else {
            $('.vip-footer.renew .confirm').prop('disabled', true)
            coupon.$refs.couponRef.submitStatus = true
        }
    },
    initClickEvents: function () {
        var _this = this
        /*------ 关闭弹窗事件  点击取消或遮罩层 -----*/
        $('.weui-mask').click(hideDialog);
        $('.cancel').click(hideDialog);

        // 确认订阅周期
        $('#enter_period').on('click', function () {
            $('.weui-mask').trigger('click')
            _this.timeSelect = _this.getTimePickerSelected()
            _this.calcDuration(true)
            _this.setPrice(_this.calcPrice())
            _this.saveState()
        })

        $('.vip-footer.renew .confirm').on('click', function () {
            $('.vip-footer.renew .confirm').prop('disabled', true)
            //支付请求
            var data = {
                userLotteryId :coupon.$refs.couponRef.coupon.userLotteryId,
                lotteryId : coupon.$refs.couponRef.coupon.lotteryId,
                time : _this.getDuration(_this.timeSelect).trim(),
                orderType: 5,
                disWord :GetQueryString('disWord'),
                price: _this.price
            }
            $.ajax({
                // url: '/subscribepay/vipsubscribe/createOrder',
                url: '/subscribepay/vipsubscribe/renew',
                type: 'POST',
                data: data,
                success: function (r) {
                    if (r.success) {
                        clearSessionStorage()
                        try {
                            history.replaceState({}, '', '/front/vipsubscribe/toOrderDetailPage?orderCode=' + r.data.code);
                            window.location.href = "/weixin/pay/checkout_subvip?t=1&orderCode=" + r.data.code;
                        } catch (e) {
                            showToast(e)
                        }
                    } else {
                        showToast(r.errMsg || '请求失败')
                    }
                    
                },
                complete: function () {
                    $('.vip-footer.renew .confirm').prop('disabled', false)
                }
            })
        })
    },
    initPickerEvents: function () {
        var _this = this
        /* -----  订阅周期弹窗弹出事件 -------*/
        // 选择订阅周期
        $('.select_cycle a').click(function (e) {
            _this.onTimePickerChange()
            $('#time_cycle').show(200);
        });

        // 对订阅时间选择的input绑定点击事件
        $('#time_cycle input:radio[name="time"]').on('click', function (e) {
            // 解除确认按钮的锁定
            if ($(e.target).hasClass('monthly') !== $('#number_box_month').hasClass('active')) {
                $('#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的事件  点击加减号触发的事件------- */
        $('#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') || $(e.currentTarget).hasClass('add')) {
                if (currentNum == 11) { //12个月自动跳转1年
                    $("#number_box_year .year_number:eq(0)").trigger("click");
                    return
                }
                // 点的+
                currentNum = currentNum >= data.numboxMax ? data.numboxMax : (currentNum + data.numboxStep);
            } else {
                // 点的-
                currentNum = currentNum <= data.numboxMin ? data.numboxMin : (currentNum - data.numboxStep);
            }
            $number.text(currentNum);

            _this.onTimePickerChange()

            var firstButton = $('#number_box_month button:first');
            var lastButton = $('#number_box_month button:last');
            // 如果为操作后的结果为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');
            var id = e.target.dataset.id;
            $(this).addClass('active').siblings().removeClass('active');
            $('#yearly').prop('checked', true);
            $("#monthly").prop('checked', false);

            _this.onTimePickerChange()
        });

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

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

            _this.onTimePickerChange()
        });

        // 计价标准
        $('.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)
        })

        $('.checkbox').on('click', function () {
            $(this).toggleClass('checked')
            var state = $(this).hasClass('checked')
            sessionStorage.setItem("vipSub_read", state)
            renew.flushSubmit()
        });
    }
}
$(function () {
    renew.init()
})


//获取url中"?"符后的字符串并正则匹配
function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  var context = "";
  if (r != null)
     context = r[2];
  reg = null;
  r = null;
  return context == null || context == "" || context == "undefined" ? "" : context;
}
// 隐藏dialog选择框
function hideDialog() {
    $('#pay_way').hide(200);
    $('#time_cycle').hide(200);
    $('.discount-details').hide()
    $('.discount-button .icon-arrow').removeClass('up')
}

function clearSessionStorage() {
    sessionStorage.removeItem("vipSubSelectTime");
    sessionStorage.removeItem("vipSub_read");
    sessionStorage.removeItem("historypushDataCache");
    sessionStorage.removeItem("endTime");
    sessionStorage.To_introducePage = 2;
    //订阅首页
    sessionStorage.removeItem("sub_vip_state");
    sessionStorage.removeItem("vip_index_read");
    sessionStorage.removeItem("vip_change_time");

    sessionStorage.removeItem("pay_read_cache")
    sessionStorage.removeItem("liveActiveCode_renew");
    sessionStorage.removeItem("liveActiveCode_new");
}
function showToast(text) {
    weui.toast(text, {
        duration: 3000,
        className: 'jy-toast',
    })
}
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);
    }
}
/* vue 代码 start */
var coupon = new Vue({ 
  el: '#coupon-vue',
  data: function () {
    return {
      type: 'vip',
        initPrice: 0, // 原价
        realPrice: 0, // 实付价
        checkboxStatus: false, // checkbox状态
        submitStatus: true,  // 提交按钮状态
        links: [
          {
            text: '《剑鱼标讯线上购买与服务条款》',
            url: '/front/staticPage/wx-serviceterms.html',
            event: this.readEvent
          }
        ],
        buttons: {
          submit: this.submitOrder
        }
    }
  },
  mounted () {
    this.init()
  }, 
  methods: {
    // 更新价格相关
    updatePrice: function (before) {
      console.log( '原价：' + before)
      this.initPrice = before;
      // 调用子组件查询最优卡券
      this.$refs.couponRef.getCoupon();
    },
    // 初始化及回显相关
    init: function () {},
    // 勾选阅读协议
    updateS: function(data) {
      data.callback(this.checkSubmitStatus(data.check))
    },
    // 校验checkbox
    checkSubmitStatus: function (checkStatus) {
      sessionStorage.setItem("vipSub_read", checkStatus)
      renew.flushSubmit()
      return renew.timeCheckOk && sessionStorage.getItem("vipSub_read") === "true"
    },
    saveEvent: function () {
      renew.saveState()
      sessionStorage.setItem("pay_read_cache", "0");
    },
    // 阅读协议点击事件
    readEvent: function () {
      renew.saveState()
      toRead()
    },
    // 订单提交事件
    submitOrder: function () {
      this.$refs.couponRef.submitStatus = true
      $('.vip-footer.renew .confirm').trigger('click')
      this.$refs.couponRef.submitStatus = false
    }
  }
})
/* vue 代码 end */