easypay.page.js 8.36 KB
/**
 * 订单结算页
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2016/8/29
 */

var $ = require('yoho-jquery');
var Hbs = require('yoho-handlebars');

var $pdStatus = $('.pd-status');
var $pdUsed = $('#pay-delivery-used');

var $balance = $('#balance-detail');

var couponsTpl = Hbs.compile($('#coupons-tpl').html());
var coinTpl = Hbs.compile($('#yoho-coin-tpl').html());
var promotionTpl = Hbs.compile($('#promotion-list-tpl').html());

var $coin = $('#coin-used');
var $coinSure = $('#coin-sure');

var queryInfo;
var pkgCache = {};
var $pkgList;

var invoice = require('./order/invoice');

require('./order/address');

require('../common');

queryInfo = window.queryString();

// FE Helper
Hbs.registerHelper('isEqual', function(v1, v2, options) {
    if (v1 === v2) {
        return options.fn(this);
    }
    return options.inverse(this);
});

// 支付及送货时间编辑/展示状态切换
function togglePdStatus() {
    $pdStatus.toggleClass('hide');

    $('#pay-delivery-used, #pay-delivery-choice').toggleClass('hide');
}

// 更新使用的支付及送货时间
function updateUsedPdShow(info) {
    $('#payment-way', $pdUsed).data({
        id: info.paymentTypeId,
        type: info.paymentType
    }).text(info.paymentTypeName);

    $('#delivery-time', $pdUsed).data('id', info.deliveryTimeId).text(info.deliveryTimeStr);

    $('#contract-me', $pdUsed).text(info.contractMe);
}

// 订单计算
// 传有货币数量则使用有货币,否者不使用,更改订单总价有货币使用数量重置为0
function compute(coin) {
    var d = {
        cartType: window.queryString().type,
        deliveryWay: $('input[name="delivery-way-radio"]:checked').val(),
        paymentType: $('#payment-way').data('id'),
        coin: coin ? parseInt(coin, 10) : 0
    };
    var couponCode = $('#coupons-sure').data('coupons');

    $coin.data('coin', d.coin);

    if (couponCode) {
        d.couponCode = couponCode;
    }

    if (queryInfo) {
        if (queryInfo.sku) {
            d.sku = queryInfo.sku;
        }

        if (queryInfo.skn) {
            d.skn = queryInfo.skn;
        }

        if (queryInfo.limitcode) {
            d.limitcode = queryInfo.limitcode;
        }

        if (queryInfo.bundle) {
            d.bundle = queryInfo.bundle;
        }
    }

    $.ajax({
        type: 'POST',
        url: '/cart/easypay/compute',
        data: d
    }).then(function(data) {
        var res;

        if (data.code === 200) {
            res = data.data;

            // update yoho coin max use num
            $coin.data('max', res.canUseCoinNum);

            // update yoho coin using
            $('#using-coin-cont').html(coinTpl(res));

            // update last order amount
            $('#sum-row em').html(res.last_order_amount);

            // update promotion formula list
            $('.promotion-item', $balance).remove();
            $('.gain-coin', $balance).after(promotionTpl(res));
        }
    });
}

$('.pd-status').click(togglePdStatus);

$('#pay-delivery-sure').click(function() {
    var $dt = $('.delivery-time input:checked');
    var $dw = $('.payment-type input:checked');

    updateUsedPdShow({
        paymentTypeId: $dw.data('id'),
        paymentTypeName: $dw.data('name'),
        paymentType: $dw.data('type'),
        deliveryTimeId: $dt.data('id'),
        deliveryTimeStr: $dt.data('name'),
        contractMe: $('.contract-me input:checked').val() === '1' ? '是' : '否'
    });

    togglePdStatus();
});

// 备注信息
$('#remark-btn').click(function() {
    var $this = $(this);

    $this.toggleClass('shrink');

    $this.siblings('.remark-content').toggleClass('hide');
});


if ($('#use-coupons').length) {
    // 优惠券
    $.ajax({
        type: 'GET',
        url: '/cart/coupon/list'
    }).then(function(data) {
        if (data.code === 200) {
            $('#coupon-list').prepend(couponsTpl({
                coupons: data.data
            }));
        }
    });

    $('#use-coupons, #coupons-sure, #coupons-cancel').click(function() {
        $('.coupons-trigger').toggleClass('hide');
    });


    // 使用优惠券
    $('#coupons-sure').click(function() {
        var coupons = $('input[name="coupons"]:checked').data('code');

        if (!coupons) {
            coupons = $('#coupon-code').val(); // 手动输入优惠券码
        }

        $(this).data('coupons', coupons);

        // coupons code change trigger compute
        compute();
    });
}

