购物车页面

最新推荐文章于 2022-03-12 17:34:40 发布

温暖_洗衣粉

最新推荐文章于 2022-03-12 17:34:40 发布

阅读量4k

点赞数

分类专栏：工作项目

本文链接：https://blog.csdn.net/qq_19244423/article/details/47809213

版权

工作项目专栏收录该内容

57 篇文章 0 订阅

订阅专栏

这个项目中觉得js写的最头痛的地方。因为不是所有的购物车都选中，可以选择某几个购物车进行变化。

并且除了加、减购物项需要进行数据库外，其他都是页面进行操作，价格以整形进行计算，在除以100

<html>
	<head>
	<%@ include file="/framework/core/jsp/commonJs.jsp" %>
		<script type="text/javascript">
			//减少数量
			function delItem(id) {
				var buyNum = $("#buyNum"+id).val();
				if(buyNum == 1){
					alert("选购的商品不能小于1件");
					return;
				}
				var url = "${path}/or/shopCart/update";
				var params = {"id" : id, "buyNum" : (buyNum-1)};
				$.post(url,params,function(data){
					if (eval("("+data+")")) {
						var salePriceId = "salePrice" + id;
						var flag =$("#checkbox" + id).is(":checked");
						if (flag) {
							//改变总量
							var totalPriceId = "totalPrice";
							$("#totalPrice").text(countPrice(totalPriceId, salePriceId, false));
							$("#totalNum").text($("#totalNum").text()*1 - 1);
						}
						//改变单项的价格
						var sumPriceId = "sumPrice" + id;
						$("#sumPrice"+id).text(countPrice(sumPriceId, salePriceId, false));
						$("#buyNum"+id).val(buyNum - 1);
					}
				});
			}
			
			//增加数量
			function addItem(id, limit) {
				var buyNum = $("#buyNum"+id).val();	
				//检测库存
				if((buyNum*1+1) > limit){
					alert("该商品的库存为：" + limit + "，无法再增加购买量");
					return;
				}	
				var url = "${path}/or/shopCart/update";
				var params = {"id" : id, "buyNum" : (buyNum*1 + 1)};
				$.post(url, params, function(data){
					if (eval("("+data+")")) {
						var salePriceId = "salePrice" + id;
						var flag =$("#checkbox" + id).is(":checked");
						if (flag) {
							var totalPriceId = "totalPrice";
							$("#totalPrice").text(countPrice(totalPriceId, salePriceId, true));
							$("#totalNum").text($("#totalNum").text()*1 + 1);
						}
						var sumPriceId = "sumPrice" + id;
						$("#sumPrice"+id).text(countPrice(sumPriceId, salePriceId, true));
						$("#buyNum"+id).val(buyNum*1 + 1);
					}
				});		
			}
			
			//删除购物项
			function removeItem(id) {
				//询问框
				var url = "${path}/or/shopCart/delete";
				var params = {"id" : id};
				$.post(url, params, function(data){
					setTimeout("location.reload();",2000);
				});
			}
			
			//选中，取消多选框发送的变化
			function checkedOpt(id) {
				var totalPriceId = "totalPrice";
				var sumPriceId = "sumPrice" + id;
				var buyNum = $("#buyNum"+id).val();
				var flag =$("#checkbox" + id).is(":checked");
				if(flag){
					$("#totalPrice").text(countPrice(totalPriceId, sumPriceId, true));
					$("#totalNum").text($("#totalNum").text()*1 + buyNum*1);
				} else {
					$("#totalPrice").text(countPrice(totalPriceId, sumPriceId, false));
					$("#totalNum").text($("#totalNum").text()*1 - buyNum*1);
				}
			}
			
			//在页面上进行价格计算,currentPrice:原价格,changePrice:改变金额,orientation:金额改变流向
			function countPrice (currentId, priceId,  orientation) {
				var currentPrice = $("#"+currentId).attr("price");
				var changePrice = $("#"+priceId).attr("price");
				var finalPrice = 0;
				if (orientation) {
					finalPrice = parseInt(currentPrice) + parseInt(changePrice);
				} else {
					finalPrice = parseInt(currentPrice) - parseInt(changePrice);
				}
				$("#"+currentId).attr("price",finalPrice);
				return finalPrice/100;
			}
			
			//全选
			function checkedAll() {
				$("input[type='checkbox']").attr("checked",'checked');//全选
			}
			//全不选
			function notChecked() {
				$("input[type='checkbox']").removeAttr("checked");//取消全选
			}
			
			//结算，利用ajax表单异步提交
			function account() {
				$("#jvform").attr("action","${path}/or/shopCart/account").submit();
			}
			
			function getChecked() {
				var arr = new Array();
				$("input[type='checkbox']:checked").each(function(index, element){
					arr.push(element.value);
				});
				return arr;
			}
		</script>
	</head>
	<body>
	
		<form id="jvform" method="post">
			<div>购物车页面</div>
			<c:forEach items="${cartVO.shopCarts}" var="cart">
				<div >
					<input type="checkbox" id="checkbox${cart.id}" value="${cart.id}" name="ids" checked="checked" οnchange="checkedOpt('${cart.id}')"/>
					名称：${cart.stockConf.goodsName }
					规格：<c:forEach items="${cart.stockConf.goodsSpecificationVals}" var="gsv">
							${gsv.name} : ${gsv.value}
						</c:forEach>
					购买数量：
						<a href="javascript:void(0);" οnclick="delItem('${cart.id}')"> - </a> 
						<input type="text" id="buyNum${cart.id}" value="${cart.buyNum}"/>
						<a href="javascript:void(0);" οnclick="addItem('${cart.id}', '${cart.stockConf.currStock}')"> + </a>
					单价：
						<div id="salePrice${cart.id}" price="${cart.stockConf.salePrice}" >${cart.stockConf.salePriceStr}</div>
					小计
						<div id="sumPrice${cart.id}" price="${cart.sumSalePrice}">${cart.sumSalePriceStr}</div>
						
					<a href="javascript:void(0);" οnclick="removeItem('${cart.id}')"> 删除 </a>
				</div>
			</c:forEach>
			
			选中数量：<div id="totalNum" >${cartVO.totalNum}</div>
			选中价格：<div id="totalPrice" price="${cartVO.totalPrice}">${cartVO.totalPriceStr}</div>
		</form>
		<a href="javascript:void(0);" οnclick="account()">结算</a>
	</body>
</html>