商城项目利用拦截器在threadLocal中校验做离线购物车和在线购物车功能-----商城项目

package com.alatus.mall.cart.interceptor;

import com.alatus.common.constant.AuthServerConstant;
import com.alatus.common.constant.CartConstant;
import com.alatus.common.vo.MemberRespVo;
import com.alatus.mall.cart.vo.UserInfoTo;
import org.apache.commons.lang.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.UUID;

public class CartInterceptor implements HandlerInterceptor {
    public static ThreadLocal<UserInfoTo> threadLocal = new ThreadLocal<>();
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        UserInfoTo userInfoTo = new UserInfoTo();
        HttpSession session = request.getSession();
//        用户已登录
        MemberRespVo memberRespVo = (MemberRespVo) session.getAttribute(AuthServerConstant.LOGIN_USER);
        if(memberRespVo!=null){
            userInfoTo.setUserId(memberRespVo.getId());
        }
//        有临时用户
        Cookie[] cookies = request.getCookies();
        if(cookies!=null&&cookies.length>0){
            for (Cookie cookie : cookies) {
                if(CartConstant.TEMP_USER_COOKIE_NAME.equals(cookie.getName())){
                    userInfoTo.setUserKey(cookie.getValue());
                }
            }
        }
//        如果没有临时用户,也没有登录
        if(StringUtils.isEmpty(userInfoTo.getUserKey())){
            userInfoTo.setUserKey(UUID.randomUUID().toString());
        }
        threadLocal.set(userInfoTo);
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        Cookie[] cookies = request.getCookies();
        if(cookies!=null&&cookies.length>0){
            for (Cookie cookie : cookies) {
                if(CartConstant.TEMP_USER_COOKIE_NAME.equals(cookie.getName())){
                    cookie.setMaxAge(CartConstant.TEMP_USER_COOKIE_TIMEOUT);
                    response.addCookie(cookie);
                }
                else{
                    Cookie newCookie = new Cookie(CartConstant.TEMP_USER_COOKIE_NAME, threadLocal.get().getUserKey());
                    newCookie.setDomain("alatus.mall");
                    newCookie.setMaxAge(CartConstant.TEMP_USER_COOKIE_TIMEOUT);
                    response.addCookie(newCookie);
                }
            }
        }
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        HandlerInterceptor.super.afterCompletion(request, response, handler, ex);
    }
}

package com.alatus.mall.cart.interceptor;

import com.alatus.common.constant.AuthServerConstant;
import com.alatus.common.constant.CartConstant;
import com.alatus.common.vo.MemberRespVo;
import com.alatus.mall.cart.vo.UserInfoTo;
import org.apache.commons.lang.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.UUID;

public class CartInterceptor implements HandlerInterceptor {
    public static ThreadLocal<UserInfoTo> threadLocal = new ThreadLocal<>();
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        UserInfoTo userInfoTo = new UserInfoTo();
        HttpSession session = request.getSession();
//        用户已登录
        MemberRespVo memberRespVo = (MemberRespVo) session.getAttribute(AuthServerConstant.LOGIN_USER);
        if(memberRespVo!=null){
            userInfoTo.setUserId(memberRespVo.getId());
        }
//        有临时用户
        Cookie[] cookies = request.getCookies();
        if(cookies!=null&&cookies.length>0){
            for (Cookie cookie : cookies) {
                if(CartConstant.TEMP_USER_COOKIE_NAME.equals(cookie.getName())){
                    userInfoTo.setUserKey(cookie.getValue());
                }
            }
        }
//        如果没有临时用户,也没有登录
        if(StringUtils.isEmpty(userInfoTo.getUserKey())){
            userInfoTo.setUserKey(UUID.randomUUID().toString());
        }
        threadLocal.set(userInfoTo);
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        Cookie[] cookies = request.getCookies();
        if(cookies!=null&&cookies.length>0){
            for (Cookie cookie : cookies) {
                if(CartConstant.TEMP_USER_COOKIE_NAME.equals(cookie.getName())){
                    cookie.setMaxAge(CartConstant.TEMP_USER_COOKIE_TIMEOUT);
                    response.addCookie(cookie);
                }
                else{
                    Cookie newCookie = new Cookie(CartConstant.TEMP_USER_COOKIE_NAME, threadLocal.get().getUserKey());
                    newCookie.setDomain("alatus.mall");
                    newCookie.setMaxAge(CartConstant.TEMP_USER_COOKIE_TIMEOUT);
                    response.addCookie(newCookie);
                }
            }
        }
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        HandlerInterceptor.super.afterCompletion(request, response, handler, ex);
    }
}

