<%@ 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='' οnclick="allChoiceMoney()"/>
<div style="float: left;margin-left: 5%"><span class="cbox radius20" name='cbox' style='width:18px;height:18px;text-align: center;' οnclick="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}' οnclick="choiceMoney('${obj.id}','${obj.price }')"/>
<span class="cbox radius20" name='cbox' style='margin-left: 53%' οnclick="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" οnclick="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" οnclick="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 οnclick="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 οnclick="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" οnclick="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 ' οnclick="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>
