商城项目完成购物车全部功能实现编写-----商城项目

package com.alatus.mall.cart.web;

import com.alatus.mall.cart.service.CartService;
import com.alatus.mall.cart.vo.Cart;
import com.alatus.mall.cart.vo.CartItem;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import java.util.concurrent.ExecutionException;

@Controller
public class CartController {
    @Autowired
    private CartService cartService;
    @GetMapping("/cart.html")
    public String cartListPage(Model model) throws ExecutionException, InterruptedException {
        Cart cart = cartService.getCart();
        model.addAttribute("cart",cart);
        return "cartList";
    }
    @GetMapping("/addToCart")
    public String addToCart(@RequestParam("skuId") Long skuId, @RequestParam("num") Integer num, RedirectAttributes model) throws ExecutionException, InterruptedException {
        if(num > 0){
            cartService.addToCart(skuId,num);
//            RedirectAttributes的addAttribute会自动拼串,自动以参数的形式携带数据
//            RedirectAttributes的addFlashAttribute()会保存在session里面,但是仅可以取一次值
            model.addAttribute("skuId",skuId);
            return "redirect:http://cart.alatusmall.com/addToCartSuccess.html";
        }
        return "redirect:http://cart.alatusmall.com/addToCartSuccess.html";
    }
    @GetMapping("/addToCartSuccess.html")
    public String addToCartSuccessPage(@RequestParam("skuId")Long skuId,Model model){
        CartItem cartItem = cartService.getCartItem(skuId);
        model.addAttribute("item",cartItem);
        return "success";
    }
}

package com.alatus.mall.cart.web;

import com.alatus.mall.cart.service.CartService;
import com.alatus.mall.cart.vo.Cart;
import com.alatus.mall.cart.vo.CartItem;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import java.util.concurrent.ExecutionException;

@Controller
public class CartController {
    @Autowired
    private CartService cartService;
    @GetMapping("/cart.html")
    public String cartListPage(Model model) throws ExecutionException, InterruptedException {
        Cart cart = cartService.getCart();
        model.addAttribute("cart",cart);
        return "cartList";
    }
    @GetMapping("/addToCart")
    public String addToCart(@RequestParam("skuId") Long skuId, @RequestParam("num") Integer num, RedirectAttributes model) throws ExecutionException, InterruptedException {
        if(num > 0){
            cartService.addToCart(skuId,num);
//            RedirectAttributes的addAttribute会自动拼串,自动以参数的形式携带数据
//            RedirectAttributes的addFlashAttribute()会保存在session里面,但是仅可以取一次值
            model.addAttribute("skuId",skuId);
            return "redirect:http://cart.alatusmall.com/addToCartSuccess.html";
        }
        return "redirect:http://cart.alatusmall.com/addToCartSuccess.html";
    }
    @GetMapping("/addToCartSuccess.html")
    public String addToCartSuccessPage(@RequestParam("skuId")Long skuId,Model model){
        CartItem cartItem = cartService.getCartItem(skuId);
        model.addAttribute("item",cartItem);
        return "success";
    }
}

package com.alatus.mall.cart.service;

import com.alatus.mall.cart.vo.Cart;
import com.alatus.mall.cart.vo.CartItem;

import java.util.concurrent.ExecutionException;

public interface CartService {
    void addToCart(Long skuId, Integer num) throws ExecutionException, InterruptedException;

    CartItem getCartItem(Long skuId);

    Cart getCart() throws ExecutionException, InterruptedException;
}

package com.alatus.mall.cart.service;

import com.alatus.mall.cart.vo.Cart;
import com.alatus.mall.cart.vo.CartItem;

import java.util.concurrent.ExecutionException;

public interface CartService {
    void addToCart(Long skuId, Integer num) throws ExecutionException, InterruptedException;

    CartItem getCartItem(Long skuId);

    Cart getCart() throws ExecutionException, InterruptedException;
}

package com.alatus.mall.cart.service.impl;

