master

分支 (1)

管理

管理

master

imitate-tmall
/
cart最终版.html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<style>
body{
  font-size:12px;
  font-family:Arial;
}
div.pull-right{
  float:right !important;
}
div.cartDiv{
  max-width:1013px;
  margin:10px auto;
  color:black;
}
div.cartTitle button{
  background-color:#AAAAAA;
  border:1px solid #AAAAAA;
  width:53px;
  height:25px;
  border-radius:2px;
  color:white;
}
div.cartTitle span.cartTitlePrice{
  color:#C40000;
  font-size:14px;
  font-weight:bold;
  margin-right:3px;
  margin-left:5px;
}
div.cartDiv div.cartFoot{
  background-color:#E5E5E5;
  line-height:50px;
  margin:20px 0px;
  color:black;
  padding-left:20px;
}
div.cartFoot button{
  height:50px;
  color:white;
  background-color:#AAAAAA;
  border:1px solid #AAAAAA;
  font-size:18px;
  text-align:center;
  width:120px;

}
.clickTotal{
  cursor:pointer;
}
.clickOne{
  cursor:pointer;
}
.clickOne:hover{
  text-decoration:none;
}
div.cartFoot span.cartSumNumber{
  color:#C40000;
  font-weight:bold;
  font-size:16px;

}
div.cartFoot span.cartSumPrice{
  color:#C40000;
  font-weight:bold;
  font-size:20px;
  padding-top:7px;
  margin-right:3px;
}


div.cartProductlist table.cartProductTable{
  width:100%;
}
div.cartProductlist table.cartProductTable tr.cartProductTR{
  border:1px solid #CCCCCC;
}
div.cartProductlist table.cartProductTable tr.cartProductTR td{
  padding:20px 20px;
}
div.cartProductlist table.cartProductTable th{
  font-weight:normal;
  color:#333333;
  padding:20px 20px;

}
img.cartProductImg{
  width:80px;
  height:80px;
  padding:1px;
  border:1px solid #EEEEEE;
}
th.selectedAllImg{
  width:150px;
}
th.operation{
  width:80px;
}
div.cartProductLinkOutDiv a.cartProductLink{
  color:#333333;
}
div.cartProductLinkOutDiv a.cartProductLink:hover{
  color:#C40000;
}
div.cartProductLinkOutDiv div.someImages{
  padding-top:30px;
}
tr.cartProductTR div.prePrice{
  text-decoration:line-through;
  color:#9C9C9C;
  font-weight:bold;
  font-size:14px;
}
tr.cartProductTR div.discountPrice{
  color:#C40000;
  font-size:15px;
  font-weight:bold;
}
div.cartProudctChangeNumberDiv{
  border:1px solid #E5E5E5;
  width:85px;
}
div.cartProudctChangeNumberDiv a{
  display:inline-block;
  text-align:center;
  color:black;
  text-decoration:none;
  width:15px;
}
div.cartProudctChangeNumberDiv input{
  display:inline-block;
  width:43px;
}
span.cartProudctOneSumPrice{
  color:#C40000;
  font-size:15px;
  font-weight:bold;
}
.forTotal{
  color:#333333;
}
.forTotal:hover{
  text-decoration:none;
}
</style>

