order.page.js 8.37 KB
/**
 * [个人中心]首页/我的订单
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2016/07/04
 */

var dialog = require('../plugins/dialog');
var _dialog = dialog.Dialog;
var _alert = dialog.Alert;
var _confirm = dialog.Confirm;

var expressTpl = require('../../tpl/me/express.hbs');

var cancelOrder = require('./order/cancel-order');

var reOrder = require('./order/readd-order');

var confirmReceive = require('./order/confirm-receive');

// 订单剩余时间显示及倒计时
var countDown = require('./order/countdown');


// 更新表格
var tableOperation = {
    $header: $('.table.column-category'),
    $body: $('.table.table-body'),
    removeBody: function() {
        this.$body = $('.table.table-body');
    },
    appendBody: function(htmlStr) {
        this.$body.remove();
        $(htmlStr).appendTo(this.$header);
    }
};

// 订单类型
var typeMap = {
    all: 1,
    paying: 2,
    willdeliver: 3,
    delivering: 4
};

require('../common/foreach-polyfill');
require('../common/bind-polyfill');

// 个人中心共用代码加载
require('./me');


// 获取订单列表
function getOrderList(type, page) {
    tableOperation.removeBody();

    $.ajax({
        url: '/me/getOrderList',
        data: {
            type: type,
            page: page
        }
    }).done(function(res) {
        tableOperation.appendBody(res);
        bindEvent(); // eslint-disable-line
        countDown.intervalValue = 1000;
        countDown.showSec = true;
        countDown.start();
    }).fail(function(err) {
        console.log(err);
    });
}

// 获取url中的参数
function getQueryString() {
    var queryArr = location.search.substr(1).split('&');
    var query = {};

    queryArr.forEach(function(pair) {
        var arr = pair.split('=');

        query[arr[0]] = arr[1];

    });

    return query;
}


// 获取订单总数
function getOrderTotal(type, key) {
    $.ajax({
        url: '/me/getOrderTotal',
        data: {
            type: type
        }
    }).done(function(result) {
        var $navItme = $('*[data-type="' + key + '"]');

        if (!$navItme.hasClass('active') && result.total) {
            $navItme.find('.badge').text(result.total);
        } else if (!$navItme.hasClass('active')) {
            $navItme.find('.badge').text('');
        }
    });
}

// 设置订单总数
function setOrderTotal() {
    var key;

    for (key in typeMap) {
        if (key !== 'all') {
            getOrderTotal(typeMap[key], key);
        }
    }
}

function getCurrentTabType() {
    return $('.order-nav .active').data('type');
}

function getCurrentPage() {
    var $pageEl = $('.blk-pagination .active a');
    var page;

    if ($pageEl.length) {
        page = $pageEl.text();
    }

    return page;
}

function bindBuyEvent() {
    $('.buy-operation .buy').off('click').on('click', function() {
        var code = $(this).closest('.order').data('code');

        reOrder(code);
    });
}

function updateTableContent($el) {
    var type = getCurrentTabType();
    var page = getCurrentPage();

    if (type === 'all') {
        $el.find('.status .status-str').text('已取消');
        $el.find('.pay-operation').remove();
        $el.find('.buy-operation').removeClass('hide');
        setOrderTotal();
        bindBuyEvent();
    } else {
        type = typeMap[type];
        getOrderList(type, page);
    }
}

// 绑定分页点击事件
function bindPaginationClick() {
    $('.blk-pagination a').off('click').on('click', function(e) {
        var $this = $(this);
        var page = $this.attr('href').split('=')[1];
        var type = getCurrentTabType();

        e.preventDefault();

        if (!$this.hasClass('active')) {
            $('.blk-pagination li.active').removeClass('active');
            $this.addClass('active');
            $(window).scrollTop(0);

            getOrderList(typeMap[type], page);
        }

    });
}