package com.alatus.mall.cart.config;

import com.alatus.mall.cart.interceptor.CartInterceptor;
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 MallWebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new CartInterceptor()).addPathPatterns("/**");
    }
}

package com.alatus.mall.cart.config;

import com.alatus.mall.cart.interceptor.CartInterceptor;
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 MallWebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new CartInterceptor()).addPathPatterns("/**");
    }
}

package com.alatus.mall.cart.web;

import com.alatus.mall.cart.interceptor.CartInterceptor;
import com.alatus.mall.cart.vo.UserInfoTo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class CartController {
    @GetMapping("/cartList.html")
    public String cartListPage(Model model){
        UserInfoTo userInfoTo = CartInterceptor.threadLocal.get();
        model.addAttribute("user",userInfoTo);
        return "cartList";
    }
}

package com.alatus.mall.cart.web;

import com.alatus.mall.cart.interceptor.CartInterceptor;
import com.alatus.mall.cart.vo.UserInfoTo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class CartController {
    @GetMapping("/cartList.html")
    public String cartListPage(Model model){
        UserInfoTo userInfoTo = CartInterceptor.threadLocal.get();
        model.addAttribute("user",userInfoTo);
        return "cartList";
    }
}

package com.alatus.mall.cart.vo;

import lombok.Data;

@Data
public class UserInfoTo {
    private Long userId;
    private String userKey;
}

package com.alatus.mall.cart.vo;

import lombok.Data;

@Data
public class UserInfoTo {
    private Long userId;
    private String userKey;
}

package com.alatus.common.constant;

public class CartConstant {
    public static final String TEMP_USER_COOKIE_NAME = "user-key";
    public static final Integer TEMP_USER_COOKIE_TIMEOUT = 60*60*24*30;
}

 

package com.alatus.common.constant;

public class CartConstant {
    public static final String TEMP_USER_COOKIE_NAME = "user-key";
    public static final Integer TEMP_USER_COOKIE_TIMEOUT = 60*60*24*30;
}