<script>
   function turnOrderButton(){
     var selectAny = false;
	 $(".cartProductItemIfSelected").each(function(){
	   if("true"==$(this).attr("selectit")){
	     selectAny = true;
	   }
   });
     if(selectAny){
     $("button.createOrderButton").css("background-color","#C40000");
	 $("button.createOrderButton").removeAttr("disabled");
    }
     else{
	 $("button.createOrderButton").css("background-color","#AAAAAA");
	 $("button.createOrderButton").attr("disabled","disabled");
	 }
   }


   function sumOneProductPrice(pid,num,price){
	    var sum = num*price;
		$(".cartProudctOneSumPrice[pid="+pid+"]").html("￥"+sum);

	}

	function sumAllProcutPrice(){

	   var sum=0;
	   var totalNumber=0;
	 $("img.cartProductItemIfSelected[selectit='true']").each(function(){
       var oiid =$(this).attr("oiid");
       var price = $(".cartProudctOneSumPrice[oiid="+oiid+"]").text();
	   price = price.replace(/￥/g,"");
	   sum += new Number(price);
	   var num = $(".amountOfProduct[oiid="+oiid+"]").val();
	   totalNumber += new Number(num);
});

     $(".cartSumPrice").html("￥"+sum);
     $(".cartTitlePrice").html("￥"+sum);
	 $(".cartSumNumber").html(totalNumber);
	}

	$(function(){
    //增加商品数量
	  $(document).ready(function(){
	    $(".amountOfProduct").each(function(){
	    var pid = $(this).attr("pid");
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		sumOneProductPrice(pid,num,price);

	  });
	  });

	  $(".numberAdd").click(function(){
	    var pid = $(this).attr("pid");
	    var stock = $("span.orderItemStock[pid="+pid+"]").text();
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		num++;
		if(num>stock){
		  num=stock;
		}
	    $(".amountOfProduct[pid="+pid+"]").val(num);
		sumOneProductPrice(pid,num,price);
		sumAllProcutPrice();
	  });


	$(".numberMinus").click(function(){
	 //可以减0删除
	 var pid = $(this).attr("pid");
	 var oiid=$(this).attr("oiid");
	    var stock = $("span.orderItemStock[pid="+pid+"]").text();
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		num--;
		if(num==0){
		$("tr.cartProductTR[oiid="+oiid+"]").hide();
		}
	    $(".amountOfProduct[pid="+pid+"]").val(num);
		sumOneProductPrice(pid,num,price);
		sumAllProcutPrice();
	  });


	$(".amountOfProduct").keyup(function(){
	    var pid =$(this).attr("pid");
		var stock = $("span.orderItemStock[pid="+pid+"]").text();
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		num = parseInt(num);
		if(isNaN(num)){
		 num=1;}
	    if(num<0){
		 num=1;}
		if(num>stock){
	     num=stock;}

		 $(".amountOfProduct[pid="+pid+"]").val(num);
		 sumOneProductPrice(pid,num,price);
		 sumAllProcutPrice();
		});


	$(".clickOne").click(function(){
		var oiid =$(this).attr("oiid");

		if("false"==$(".cartProductItemIfSelected[oiid="+oiid+"]").attr("selectit")){
		$("span.inner[oiid="+oiid+"]").show();
		$(".cartProductItemIfSelected[oiid="+oiid+"]").attr("selectit","true");
		$(".cartProductTR[oiid="+oiid+"]").css("background-color","#FFF8E1");
		turnOrderButton();
		}else{
		 $("span.inner[oiid="+oiid+"]").hide();
		 $(".cartProductItemIfSelected[oiid="+oiid+"]").attr("selectit","false");
		 $(".cartProductTR[oiid="+oiid+"]").css("background-color","white");
		 turnOrderButton();
		}
		sumAllProcutPrice();

	});


	$(".clickTotal").click(function(){

     if("false"==$(".clickTotal").attr("select")){
      $("span.inner").show();
	  $(".cartProductItemIfSelected").attr("selectit","true");
	  $(".clickTotal").attr("select","true");
	  $(".cartProductTR").css("background-color","#FFF8E1");
      sumAllProcutPrice();
	  }
	  else{
	  $("span.inner").hide();
	  $(".cartProductItemIfSelected").attr("selectit","false");
	  $(".clickTotal").attr("select","false");
	  $(".cartProductTR").css("background-color","white");
	  $(".cartSumPrice").html("￥"+0);
      $(".cartTitlePrice").html("￥"+0);
	  }
     });

	 $(".deleteProduct").click(function(){
	    var oiid=$(this).attr("oiid");
		$("tr.cartProductTR[oiid="+oiid+"]").hide();

	 });
});


</script>

