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 ) ) // 新超级订阅续费 if (r.data.buyset.upgrade == 1) { $("[data-new-vip]").show() $("[data-old-vip]").hide() if (_this.buyInfo.buyset.areacount == -1) { goodsSize.props.areaCount = 16 } else { goodsSize.props.areaCount = _this.buyInfo.buyset.areacount } } // 初始化默认金额 _this.setPrice(_this.calcPrice()) } } }) }, getPrice: function () { var _this = this $.ajax({ url: '/subscribepay/vipsubscribe/getPrice', type: 'POST', success: function (r) { if (r) { _this.requestRules = r // 将价格列表传至商品规格组件 goodsSize.props.priceInfo = r.new } } }) }, // 计算价格 calcPrice: function (timeSelect) { return Calculation.GetTotal(undefined, timeSelect ? timeSelect : this.timeSelect) }, // 设置价格 setPrice: function (price) { this.price = parseInt(price) var size = JSON.parse(sessionStorage.getItem('vip-cur-select-size')) // console.log(renew.buyInfo.buyset) var count = renew.buyInfo.buyset.areacount == -1 ? 16 : renew.buyInfo.buyset.areacount if (this.buyInfo.buyset.upgrade == 1) { // 新规则初始化价格 if (size) { // 初始化上次选择的商品规格 coupon.updatePrice(size.price / 100) } else { // 初始化默认一个月*省份数量或全国价格 sessionStorage.removeItem('$select-coupon') if (count >= 16) { coupon.updatePrice(59900 / 100) } else { coupon.updatePrice(3800*count / 100) } } } else { // 旧规则初始化价格 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 = '
最长订阅周期不可超过3年
剩余周期:' + 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 upgrade = renew.buyInfo.buyset.upgrade var size = goodsSize.defaultSize var sizeTime = '' if (size && size.period) { if(size.period.indexOf('月') > -1) { size.period = size.period.replace('月', '个月') } sizeTime = size.period } else { sizeTime = '1个月' } console.log(upgrade,sizeTime, '新or老') //支付请求 var data = { userLotteryId :coupon.$refs.couponRef.coupon.userLotteryId, lotteryId : coupon.$refs.couponRef.coupon.lotteryId, time : upgrade == 0 ? _this.getDuration(_this.timeSelect).trim() : sizeTime, orderType: 5, disWord :GetQueryString('disWord'), price: coupon.initPrice*10000/100 } $.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"); // 清除商品规格当前选择 sessionStorage.removeItem("vip-cur-select-size") sessionStorage.removeItem("$select-coupon") } 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 */ // vip商品规格组件 var goodsSize = new Vue({ el:'#goods-size-vue', data: function() { return { props: { defaultSize: {}, areaCount: 1, priceInfo: {} } } }, created () { }, mounted () { this.getSizeStorage() }, methods: { // 父组件传省份数量至子组件 getAreaCount: function() { var areaStorage = JSON.parse(sessionStorage.getItem('vipSubSelectArea')) console.log(renew.buyInfo.buyset.areacount) if (areaStorage) { var count = 0 for (var key in areaStorage) { if (key.indexOf('全国') > -1) { count = 16 } else { count++ } } this.props.areaCount = count } }, getSizeStorage: function() { // 恢复商品规格选择 var size = JSON.parse(sessionStorage.getItem('vip-cur-select-size')) // console.log(size, '恢复的商品规格') if (size) { this.$refs.goodsSize.goodsActive = size.index this.defaultSize = size this.$nextTick(function(){ coupon.updatePrice(size.price/100) }) } }, getGoodSize: function(data) { // console.log(data, '父组件接收子组件传来的商品规格') sessionStorage.removeItem('$select-coupon') this.defaultSize = data coupon.updatePrice(data.price/100) } } }) // 订单提交组件 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 */