chose-panel.js 6.48 KB

var $ = require('yoho-jquery'),
    dbClass = 'data-bind',
    $chosePanel = $('.chose-panel');

module.exports = function(data, callback) {
    render(data);
    callback && callback();
};
function render(data) {
    var htmlTemplate = '<div class="main">' +
    '    <div class="infos">' +
    '        <div class="basic-info" >' +
    '            <img class="thumb" src="">' +
    '            <div class="text-info">' +
    '                <p class="name"></p>' +
    '                <p class="price">' +
    '                    <span class="sale-price"></span>' +
    '                    <span class="market-price data-bind"></span>' +
    '                </p>' +
    '            </div>' +
    '        </div>' +
    '        <div class="chose-items">' +
    '            <div class="color-list block-list">' +
    '                <span class="name"></span>' +
    '                <ul id="" data-index="" class="size-row clearfix ">' +
    '                    <li class="block" data-num="">' +
    '                    </li>' +
    '                </ul>' +
    '            </div>' +
    '            <div class="size-list block-list">' +
    '                <span class="name"></span>' +
    '                <ul class="size-row clearfix">' +
    '                    <li class="block " data-num="" data-id="" data-skuid="">' +
    '                    </li>' +
    '                </ul>' +
    '            </div>' +
'' +
    '            <div class="num">' +
    '                <span class="name">数量</span>' +
    '                <div class="clearfix">' +
    '                    <a class="btn btn-minus" href="javascript:void(0);">' +
    '                        <span class="iconfont ">&#xe625;</span>' +
    '                    </a>' +
    '                    <input id="good-num" class="good-num disabled" type="text" value="1" disabled="true">' +
    '                    <a class="btn btn-plus" href="javascript:void(0);">' +
    '                        <span class="iconfont ">&#xe624;</span>' +
    '                    </a>' +
    '                </div>' +
    '                <span class="left-num"></span>' +
    '                <input id="left-num" type="hidden" value="0">' +
    '                <input id="limitNum" type="hidden" value="">' +
    '            </div>' +
'' +
    '        </div>' +
    '    </div>' +
    '    <div class="btn-wrap">' +
    '        <button id="chose-btn-sure" class="btn btn-sure"></button>' +
    '    </div>' +
    '</div>';

    $('#promotionId').remove();
    $('#single').remove();
    $('.chose-panel').addClass('data-bind').html(htmlTemplate).append('<input id="promotionId" type="hidden" value="">').append('<input id="single" type="hidden" value="">');

    if (data.cartInfo.thumbs) {
        $chosePanel.removeClass(dbClass);
        var cartInfo = data.cartInfo;
        var thumbClone = $chosePanel.find('.thumb').remove();

        for (var i = 0; i < cartInfo.thumbs.length; i++) {
            var thumbEle = thumbClone.clone();

            thumbEle.attr('src', cartInfo.thumbs[i].img);
            if (i != 0) {
                thumbEle.addClass('hide');
            }
            $chosePanel.find('.basic-info').prepend(thumbEle);
        }
        $chosePanel.find('.text-info>.name').text(cartInfo.name);
        $chosePanel.find('.sale-price').text(cartInfo.salePrice);
        if (!cartInfo.price) {
            if (data.isSecKill === 'Y') {
                $('.price').append('<span class="market-price">' + cartInfo.salePrice + '</span>');
            } else {
                $chosePanel.find('.sale-price').addClass('no-price');
            }
        } else {
            $chosePanel.find('.market-price').text(cartInfo.price).removeClass(dbClass);
        }
        var colorsClone = $chosePanel.find('.color-list>.size-row').remove();
        var colorClone = colorsClone.find('li').remove();

        for (var i = 0; i < cartInfo.colors.length; i++) {
            var colors = cartInfo.colors[i];
            var colorsEle = colorsClone.clone();

            colorsEle.attr('id', colors.id).attr('data-index', i);
            if (i != 0) {
                colorsEle.addClass('hide');
            }
            for (var o = 0; o < colors.color.length; o++) {
                var color = colors.color[o];
                var colorEle = colorClone.clone();

                colorEle.attr('data-num', color.colorNum).text(color.name);
                if (color.chosed) {
                    colorEle.addClass('chosed');
                }
                if (!color.colorNum) {
                    colorEle.addClass('zero-stock');
                }
                colorsEle.append(colorEle);
            }
            $chosePanel.find('.color-list').append(colorsEle);
        }
        var sizesClone = $chosePanel.find('.size-list>.size-row').remove();
        var sizeClone = sizesClone.find('li').remove();

        for (var i = 0; i < cartInfo.sizes.length; i++) {
            var sizes = cartInfo.sizes[i];
            var sizesEle = sizesClone.clone();

            if (i != 0) {
                sizesEle.addClass('hide');
            }
            for (var o = 0; o < sizes.size.length; o++) {
                var size = sizes.size[o];
                var sizeEle = sizeClone.clone();

                sizeEle.attr('data-num', size.sizeNum).attr('data-id', size.id).attr('data-skuid', size.skuId).text(size.name);
                if (size.chosed) {
                    sizeEle.addClass('chosed');
                }
                if (!size.sizeNum) {
                    sizeEle.addClass('zero-stock');
                }
                sizesEle.append(sizeEle);
            }
            $chosePanel.find('.size-list').append(sizesEle);
        }
    }
    if (data.tickets) {
        $chosePanel.find('.infos').addClass('tickets-info');
        $chosePanel.find('.color-list>.name').text('日期');
        $chosePanel.find('.size-list>.name').text('区域');
    } else {
        $chosePanel.find('.color-list>.name').text('颜色');
        $chosePanel.find('.size-list>.name').text('尺码');
    }
    if (data.single) {
        $chosePanel.find('.size-list').addClass('hide');
    }
    if (data.cartInfo.promotionId) {
        $('.btn-minus,.btn-plus').find('span').addClass('disabled');
    }

    /* tar modified 161205 量贩商品数量限制 */
    $('#good-num').val($('#discount-buy').val());
    $('#limitNum').val(data.limit);
    $('#promotionId').val(data.cartInfo.promotionId);
    $('#single').val(data.single);
    $('#chose-btn-sure').text(data.tickets ? '立即购买' : '加入购物车');

}