<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="icon" href="/static/cart/img/心04.png" type="/image/x-icon" /> <link rel="stylesheet" href="/static/cart/css/One_bdyStyle.css"> <link rel="stylesheet" href="/static/cart/css/index.css"> <script src="/static/cart/js/jquery-3.1.1.min.js" charset="utf-8"></script> <link rel="stylesheet" href="/static/cart/css/One_mainFoot.css"> <link rel="stylesheet" href="/static/cart/css/font-awesome-4.7.0/css/font-awesome.css" /> </head> <body> <header> <a name="mao1"> <div class="header"> <ul class="header-left"> <li> <a href="http://alatusmall.com">首页</a> </li> </ul> <ul class="header-right"> <li> <a th:if="${session.get('loginUser')==null}" href="http://auth.alatusmall.com/login.html" style="color: red;">你好,请登录</a> <a th:if="${session.get('loginUser')!=null}" href="" style="color: red;">[[${session.get('loginUser').getNickname()}]]</a> </li> <li><a th:if="${session.get('loginUser')==null}" href="http://auth.alatusmall.com/reg.html">免费注册</a></li> <li class="spacer"></li> <li><a href="">我的订单</a></li> <li class="spacer"></li> </ul> <div style="clear: both;"></div> </div> </a> </header> <div class="one_search"> <div class="one_sousuo"> <div class="one_search_top"> <div class="one_top_left"> <a href="http://alatusmall.com" class="one_left_logo"><img src="/static/cart/img/logo1.jpg"></a> <a href="http://cart.alatus.com/cart.html" class="one_left_link">购物车</a> </div> <div class="one_top_right"> <input type="text" class="one_right_txt" placeholder="" onfocus="this.placeholder=''" onblur="this.placeholder='' "> <input type="button" value="搜索" class="one_right_btn"> </div> </div> <div class="one_search_load" th:if="${session.get('loginUser')==null}"> <img href="/static/cart/img/shop_07.jpg" class="one_load_wraing"> <span>您还没有登录!登录后购物车的商品将保存到您账号中</span> <a href="#"><input type="button" onclick="login()" value="立即登录" class="one_load_btn"></a> </div> </div> </div> <div class="One_BdyShop"> <div class="OneBdy_box"> <div class="One_tabTop"> <div class="One_Topleft"> <span>全部商品 </span> </div> </div> <div class="One_ShopTop"> <ul> <li><input type="checkbox" class="allCheck">全选</li> <li>商品</li> <li>单价</li> <li>数量</li> <li>小计</li> <li>操作</li> </ul> </div> <div class="One_ShopCon"> <ul th:if="${cart.getItems()!=null}"> <li th:each="item:${cart.getItems()}"> <div> </div> <div> <ol> <li><input onclick="itemCheck(event)" type="checkbox" th:attr="skuId=${item.getSkuId()}" th:checked="${item.getCheck()}"/></li> <li> <dt><img th:src="${item.getImage()}" alt=""></dt> <dd style="width: 300px"> <p> <span th:text="${item.getTitle()}"></span> <br/><br/> <span th:each="attr:${item.getSkuAttr()}" th:text="${attr+' '}"></span> </p> </dd> </li> <li> <p class="dj" th:text="'¥'+${#numbers.formatDecimal(item.getPrice(),3,2)}"></p> </li> <li> <p th:attr="skuId=${item.getSkuId()}"> <span class="countOpsBtn">-</span> <span class="countOpsNum" th:text="${item.getCount()}"></span> <span class="countOpsBtn">+</span> </p> </li> <li style="font-weight:bold"><p class="zj">¥[[${#numbers.formatDecimal(item.getTotalPrice(),3,2)}]]</p></li> <li> <p th:attr="skuId=${item.getSkuId()}" class="deleteItemBtn">删除</p> </li> </ol> </div> </li> </ul> </div> <div class="One_ShopFootBuy fix1"> <div> <ul> <li><input type="checkbox" class="allCheck"><span>全选</span></li> <li>删除选中的商品</li> <li>移到我的关注</li> <li>清除下柜商品</li> </ul> </div> <div> <font style="color:#e64346;font-weight:bold;" class="sumNum"> </font> <ul> <li><img src="/static/cart/img/buyNumleft.png" alt=""></li> <li><img src="/static/cart/img/buyNumright.png" alt=""></li> </ul> </div> <div> <ol> <li>总价:<span style="color:#e64346;font-weight:bold;font-size:16px;" class="fnt">¥[[${#numbers.formatDecimal(cart.getTotalAmount(),3,2)}]]</span> </li> <li>优惠:<span style="color:#e64346;font-weight:bold;font-size:16px;" class="fnt">¥[[${#numbers.formatDecimal(cart.getReduce(),1,2)}]]</span> </li> </ol> </div> <div><button onclick="toTrade()" type="button">去结算</button></div> </div> </div> </div> <div class="One_isDel"> <p> <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <div> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd> <li>删除商品?</li> <li>您可以选择移到关注,或删除商品。</li> </dd> </dl> </div> <div> <button type="button" onclick="deleteItem()">删除</button> </div> </div> <div class="One_moveGzIfNull"> <p> <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd>请至少选中一件商品!</dd> </dl> </div> <div class="One_moveMyGz"> <p> <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <div> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd> <li>移到关注</li> <li>移动后选中商品将不再购物车中显示</li> </dd> </dl> </div> <div> <button type="button">确定</button> <button type="button">取消</button> </div> </div> <div class="One_clearShop"> <p> <span>提示</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd>没有下柜商品!</dd> </dl> </div> <!--底部--> <div class="one_footer"> </div> </body> <script src="/static/cart/js/index.js" charset="utf-8"></script> <script type="text/javascript"> function toTrade() { window.location.href = "http://order.alatusmall.com/toTrade"; } function toItem(skuId) { window.location.href = "http://item.alatusmall.com/" + skuId + ".html"; } function checkSku(chkbox) { var skuId = $(chkbox).attr("value"); var checked = $(chkbox).prop("checked"); var isCheckedFlag = "0"; if (checked) { isCheckedFlag = "1"; } var param = "isChecked=" + isCheckedFlag + "&" + "skuId=" + skuId; $.post("checkCart", param, function(data) { sumSumPrice(); }); } //封装总价钱函数 function sumSumPrice() { } //购物车顶端tab $(".One_Topleft span:last-child").mouseover(function() { $(".One_Topleft span:first-child").css({ "color": "black", "border-bottom": "none" }) $(this).css({ "cursor": "pointer", "color": "#E4393C", "border-bottom": "2px solid red" }) }).mouseout(function() { $(this).css({ "color": "black", "border-bottom": "none" }); $(".One_Topleft span:first-child").css({ "cursor": "pointer", "color": "#E4393C", "border-bottom": "2px solid red" }) }) //立即登录 $(".one_search_load input:button").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //去结算 $(".One_ShopFootBuy>div:last-child button").mouseover(function() { $(this).css("cursor", "pointer"); }) $(".One_ShopFootBuy>div:last-child button").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //buyNum $(".One_ShopFootBuy>div:nth-child(2)").mouseover(function() { $(this).css("cursor", "pointer") }) $(".One_ShopFootBuy>div:nth-child(2)").click(function() { $(this).children("ol").toggle(); $(this).children("ul").toggle(); var dis = $(".One_ShopFootBuy>div:nth-child(2) ol").css("display"); if (dis == "none") { $(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(0)") } else if (dis == "block") { $(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(180deg)") } }) //右侧固定定位 $(".One_RightFix ul>li:not(:first-child)").mouseover(function() { $(this).css({ "cursor": "pointer", "background": "#C91423" }) $(this).children("ol").stop().animate({ "left": "-75px" }, 200) }).mouseout(function() { $(this).css("background", "#7A6E6E"); $(this).children("ol").stop().animate({ "left": "75px" }, 200) }) //右侧底部固定定位 $(".One_RightbtmFix ul>li").mouseover(function() { $(this).css({ "cursor": "pointer", "background": "#C91423" }) $(this).children("ol").stop().animate({ "left": "-55px" }, 200) }).mouseout(function() { $(this).css("background", "#7A6E6E"); $(this).children("ol").stop().animate({ "left": "55px" }, 200) }) //登录弹框tab切换 $(".One_DengLu>div:nth-child(3) ul li").mouseover(function() { $(this).css("cursor", "pointer") }) $(".One_DengLu>div:nth-child(3) ul li").click(function() { var i = $(this).index(); $(this).css({ "color": "#E64346", "font-weight": "bold" }) .siblings("li").css({ "color": "black", "font-weight": "normal" }) $(".One_DengLu>div:nth-child(3) ol li").eq(i).show().siblings().hide() }) //优惠券 $(".One_ShopBottom>div:nth-child(2) img").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //配送地址hover效果 $(".One_Topright span:last-child").mouseover(function() { $(this).children(".One_Local").css("display", "block") }).mouseout(function() { $(".One_Local>ul>li").eq(0).children("ol").css("display", "block") $(this).children(".One_Local").css("display", "none") }) $(".One_Local>ul>li").eq(0).children("ol").css("display", "block") $(".One_Local>ul>li").mouseover(function() { var i = $(this).index(); $(this).css("cursor", "pointer"); $(this).children("ol").css("display", "block") }).mouseout(function() { $(".One_Local>ul>li").eq(0).children("ol").css("display", "block") $(this).children("ol").css("display", "none") }) $(".One_Local>ul>li>ol li").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }) }).mouseout(function() { $(this).css("color", "#005AA0") }) $(".One_Local>ul>li>ol li").click(function() { $(this).parent().parent().children("label").html($(this).html()) }) //购物车全选反选 $(".One_ShopTop ul li:first-child .allCheck").click(function() { if ($(".One_ShopTop ul li:first-child .allCheck").is(":checked")) { // $(".check").each(function(index){ $(".check").prop("checked", true); $(".check").parent().parent().parent().css("background", "#fff4e8"); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", true) // }) } else { // $(".check").each(function(){ $(".check").parent().parent().parent().css("background", "none"); $(".check").prop("checked", false); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", false) // }) } }) $(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").click(function() { if ($(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").is(":checked")) { $(".check").prop("checked", true); $(".check").parent().parent().parent().css("background", "#fff4e8"); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", true) } else { $(".check").parent().parent().parent().css("background", "none"); $(".check").prop("checked", false); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", false) } }) $(".One_ShopBottom>div:first-child span:first-child .allCheck").click(function() { if ($(".One_ShopBottom>div:first-child span:first-child .allCheck").is(":checked")) { $(".check").prop("checked", true); $(".check").parent().parent().parent().css("background", "#fff4e8"); } else { $(".check").parent().parent().parent().css("background", "none"); $(".check").prop("checked", false); } }) //如果子选择框没有选中则父选框取消全选 $(".check").click(function() { $(".check").each(function() { if ($(this).prop("checked") == true) { $(".allCheck").prop("checked", false); } }) }) //子选择框全部选中复选框也选中 $(".check").click(function() { if ($(".check[class='check']:checked").length == $(".check[class='check']").length) { $(".allCheck").prop("checked", true); } else { $(".allCheck").prop("checked", false) } }) //删除已选的商品 $(".One_ShopFootBuy>div:first-child ul li:nth-child(2)").click(function() { // $(".check").each(function(){ if ($(".check").is(":checked") == false) { $(".One_mb").show(); $(".One_moveGzIfNull").show(); } else { $(".One_mb").show(); //蒙版显示 $(".One_isDel").show(); //删除弹框显示 $(".One_moveGzIfNull").hide(); } }) //确定删除弹框移入我的关注 $(".One_isDel>div:last-child button:last-child").click(function() { $(".One_isDel").hide(); $(".One_mb").show(); $(".One_DengLu").show(); }) //移到我的关注 $(".One_ShopFootBuy>div:first-child ul li:nth-child(3)").click(function() { $(".check").each(function(index) { if ($(this).is(":checked") == false) { $(".One_mb").show(); $(".One_moveGzIfNull").show(); } else { $(".One_mb").show(); $(".One_moveMyGz").show(); $(".One_moveGzIfNull").hide(); } }) }) //点击×号关闭 $(".One_moveGzIfNull>p span:last-child img").click(function() { $(".One_mb").hide(); $(".One_moveGzIfNull").hide(); }) $(".One_moveMyGz>p span:last-child img").click(function() { $(".One_mb").hide(); $(".One_moveMyGz").hide(); $(".One_moveGzIfNull").hide(); }) $(".One_clearShop>p span:last-child img").click(function() { $(".One_mb").hide(); $(".One_clearShop").hide(); }) //移到我的关注取消按钮点击关闭 $(".One_moveMyGz>div:last-child button:last-child").click(function() { $(".One_mb").hide(); $(".One_moveMyGz").hide(); }) //移到我的关注确定按钮点击登录弹框弹出 $(".One_moveMyGz>div:last-child button:first-child").click(function() { $(".One_moveMyGz").hide(); $(".One_mb").show(); $(".One_DengLu").show(); }) $(".One_DengLu>p:first-child span:last-child img").click(function() { $(".One_mb").hide(); $(".One_DengLu").hide(); }) //清除下柜商品 $(".One_ShopFootBuy>div:first-child ul li:nth-child(4)").click(function() { $(".One_mb").show(); $(".One_clearShop").show() }) //购物车+ - //鼠标移入变小手 $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span").mouseover(function() { $(this).css("cursor", "pointer") }) //+ $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:last-child").click(function() { var add = $(this).prev("span").html(); add++; $(this).prev("span").html(add); //总价 var dj = $(this).parent().parent().prev().children(".dj").html().substring(1); var sl = $(this).prev("span").html(); $(this).parent().parent().parent().children("li:nth-child(5)").children(".zj").html("¥" + dj * sl + ".00") sumSumPrice(); }) //- $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:first-child").click(function() { var jian = $(this).next("span").html(); jian--; if (jian <= 0) { jian = 0; } $(this).next("span").html(jian); //总价 var dj = $(this).parent().parent().prev().children(".dj").html().substring(1); var sl = $(this).next("span").html(); $(this).parent().parent().parent().children("li:nth-child(5)").children(".zj").html("¥" + dj * sl + ".00") sumSumPrice(); }) //选中当前商品背景变色 $(".check").each(function(index) { $(".check").eq(index).click(function() { if ($(this).is(":checked")) { $(this).parent().parent().parent().css("background", "#fff4e8"); $(this).parent().parent().parent().parent().children("div:last-child").css("background", "#fff4e8") } else { $(this).parent().parent().parent().parent().children("div:last-child").css("background", "none") $(this).parent().parent().parent().css("background", "none") } }) }) //商品删除鼠标移入变色 $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }); }).mouseout(function() { $(this).css({ "cursor": "pointer", "color": "gray" }); }) $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:nth-child(2)").click(function() { $(".One_mb").show(); $(".One_moveMyGz").show(); }) $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:last-child").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //点击删除 //点击删除出现弹框 $(".One_isDel>p img").click(function() { $(".One_mb").hide(); $(".One_isDel").hide(); }) $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:first-child").click(function() { $(".One_mb").show(); $(".One_isDel").show(); }) $(".One_isDel>div:last-child button").mouseover(function() { $(this).css("cursor", "pointer"); }) $(".One_ShopFootBuy>div:first-child ul li:not(:first-child)").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }) }).mouseout(function() { $(this).css("color", "black") }) //封装总价钱函数 function sumSumPrice() { console.log("计算总价"); var zzj = 0; $(".check").each(function() { if ($(this).prop("checked")) { console.log("check!!" + $(this).parents("ol").find(".zj").html()); var zj = $(this).parents("ol").find(".zj").html().substring(1); console.log(" 价格:" + zj); zzj = zzj + parseFloat(zj); } $(".fnt").html("¥" + zzj + ".00") }) } //封装总数量函数 function sumSumNum() { var kong = 0; $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:nth-child(2)").each(function() { kong += parseFloat($(this).html()) }) $(".sumNum").html(kong); } $(".One_ShopCon ul li>div:nth-child(2)>ol>li:nth-child(2)>dd").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }) }).mouseout(function() { $(this).css("color", "black") }) //更多促销下拉 $(".One_ShopCon ul li>div:nth-child(2) ol li:nth-child(3) p:nth-child(2)").click(function() { $(this).parent().children(".nmbd").slideToggle(300); var dis = $(this).parent().children(".nmbd").css("display"); console.log(dis); }) $(".nmbd dd:last-child button:first-child").click(function() { $(this).parent().parent().slideUp(100) }) $(".nmbd dd:last-child button:last-child").click(function() { $(this).parent().parent().slideUp(100) }) //active $(".one_main_div1 .one_main_ul>li").mouseover(function() { $(".one_main_div1 .one_main_ul>li").removeClass("active"); $(this).addClass("active"); }) //选项卡 $(".one_main_div1 .one_main_ul li").mouseover(function() { $(".one_main_div1_1").eq($(this).index()).stop(true).show().siblings().stop(true).hide() }) $(function() { //声明变量记录索引 var index = 0; //点击右边按钮 //忽略重复点击开关 var toggle = true $(".arrow-right").click(function() { if (toggle == false) { return } toggle = false index++; if (index > $('.fade li').length - 1) { index = 0; } }); //点击左边按钮 $(".arrow-left").click(function() { if (toggle == false) { return } toggle = false index--; if (index < 0) { index = $('.fade li').length - 1; } $('.pagination ul li').eq(index).addClass('active').siblings().removeClass('active') $(".slider>ul>li").eq(index).fadeIn(500, function() { toggle = true }).siblings("li").fadeOut(500); }); //点击分页器 $('.pagination ul li').mouseover(function() { var paging = $(this).index() //变颜色 $(this).addClass('active').siblings().removeClass('active') //与图片关联 $(".slider>ul>li").eq(paging).fadeIn(1000).siblings("li").fadeOut(1000); }) }); $(".fade li>div a").mouseover(function() { $(this).children("p").children("img").attr("src", "img/one_mian_gwc2.png") }).mouseout(function() { $(this).children("p").children("img").attr("src", "img/one_mian_gwc1.png") }) function itemCheck(event){ let skuId = event.target.getAttribute("skuId"); let check = event.target.checked; location.href = "http://cart.alatusmall.com/checkItem?skuId=" + skuId + "&check=" + (check ? 1 : 0); } function login() { var s = encodeURIComponent("http://cart.alatusmall.com/cartList"); window.location.href = "http://auth.alatusmall.com/login.html"; } $(".countOpsBtn").click(function(){ // 获取SkuID let skuId = $(this).parent().attr("skuId"); let num = $(this).parent().find(".countOpsNum").text(); location.href = "http://cart.alatusmall.com/countItem?skuId="+skuId+"&num="+num; }); var deleteId = 0; function deleteItem(){ location.href = "http://cart.alatusmall.com/deleteItem?skuId="+deleteId; } $(".deleteItemBtn").click(function(){ deleteId = $(this).attr("skuId"); }); </script> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="icon" href="/static/cart/img/心04.png" type="/image/x-icon" /> <link rel="stylesheet" href="/static/cart/css/One_bdyStyle.css"> <link rel="stylesheet" href="/static/cart/css/index.css"> <script src="/static/cart/js/jquery-3.1.1.min.js" charset="utf-8"></script> <link rel="stylesheet" href="/static/cart/css/One_mainFoot.css"> <link rel="stylesheet" href="/static/cart/css/font-awesome-4.7.0/css/font-awesome.css" /> </head> <body> <header> <a name="mao1"> <div class="header"> <ul class="header-left"> <li> <a href="http://alatusmall.com">首页</a> </li> </ul> <ul class="header-right"> <li> <a th:if="${session.get('loginUser')==null}" href="http://auth.alatusmall.com/login.html" style="color: red;">你好,请登录</a> <a th:if="${session.get('loginUser')!=null}" href="" style="color: red;">[[${session.get('loginUser').getNickname()}]]</a> </li> <li><a th:if="${session.get('loginUser')==null}" href="http://auth.alatusmall.com/reg.html">免费注册</a></li> <li class="spacer"></li> <li><a href="">我的订单</a></li> <li class="spacer"></li> </ul> <div style="clear: both;"></div> </div> </a> </header> <div class="one_search"> <div class="one_sousuo"> <div class="one_search_top"> <div class="one_top_left"> <a href="http://alatusmall.com" class="one_left_logo"><img src="/static/cart/img/logo1.jpg"></a> <a href="http://cart.alatus.com/cart.html" class="one_left_link">购物车</a> </div> <div class="one_top_right"> <input type="text" class="one_right_txt" placeholder="" οnfοcus="this.placeholder=''" οnblur="this.placeholder='' "> <input type="button" value="搜索" class="one_right_btn"> </div> </div> <div class="one_search_load" th:if="${session.get('loginUser')==null}"> <img href="/static/cart/img/shop_07.jpg" class="one_load_wraing"> <span>您还没有登录!登录后购物车的商品将保存到您账号中</span> <a href="#"><input type="button" οnclick="login()" value="立即登录" class="one_load_btn"></a> </div> </div> </div> <div class="One_BdyShop"> <div class="OneBdy_box"> <div class="One_tabTop"> <div class="One_Topleft"> <span>全部商品 </span> </div> </div> <div class="One_ShopTop"> <ul> <li><input type="checkbox" class="allCheck">全选</li> <li>商品</li> <li>单价</li> <li>数量</li> <li>小计</li> <li>操作</li> </ul> </div> <div class="One_ShopCon"> <ul th:if="${cart.getItems()!=null}"> <li th:each="item:${cart.getItems()}"> <div> </div> <div> <ol> <li><input οnclick="itemCheck(event)" type="checkbox" th:attr="skuId=${item.getSkuId()}" th:checked="${item.getCheck()}"/></li> <li> <dt><img th:src="${item.getImage()}" alt=""></dt> <dd style="width: 300px"> <p> <span th:text="${item.getTitle()}"></span> <br/><br/> <span th:each="attr:${item.getSkuAttr()}" th:text="${attr+' '}"></span> </p> </dd> </li> <li> <p class="dj" th:text="'¥'+${#numbers.formatDecimal(item.getPrice(),3,2)}"></p> </li> <li> <p th:attr="skuId=${item.getSkuId()}"> <span class="countOpsBtn">-</span> <span class="countOpsNum" th:text="${item.getCount()}"></span> <span class="countOpsBtn">+</span> </p> </li> <li style="font-weight:bold"><p class="zj">¥[[${#numbers.formatDecimal(item.getTotalPrice(),3,2)}]]</p></li> <li> <p th:attr="skuId=${item.getSkuId()}" class="deleteItemBtn">删除</p> </li> </ol> </div> </li> </ul> </div> <div class="One_ShopFootBuy fix1"> <div> <ul> <li><input type="checkbox" class="allCheck"><span>全选</span></li> <li>删除选中的商品</li> <li>移到我的关注</li> <li>清除下柜商品</li> </ul> </div> <div> <font style="color:#e64346;font-weight:bold;" class="sumNum"> </font> <ul> <li><img src="/static/cart/img/buyNumleft.png" alt=""></li> <li><img src="/static/cart/img/buyNumright.png" alt=""></li> </ul> </div> <div> <ol> <li>总价:<span style="color:#e64346;font-weight:bold;font-size:16px;" class="fnt">¥[[${#numbers.formatDecimal(cart.getTotalAmount(),3,2)}]]</span> </li> <li>优惠:<span style="color:#e64346;font-weight:bold;font-size:16px;" class="fnt">¥[[${#numbers.formatDecimal(cart.getReduce(),1,2)}]]</span> </li> </ol> </div> <div><button οnclick="toTrade()" type="button">去结算</button></div> </div> </div> </div> <div class="One_isDel"> <p> <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <div> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd> <li>删除商品?</li> <li>您可以选择移到关注,或删除商品。</li> </dd> </dl> </div> <div> <button type="button" οnclick="deleteItem()">删除</button> </div> </div> <div class="One_moveGzIfNull"> <p> <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd>请至少选中一件商品!</dd> </dl> </div> <div class="One_moveMyGz"> <p> <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <div> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd> <li>移到关注</li> <li>移动后选中商品将不再购物车中显示</li> </dd> </dl> </div> <div> <button type="button">确定</button> <button type="button">取消</button> </div> </div> <div class="One_clearShop"> <p> <span>提示</span><span><img src="/static/cart/img/错误.png" alt=""></span> </p> <dl> <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt> <dd>没有下柜商品!</dd> </dl> </div> <!--底部--> <div class="one_footer"> </div> </body> <script src="/static/cart/js/index.js" charset="utf-8"></script> <script type="text/javascript"> function toTrade() { window.location.href = "http://order.alatusmall.com/toTrade"; } function toItem(skuId) { window.location.href = "http://item.alatusmall.com/" + skuId + ".html"; } function checkSku(chkbox) { var skuId = $(chkbox).attr("value"); var checked = $(chkbox).prop("checked"); var isCheckedFlag = "0"; if (checked) { isCheckedFlag = "1"; } var param = "isChecked=" + isCheckedFlag + "&" + "skuId=" + skuId; $.post("checkCart", param, function(data) { sumSumPrice(); }); } //封装总价钱函数 function sumSumPrice() { } //购物车顶端tab $(".One_Topleft span:last-child").mouseover(function() { $(".One_Topleft span:first-child").css({ "color": "black", "border-bottom": "none" }) $(this).css({ "cursor": "pointer", "color": "#E4393C", "border-bottom": "2px solid red" }) }).mouseout(function() { $(this).css({ "color": "black", "border-bottom": "none" }); $(".One_Topleft span:first-child").css({ "cursor": "pointer", "color": "#E4393C", "border-bottom": "2px solid red" }) }) //立即登录 $(".one_search_load input:button").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //去结算 $(".One_ShopFootBuy>div:last-child button").mouseover(function() { $(this).css("cursor", "pointer"); }) $(".One_ShopFootBuy>div:last-child button").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //buyNum $(".One_ShopFootBuy>div:nth-child(2)").mouseover(function() { $(this).css("cursor", "pointer") }) $(".One_ShopFootBuy>div:nth-child(2)").click(function() { $(this).children("ol").toggle(); $(this).children("ul").toggle(); var dis = $(".One_ShopFootBuy>div:nth-child(2) ol").css("display"); if (dis == "none") { $(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(0)") } else if (dis == "block") { $(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(180deg)") } }) //右侧固定定位 $(".One_RightFix ul>li:not(:first-child)").mouseover(function() { $(this).css({ "cursor": "pointer", "background": "#C91423" }) $(this).children("ol").stop().animate({ "left": "-75px" }, 200) }).mouseout(function() { $(this).css("background", "#7A6E6E"); $(this).children("ol").stop().animate({ "left": "75px" }, 200) }) //右侧底部固定定位 $(".One_RightbtmFix ul>li").mouseover(function() { $(this).css({ "cursor": "pointer", "background": "#C91423" }) $(this).children("ol").stop().animate({ "left": "-55px" }, 200) }).mouseout(function() { $(this).css("background", "#7A6E6E"); $(this).children("ol").stop().animate({ "left": "55px" }, 200) }) //登录弹框tab切换 $(".One_DengLu>div:nth-child(3) ul li").mouseover(function() { $(this).css("cursor", "pointer") }) $(".One_DengLu>div:nth-child(3) ul li").click(function() { var i = $(this).index(); $(this).css({ "color": "#E64346", "font-weight": "bold" }) .siblings("li").css({ "color": "black", "font-weight": "normal" }) $(".One_DengLu>div:nth-child(3) ol li").eq(i).show().siblings().hide() }) //优惠券 $(".One_ShopBottom>div:nth-child(2) img").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //配送地址hover效果 $(".One_Topright span:last-child").mouseover(function() { $(this).children(".One_Local").css("display", "block") }).mouseout(function() { $(".One_Local>ul>li").eq(0).children("ol").css("display", "block") $(this).children(".One_Local").css("display", "none") }) $(".One_Local>ul>li").eq(0).children("ol").css("display", "block") $(".One_Local>ul>li").mouseover(function() { var i = $(this).index(); $(this).css("cursor", "pointer"); $(this).children("ol").css("display", "block") }).mouseout(function() { $(".One_Local>ul>li").eq(0).children("ol").css("display", "block") $(this).children("ol").css("display", "none") }) $(".One_Local>ul>li>ol li").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }) }).mouseout(function() { $(this).css("color", "#005AA0") }) $(".One_Local>ul>li>ol li").click(function() { $(this).parent().parent().children("label").html($(this).html()) }) //购物车全选反选 $(".One_ShopTop ul li:first-child .allCheck").click(function() { if ($(".One_ShopTop ul li:first-child .allCheck").is(":checked")) { // $(".check").each(function(index){ $(".check").prop("checked", true); $(".check").parent().parent().parent().css("background", "#fff4e8"); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", true) // }) } else { // $(".check").each(function(){ $(".check").parent().parent().parent().css("background", "none"); $(".check").prop("checked", false); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", false) // }) } }) $(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").click(function() { if ($(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").is(":checked")) { $(".check").prop("checked", true); $(".check").parent().parent().parent().css("background", "#fff4e8"); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", true) } else { $(".check").parent().parent().parent().css("background", "none"); $(".check").prop("checked", false); $(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", false) } }) $(".One_ShopBottom>div:first-child span:first-child .allCheck").click(function() { if ($(".One_ShopBottom>div:first-child span:first-child .allCheck").is(":checked")) { $(".check").prop("checked", true); $(".check").parent().parent().parent().css("background", "#fff4e8"); } else { $(".check").parent().parent().parent().css("background", "none"); $(".check").prop("checked", false); } }) //如果子选择框没有选中则父选框取消全选 $(".check").click(function() { $(".check").each(function() { if ($(this).prop("checked") == true) { $(".allCheck").prop("checked", false); } }) }) //子选择框全部选中复选框也选中 $(".check").click(function() { if ($(".check[class='check']:checked").length == $(".check[class='check']").length) { $(".allCheck").prop("checked", true); } else { $(".allCheck").prop("checked", false) } }) //删除已选的商品 $(".One_ShopFootBuy>div:first-child ul li:nth-child(2)").click(function() { // $(".check").each(function(){ if ($(".check").is(":checked") == false) { $(".One_mb").show(); $(".One_moveGzIfNull").show(); } else { $(".One_mb").show(); //蒙版显示 $(".One_isDel").show(); //删除弹框显示 $(".One_moveGzIfNull").hide(); } }) //确定删除弹框移入我的关注 $(".One_isDel>div:last-child button:last-child").click(function() { $(".One_isDel").hide(); $(".One_mb").show(); $(".One_DengLu").show(); }) //移到我的关注 $(".One_ShopFootBuy>div:first-child ul li:nth-child(3)").click(function() { $(".check").each(function(index) { if ($(this).is(":checked") == false) { $(".One_mb").show(); $(".One_moveGzIfNull").show(); } else { $(".One_mb").show(); $(".One_moveMyGz").show(); $(".One_moveGzIfNull").hide(); } }) }) //点击×号关闭 $(".One_moveGzIfNull>p span:last-child img").click(function() { $(".One_mb").hide(); $(".One_moveGzIfNull").hide(); }) $(".One_moveMyGz>p span:last-child img").click(function() { $(".One_mb").hide(); $(".One_moveMyGz").hide(); $(".One_moveGzIfNull").hide(); }) $(".One_clearShop>p span:last-child img").click(function() { $(".One_mb").hide(); $(".One_clearShop").hide(); }) //移到我的关注取消按钮点击关闭 $(".One_moveMyGz>div:last-child button:last-child").click(function() { $(".One_mb").hide(); $(".One_moveMyGz").hide(); }) //移到我的关注确定按钮点击登录弹框弹出 $(".One_moveMyGz>div:last-child button:first-child").click(function() { $(".One_moveMyGz").hide(); $(".One_mb").show(); $(".One_DengLu").show(); }) $(".One_DengLu>p:first-child span:last-child img").click(function() { $(".One_mb").hide(); $(".One_DengLu").hide(); }) //清除下柜商品 $(".One_ShopFootBuy>div:first-child ul li:nth-child(4)").click(function() { $(".One_mb").show(); $(".One_clearShop").show() }) //购物车+ - //鼠标移入变小手 $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span").mouseover(function() { $(this).css("cursor", "pointer") }) //+ $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:last-child").click(function() { var add = $(this).prev("span").html(); add++; $(this).prev("span").html(add); //总价 var dj = $(this).parent().parent().prev().children(".dj").html().substring(1); var sl = $(this).prev("span").html(); $(this).parent().parent().parent().children("li:nth-child(5)").children(".zj").html("¥" + dj * sl + ".00") sumSumPrice(); }) //- $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:first-child").click(function() { var jian = $(this).next("span").html(); jian--; if (jian <= 0) { jian = 0; } $(this).next("span").html(jian); //总价 var dj = $(this).parent().parent().prev().children(".dj").html().substring(1); var sl = $(this).next("span").html(); $(this).parent().parent().parent().children("li:nth-child(5)").children(".zj").html("¥" + dj * sl + ".00") sumSumPrice(); }) //选中当前商品背景变色 $(".check").each(function(index) { $(".check").eq(index).click(function() { if ($(this).is(":checked")) { $(this).parent().parent().parent().css("background", "#fff4e8"); $(this).parent().parent().parent().parent().children("div:last-child").css("background", "#fff4e8") } else { $(this).parent().parent().parent().parent().children("div:last-child").css("background", "none") $(this).parent().parent().parent().css("background", "none") } }) }) //商品删除鼠标移入变色 $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }); }).mouseout(function() { $(this).css({ "cursor": "pointer", "color": "gray" }); }) $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:nth-child(2)").click(function() { $(".One_mb").show(); $(".One_moveMyGz").show(); }) $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:last-child").click(function() { $(".One_mb").show(); $(".One_DengLu").show(); }) //点击删除 //点击删除出现弹框 $(".One_isDel>p img").click(function() { $(".One_mb").hide(); $(".One_isDel").hide(); }) $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:first-child").click(function() { $(".One_mb").show(); $(".One_isDel").show(); }) $(".One_isDel>div:last-child button").mouseover(function() { $(this).css("cursor", "pointer"); }) $(".One_ShopFootBuy>div:first-child ul li:not(:first-child)").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }) }).mouseout(function() { $(this).css("color", "black") }) //封装总价钱函数 function sumSumPrice() { console.log("计算总价"); var zzj = 0; $(".check").each(function() { if ($(this).prop("checked")) { console.log("check!!" + $(this).parents("ol").find(".zj").html()); var zj = $(this).parents("ol").find(".zj").html().substring(1); console.log(" 价格:" + zj); zzj = zzj + parseFloat(zj); } $(".fnt").html("¥" + zzj + ".00") }) } //封装总数量函数 function sumSumNum() { var kong = 0; $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:nth-child(2)").each(function() { kong += parseFloat($(this).html()) }) $(".sumNum").html(kong); } $(".One_ShopCon ul li>div:nth-child(2)>ol>li:nth-child(2)>dd").mouseover(function() { $(this).css({ "cursor": "pointer", "color": "#e64346" }) }).mouseout(function() { $(this).css("color", "black") }) //更多促销下拉 $(".One_ShopCon ul li>div:nth-child(2) ol li:nth-child(3) p:nth-child(2)").click(function() { $(this).parent().children(".nmbd").slideToggle(300); var dis = $(this).parent().children(".nmbd").css("display"); console.log(dis); }) $(".nmbd dd:last-child button:first-child").click(function() { $(this).parent().parent().slideUp(100) }) $(".nmbd dd:last-child button:last-child").click(function() { $(this).parent().parent().slideUp(100) }) //active $(".one_main_div1 .one_main_ul>li").mouseover(function() { $(".one_main_div1 .one_main_ul>li").removeClass("active"); $(this).addClass("active"); }) //选项卡 $(".one_main_div1 .one_main_ul li").mouseover(function() { $(".one_main_div1_1").eq($(this).index()).stop(true).show().siblings().stop(true).hide() }) $(function() { //声明变量记录索引 var index = 0; //点击右边按钮 //忽略重复点击开关 var toggle = true $(".arrow-right").click(function() { if (toggle == false) { return } toggle = false index++; if (index > $('.fade li').length - 1) { index = 0; } }); //点击左边按钮 $(".arrow-left").click(function() { if (toggle == false) { return } toggle = false index--; if (index < 0) { index = $('.fade li').length - 1; } $('.pagination ul li').eq(index).addClass('active').siblings().removeClass('active') $(".slider>ul>li").eq(index).fadeIn(500, function() { toggle = true }).siblings("li").fadeOut(500); }); //点击分页器 $('.pagination ul li').mouseover(function() { var paging = $(this).index() //变颜色 $(this).addClass('active').siblings().removeClass('active') //与图片关联 $(".slider>ul>li").eq(paging).fadeIn(1000).siblings("li").fadeOut(1000); }) }); $(".fade li>div a").mouseover(function() { $(this).children("p").children("img").attr("src", "img/one_mian_gwc2.png") }).mouseout(function() { $(this).children("p").children("img").attr("src", "img/one_mian_gwc1.png") }) function itemCheck(event){ let skuId = event.target.getAttribute("skuId"); let check = event.target.checked; location.href = "http://cart.alatusmall.com/checkItem?skuId=" + skuId + "&check=" + (check ? 1 : 0); } function login() { var s = encodeURIComponent("http://cart.alatusmall.com/cartList"); window.location.href = "http://auth.alatusmall.com/login.html"; } $(".countOpsBtn").click(function(){ // 获取SkuID let skuId = $(this).parent().attr("skuId"); let num = $(this).parent().find(".countOpsNum").text(); location.href = "http://cart.alatusmall.com/countItem?skuId="+skuId+"&num="+num; }); var deleteId = 0; function deleteItem(){ location.href = "http://cart.alatusmall.com/deleteItem?skuId="+deleteId; } $(".deleteItemBtn").click(function(){ deleteId = $(this).attr("skuId"); }); </script> </html>
package com.alatus.mall.order.web; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class OrderWebController { @GetMapping("/toTrade") public String toTrade(){ return "confirm"; } }
package com.alatus.mall.order.web; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class OrderWebController { @GetMapping("/toTrade") public String toTrade(){ return "confirm"; } }
package com.alatus.mall.order.interceptor; import com.alatus.common.constant.AuthServerConstant; import com.alatus.common.vo.MemberRespVo; import org.springframework.stereotype.Component; import org.springframework.web.servlet.HandlerInterceptor; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @Component public class LoginUserInterceptor implements HandlerInterceptor { public static ThreadLocal<MemberRespVo> loginUser = new ThreadLocal<>(); @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { MemberRespVo attribute = (MemberRespVo) request.getSession().getAttribute(AuthServerConstant.LOGIN_USER); if(attribute!=null){ loginUser.set(attribute); return true; } else{ // 没登陆就让它回去登录 request.getSession().setAttribute("msg","请先进行登录"); response.sendRedirect("http://auth.alatusmall.com/login.html"); return false; } } }
package com.alatus.mall.order.interceptor; import com.alatus.common.constant.AuthServerConstant; import com.alatus.common.vo.MemberRespVo; import org.springframework.stereotype.Component; import org.springframework.web.servlet.HandlerInterceptor; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @Component public class LoginUserInterceptor implements HandlerInterceptor { public static ThreadLocal<MemberRespVo> loginUser = new ThreadLocal<>(); @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { MemberRespVo attribute = (MemberRespVo) request.getSession().getAttribute(AuthServerConstant.LOGIN_USER); if(attribute!=null){ loginUser.set(attribute); return true; } else{ // 没登陆就让它回去登录 request.getSession().setAttribute("msg","请先进行登录"); response.sendRedirect("http://auth.alatusmall.com/login.html"); return false; } } }
package com.alatus.mall.order.config; import com.alatus.mall.order.interceptor.LoginUserInterceptor; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class OrderWebConfiguration implements WebMvcConfigurer { @Autowired private LoginUserInterceptor loginUserInterceptor; @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(loginUserInterceptor).addPathPatterns("/**"); } }
package com.alatus.mall.order.config; import com.alatus.mall.order.interceptor.LoginUserInterceptor; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class OrderWebConfiguration implements WebMvcConfigurer { @Autowired private LoginUserInterceptor loginUserInterceptor; @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(loginUserInterceptor).addPathPatterns("/**"); } }