order.page.js 6.64 KB
/**
 * [购物流程]结算页
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2016/7/8
 */

var $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload');

var Alert = require('../plugins/dialog').Alert;

var minusPlus = {
    minus: '&#xe630;',
    plus: '&#xe639;'
};

var $coin = $('#input-coin'),
    $coinTip = $('#coin-tip'),
    $coinSure = $('#coin-sure'),
    $coinUsed = $('#coin-used'),
    $coinDeduction = $('#coin-deduction'),
    coinMax = +$coin.data('max'),
    coinStatus = {
        err: '请输入一个正整数',
        max: '您的有货币不足',
        success: '抵扣¥',
        maxUse: '您最多使用',
        muPostfix: '个有货币'
    };
var $balanceCost = $('#balance-cost');

var $printPrice = $('#print-price');

var $invoice = $('#invoice-content');

var balanceTpl = require('../../tpl/shopping/balance.hbs');

var pkgCache = {};

var $pkgList;

require('yoho-jquery-dotdotdot');

require('../plugins/check'); // before 地址和发票

require('./order/address'); // 地址
require('./order/invoice'); // 发票

lazyLoad($('img.lazy'));

// dot
$('.brand-and-name .name').dotdotdot({
    wrap: 'letter'
});

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);
    });
}

// 有货币、备注切换显示
$('.coin-ctrl, .remark-ctrl').click(function() {
    var $this = $(this),
        $icon = $this.hasClass('iconfont') ? $this : $this.siblings('.iconfont');

    if ($icon.hasClass('minus')) {

        // hide panel
        $icon.html(minusPlus.plus).removeClass('minus');
    } else {

        // show panel
        $icon.html(minusPlus.minus).addClass('minus');
    }

    $this.parent('.title').siblings('.content').toggleClass('hide');
});

// 使用有货币输入框联动
$coin.on('input', function() {
    var c = $.trim($coin.val());
    var err = true;

    if (c === '') {

        // 输入框为空,确定按钮不可点
        $coinTip.addClass('vhide');
        $coinSure.addClass('disable');
        return;
    } else if (!/^[1-9]\d*$/.test(c)) {

        // 验证输入不为正整数
        $coinTip.text(coinStatus.err);
    } else if (+c > coinMax) {

        // 有货币不足
        $coinTip.text(coinStatus.max);
    } else if (+c > $balanceCost.data('cost') * 100) {

        // 输入的有货币大于订单额度
        $coinTip.text(coinStatus.maxUse + ($balanceCost.data('cost') * 100) + coinStatus.muPostfix);
    } else {
        err = false;
        $coinTip.text(coinStatus.success + (c / 100).toFixed(2));

        // 已使用面板的数据显示更新
        $coinUsed.html(c);
        $coinDeduction.html((c / 100).toFixed(2));
    }

    if (err) {
        $coinSure.addClass('disable');
        $coinTip.removeClass('vhide');
    } else {
        $coinSure.removeClass('disable');
        $coinTip.addClass('vhide');
    }
});

/**
 * 切换使用有货币面板显示
 */
function toggleCoinPanel() {
    $('.using-coin, .used-coin').toggleClass('hide');
}

function compute(coin) {
    $.ajax({
        type: 'GET',
        url: '/shopping/order/compute',
        data: {
            coin: coin
        }
    }).then(function(data) {
        var cost;

        if (data.code === 200) {
            cost = data.data.last_order_amount;

            cost = cost.toFixed(2);

            $('#balance-list').html(balanceTpl(data.data));
        }
    });
}

// 获取已使用的有货币
function getCoinUsed() {
    var coin = $coinUsed.text();

    return coin === '' ? 0 : parseInt(coin, 10); // 使用parseInt可以排除异常情况的转化影响
}

$coinSure.click(function() {
    if ($coinSure.hasClass('disable')) {
        return;
    }

    // 切换显示
    compute(getCoinUsed());

    toggleCoinPanel();
});

$('.used-coin').on('click', '.modify', function() {
    toggleCoinPanel();
}).on('click', '.cancel', function() {
    $coin.val('').trigger('input');

    // reset used coin panel show
    $coinUsed.html('0');
    $coinDeduction.html('0');

    compute(0);

    // 隐藏有货币面板并重置子面板显示
    $('.coin-ctrl.iconfont').trigger('click');
    toggleCoinPanel();
});

// 添加备注-是否打印价格
$printPrice.printPrice = true; // 默认为true

$('.print-price-radio').check({
    type: 'radio',
    group: 'print-price',
    onChange: function(el, checked, value) {
        if (checked) {
            $printPrice.isPrintPrice = value === 1 ? true : false;
        }
    }
});

// 订单提交
$('#balance-list').on('click', '#submit-order', function() {
    var reqParam = {
        address_id: $('.address.focus').data('id'),
        use_yoho_coin: getCoinUsed(),
        remark: $('#remark-content').val(),
        isPrintPrice: $printPrice.printPrice
    };

    var $invoiceDetail;

    // 发票信息
    if ($invoice.find('.checked').length > 0) {
        $invoiceDetail = $invoice.find('.invoice-detail');

        $.extend(reqParam, {
            invoices_title: $invoiceDetail.data('title'),
            invoices_type_id: $invoiceDetail.data('content')
        });
    }

    $.ajax({
        type: 'POST',
        url: '/shopping/order/submit',
        data: reqParam
    }).then(function(data) {
        if (data.code === 200) {
            location.href = data.data.payUrl;
        } else {
            new Alert(data.message).show();
        }
    });
});