// 有货币
if ($coin) {
    $coin.data($coin.data()); // 防止人为页面更改有货币使用数量
}

$('#use-coin, #coin-sure, #coin-cancel').click(function() {
    $('.coin-trigger').toggleClass('hide');
});

$coinSure.click(function() {
    var data = $coin.data();

    if ($coinSure.hasClass('disable') ||
        data.coin === data.max) {
        return;
    }

    // coin change trigger compute
    compute(data.max);
});

$('#coin-cancel').click(function() {
    var data = $coin.data();

    if (data.coin * 1 === 0) {
        return;
    }

    // coin cancel trigger compute
    compute();
});

// 结算信息列表中修改有货币按钮
$('.balance-detail').on('click', '.modify-coin', function() {
    $('#use-coin').trigger('click');
});

// delivery way change trigger compute
$('input[name="delivery-way-radio"]').change(function() {
    compute();
});

// 去支付
$('#go-pay').click(function() {
    var coinUsed = $coin.data('coin');
    var $paymentWay = $('#payment-way');

    var d = {
        cartType: window.queryString().type,
        addressId: $('#address-used').data('id'),
        deliveryTime: $('#delivery-time').data('id'),
        deliveryWay: $('input[name="delivery-way-radio"]:checked').val(),
        paymentType: $paymentWay.data('type'),
        paymentId: $paymentWay.data('id'),
        coin: coinUsed ? parseInt(coinUsed, 10) : 0,
        printPrice: $('input[name="print-price"]:checked').val()
    };
    var couponCode = $('#coupons-sure').data('coupons');
    var remark = $.trim($('#remark').val());
    var invoiceInfo = invoice.getInvoice();

    if (couponCode) {
        d.couponCode = couponCode;
    }

    // 备注
    if (remark) {
        d.remark = remark;
    }

    // 发票信息
    if (invoiceInfo) {
        $.extend(d, invoiceInfo);
    }

    if (queryInfo) {
        if (queryInfo.sku) {
            d.sku = queryInfo.sku;
        }

        if (queryInfo.skn) {
            d.skn = queryInfo.skn;
        }

        if (queryInfo.limitcode) {
            d.limitcode = queryInfo.limitcode;
        }

        if (queryInfo.bundle) {
            d.bundle = queryInfo.bundle;
        }
    }

    $.ajax({
        type: 'POST',
        url: '/cart/easypay/submit',
        data: d
    }).then(function(data) {
        if (data.code === 200) {
            location.href = data.data.url;
        }
    });
});

// 查看支持的在线支付的银行和平台
$('.check-banks').click(function() {
    $(this).toggleClass('shrink');
    $('.supports').toggleClass('hide');
});

// 拆单
function pkgPageControl($el, flag) {
    var id = $el.index(),
        $ul = $el.find('.package-goods'),
        theCache = pkgCache[id],
        curPage = theCache.cur ? theCache.cur : 1,
        page = Math.ceil(theCache.total / 5);

    curPage += flag;

    // 第一页或最后一页
    if (curPage < 1 || curPage > page) {
        return;
    }

    $ul.animate({
        marginLeft: -(curPage - 1) * $ul.parent('.package-goods-wrap').width()
    }, 200);

    theCache.cur = curPage;
}

// JIT拆单
if ($('.multi-package-row').length > 0) {
    $pkgList = $('.package-list');

    // 显示拆单详情面板
    $('.show-package').click(function(e) {
        $pkgList.toggleClass('hide');

        e.stopPropagation();
    });

    // 绑定document事件,去触发面板关闭
    $(document).on('click', function(e) {
        if ($pkgList.hasClass('hide') || $(e.target).closest('.package-list').length > 0) {
            return;
        }

        $pkgList.addClass('hide');
    });

    // 设置左右切换
    $('.package-goods').each(function() {
        $(this).width($(this).children('li').length * 120);
    });

    // 初始化cache
    $('.package-item').each(function() {
        pkgCache[$(this).index()] = {
            total: $(this).find('li').length
        };
    });

    $('.package-list').on('click', '.toggle-icon', function() {
        var $this = $(this);

        var flag = $this.hasClass('left-icon') ? -1 : 1;

        pkgPageControl($this.closest('.package-item'), flag);
    });
}