<div class="cartDiv">
 <div class="cartTitle pull-right">
   <span>已选商品（不含运费）</span>
   <span class="cartTitlePrice">￥0.00</span>
   <button class="createOrderButton" disabled="disabled">结算</span>
 </div>


 <div >
 <div class="cartProductlist">
  <table class="cartProductTable">
    <thead>
	  <tr>
	    <th class="selectedAllImg">
		<a class="clickTotal" select="false">
		<div style="position:relative" >
		<img src="https://how2j.cn/tmall/img/site/cartNotSelected.png"  ><span class="forTotal">全选</span>
		<span class="glyphicon glyphicon-ok inner"  style="position:absolute;top:4px;left:1px;display:none;color:#C40000"></span>
		</div>
		</a>
		</th>
		<th>商品信息</th>
		<th>单价</th>
		<th>数量</th>
		<th>金额</th>
		<th class="operation">操作</th>
	  </tr>
	</thead>
	<tbody>
	  <tr class="cartProductTR" oiid="936">
	   <td>
	   <a oiid="936" class="clickOne">
	   <div style="position:relative"  oiid="936">
	   <img  src="https://how2j.cn/tmall/img/site/cartNotSelected.png" selectit="false" class="cartProductItemIfSelected" oiid="936">
	   <span class="glyphicon glyphicon-ok inner" style="position:absolute;top:35px;left:1px;color:#C40000;display:none" oiid="936"></span>
	   <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
       </div>
	   </a>
	   </td>
	   <td>
	   <div class="cartProductLinkOutDiv">
	    <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
		<div class="someImages">
		 <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
		 <img title="消费者保障服务，7天无条件退货" src="https://how2j.cn/tmall/img/site/7day.png">
		 <img title="消费者保障服务，承诺如实描述"  src="https://how2j.cn/tmall/img/site/promise.png">
		</div>
	   </div>
	   </td>
	   <td>
	   <div class="prePrice">￥7580.0</div>
	   <div class="discountPrice">￥5306.0</div>
	   </td>
	   <td>
	   <div class="cartProudctChangeNumberDiv">
	   <span pid="365" class="hidden orderItemStock" >75</span>
	   <span pid="365" class="hidden prderItemPromotePrice">5306</span>
	   <a href="#nowhere" class="numberMinus" pid="365" oiid="936">-</a>
	   <input value="4" class="amountOfProduct" pid="365" oiid="936">
	   <a href="#nowhere" class="numberAdd" pid="365" stock="75">+</a>
	   </div>
	   </td>
	   <td>
	   <span pid="365" class="cartProudctOneSumPrice" oiid="936" >￥5306.00</span>

	   </td>
	   <td>
	    <a href="#nowhere" class="deleteProduct" oiid="936">删除</a>
	   </td>
	  </tr>

	  <tr class="cartProductTR" oiid="935">
	   <td>
	   <a oiid="935" class="clickOne">
	   <div style="position:relative"  oiid="935">
	   <img  src="https://how2j.cn/tmall/img/site/cartNotSelected.png" selectit="false" class="cartProductItemIfSelected" oiid="935">
	   <span class="glyphicon glyphicon-ok inner" style="position:absolute;top:35px;left:1px;color:#C40000;display:none" oiid="935"></span>
	   <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
       </div>
	   </a>
	   </td>
	   <td>
	   <div class="cartProductLinkOutDiv">
	    <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
		<div class="someImages">
		 <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
		 <img title="消费者保障服务，7天无条件退货" src="https://how2j.cn/tmall/img/site/7day.png">
		 <img title="消费者保障服务，承诺如实描述"  src="https://how2j.cn/tmall/img/site/promise.png">
		</div>
	   </div>
	   </td>
	   <td>
	   <div class="prePrice">￥235.0</div>
	   <div class="discountPrice">￥152.75</div>
	   </td>
	   <td>
	   <div class="cartProudctChangeNumberDiv">
	   <span pid="809" class="hidden orderItemStock" >17</span>
	   <span pid="809" class="hidden prderItemPromotePrice">152.75</span>
	   <a href="#nowhere" class="numberMinus" pid="809" oiid="935">-</a>
	   <input value="1" class="amountOfProduct" pid="809" oiid="935">
	   <a href="#nowhere" class="numberAdd" pid="809">+</a>
	   </div>
	   </td>
	   <td>
	   <span class="cartProudctOneSumPrice" pid="809" oiid="935">￥152.75</span>
	   </td>
	   <td>
	    <a href="#nowhere" class="deleteProduct" oiid="935">删除</a>
	   </td>
	  </tr>
	 </tbody>
	</table>
</div>
 </div>


 <div class="cartFoot">

   <div style="position:relative">
   <a class="clickTotal" select="false">
   <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" href="#nowhere" height="15px">
   <span class="glyphicon glyphicon-ok inner" style="position:absolute;top:20px;left:1px;display:none;color:#C40000"></span>
   <span class="forTotal">全选</span>
   </a>
   <div class="pull-right">
   <span>已选商品</span>
   <span class="cartSumNumber">0</span>
   <span>件</span>
   <span>合计（不含运费）：</span>
   <span class="cartSumPrice">￥0.00</span>
   <button class="createOrderButton" disabled="disabled">结算</button>
   </div>
   </div>
 </div>
</div>