公共对比栏实现

compare_widget.vm

#css($appServer.get('/css/work/mallHome.css'))
#css($appServer.get('/js/common/layui/css/layui.css'))
<!--对比弹窗部分-->
<div class="toolbar">

    <div class="toolbar-con">
        <div class="toolbar-con-t">
            <span>Compare</span>
            <i class="layui-icon">&#x1006;</i>
        </div>
        <ul class="toolbar-con-img clearfix">

        </ul>
        <em class="check-b">
            <a class="br" onclick="getVsArr()">Contrast</a>
            <a href="javascript:;" class="br delAll">Delete</a>
        </em>
    </div>
    <div class="toolbar-vs">
        vs
        <i>0</i>
    </div>
</div>

compare.js

// 已选数据的存储
var vsArr = {
    id:[],
    uuid:[]
};
//实例layer
var layer;
layui.use('layer', function () {
    layer = layui.layer;
});
//侧边栏显示显示
$(document).on('click', '.toolbar-vs', function () {
    var con = $(this).siblings('.toolbar-con');
    con.toggle('slow');
})
//侧边栏显示隐藏
$('.toolbar-con-t>i').click(function () {
    $(this).closest('.toolbar-con').toggle('slow');
})
// 点击图片弹出x号
$(document).on('click', '.toolbar-con-img>li>img', function () {
    $('.toolbar-con-img').find('i').removeClass('toolbar-con-i');
    $(this).siblings('i').addClass('toolbar-con-i')
});
// 点击x号删除当前商品
$(document).on('click', '.toolbar-con-img>li>i', function () {
    $(this).closest('li').remove();
    var toll = $('.toolbar-con-img').find('li').length;
    $('.toolbar-vs').find('i').text(toll)
    var num = $(this).closest('li').attr('data-id')
    for (key in vsArr.id) {
        if (vsArr.id[key] == num) {
            vsArr.id.splice(key, 1);
            vsArr.uuid.splice(key, 1);
        }
    }
    localStorage.vsArr = JSON.stringify(vsArr);
});
// 删除所有
var delAll = $('.toolbar-con').find('.delAll');
delAll.on('click', function () {
    $('.toolbar-con').find('li').remove()
    $('.toolbar-vs').find('i').text(0);
    vsArr = {
        id:[],
        uuid:[]
    };
    localStorage.vsArr = JSON.stringify(vsArr);
})

//加入对比
function compare(id,uuid,name,src) {
    for (key in vsArr.id) {
        if (vsArr.id[key] == id) {
            layer.msg('已经添加过');
            return;
        }
    }
    if (vsArr.id.length == '4') {
        layer.msg('最多只能添加4个');
        return;
    }
    vsArr.id.push(id)
    vsArr.uuid.push(uuid)
    var li = '<li  data-id='+id+'>' +
        '<img src='+src+'>' +
        '<i class="layui-icon">&#x1006;</i>' +
        '<span>'+name+'</span>' +
        '</li>'
    var ul = $('.toolbar-con-img');
    ul.append(li);
    $('.toolbar-vs').find('i').text(vsArr.id.length)
    layer.msg('添加成功');
    localStorage.vsArr = JSON.stringify(vsArr);

}
//获取vsArr
function getVsArr(){
    var idList = localStorage.vsArr;
    var obj = JSON.parse(idList)
    var uuids="";
    for(var i=0;i<obj.uuid.length; i++){
        uuids += obj.uuid[i] + ',';
    }
    uuids = uuids.substring(0, uuids.lastIndexOf(','));
    window.location.href = appServer + '/pages/front/product_compare/index.htm?uuids=' + uuids;
}

index.vm

#css($appServer.get('/css/common/reset.css'))
#css($appServer.get('/css/common/public.css'))
#css($appServer.get('/css/work/mallHome.css'))
#css($appServer.get('/js/common/layui/css/layui.css'))

<form id="saleSheetQueryForm" method="post" action="$appServer.get('/pages/front/product_list/index.htm')">
    <!-- 用于查询的隐藏表单域 -->
    <input id="saleTypeCode" name="saleTypeCode" type="hidden" />
    <input id="productCategoryCode" name="productCategoryCode" type="hidden" />
    <input id="productSpecificationCode" name="productSpecificationCode" type="hidden" />
    <input id="exportTypeCode" name="exportTypeCode" type="hidden" />
    <input id="orderByColumn" name="orderByColumn" type="hidden" />
    <input id="orderType" name="orderType" type="hidden" />
    #*引入右边对比栏*#
    $contain.get("/pages/components/compare_widget.htm")



    <div class="classification-w">
        $contain.get("/pages/front/product_list/sale_query.htm")
    </div>

    <div class="mall-inner">
        $contain.get('/pages/front/product_list/sale_query_order.htm')
        $contain.get('/pages/front/product_list/sale_sheet_list.htm').put("saleSheetCombineVOList", $!{pageInfoResult.list})
    </div>
</form>

$contain.get('/common/page.htm').put("pageInfo", $pageInfoResult)

#js($appServer.get('/script/pages/front/product_list/index.js'))
#js($appServer.get('/js/common/jquery-1.9.1.min.js'))
#js($appServer.get('/js/common/layui/layui.js'))