2017-09-07/shop-car.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>购物车</title>
		<style>
			table {
				border: 1px solid orange;
			}
			
			th {
				width: 100px;
				height: 20px;
				border: 1px solid orange;
				border-rules: all;
			}
			
			td {
				width: 100px;
				font-size: 14px;
				color: orange;
				line-height: 100px;
				text-align: center;
				border: 1px solid orange;
			}
			td img{
				width: 90px;
				margin: 5px;
			}
			.box {
				width: 600px;
				line-height: 40px;
				border: 1px solid orange;
			}
			
			#sum {
				color: red;
				font-size: 20px;
				font-weight: 700;
				float: right;
				margin-right: 50px;
			}
		</style>
	</head>

	<body>
		<table>
			<caption>购物车列表</caption>
			<thead>
				<th>商品ID</th>
				<th>图片</th>
				<th>名称</th>
				<th>数量</th>
				<th>单价</th>
				<th>单品总价</th>
			</thead>
		</table>
		<div class="box">所有商品总价：<span id="sum">0</span></div>
		<script src="myajax.js" charset="utf-8"></script>
		<script>
			var oTable = document.querySelector('table');
			var oSum = document.querySelector('#sum');
			myajax.get('http://h6.duchengjiu.top/shop/api_cart.php', {
				token: localStorage.token
			}, function(err, responseText) {
				var json = JSON.parse(responseText);
				console.log(json);
				var data = json.data;
				var sum = 0;
				for(var i = 0; i < data.length; i++) {
					var obj = data[i];
					sum += obj.goods_price * obj.goods_number;
					oTable.innerHTML += `
             <tr>
                <td>${obj.goods_id}</td>
                <td><img src="${obj.goods_thumb}" ></td>
                <td>${obj.goods_name}</td>
                <td><input data-id="${obj.goods_id}" type="number" name="number" value="${obj.goods_number}" /></td>
                <td>${obj.goods_price}</td>
                <td name="sum">${obj.goods_price*obj.goods_number}</td>
              </tr> `;
				}
				getSum();
			});

			oTable.onchange = function(event) {
				event = event || window.event;
				var target = event.target || event.srcElement;
				if(target.name === 'number') {
					console.log(target.value, target.dataset.id);
					var goods_id = target.dataset.id;
					var number = target.value;
					myajax.post('http://h6.duchengjiu.top/shop/api_cart.php?token=' + localStorage.token, {
							goods_id,
							number
						},
						function(err, responseText) {
							var json = JSON.parse(responseText);
							console.log(json);
							if(json.code === 0) {
								var goods_price = parseInt(target.parentNode.nextElementSibling.innerText);
								target.parentNode.nextElementSibling.nextElementSibling.innerText = parseInt(target.value) * goods_price;
								getSum();
							}
						})
				}
			}

			function getSum() {
				var oSums = document.querySelectorAll('td[name=sum]');
				var sum = 0;
				for(var i = 0; i < oSums.length; i++) {
					sum += parseInt(oSums[i].innerText);
				}
				oSum.innerText = sum;
			}
		</script>
	</body>

</html>