jsp 购物车

来源:互联网 发布:淘宝装修视频代码 编辑:程序博客网 时间:2024/05/01 16:43
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!doctype html>
<html lang="zh-cn">

<head>
  <title>购物车</title>
  <%@ include file="/commons/meta.jsp"%>
 
  <script src="${ctx}/js/picEffect.js?v=1.11"></script>
  <script src="${ctx}/js/showpic.js"></script>
  <link rel="stylesheet" href="${ctx}/css/comment.css?v=1.0"/>
  <link rel="stylesheet" href="${ctx}/css/weixin/mall.css"/>
  <style>
  .selMemInput{background-color:#fff;color:#666666;border:0px;width:160px;box-sizing:border-box;height:26px;line-height:20px;}
  .mallBgSel{background:url(${ctx}/images/v2/parttopb.png) no-repeat;}
  .nn{font-size:20px;color: #FFFFFF}
  font{font-size:12px;}
  .toup{font-size:10px;}
  .budong{position:fixed; bottom:0;left:0; width:100%; background:#f2f2f2;}
    .buyBut{background-color:#FF6666;height:20px;line-height:20px;width:100px;height:40px;text-align:center;}
      .mall_div{background-color:#FF6666;height:24px;line-height:24px;width:22%;text-align:center;}
      .jiajian{height:30px;line-height:30px;width:48px;height:30px;text-align:center;}
      .cbox{display:block;width:16px;height:16px;border:1px solid #ccc;background: #fff;}
      .cbox.checked{background: #D33263;border-color:#D33263;}
      .cbox.checked:after{content:"\2714";color:#FFFFFF;}
  </style>
</head>
<body>
    <div id="topmsgdiv">
  <jsp:include flush="true" page="/WEB-INF/pages/showmsg.jsp"></jsp:include>
  </div>
    <table width=100% style='border-bottom: 2px solid #EDECE9' >        
            <tr>
                <td width=100%>
                    <table width=100% height=6% style='text-align:left;'>
                        <tr>
                            <td >
                                <div style='margin-top:3%'>
                                    <input type="checkbox"  style='margin-left:5%;width:16px;height:16px;display: none' id="choice" name="choice" value='' onclick="allChoiceMoney()"/>
                                    <div style="float: left;margin-left: 5%"><span class="cbox radius20" name='cbox' style='width:18px;height:18px;text-align: center;' onclick="quan('${obj.id }','${obj.price }')" id="cboxss"></span></div>
                                    <div style="float: left;margin-left: 2%;margin-top: 1%"><font style="font-size: 12px">全选</font >   <font color="#FF9DBD" class='toup'>包租婆租客享受送货免费服务</font></div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>    
            </tr>
            <tr>                
                <c:forEach items="${lists}" var="obj">
                
                    <table id="shanchu${obj.id }" width=100% height=12% style='border-bottom: 1px solid #EDECE9;margin-top: 1%;padding-bottom:1% '>
                        <tr >
                            <td width=12% height=10% rowspan="2">
                                <input type="checkbox" line-height style="float:left;margin-top:5%;margin-left:47%;width:15px;height:15px;display:none" id="choice${obj.id }" name="choice" value='${obj.id}' onclick="choiceMoney('${obj.id}','${obj.price }')"/>
                                <span class="cbox radius20" name='cbox' style='margin-left: 53%' onclick="nnnr('${obj.id }','${obj.price }')" id="cbox${obj.id }"></span>
                            </td>
                            <td width=24% rowspan="2">
                                <img style="max-width:100%;float:left" class="images_nobord" name="showpic"  src="<%=request.getContextPath()%>/upimg/mall/${obj.id}/${obj.picurl}"/>
                            </td>                
                            <td height=20%>
                                <font  class='toup'><div style='float:left;margin-left:0px;font-size: 10px'>${obj.name }</div></font></div>
                            </td>
                        </tr>    
                                    <c:forEach items="${list}" var="objs">
                                        <c:if test="${obj.id==objs.mallid}">
                                            <input type="hidden" id="money${obj.id }" class="aat" value="${objs.num*obj.price}" />
                                            <input type="hidden" id="univalence${obj.id }" value="${obj.price}" />
                                            <%--<tr>
                                                <td style='text-align:left' height="40%">
                                                    --%><%--<div style='margin-top:1% '><span id="typeMoney${obj.id }" ><font style="font-size: 14px" color='#D33263'>¥${objs.num*obj.price}</font></span></div>
                                                --%><%--</td>
                                            </tr>
                                            --%><input type="hidden" id="mallid" value="${obj.id}"/>
                                            <tr>
                                                <td  >
                                                    <%--<div style='float:left'><button style="width:22px;height:22px" onclick="subtract('${obj.id}')">-</button><input id="spinner${obj.id}" style="width:18px;height:20x;text-align: center;" value="${objs.num }"><button style="width:22px;height:22px" onclick="add('${obj.id}')">+</button></div>
                                                    --%>
                                                    <div style='margin-top:1%;text-align: left '><span id="typeMoney${obj.id }" ><font style="font-size: 14px" color='#D33263'>¥${objs.num*obj.price}</font></span></div>
                                                    <div class='jiajian radius6' style='float:left;border: 1px solid #EDECE9;width:38%;'>
                                                        <input type='hidden' id="spinner${obj.id}" value='${objs.num }'/>
                                                        <div style='float:left;width:24%;'><span style='font-size: 30px;text-align: center;'><a onclick="subtract('${obj.id}')">-</a></span></div>
                                                        <div style='float:left'><span class='vertical' style='font-size: 20px;color:#EDECE9 ;'>|</span></div>
                                                        <div style='float:left;width:38%'><span id="spinners${obj.id}" style="width:30px;height:23px;font-size: 16px;text-align:center">${objs.num }</span></div>
                                                        <div style='float:left'><span class='vertical' style='font-size: 20px;color:#EDECE9;'>|</span></div>
                                                        <div style='float:left;width:20%;'><span style='font-size: 25px;text-align: center;'><a onclick="add('${obj.id}')">+</a></span></div>
                                                    </div>
                                                    <div style='float:left;margin-left:35%;margin-top: 3%' class="radius6 mall_div"><a class="font_a" id="buy_button"  type="button" onclick="delectMall('${obj.id}')" />删除</a></div>
                                                </td>
                                            </tr>                                            
                                        </c:if>
                                    </c:forEach>        
                    </table>
                    
                </c:forEach>
            </tr>
    </table>
    <div style='height:60px'></div>
    
    <table class='budong' width='100%' style="border-top:2px solid #f2f2f2;border-bottom: 2px solid #CDCDB4;height:50px">
            <tr >
                <input type='hidden' id="addmnum"/>
                <input type="hidden" id="countMoneys" />
                <td width='74%'><div >
                    <div style="float:left;width:50%;text-align: right;font-size: 12px"><font>合计:</font></div><div  style="float:left;width:18%;text-align: left;font-size: 14px"  ><span id="countMoney"   ><font color='#D33263' style="font-size: 14px"/>¥0</font></span></div><div style="float:left;width:30%;text-align: right;"><span>(不含运费</span>)</div>
                    </div>
                </td>
                <td style="text-align:center;height:40px;float:left;">                
                    <div><div class="radius6 buyBut" style="margin-top:0px"><a  class="font_a" id="buy_button" style='text-align: center;height:40px;line-height:40px;font-size: 14px ' onclick="balance()" >去结算</a></div></div>            
                </td>
            </tr>
    </table>
    <div id="tmpdiv" style="display:none">
        
    </div>
    </body>
</html>
<script type="text/javascript">
    var oldHeight="";//判断是否加载完成
      window.onscroll = function (){//滚屏加载
          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollHeight=document.documentElement.scrollHeight||document.body.scrollHeight;
        var windowHeight=getWindowHeight();
        if(oldHeight!=scrollHeight && scrollTop+windowHeight>=scrollHeight-30){
            //searchClick();
            oldHeight=scrollHeight;
        }
    };
    //刪除選中的商品
    function delectMall(mallid){
        var url="/shoppingCart/delectMall.do?&mallid="+mallid;
        $("#tmpdiv").load(webroot+url,function(){
            $("#shanchu"+mallid).remove();
        });
        //$("#shanchu"+mallid).detach();
    }
    //商品數量減少
    function subtract(mallid){
        var spinner=$("#spinner"+mallid).val();//商品数量
        var money=$("#univalence"+mallid).val();//商品单价
        var str=$("#choice"+mallid).is(':checked');//点击商品数量加减时 判断本商品复选框是否勾选
        if(spinner<=0){
            $("#spinner"+mallid).val(0);
            return;
        }else{
            var count=spinner*1-1;
            $("#spinner"+mallid).val(spinner*1-1);
            $("#spinners"+mallid).html(spinner*1-1);
            var moneys="<font style='font-size: 14px' color='#D33263'>¥"+money*count+"</font>";
            $("#typeMoney"+mallid).html(moneys);
            $("#money"+mallid).val(money*count);
        }
        var addmnum=$("#addmnum").val();//增加或减少后的总金额
        if(addmnum==null || addmnum==''){
            addmnum=0;
        }
        $("#addmnum").val(addmnum*1-money*1);
        
        if(str){
            var countmoney=$("#countMoneys").val();//原总金额
            var moneys="<font style='font-size: 14px' color='#D33263'>¥"+(countmoney*1-money*1)+"</font>";
            $("#countMoney").html(moneys);
            $("#countMoneys").val(countmoney*1-money*1);
        }
        var url="/shoppingCart/delectMall.do?&mallid="+mallid+"&reduce=reduce";
        $("#tmpdiv").load(webroot+url);
    }
    //商品數量增加
    function add(mallid){
        var spinner=$("#spinner"+mallid).val();//商品数量
        var count=spinner*1+1;
        var str=$("#choice"+mallid).is(':checked');//点击商品数量加减时 判断本商品复选框是否勾选
        var money=$("#univalence"+mallid).val();//商品单价
        $("#spinner"+mallid).val(spinner*1+1);
        $("#spinners"+mallid).html(spinner*1+1);
        var moneys="<font style='font-size: 14px' color='#D33263'>¥"+money*count+"</font>";
        $("#typeMoney"+mallid).html(moneys);
        $("#money"+mallid).val(money*count);
        var addmnum=$("#addmnum").val();//增加或减少后的总金额
        if(addmnum==null || addmnum==''){
            addmnum=0;
        }
        $("#addmnum").val(addmnum*1+money*1);
        if(str){
            var countmoney=$("#countMoneys").val();//原总金额
            var moneys="<font style='font-size: 14px' color='#D33263'>¥"+(countmoney*1+money*1)+"</font>";
            $("#countMoney").html(moneys);
            $("#countMoneys").val(countmoney*1+money*1);
        }
        var url="/shoppingCart/addtoBag.do?&mallid="+mallid;
        $("#tmpdiv").load(webroot+url);
    }
    <%--function add(mallid){
        var url="/shoppingCart/addtoBag.do?&mallid="+mallid;
        $("#tmpdiv").load(webroot+url);
    }--%>
    
    //点击复选框时  合计总金额
    function choiceMoney(id,picurl){
        //var str=document.getElementsByName("choice"+id);
        var str=$("#choice"+id).is(':checked');//点击商品数量加减时 判断本商品复选框是否勾选
        var money=$("#money"+id).val();
        var countmoney=$("#countMoneys").val();//原总金额
        if(str==true){
            if(countmoney==null || countmoney==''){
                countmoney=0;
            }
            var moneys="<font style='font-size: 14px' color='#D33263'>¥"+(money*1+countmoney*1)+"</font>";
            $("#countMoney").html(moneys);
            $("#countMoneys").val(money*1+countmoney*1);
        }else{
            if(countmoney==null || countmoney==''){
                var moneys="<font style='font-size: 14px' color='#D33263'>¥0</font>";
                $("#countMoney").html(moneys);
                $("#countMoneys").val(0);
            }else if(countmoney){
                var moneys="<font style='font-size: 14px' color='#D33263'>¥"+(countmoney*1-money*1)+"</font>";
                $("#countMoney").html(moneys);
                $("#countMoneys").val(countmoney*1-money*1);
            }
            
        }
    }
    //全选  总金额
    function allChoiceMoney(){
        
        var str=document.getElementsByName("choice");  
        if(str[0].checked==false){
            var type=$("input[name=choice]:checked").length;
            var moneys="<font style='font-size: 14px' color='#D33263'>¥0</font>";
            $("#countMoney").html(moneys);
            $("#countMoneys").val('0');
            $("input[name='choice']").attr("checked",false);
            for(var i=0;i<type;i++){
                var n=i+1;
                var id=str[n].value;
                var nn=$("#cbox"+id).attr('class');
                //var cc=/checked/ig.test(nn)?nn.replace('checked',''):nn.replace('checked','');
                $("#cbox"+id).attr('class','cbox radius20');
            }
            
        }else if(str[0].checked==true){
            var addmnum=$("#addmnum").val();
            var money='${type}';
            var moneys="<font style='font-size: 14px' color='#D33263'>¥"+(money*1+addmnum*1)+"</font>";
            $("#countMoney").html(moneys);
            $("#countMoneys").val(money*1+addmnum*1);
            $("input[name='choice']").attr("checked",true);

            var type=$("input[name=choice]:checked").length;
            for(var i=0;i<type;i++){
                var n=i+1;
                var id=str[n].value;
                var nn=$("#cbox"+id).attr('class');
                var cc=/checked/ig.test(nn)?(nn+' checked'):(nn+' checked');
                $("#cbox"+id).attr('class',cc);
            }
        }
        
        
    }
    //去结算
    function balance(){
        var str=document.getElementsByName("choice");//获取所有复选框选中的商品
        var mallid='';
        for(var i=0;i<str.length;i++){
           if(str[i].checked){
             mallid += str[i].value+',';//获取所有复选框选中的商品的id
           }
        }
        if(mallid==''){
            return;
        }
        var url="/shoppingCart/balance.do?&mallid="+mallid;
        $("#tmpdiv").load(webroot+url,function(){
            url="/shoppingCart/userGuide.do?curPage="+$("#curPage").val();
            openCurWin(url);
        });
    }
    //function chaCloor(field){
    //    var pig = field.checked;
    //    pig?field.nextSibling.style.backgroundColor="skyblue":field.nextSibling.style.backgroundColor="white";
    //}
    //单选
    function nnnr(id,price){
        var nn=$("#cbox"+id).attr('class');
        var cc=/checked/ig.test(nn)?nn.replace('checked',''):(nn+' checked');
        $("#cbox"+id).attr('class',cc);
        var dd=$("#cbox"+id).attr('class');
        var str=$("#choice"+id).is(':checked');
        if(str==true){
            $("#choice"+id).attr("checked",false);
            choiceMoney(id,price);
        }else if(str==false){
            $("#choice"+id).attr("checked",true);
            choiceMoney(id,price);
        }
        
    }
    //全选
    function quan(id,price){
        var nn=$("#cboxss").attr('class');
        var cc=/checked/ig.test(nn)?nn.replace('checked',''):(nn+' checked');
        $("#cboxss").attr('class',cc);
        var dd=$("#cboxss").attr('class');
        var str=$("#choice"+id).is(':checked');
        if(str==true){
            $("#choice").attr("checked",false);
            allChoiceMoney();
        }else if(str==false){
            $("#choice").attr("checked",true);
            allChoiceMoney();
        }
        
    }
</script>

0 0
原创粉丝点击