<!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 href="/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="">首页</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="/static/cart./" class="one_left_logo"><img src="/static/cart/img/logo1.jpg"></a>
						<a href="#" 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="${userId}==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>
						<li th:each="cartInfo:${cartList}">
							<div> </div>

							<div>
								<ol>
									<li><input type="checkbox" class="check" th:value="${cartInfo.skuId}" onchange="checkSku(this)" th:checked="(${cartInfo.isChecked}==1)?'true':'false'" /></li>
									<li>
										<dt><img th:src="${cartInfo.imgUrl}" src="/static/cart/img\shop1.jpg" alt=""></dt>
										<dd th:onclick="'toItem('+${cartInfo.skuId}+')'">
											<p>
												<span th:text="${cartInfo.skuName}">TCL 55A950C 55英寸32核</span>
											</p>
										</dd>
									</li>
									<li>
										<p class="dj" th:text="'￥'+${cartInfo.skuPrice}">4599.00</p>
									</li>
									<li>
										<p>
											<span>-</span>
											<span th:text="${cartInfo.skuNum}">5</span>
											<span>+</span>
										</p>
									</li>
									<li style="font-weight:bold">
										<p class="zj" th:text="'￥'+${cartInfo.totalPrice}">￥22995.00</p>
									</li>
									<li>
										<p>删除</p>
									</li>
								</ol>
							</div>
						</li>
						<!--<li>
                    <div>
                    </div>
                    <div>
                        <ol>
                            <li><input type="checkbox"  class="check"></li>
                            <li>
                                <dt><img src="/static/cart/img\shop1.jpg" alt=""></dt>
                                <dd>
                                    <p>

                                        <span>TCL 55A950C 55英寸32核</span>
                                        <span>尺码: 55时 超薄曲面 人工智能</span>
                                    </p>
                                    <p>人工智能 HDR曲面超薄4K电视金属机</p>

                                </dd>
                            </li>
                            <li>
                                <p class="dj">￥4599.00</p>

                            </li>
                            <li>
                                <p>
                                    <span>-</span>
                                    <span>5</span>
                                    <span>+</span>
                                </p>

                            </li>
                            <li style="font-weight:bold"><p class="zj">￥22995.00</p></li>
                            <li>
                                <p>删除</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>&nbsp;

						<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">￥0.00</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">删除</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 href="/static/cart/js/index.js" charset="utf-8"></script>
	<script type="text/javascript">
		function toTrade() {
			window.location.href = "http://cart.gmall.com:8087/toTrade";
		}

		function toItem(skuId) {
			window.location.href = "http://item.gmall.com:8084/" + skuId + ".html";
		}

		function login() {
			var s = encodeURIComponent("http://cart.gmall.com:8087/cartList");
			window.location.href = "http://passport.atguigu.com/index?originUrl=" + s;
		}

		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() {
			//         var zzj=0;
			//         $(".check").each(function () {
			//             if($(this).prop("checked")){
			//                 var zj = $(this).parents("ol").find(".zj").html().substring(1);
			//                 zzj=zzj+parseFloat(zj);
			//             }
			//             $(".fnt").html("￥"+zzj+".00")
			//         });
		}

		/*    //购物车结算固定定位
		    $(document).scroll(function(){
		        if($(window).scrollTop()>50){
		            $(".fix").hide();
		        }else{
		            $(".fix").show();
		        }
		    })*/


		//购物车顶端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();
			}
			//移除结账固定定位
			// if($(".check").length==1){
			// 	$(".fix").remove();
			// }
			// })
			//var that=$(this);
			//确定删除
			/*      $(".One_isDel>div:last-child button:first-child").click(function(){
			          $(".One_mb").hide();    //蒙版隐藏
			          $(".One_isDel").hide(); //删除弹框隐藏
			          $(".check:checked").parent().parent().parent().parent().remove();  //删除选中商品
			          if($(".fix").offset().top>$(".fix1").offset().top){
			              $(".fix").hide();
			          }
			          if($(".check").length==0){
			              $(".allCheck").prop("checked",false);
			              $(".sumNum").html("0");
			              $(".fnt").html("￥ 0.00");
			          }
			      })*/
		})
		//确定删除弹框移入我的关注
		$(".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();
			var that = $(this);
			//确定删除
			/*        $(".One_isDel>div:last-child button:first-child").click(function(){
			            $(".One_mb").hide();
			            $(".One_isDel").hide();
			            that.parent().parent().parent().parent().remove();
			            // 移除结账固定定位
			            // if($(".check").length==1){
			            // 	$(".fix").remove();
			            // }
			            if($(".fix").offset().top>$(".fix1").offset().top){
			                $(".fix").hide();
			            }
			            if($(".check").length==0){
			                $(".allCheck").prop("checked",false);
			                $(".sumNum").html("0");
			                $(".fnt").html("￥ 0.00");
			            }
			        })*/
		})
		/*    //页面滚动删除去结算固定定位隐藏
		    $(document).scroll(function(){
		        if($(".fix").offset().top>$(".fix1").offset().top){
		            $(".fix").hide();
		        }
		    })*/
		$(".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")
			})

			/*        $(".One_ShopCon ul li>div:nth-child(2) ol li:nth-child(5) .zj").each(function(){
			            kong+=parseFloat($(this).html().substring(1))
			        })
			        $(".fnt").html("￥"+kong+".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);
			// if(dis=="block"){
			// 	$(".hahaha").css("transform","rotateX(-180deg)")
			// }else{
			// 	$(".hahaha").css("transform","rotateX(360deg)")
			// }
		})
		$(".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")
		})
	</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 href="/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="">首页</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="/static/cart./" class="one_left_logo"><img src="/static/cart/img/logo1.jpg"></a>
                   <a href="#" 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="${userId}==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>
                   <li th:each="cartInfo:${cartList}">
                      <div> </div>

                      <div>
                         <ol>
                            <li><input type="checkbox" class="check" th:value="${cartInfo.skuId}" οnchange="checkSku(this)" th:checked="(${cartInfo.isChecked}==1)?'true':'false'" /></li>
                            <li>
                               <dt><img th:src="${cartInfo.imgUrl}" src="/static/cart/img\shop1.jpg" alt=""></dt>
                               <dd th:οnclick="'toItem('+${cartInfo.skuId}+')'">
                                  <p>
                                     <span th:text="${cartInfo.skuName}">TCL 55A950C 55英寸32核</span>
                                  </p>
                               </dd>
                            </li>
                            <li>
                               <p class="dj" th:text="'￥'+${cartInfo.skuPrice}">4599.00</p>
                            </li>
                            <li>
                               <p>
                                  <span>-</span>
                                  <span th:text="${cartInfo.skuNum}">5</span>
                                  <span>+</span>
                               </p>
                            </li>
                            <li style="font-weight:bold">
                               <p class="zj" th:text="'￥'+${cartInfo.totalPrice}">￥22995.00</p>
                            </li>
                            <li>
                               <p>删除</p>
                            </li>
                         </ol>
                      </div>
                   </li>
                   <!--<li>
                    <div>
                    </div>
                    <div>
                        <ol>
                            <li><input type="checkbox"  class="check"></li>
                            <li>
                                <dt><img src="/static/cart/img\shop1.jpg" alt=""></dt>
                                <dd>
                                    <p>

                                        <span>TCL 55A950C 55英寸32核</span>
                                        <span>尺码: 55时 超薄曲面 人工智能</span>
                                    </p>
                                    <p>人工智能 HDR曲面超薄4K电视金属机</p>

                                </dd>
                            </li>
                            <li>
                                <p class="dj">￥4599.00</p>

                            </li>
                            <li>
                                <p>
                                    <span>-</span>
                                    <span>5</span>
                                    <span>+</span>
                                </p>

                            </li>
                            <li style="font-weight:bold"><p class="zj">￥22995.00</p></li>
                            <li>
                                <p>删除</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>&nbsp;

                   <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">￥0.00</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">删除</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 href="/static/cart/js/index.js" charset="utf-8"></script>
    <script type="text/javascript">
       function toTrade() {
          window.location.href = "http://cart.gmall.com:8087/toTrade";
       }

       function toItem(skuId) {
          window.location.href = "http://item.gmall.com:8084/" + skuId + ".html";
       }

       function login() {
          var s = encodeURIComponent("http://cart.gmall.com:8087/cartList");
          window.location.href = "http://passport.atguigu.com/index?originUrl=" + s;
       }

       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() {
          //         var zzj=0;
          //         $(".check").each(function () {
          //             if($(this).prop("checked")){
          //                 var zj = $(this).parents("ol").find(".zj").html().substring(1);
          //                 zzj=zzj+parseFloat(zj);
          //             }
          //             $(".fnt").html("￥"+zzj+".00")
          //         });
       }

       /*    //购物车结算固定定位
           $(document).scroll(function(){
               if($(window).scrollTop()>50){
                   $(".fix").hide();
               }else{
                   $(".fix").show();
               }
           })*/


       //购物车顶端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();
          }
          //移除结账固定定位
          // if($(".check").length==1){
          //     $(".fix").remove();
          // }
          // })
          //var that=$(this);
          //确定删除
          /*      $(".One_isDel>div:last-child button:first-child").click(function(){
                    $(".One_mb").hide();    //蒙版隐藏
                    $(".One_isDel").hide(); //删除弹框隐藏
                    $(".check:checked").parent().parent().parent().parent().remove();  //删除选中商品
                    if($(".fix").offset().top>$(".fix1").offset().top){
                        $(".fix").hide();
                    }
                    if($(".check").length==0){
                        $(".allCheck").prop("checked",false);
                        $(".sumNum").html("0");
                        $(".fnt").html("￥ 0.00");
                    }
                })*/
       })
       //确定删除弹框移入我的关注
       $(".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();
          var that = $(this);
          //确定删除
          /*        $(".One_isDel>div:last-child button:first-child").click(function(){
                      $(".One_mb").hide();
                      $(".One_isDel").hide();
                      that.parent().parent().parent().parent().remove();
                      // 移除结账固定定位
                      // if($(".check").length==1){
                      //     $(".fix").remove();
                      // }
                      if($(".fix").offset().top>$(".fix1").offset().top){
                          $(".fix").hide();
                      }
                      if($(".check").length==0){
                          $(".allCheck").prop("checked",false);
                          $(".sumNum").html("0");
                          $(".fnt").html("￥ 0.00");
                      }
                  })*/
       })
       /*    //页面滚动删除去结算固定定位隐藏
           $(document).scroll(function(){
               if($(".fix").offset().top>$(".fix1").offset().top){
                   $(".fix").hide();
               }
           })*/
       $(".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")
          })

          /*        $(".One_ShopCon ul li>div:nth-child(2) ol li:nth-child(5) .zj").each(function(){
                      kong+=parseFloat($(this).html().substring(1))
                  })
                  $(".fnt").html("￥"+kong+".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);
          // if(dis=="block"){
          //     $(".hahaha").css("transform","rotateX(-180deg)")
          // }else{
          //     $(".hahaha").css("transform","rotateX(360deg)")
          // }
       })
       $(".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")
       })
    </script>
</html>