dlstatic / static-pay · Files

//支付交互逻辑

define(function(require, exports, module) {
  var Miniclock = require('miniclock');
require( 'fancybox' );
$(function () {
    var Pay = {
        initialize: function () {
            this.bindEvents();
            this.initpaymentList();
            this.update();
        },
        initSelector: function () {
            this.orderMoneyTag = $('#orderMoney'); //订单总金额
            this.accountBalanceTag = $('#j_availbleBalance'); //账户余额

            this.balancePayTag = $('#j_balanceAmount'); //余额支付部分
            this.cardPayTag = $('#j_bankCardAmount'); //线上支付部分
            this.otherPayTag = $('#j_otherAmount'); //线上支付部分


            this.needMore = $('#needMore'); //不足部分
            this.submit = $('#submit'); //提交按钮

            this.orderDetailTag = $('#orderDetail'); //订单详情

            this.balanceCheckbox = $('#j_balance');
            this.bankCardCheckbox = $('#j_bankCard');
            this.otherCheckbox = $('#j_otherPlatform');

            this.balance = $('#j_balance');

            this.balanceAmount = $('#j_balanceAmount');
            this.bankCardAmount = $('#j_bankCardAmount');
            this.otherAmount = $('#j_otherAmount');

            this.bankNew = $('#j_bankNew');
            this.usedBank = $('#j_usedBank');
            this.bankArea = $('#j_bankArea');

            this.quickPaymentList = $('#j_quickPaymentList');
        },
        bindEvents: function () {
            var _this = this;

            this.initSelector(); //初始化dom选择器

           $(".popup-btn").fancybox({
               padding : 20,
               modal: true
           });

            var regs = {
                card: /^\d{10,}$/,
                code: /^\d{3}$/,
                messageCode: /^\d{4,6}$/,
                name: /\S{1}/,
                id: /^\d{18}|\d{17}\w$/,
                phone: /^1[3|4|5|6|7|8|9]\d{9}$/
            };

            $('.ui-form').on('blur', '.ui-input:visible', function () {
                var val = $.trim($(this).val());
                var key = $(this).attr('data-reg');
                var reg = regs[key];
                var isOk = reg.test(val);
                $(this).toggleClass('ui-input-error', !isOk).nextAll('.font-red').toggleClass('hide', isOk);

            }).on('focus', '.ui-input:visible', function () {
                $(this).removeClass('ui-input-error').nextAll('.font-red').addClass('hide');
            }).on('blur', '.ui-select', function () {
                var month = $.trim($('#ui-select-month').val());
                var year = $.trim($('#ui-select-year').val());
                var isOk = !!(month && month != '');
                if (!isOk) {
                    $('#font-red-validity').removeClass('hide', isOk).text('请选择有效期月份');
                    return;
                }

                isOk = !!(year && year != '');
                if (!isOk) {
                    $('#font-red-validity').removeClass('hide', isOk).text('请选择有效期年份');
                    return;
                }

                $('#font-red-validity').addClass('hide', isOk).text('');
            });



            $('.bw-tab-content').on('click', '.pl-item', function () {
                $('#quick-form-validity').addClass('hide');
                $('#quick-form-cvv2').addClass('hide');
                $('.ui-form').find(':text, :password').val('').removeClass('ui-input-error').nextAll('.font-red').addClass('hide');
                $('#font-red-validity').addClass('hide');
                $(this).closest('.payment-list').slideUp(300).next('.bw-quick').show().find(':radio').first().prop('checked', true).parent().addClass('checked').parent().siblings().find(':radio').prop('checked', false).parent().removeClass('checked');
                $(this).closest('.bw-tab-content').find('.bw-quick').find('.bank-logo').replaceWith($(this).children('.bank-logo').clone());

            });

            $('.bw-q-return').on('click', function (e) {
                e.preventDefault();
                $(this).closest('.bw-quick').slideUp(300).removeClass('type-credit').prev().slideDown(300);
            });

            $('.used-bank').on('click', 'dt', function () {
                $(this).toggleClass('hover').nextAll('dd').toggle();
                $('#j_bankCard').prop('checked', true).parent().addClass('checked').closest('.paybox').addClass('paybox-selected').find('.p-amount').removeClass('hide');
                _this.resetOtherPay();
                _this.update();
            }).on('click', 'dd li', function () {
                var curr = $(this);
                var newest = $(this).closest('.used-bank').find('dt').find('.ub-item');
                $(this).closest('dd').hide();
                var currHtml = curr.html();
                var newestHtml = newest.html();
                _this.resetOtherPay();
                curr.html(newestHtml);
                newest.html(currHtml);
                _this.update();
            });

            $(document).on('click', function (e) {
                if ($(e.target).closest('.used-bank').length <= 0) {
                    $('.used-bank').find('dt').removeClass('hover').next('dd').hide();
                }
            });

            $('.paybox').on('change', '.p-key :checkbox[data-ptype]', function () {
                if ($(this).is(':disabled')) {
                    return;
                }
                _this.updatePayMethod($(this));
            }).on('click', '.pl-more', function () {
                $(this).prevAll().removeClass('hide').end().addClass('hide');
                $(this).closest('.pl-wrap').next('.bw-more-pay').removeClass('hide');
            });

            $('.bank-wrap .tab').on('click', 'li', function (e) {
                e.preventDefault();
                var i = $(this).index();
                $(this).addClass('curr').siblings().removeClass('curr');
                $('.bw-tab-content').eq(i).show().find('.payment-list').show().next('.bw-quick').hide().end().end().siblings('.bw-tab-content').hide();
                if (i == 0) {
                    $('.bw-tab-content').eq(i).find('.bw-quick').toggleClass('type-credit', i != 0);
                }
                $('#quick-form-validity').addClass('hide');
                $('#quick-form-cvv2').addClass('hide');
                $('.ui-form').find(':text, :password').val('').removeClass('ui-input-error').nextAll('.font-red').addClass('hide');
                $('#font-red-validity').addClass('hide');
            });

            $('.bw-tab-content .bw-quick').on('change', ':radio', function () {
                $(this).parent().addClass('checked').closest('label').siblings('label').children().removeClass('checked').find(':radio').prop('checked', false);

                $(this).closest('.ui-form').find(':text, :password').val('').removeClass('ui-input-error').nextAll('.font-red').addClass('hide');
                $('#font-red-validity').addClass('hide');
                var isCredit = $(this).attr('data-type') == 'credit';
                $(this).closest('.bw-quick').toggleClass('type-credit', isCredit);
                $('#quick-form-validity').toggleClass('hide', !isCredit);
                $('#quick-form-cvv2').toggleClass('hide', !isCredit);
            });


            this.bankNew.on('click', function (e) {
                e.preventDefault();
                $(this).parent().addClass('hide');
                $('.bank-return').removeClass('hide');
                $('.bw-tab-content').first().show().siblings('.bw-tab-content').hide();
                $('#j_bankCard').prop('checked', true).parent().addClass('checked').closest('.paybox').addClass('paybox-selected');
                $('.tab li').first().trigger('click');
                $('.pay-verify').removeClass('credit-type').find('.pv-line').first().addClass('hide');
                _this.bankArea.slideDown(300);
                _this.resetOtherPay();
                _this.update();
            });

            $('.bank-return').on('click', function (e) {
                e.preventDefault();
                _this.bankNew.parent().removeClass('hide');
                $(this).addClass('hide');
                _this.bankArea.slideUp(300);
                _this.update();
            });


            $('.input:text').on('focus', function () { //输入框高亮样式切换
                $(this).addClass('active');
            }).on('blur', function () {
                $(this).removeClass('active');
            });

            $('.show-more').on('click', function (e) { //切换显示订单详情
                e.preventDefault();
                _this.toggleOrder($(this));
                _this.update();
            });


            this.submit.on('click', function (e) {
                e.preventDefault();
                if ($(this).is(':disabled')) {
                    return;
                }
                if (!_this.verCardForm()) {
                    return;
                }
                if (!$('#j_balance').is(':checked') && $('#j_otherPlatform').is(':checked')) {
                    location.href = './pay_wechat.html';
                    return;
                }
                $(".popup-btn").click();
            });

            $('.close').on('click', function () {
                $.fancybox.close();
            });

            $('.other-pay').on('change', ':radio', function () { //在线支付平台切换
                _this.toggleOnlinePlatform($(this));
            });
        },
        toggleOrder: function (target) {
            if (this.orderDetailTag.is(':animated')) {
                return;
            }
            var lastText = target.find('span').text();
            var newText = target.find('span').attr('data-text');
            target.find('span').text(newText).attr('data-text', lastText);
            target.children('.icon').toggleClass('down');
            this.orderDetailTag.slideToggle(300);
        },
        initpaymentList: function () {

            //默认仅显示前11家银行
            $('.payment-list').each(function () {
                $(this).find('.pl-item').slice(11).addClass('hide');
            });

            //根据账户余额值是否禁用余额支付选项框
            if (this.payInfo().accountBalance <= 0) {
                $('#j_balance').prop('checked', false).prop('disabled', true).parent().removeClass('checked').closest('.p-wrap').addClass('disabled').closest('.paybox').removeClass('paybox-selected');
            } else {
                $('#j_balance').prop('checked', true).trigger('change');
            }
            // var empty = this.payInfo().accountBalance <= 0;
            // $('#j_balance').prop('checked', !empty).prop('disabled', empty).trigger('change');

        },
        updatePayMethod: function (target) {
            var checked = target.is(':checked'),
                ptype = target.attr('data-ptype'),
                pay = this.payInfo();

            //订单金额 <= 余额
            if (pay.onlinePay <= 0) {
                target.prop('checked', checked).parent().toggleClass('checked', checked).closest('.paybox').toggleClass('paybox-selected', checked).find('.p-amount').toggleClass('hide', !checked).end().siblings('.paybox').removeClass('paybox-selected').find(':checkbox').prop('checked', false).parent().removeClass('checked').end().end().find('.p-amount').addClass('hide').next().addClass('hide');
                if (ptype == 'other') {
                    $('.other-pay').toggleClass('hide', !checked).find('li').first().toggleClass('on', checked).find(':radio').prop('checked', checked).parent().toggleClass('checked', checked).closest('li').siblings().removeClass('on').find(':radio').each(function () {
                        $(this).prop('checked', false).parent().removeClass('checked');
                    });
                }
                this.update();
                return;
            }

            target.prop('checked', checked).parent().toggleClass('checked', checked).closest('.paybox').toggleClass('paybox-selected', checked).find('.p-amount').toggleClass('hide', !checked);

            if (ptype == 'other') {
                $('.other-pay').slideToggle(checked).find('li').first().toggleClass('on', checked).find(':radio').prop('checked', checked).parent().toggleClass('checked', checked).closest('li').siblings().removeClass('on').find(':radio').each(function () {
                    $(this).prop('checked', false).parent().removeClass('checked');
                });
                this.resetCardPay();
            }

            if (ptype == 'bank') {
                this.resetOtherPay();
                this.bankNew.parent().removeClass('hide');
                $('.bank-return').addClass('hide');

                this.bankArea.slideUp(300);
            }

            this.update();
        },
        updateCheckboxStyle: function (target, checked) {
            target.prop('checked', checked).parent().toggleClass('checked', checked);
        },
        toggleOnlinePlatform: function (target) {
            target.parent().addClass('checked');
            target.closest('li').addClass('on').siblings().removeClass('on').find('.radio').removeClass('checked');

            if (this.payInfo().onlinePay <= 0) {
                $('.balance').removeClass('on').find('.checkbox').removeClass('checked').children().prop('checked', false);
            }

            this.update();
        },
        update: function () {
            var pay = this.payInfo();
            var online = pay.onlinePay;
            var need;

            var bChecked = $('#j_balance').prop('checked');
            var cChecked = $('#j_bankCard').prop('checked');
            var oChecked = $('#j_otherPlatform').prop('checked');

            $('.pay-verify').find('.pv-line').eq(1).toggleClass('hide', !bChecked); //若余额支付，则显示密码框

            if ($('#j_bankNew').is(':visible')) {
                var isCredit = $('#j_usedBank').find('dt .bank-logo').attr('data-ctype') == 'credit';
                $('.pay-verify').toggleClass('credit-type', isCredit && cChecked).find('.pv-line').first().toggleClass('hide', !(isCredit && cChecked));
            } else {
                $('.pay-verify').removeClass('credit-type').find('.pv-line').first().addClass('hide');
            }


            if (online >= 0) {
                //余额支付
                if (bChecked) {
                    this.balancePayTag.text(this.format(pay.accountBalance));
                    need = online;
                } else {
                    need = pay.orderMoney;
                }

                //银行卡线上支付
                if (cChecked) {
                    this.cardPayTag.text(this.format(need));
                }

                //微信、支付宝第三方支付
                if (oChecked) {
                    this.otherPayTag.text(this.format(need));
                }

                //未选择银行卡、第三方支付
                if (!oChecked && !cChecked) {
                    this.needMore.text(this.format(need)).parent().show();
                    this.submit.prop('disabled', true).addClass('disabled');
                } else {
                    this.needMore.parent().hide();
                    this.submit.prop('disabled', false).removeClass('disabled');
                }

            } else {

                //余额支付
                if (bChecked) {
                    this.balancePayTag.text(this.format(pay.orderMoney)).parent().show();
                    this.needMore.parent().hide();
                    this.submit.prop('disabled', false);
                }

                //银行卡线上支付
                if (cChecked) {
                    this.cardPayTag.text(this.format(pay.orderMoney));
                    this.needMore.parent().hide();
                    this.submit.prop('disabled', false);
                }

                //微信、支付宝第三方支付
                if (oChecked) {
                    this.otherPayTag.text(this.format(pay.orderMoney));
                    this.needMore.parent().hide();
                    this.submit.prop('disabled', false);
                }

                //未选择任何支付方式
                if (!bChecked && !oChecked && !cChecked) {
                    this.needMore.text(this.format(pay.orderMoney)).parent().show();
                    this.submit.prop('disabled', true);
                }
            }
        },
        resetCardPay: function () {
            $('#j_bankCard').prop('checked', false).parent().removeClass('checked').closest('.paybox').removeClass('paybox-selected').find('.p-amount').addClass('hide');
            $('.bank-return').trigger('click');
        },
        resetOtherPay: function () {
            $('#j_otherPlatform').prop('checked', false).parent().removeClass('checked').closest('.paybox').removeClass('paybox-selected').find('.p-amount').addClass('hide');
            $('.other-pay').slideUp().find('li').removeClass('on').each(function () {
                $(this).find(':radio').prop('checked', false).parent().removeClass('checked');
            });
        },
        verCardForm: function () {
            var isCardPay = $('#j_quickPaymentList').next('.bw-quick').is(':visible');
            var isOk = true;
            var regs = {
                card: /^\d{10,}$/,
                code: /^\d{3}$/,
                name: /\S{1,5}/,
                id: /^\d{18}|\d{17}\w$/,
                phone: /^1[3|4|5|6|7|8|9]\d{9}$/
            };

            if (isCardPay) {
                $('#j_quickPaymentList').next('.bw-quick').find('.ui-input:visible').each(function () {
                    var val = $.trim($(this).val());
                    var key = $(this).attr('data-reg');
                    var reg = regs[key];
                    isInputOk = reg.test(val);
                    $(this).toggleClass('ui-input-error', !isInputOk).nextAll('.font-red').toggleClass('hide', isInputOk);
                    isOk = isOk ? isInputOk : isOk;
                    return isOk;
                });
                if (!isOk) {
                    return;
                }
                if ($('#quick-form-validity').is(':visible')) {
                    var month = $.trim($('#ui-select-month').val());
                    var year = $.trim($('#ui-select-year').val());

                    if (!(month && month != '')) {
                        $('#font-red-validity').removeClass('hide').text('请选择有效期月份');
                        return;
                    }

                    if (!(year && year != '')) {
                        $('#font-red-validity').removeClass('hide').text('请选择有效期年份');
                        return;
                    }
                    $('#font-red-validity').removeClass('hide');
                }
                return isOk;
            }
            return isOk;
        },
        format: function (num) {
            return (Math.floor(num * 100) / 100).toFixed(2, 10);
        },
        payInfo: function () {
            var orderMoney = +$.trim(this.orderMoneyTag.text());
            var accountBalance = +$.trim(this.accountBalanceTag.text());
            var onlinePay = orderMoney - accountBalance;
            return {
                orderMoney: orderMoney,
                accountBalance: accountBalance,
                onlinePay: onlinePay
            }
        }
    };
    Pay.initialize();
});

if ($('.sendverify').length){
  $('.sendverify').on({
    click: function(){
      new Miniclock(this, {

      });
    }
  });
};

if ($('.getcode').length){
  $('.getcode').on({
    click: function(){
      new Miniclock(this, {
        time : 60  //时钟最大时间值
        ,SD: "重新发送"
        ,WT: "s" 
        ,ban: "disabled"  //已点击标志禁用样式名称。
        ,callback: function(){}
      });
    }
  });
};

if ($('.only-item').length){
  var showbtn = $('#j_bankNew');
  var showArea = $('#j_bankArea');
  var btns = $('.p-v-line >div');

  $('.only-item').on({
    click: function(){
      var cache = $(this).find('.bank-logo')[0];

      showbtn.html(cache.outerHTML);
      showArea.slideUp();
      btns.eq(1).addClass('hide');
      btns.eq(0).removeClass('hide');
    }
  })
};

if ($('.fancy').length) {
  $('.fancy').fancybox({

  });
}

});