import com.alatus.common.utils.R;
import com.alatus.mall.cart.feign.ProductFeignService;
import com.alatus.mall.cart.service.CartService;
import com.alatus.mall.cart.vo.Cart;
import com.alatus.mall.cart.vo.CartItem;
import com.alatus.mall.cart.vo.SkuInfoVo;
import com.alatus.mall.cart.vo.UserInfoTo;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.BoundHashOperations;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Service;
import com.alatus.mall.cart.interceptor.CartInterceptor;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.CompletableFuture;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.ThreadPoolExecutor;
import java.util.stream.Collectors;

@Slf4j
@Service
public class CartServiceImpl implements CartService {
    @Autowired
    private StringRedisTemplate redisTemplate;
    @Autowired
    private ProductFeignService productFeignService;
    @Autowired
    private ThreadPoolExecutor threadPoolExecutor;
    private final String CART_PREFIX = "alatusmall:cart:";
    @Override
    public void addToCart(Long skuId, Integer num) throws ExecutionException, InterruptedException {
        BoundHashOperations<String, Object, Object> cartOps = getCartOps();
        String res = (String) cartOps.get(skuId.toString());
        if(StringUtils.isEmpty(res)){
            CartItem cartItem = new CartItem();
//            当购物车没有该商品
//        查询商品服务目前添加的商品信息
            CompletableFuture<Void> getSkuInfo = CompletableFuture.runAsync(() -> {
                R info = productFeignService.info(skuId);
                if (info.getCode() == 0) {
                    SkuInfoVo skuInfo = info.get("skuInfo", new TypeReference<SkuInfoVo>() {});
                    cartItem.setCheck(true);
                    cartItem.setCount(num);
                    cartItem.setImage(skuInfo.getSkuDefaultImg());
                    cartItem.setTitle(skuInfo.getSkuTitle());
                    cartItem.setSkuId(skuId);
                    cartItem.setPrice(skuInfo.getPrice());
                }
            }, threadPoolExecutor);
            CompletableFuture<Void> getSkuAttrValues = CompletableFuture.runAsync(() -> {
//            远程查询sku的组合信息
                List<String> skuSaleAttrValues = productFeignService.getSkuSaleAttrValues(skuId);
                cartItem.setSkuAttr(skuSaleAttrValues);
            }, threadPoolExecutor);
            CompletableFuture.allOf(getSkuInfo,getSkuAttrValues).get();
            String jsonString = JSON.toJSONString(cartItem);
            cartOps.put(skuId.toString(),jsonString);
        }
        else{
//            购物车有这个商品
            CartItem oldCartItem = JSON.parseObject(res, CartItem.class);
            oldCartItem.setCount(oldCartItem.getCount()+num);
            cartOps.put(skuId.toString(),JSON.toJSONString(oldCartItem));
        }
    }

    @Override
    public CartItem getCartItem(Long skuId) {
        BoundHashOperations<String, Object, Object> cartOps = getCartOps();
        String res = (String)cartOps.get(skuId.toString());
        return JSON.parseObject(res, CartItem.class);
    }

    @Override
    public Cart getCart() throws ExecutionException, InterruptedException {
        UserInfoTo userInfoTo = CartInterceptor.threadLocal.get();
        Cart cart = new Cart();
        String userKey = CART_PREFIX + userInfoTo.getUserId();
        String templateKey = CART_PREFIX + userInfoTo.getUserKey();
        if (userInfoTo.getUserId()!=null) {
//            登录了
//            先获取临时购物车
            List<CartItem> tempCartItems = getCartItems(templateKey);
//            如果临时购物车还没有合并
            List<String> skuIds = new ArrayList<>();
            if(tempCartItems!=null&&tempCartItems.size()>0){
//                两个购物车要合并
                for (CartItem cartItem : tempCartItems) {
                    addToCart(cartItem.getSkuId(),cartItem.getCount());
                    skuIds.add(cartItem.getSkuId().toString());
                }
//                清除临时购物车的数据
                for (int i = 0; i < skuIds.size(); i++) {
                    redisTemplate.boundHashOps(templateKey).delete(skuIds.get(i));
                }
            }
//            登陆后的所有购物车数据(包含所有合并的购物车)
            List<CartItem> newCartItems = getCartItems(userKey);
            cart.setItems(newCartItems);
        }
        else{
//            没登陆
            List<CartItem> cartItems = getCartItems(templateKey);
            cart.setItems(cartItems);
        }
        return cart;
    }