// 删除订单
function deleteOrder(code) {
    $.ajax({
        url: '/me/deleteOrder',
        data: {
            orderCode: code
        }
    }).done(function(result) {
        var type = getCurrentTabType();
        var page = getCurrentPage();

        if (result && result.code === 200) {
            type = typeMap[type];
            getOrderList(type, page);
        } else {
            new _alert('<h1>出错了!请重试!</h1>').show();
        }
    }).fail(function(err) {
        console.log(err);
        new _alert('<h1>网络异常!</h1>').show();
    });
}



// 取消订单
function getExpressInfo(code, $el) {
    $.ajax({
        url: '/me/getExpressInfo',
        data: {
            orderCode: code
        }
    }).done(function(result) {
        var tpl;
        var data = {};

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

            data.sub_express_deatil = data.express_detail.slice(0, 2);

            tpl = expressTpl(data);
            $(tpl).appendTo($el);
        }
    }).fail(function(err) {
        console.log(err);
    });
}



// tab切换处理
// searchBar相关处理暂时不上线
$('.tabs li').on('click', function() {
    var $this = $(this);

    // var $searchBar = $('.search-bar');


    var type = typeMap[$this.data('type')];
    var page = getQueryString().page;

    if (!$this.hasClass('active')) {
        $('.tabs li.active').removeClass('active');
        $this.addClass('active');
        $this.find('.badge').text('');

        // 搜索栏只在全部订单tab下才显示
        // if (type !== 1) {
        //     $searchBar.addClass('vhide');
        // } else {
        //     $searchBar.removeClass('vhide');
        // }

        getOrderList(type, page);
    }

});

$('a.disable').on('click', function() {
    return false;
});

function bindDeleteEvent() {
    $('.delete').on('click', function() {
        var $this = $(this);
        var code = $this.closest('.order').data('code');
        var tip = new _dialog({
            className: 'order-dialog delete-dialog',
            content: '<h1>您确定要永久删除该订单么</h1>' +
                     '<p>永久删除后,订单将无法恢复,</p>' +
                     '<p>您将无法对该订单的商品申请售后服务,请谨慎操作。</p>',
            btns: [
                {
                    id: 'delete-confirm',
                    btnClass: ['confirm'],
                    name: '确认',
                    cb: function() {
                        deleteOrder(code);
                        tip.close();
                    }
                },
                {
                    id: 'delete-cancel',
                    btnClass: ['cancel-btn'],
                    name: '取消',
                    cb: function() {
                        tip.close();
                    }
                }
            ]
        }).show();
    });
}

function bindCancelEvent() {
    $('.cancel').on('click', function() {
        var $this = $(this);
        var code = $this.closest('.order').data('code');

        cancelOrder.start(code, updateTableContent.bind(null, $this.closest('.order')));
    });
}


function bindExpressEvent() {
    $('body').on('click', function(e) {
        if ($(e.target).hasClass('express')) {
            return false;
        }

        $('.express-info').each(function(idx, el) {
            if (!$(el).hasClass('hide')) {
                $(el).addClass('hide');
            }
        });
    });

    $('.express').on('click', function() {
        var $this = $(this);
        var code = $this.closest('.order').data('code');
        var $info = $this.find('.express-info');

        $('.express-info').each(function(idx, el) {
            if (!$(el).hasClass('hide')) {
                $(el).addClass('hide');
            }
        });

        if ($info.length) {
            $info.toggleClass('hide');
        } else {
            getExpressInfo(code, $this);
        }

    });
}

function bindConfirmReceiveEvent() {
    $('.confirm-receive').on('click', function() {
        var code = $(this).closest('.order').data('code');

        new _confirm({
            content: '<h1 class="title">确认收货</h1><p>您确定要确认收货么?</p>',
            cb: function() {
                confirmReceive.done(code);
            }
        }).show();
    });
}

function bindEvent() {
    bindPaginationClick();
    bindDeleteEvent();
    bindCancelEvent();
    bindExpressEvent();
    bindBuyEvent();
    bindConfirmReceiveEvent();
}

bindEvent();
countDown.intervalValue = 1000;
countDown.showSec = true;
countDown.start();
setOrderTotal();