|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
<title>学考无忧-购物车</title>
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/reset.css" />
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/base.css" />
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 顶部 -->
|
|
|
<div class="ad_top top_navBg">
|
|
|
<img class="ad_topImg" src="__TMPL__/public/assets/images/left2.png" alt="" />
|
|
|
<h1>收货地址</h1>
|
|
|
<p>管理</p>
|
|
|
</div>
|
|
|
<div class="shopping_cartBox">
|
|
|
<!-- 几件 -->
|
|
|
<h2 class="sh_cartNum">共有3件商品</h2>
|
|
|
<ul class="order_newsUl sp_cartUl" style="margin-bottom:2.1rem">
|
|
|
<li>
|
|
|
<div class="sh_cartround">
|
|
|
<img src="__TMPL__/public/assets/images/39_0.png" alt="" />
|
|
|
</div>
|
|
|
<div class="order_newsImg">
|
|
|
<img src="__TMPL__/public/assets/images/36.png" alt="" />
|
|
|
</div>
|
|
|
<div class="order_newsCon">
|
|
|
<div class="order_newsTxt1 txt-cut">
|
|
|
小学五年级英语下册语五年级下册好用不贵经济实惠五年级下册好...
|
|
|
</div>
|
|
|
<div class="order_newsTxt2">×<span>1</span></div>
|
|
|
<div class="order_newsTxt3">
|
|
|
<p class="de_topTxt1_1">¥<span>265</span>.00</p>
|
|
|
<div class="order_newsNum">
|
|
|
<div class="order_newsJian">-</div>
|
|
|
<input class="order_newsnum" type="text" readonly="readonly" value="1" />
|
|
|
<div class="order_newsJia">+</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="sh_cartround">
|
|
|
<img src="__TMPL__/public/assets/images/39_0.png" alt="" />
|
|
|
</div>
|
|
|
<div class="order_newsImg">
|
|
|
<img src="__TMPL__/public/assets/images/36.png" alt="" />
|
|
|
</div>
|
|
|
<div class="order_newsCon">
|
|
|
<div class="order_newsTxt1 txt-cut">
|
|
|
小学五年级英语下册语五年级下册好用不贵经济实惠五年级下册好...
|
|
|
</div>
|
|
|
<div class="order_newsTxt2">×<span>1</span></div>
|
|
|
<div class="order_newsTxt3">
|
|
|
<p class="de_topTxt1_1">¥<span>265</span>.00</p>
|
|
|
<div class="order_newsNum">
|
|
|
<div class="order_newsJian">-</div>
|
|
|
<input class="order_newsnum" type="text" readonly="readonly" value="1" />
|
|
|
<div class="order_newsJia">+</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!-- 支付 -->
|
|
|
<div class="shop_carts">
|
|
|
<div class="shop_cartsBox">
|
|
|
<!-- 全选 -->
|
|
|
<div class="shop_carts1">
|
|
|
<img src="__TMPL__/public/assets/images/39_1.png" alt="" />
|
|
|
<p>全选</p>
|
|
|
</div>
|
|
|
<!-- 合计 -->
|
|
|
<div class="shop_carts2">
|
|
|
<span class="shop_cartsIco">合计:</span>
|
|
|
<p class="de_topTxt1_1 zoji">¥<span>265.00</span></p>
|
|
|
</div>
|
|
|
<!-- 去支付 -->
|
|
|
|
|
|
<div class="shop_carts3">
|
|
|
<a href="w_Ypayment.html" style="color:white;">
|
|
|
去支付
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 删除 -->
|
|
|
<div class="shop_remove">
|
|
|
<div class="shop_removeBox">
|
|
|
<!-- 全选 -->
|
|
|
<div class="shop_carts1">
|
|
|
<img src="__TMPL__/public/assets/images/39_1.png" alt="" />
|
|
|
<p>全选</p>
|
|
|
</div>
|
|
|
<div class="shop_remove2">
|
|
|
删除
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 底部一级导航 -->
|
|
|
<div class="in_bottom">
|
|
|
<ul>
|
|
|
<a href="index.html">
|
|
|
<li>
|
|
|
<img src="__TMPL__/public/assets/images/22.png" alt="" />
|
|
|
<p>首页</p>
|
|
|
</li>
|
|
|
</a>
|
|
|
<a href="nav_class.html">
|
|
|
<li>
|
|
|
<img src="__TMPL__/public/assets/images/16.png" alt="" />
|
|
|
<p>分类</p>
|
|
|
</li>
|
|
|
</a>
|
|
|
<a href="w_shopping_cart.html">
|
|
|
<li>
|
|
|
<img src="__TMPL__/public/assets/images/20.png" alt="" />
|
|
|
<p style="color:#FF7700;">购物车</p>
|
|
|
</li>
|
|
|
</a>
|
|
|
<a href="log_one.html">
|
|
|
<li>
|
|
|
<img src="__TMPL__/public/assets/images/18.png" alt="" />
|
|
|
<p>我的</p>
|
|
|
</li>
|
|
|
</a>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<script src="__TMPL__/public/assets/js/base.js"></script>
|
|
|
<script src="__TMPL__/public/assets/js/jquery.js"></script>
|
|
|
<script>
|
|
|
$(function() {
|
|
|
$(".order_newsNum div").on("click", function(evt) {
|
|
|
if ($(this).text() == "-") {
|
|
|
var count = parseInt($(this).next().val());
|
|
|
if (count > 1) {
|
|
|
count -= 1;
|
|
|
$(this).next().val(count);
|
|
|
} else {
|
|
|
alert("商品数量最少为1");
|
|
|
}
|
|
|
$(this).parents(".order_newsCon").find(".order_newsTxt2 span").text(count);
|
|
|
} else {
|
|
|
var count = parseInt($(this).prev().val());
|
|
|
if (count < 200) {
|
|
|
count += 1;
|
|
|
$(this).prev().val(count);
|
|
|
} else {
|
|
|
alert("商品数量最多为200");
|
|
|
}
|
|
|
$(this).parents(".order_newsCon").find(".order_newsTxt2 span").text(count);
|
|
|
}
|
|
|
var price = parseFloat($(this).parents(".order_newsTxt3").children(".de_topTxt1_1").text().split("¥")[1]);
|
|
|
calcTotal2();
|
|
|
});
|
|
|
// 单选
|
|
|
$(".sh_cartround img").each(function() {
|
|
|
$(this).on("click", function() {
|
|
|
if ($(this).attr("src") == "__TMPL__/public/assets/images/39_0.png") {
|
|
|
$(this).attr("src", "__TMPL__/public/assets/images/39.png");
|
|
|
calcTotal();
|
|
|
} else {
|
|
|
$(this).attr("src", "__TMPL__/public/assets/images/39_0.png");
|
|
|
calcTotal();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 全选
|
|
|
$(".shop_carts1 img").click(function() {
|
|
|
if ($(this).attr("src") == "__TMPL__/public/assets/images/39_1.png") {
|
|
|
$(this).attr("src", "__TMPL__/public/assets/images/39.png");
|
|
|
$(".sh_cartround img").attr("src", "__TMPL__/public/assets/images/39.png");
|
|
|
calcTotal();
|
|
|
} else {
|
|
|
$(this).attr("src", "__TMPL__/public/assets/images/39_1.png");
|
|
|
$(".sh_cartround img").attr("src", "__TMPL__/public/assets/images/39_0.png");
|
|
|
$(".zoji span").text("0");
|
|
|
}
|
|
|
});
|
|
|
// 点击管理
|
|
|
$(".top_navBg p").click(function() {
|
|
|
if ($(this).text() == "管理") {
|
|
|
$(this).text("完成");
|
|
|
$(".shop_carts").hide();
|
|
|
$(".shop_remove").show();
|
|
|
} else {
|
|
|
$(this).text("管理");
|
|
|
$(".shop_carts").show();
|
|
|
$(".shop_remove").hide();
|
|
|
}
|
|
|
});
|
|
|
// 点击删除
|
|
|
$(".shop_remove2").click(function() {
|
|
|
$($(".sh_cartround img")).each(function() {
|
|
|
if ($(this).attr("src") == "__TMPL__/public/assets/images/39.png") {
|
|
|
$(this)
|
|
|
.parents("li")
|
|
|
.remove();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
// 计算总计
|
|
|
function calcTotal() {
|
|
|
var checkBoxes = $(".sh_cartround img");
|
|
|
var priceSpans = $(".order_newsTxt3 .de_topTxt1_1 span");
|
|
|
var countInputs = $(".order_newsNum .order_newsnum");
|
|
|
var totalCount = 0;
|
|
|
var totalPrice = 0;
|
|
|
for (var i = 0; i < priceSpans.length; i += 1) {
|
|
|
// 强调: jQuery对象使用下标运算或get方法会还原成原生的JavaScript对象
|
|
|
if ($(checkBoxes[i]).attr("src") == "img/39.png") {
|
|
|
var price = parseFloat($(priceSpans[i]).text());
|
|
|
var count = parseInt($(countInputs[i]).val());
|
|
|
totalCount += count;
|
|
|
totalPrice += price * count;
|
|
|
}
|
|
|
}
|
|
|
$(".zoji span").html(totalPrice.toFixed(2));
|
|
|
}
|
|
|
|
|
|
function calcTotal2() {
|
|
|
var checkBoxes = $(".sh_cartround img");
|
|
|
var priceSpans = $(".order_newsTxt3 .de_topTxt1_1 span");
|
|
|
var countInputs = $(".order_newsNum .order_newsnum");
|
|
|
var totalCount = 0;
|
|
|
var totalPrice = 0;
|
|
|
for (var i = 0; i < priceSpans.length; i += 1) {
|
|
|
// 强调: jQuery对象使用下标运算或get方法会还原成原生的JavaScript对象
|
|
|
var price = parseFloat($(priceSpans[i]).text());
|
|
|
var count = parseInt($(countInputs[i]).val());
|
|
|
totalCount += count;
|
|
|
totalPrice += price * count;
|
|
|
}
|
|
|
$(".zoji span").html(totalPrice.toFixed(2));
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|