    private List<CartItem> getCartItems(String cartKey){
        BoundHashOperations<String, Object, Object> operations = redisTemplate.boundHashOps(cartKey);
        List<Object> values = operations.values();
        if(values!=null&&values.size()>0){
            List<CartItem> collect = values.stream().map((obj) -> {
                return JSON.parseObject(obj.toString(), CartItem.class);
            }).collect(Collectors.toList());
            return collect;
        }
        else{
            return null;
        }
    }

    //    获取我们要操作的购物车
    private BoundHashOperations<String, Object, Object> getCartOps(){
        UserInfoTo userInfoTo = CartInterceptor.threadLocal.get();
//        用户已登录
        String cartKey = "";
        if(userInfoTo.getUserId()!=null){
            cartKey = CART_PREFIX + userInfoTo.getUserId();
        }
//        用户未登录
        else{
            cartKey = CART_PREFIX + userInfoTo.getUserKey();
        }
        BoundHashOperations<String, Object, Object> operations = redisTemplate.boundHashOps(cartKey);
        return operations;
    }
}

package com.alatus.mall.cart.service.impl;

import com.alatus.common.utils.R;
import com.alatus.mall.cart.feign.ProductFeignService;
import com.alatus.mall.cart.service.CartService;
import com.alatus.mall.cart.vo.Cart;
import com.alatus.mall.cart.vo.CartItem;
import com.alatus.mall.cart.vo.SkuInfoVo;
import com.alatus.mall.cart.vo.UserInfoTo;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.BoundHashOperations;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Service;
import com.alatus.mall.cart.interceptor.CartInterceptor;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.CompletableFuture;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.ThreadPoolExecutor;
import java.util.stream.Collectors;

@Slf4j
@Service
public class CartServiceImpl implements CartService {
    @Autowired
    private StringRedisTemplate redisTemplate;
    @Autowired
    private ProductFeignService productFeignService;
    @Autowired
    private ThreadPoolExecutor threadPoolExecutor;
    private final String CART_PREFIX = "alatusmall:cart:";
    @Override
    public void addToCart(Long skuId, Integer num) throws ExecutionException, InterruptedException {
        BoundHashOperations<String, Object, Object> cartOps = getCartOps();
        String res = (String) cartOps.get(skuId.toString());
        if(StringUtils.isEmpty(res)){
            CartItem cartItem = new CartItem();
//            当购物车没有该商品
//        查询商品服务目前添加的商品信息
            CompletableFuture<Void> getSkuInfo = CompletableFuture.runAsync(() -> {
                R info = productFeignService.info(skuId);
                if (info.getCode() == 0) {
                    SkuInfoVo skuInfo = info.get("skuInfo", new TypeReference<SkuInfoVo>() {});
                    cartItem.setCheck(true);
                    cartItem.setCount(num);
                    cartItem.setImage(skuInfo.getSkuDefaultImg());
                    cartItem.setTitle(skuInfo.getSkuTitle());
                    cartItem.setSkuId(skuId);
                    cartItem.setPrice(skuInfo.getPrice());
                }
            }, threadPoolExecutor);
            CompletableFuture<Void> getSkuAttrValues = CompletableFuture.runAsync(() -> {
//            远程查询sku的组合信息
                List<String> skuSaleAttrValues = productFeignService.getSkuSaleAttrValues(skuId);
                cartItem.setSkuAttr(skuSaleAttrValues);
            }, threadPoolExecutor);
            CompletableFuture.allOf(getSkuInfo,getSkuAttrValues).get();
            String jsonString = JSON.toJSONString(cartItem);
            cartOps.put(skuId.toString(),jsonString);
        }
        else{
//            购物车有这个商品
            CartItem oldCartItem = JSON.parseObject(res, CartItem.class);
            oldCartItem.setCount(oldCartItem.getCount()+num);
            cartOps.put(skuId.toString(),JSON.toJSONString(oldCartItem));
        }
    }

    @Override
    public CartItem getCartItem(Long skuId) {
        BoundHashOperations<String, Object, Object> cartOps = getCartOps();
        String res = (String)cartOps.get(skuId.toString());
        return JSON.parseObject(res, CartItem.class);
    }

    @Override
    public Cart getCart() throws ExecutionException, InterruptedException {
        UserInfoTo userInfoTo = CartInterceptor.threadLocal.get();
        Cart cart = new Cart();
        String userKey = CART_PREFIX + userInfoTo.getUserId();
        String templateKey = CART_PREFIX + userInfoTo.getUserKey();
        if (userInfoTo.getUserId()!=null) {
//            登录了
//            先获取临时购物车
            List<CartItem> tempCartItems = getCartItems(templateKey);
//            如果临时购物车还没有合并
            List<String> skuIds = new ArrayList<>();
            if(tempCartItems!=null&&tempCartItems.size()>0){
//                两个购物车要合并
                for (CartItem cartItem : tempCartItems) {
                    addToCart(cartItem.getSkuId(),cartItem.getCount());
                    skuIds.add(cartItem.getSkuId().toString());
                }
//                清除临时购物车的数据
                for (int i = 0; i < skuIds.size(); i++) {
                    redisTemplate.boundHashOps(templateKey).delete(skuIds.get(i));
                }
            }
//            登陆后的所有购物车数据(包含所有合并的购物车)
            List<CartItem> newCartItems = getCartItems(userKey);
            cart.setItems(newCartItems);
        }
        else{
//            没登陆
            List<CartItem> cartItems = getCartItems(templateKey);
            cart.setItems(cartItems);
        }
        return cart;
    }

    private List<CartItem> getCartItems(String cartKey){
        BoundHashOperations<String, Object, Object> operations = redisTemplate.boundHashOps(cartKey);
        List<Object> values = operations.values();
        if(values!=null&&values.size()>0){
            List<CartItem> collect = values.stream().map((obj) -> {
                return JSON.parseObject(obj.toString(), CartItem.class);
            }).collect(Collectors.toList());
            return collect;
        }
        else{
            return null;
        }
    }

    //    获取我们要操作的购物车
    private BoundHashOperations<String, Object, Object> getCartOps(){
        UserInfoTo userInfoTo = CartInterceptor.threadLocal.get();
//        用户已登录
        String cartKey = "";
        if(userInfoTo.getUserId()!=null){
            cartKey = CART_PREFIX + userInfoTo.getUserId();
        }
//        用户未登录
        else{
            cartKey = CART_PREFIX + userInfoTo.getUserKey();
        }
        BoundHashOperations<String, Object, Object> operations = redisTemplate.boundHashOps(cartKey);
        return operations;
    }
}

package com.alatus.mall.cart;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
import org.springframework.cloud.openfeign.EnableFeignClients;

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@EnableDiscoveryClient
@EnableFeignClients
public class MallCartApplication {
	public static void main(String[] args) {
		SpringApplication.run(MallCartApplication.class, args);
	}

}

package com.alatus.mall.cart;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
import org.springframework.cloud.openfeign.EnableFeignClients;

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@EnableDiscoveryClient
@EnableFeignClients
public class MallCartApplication {
    public static void main(String[] args) {
       SpringApplication.run(MallCartApplication.class, args);
    }

}

<!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="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 type="checkbox" th:checked="${item.getCheck()}" class="check"></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>
                                    <span>-</span>
                                    <span th:text="${item.getCount()}"></span>
                                    <span>+</span>
                                </p>
                            </li>
                            <li style="font-weight:bold"><p class="zj">￥[[${#numbers.formatDecimal(item.getTotalPrice(),3,2)}]]</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">￥[[${#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">删除</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.alatusmall.com/cartList");
			window.location.href = "http://auth.alatusmall.com/login.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() {
			//         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="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 type="checkbox" th:checked="${item.getCheck()}" class="check"></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>
                                    <span>-</span>
                                    <span th:text="${item.getCount()}"></span>
                                    <span>+</span>
                                </p>
                            </li>
                            <li style="font-weight:bold"><p class="zj">￥[[${#numbers.formatDecimal(item.getTotalPrice(),3,2)}]]</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">￥[[${#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">删除</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.alatusmall.com/cartList");
          window.location.href = "http://auth.alatusmall.com/login.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() {
          //         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>