购物车part3

src/main/java/com/caimei/www/service/impl/ShoppingServiceImpl.java

@@ -59,6 +59,9 @@ public class ShoppingServiceImpl implements ShoppingService {
         List<CartSupplier> cartSuppliers = shoppingDao.getCartSuppliers(userId);
         List<CartItem> invalidCarts = new ArrayList<>();
         Account account = accountDao.getUserById(userId);
+        AtomicInteger totalCount = new AtomicInteger();
+        AtomicInteger totalSize = new AtomicInteger();
+        AtomicReference<Double> totalPrice = new AtomicReference<>(0d);
         cartSuppliers.forEach(supplier -> {
             List<CartItem> cartItems = shoppingDao.getShoppingCartBySupplierId(supplier.getId(), userId);
             AtomicReference<Double> supplierPrice = new AtomicReference<>(0d);
@@ -78,6 +81,7 @@ public class ShoppingServiceImpl implements ShoppingService {
                         // 该供应商下价格累加
                         supplierPrice.updateAndGet(v -> v + PriceUtil.add(supplierPrice, cartItem.getPrice()).doubleValue());
                         itemCount.incrementAndGet();
+                        totalCount.updateAndGet(v -> v + cartItem.getNumber());
                     } else {
                         // 失效商品
                         if (cartItem.getPriceFlag() == 1){
@@ -114,11 +118,16 @@ public class ShoppingServiceImpl implements ShoppingService {
             supplier.setCartList(cartItems);
             supplier.setTotalPrice(supplierPrice.get());
             supplier.setCount(itemCount.get());
+            totalPrice.updateAndGet(v -> v + PriceUtil.add(totalPrice, supplierPrice.get()).doubleValue());
+            totalSize.updateAndGet(v -> v + itemCount.get());
         });
         cartSuppliers.removeIf(supplier -> (null != supplier && supplier.getCount() == 0));
         Map<String, Object> resultMap = new HashMap<>();
         resultMap.put("list", cartSuppliers);
         resultMap.put("invalid", invalidCarts);
+        resultMap.put("totalSize", totalSize);
+        resultMap.put("totalCount", totalCount);
+        resultMap.put("totalPrice", totalPrice);
         return JsonModel.success(resultMap);
     }
 

src/main/resources/static/css/base/init.css

@@ -20,9 +20,10 @@ table,td,th{border: 1px solid #EBECEF;}
 /* checkbox */
 input[type=checkbox]{width:16px;height:16px;text-align:center;outline:none;cursor:copy;}
 input[type=checkbox]:focus{outline:none}
-input[type=checkbox]:after{width:100%;height:100%;top:0px;content:" ";background-color:#FFF;color:#E15616;display:inline-block;visibility:visible;border:1px solid #b8bfca;border-radius:2px;}
-input[type=checkbox]:checked:after{content:"\2713";font-size:14px;font-weight:bold;background-color:#E15616;color:#FFF}
+input[type=checkbox]:after{width:100%;height:100%;top:0;content:" ";background-color:#FFF;color:#E15616;display:inline-block;visibility:visible;border:1px solid #b8bfca;border-radius:2px;}
+input[type=checkbox]:checked:after{content:"\2713";font-size:12px;background-color:#E15616;color:#FFF}
 input[type=checkbox][disabled=disabled]:after{width:100%;height:100%;top:0;content:" ";background-color:#f1f0f5;color:#FFF;display:inline-block;visibility:visible;border-radius:2px;border:1px solid #B8BFCA}
+input[type=checkbox][disabled=disabled]{cursor:default;}
 /* 定义动画效果 */
 @-webkit-keyframes fadeInDown{
   from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}

src/main/resources/static/css/shopping/cart.css

@@ -4,71 +4,82 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-.loading{box-sizing:border-box;padding:200px 0;text-align:center}
-.empty{box-sizing:border-box;padding:100px 0;text-align:center;color:#4A4F58;line-height:30px;font-size:16px}
-.empty img{width:180px;height:180px}
-.empty a{color:#E15616}
-.pageTitle{height:44px;line-height:44px;padding-top:16px}
-.pageTitle h1{color:#2D3036;font-size:16px;font-weight:bold;float:left}
-.pageTitle .step{float:right;color:#9AA5B5;font-size:14px;height:44px;line-height:44px}
-.pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;padding-left:55px}
-.pageTitle .step span:before{font-style:normal;font-size:20px;vertical-align:text-top;margin-right:5px}
-.pageTitle .step span:nth-of-type(1):before{content:'\2776'}
-.pageTitle .step span:nth-of-type(2):before{content:'\2777'}
-.pageTitle .step span:nth-of-type(3):before{content:'\2778'}
-.pageTitle .step span:after{position:absolute;left:0;top:10px;content:'';width:50px;border-top:1px solid #9AA5B5}
-.pageTitle .step span:first-child{padding-left:0}
-.pageTitle .step span:first-child:after{display:none}
-.pageTitle .step span.on{color:#E15616}
-.listWrap{width:1184px}
-.listWrap .cartTit,.listWrap .supplierItem{box-sizing:border-box;padding:0 14px;text-align:center;width:100%;background:#FFF;margin-bottom:8px;box-shadow:0px 3px 6px rgba(0,0,0,0.07)}
-.listWrap .supplierItem.disable{background:#f1f0f5}
-.listWrap .cartTit,.listWrap .supplierInfo{height:40px;line-height:40px}
-.listWrap .cartTit{color:#627386}
-.listWrap .supplierItem,.listWrap .supplierInfo{color:#22272E}
-.listWrap .supplierInfo{border-top:1px solid #F7F7F7}
-.listWrap .cartItem{width:100%;height:100px;line-height:100px;margin-top:10px;padding:14px 0}
-.listWrap .cartItem:first-child{margin-top:0}
-.listWrap .cartItem .c2{text-align:left}
-.listWrap .cartItem>div>*{vertical-align:middle}
-.listWrap .c0{float:left;width:34px;text-align:left}
-.listWrap .c1{float:left;width:100px}
-.listWrap .c2{float:left;width:405px}
-.listWrap .c3{float:left;width:165px}
-.listWrap .c4{float:left;width:165px}
-.listWrap .c5{float:left;width:165px}
-.listWrap .c6{float:right;width:120px}
-.listWrap .c10{float:left;width:495px}
-.listWrap .supplierInfo .c2{text-align:left;width:800px}
-.listWrap .check{width:18px;height:18px;line-height:18px;vertical-align:middle}
-.listWrap .image{display:block;width:100px;height:100px;border:1px solid #F7F7F7}
-.listWrap .name{line-height:20px;display:inline-block;max-height:100px;overflow:hidden;vertical-align:middle}
-.listWrap .cartItem .name{padding-left:14px}
-.listWrap .c6 em,.listWrap .c10 em{color:#f94b4b;font-style:normal}
-.listWrap .number{display:inline-block;width:120px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
-.listWrap .number>em{display:inline-block;width:24px;height:22px;background:#FFE6DC;font-size:20px;font-style:normal;line-height:20px;vertical-align:top;cursor:pointer}
-.listWrap .number input{width:70px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616}
-.listWrap .del{font-size:20px;position:relative;cursor:pointer;display:inline-block;height:40px;line-height:40px;width:30px}
-.listWrap .del .tips{position:absolute;top:40px;left:4px;opacity:0;white-space:nowrap;background-color:#f94b4b;color:#FFF;border-radius:3px;line-height:30px;font-size:12px;text-align:center;display:inline-block;transition:all .8s;padding:0 10px;font-style:normal}
-.listWrap .del .tips:before{content:"";width:10px;height:10px;background:#f94b4b;position:absolute;top:-3px;left:6px;transform:rotate(45deg)}
-.listWrap .del:hover{color:#f94b4b}
-.listWrap .del:hover .tips{opacity:1}
-.listWrap .price{position:relative;display:inline-block;height:40px;line-height:40px;}
-.listWrap .price em{font-style:normal;}
-.listWrap .price .tag{position:absolute;top:-10px;left:0;padding:0 6px;height:18px;line-height:18px;background-color:#1890f9;background-image:-webkit-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-moz-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-ms-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-o-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:linear-gradient(90deg,#1890f9 0%,#93cdff 100%);border-radius:9px;font-size:12px;color:#FFF;font-style:normal}
-.listWrap .price .info .i{display:inline-block;vertical-align:middle;width:14px;height:14px;line-height:14px;text-align:center;font-size:12px;font-style:normal;background-color:#1890f9;border-radius:7px;color:#FFF;cursor:help}
-.listWrap .price .ladder{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:32px;z-index:9;transition:all .8s;display:none}
-.listWrap .price .info .i:hover+.ladder{display:block}
-.listWrap .price .ladder em{white-space:nowrap}
-.listWrap .price .ladder i{font-style:normal;display:inline-block;width:120px;text-align:center}
-.listWrap .price .ladder .t{color:#627386}
-.listWrap .price .ladder .p{color:#f94b4b}
-.invalidTit{height:44px;line-height:44px;padding-top:16px;font-size:16px}
-.invalidTit .tit{color:#22272e;float:left}
-.invalidTit .delAll{color:#e15616;float:right}
-.invalidTit .tit em{font-style:normal;color:#e15616}
-
-
+    .loading{box-sizing:border-box;padding:200px 0;text-align:center}
+    .empty{box-sizing:border-box;padding:100px 0;text-align:center;color:#4A4F58;line-height:30px;font-size:16px}
+    .empty img{width:180px;height:180px}
+    .empty a{color:#E15616}
+    .pageTitle{height:44px;line-height:44px;padding-top:16px}
+    .pageTitle h1{color:#2D3036;font-size:16px;font-weight:bold;float:left}
+    .pageTitle .step{float:right;color:#9AA5B5;font-size:14px;height:44px;line-height:44px}
+    .pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;padding-left:55px}
+    .pageTitle .step span:before{font-style:normal;font-size:20px;vertical-align:text-top;margin-right:5px}
+    .pageTitle .step span:nth-of-type(1):before{content:'\2776'}
+    .pageTitle .step span:nth-of-type(2):before{content:'\2777'}
+    .pageTitle .step span:nth-of-type(3):before{content:'\2778'}
+    .pageTitle .step span:after{position:absolute;left:0;top:10px;content:'';width:50px;border-top:1px solid #9AA5B5}
+    .pageTitle .step span:first-child{padding-left:0}
+    .pageTitle .step span:first-child:after{display:none}
+    .pageTitle .step span.on{color:#E15616}
+    .listWrap{width:1184px}
+    .listWrap .cartTit,.listWrap .supplierItem{box-sizing:border-box;padding:0 14px;text-align:center;width:100%;background:#FFF;margin-bottom:8px;box-shadow:0px 3px 6px rgba(0,0,0,0.07)}
+    .listWrap .supplierItem.disable{background:#f1f0f5}
+    .listWrap .cartTit,.listWrap .supplierInfo{height:40px;line-height:40px}
+    .listWrap .cartTit{color:#627386}
+    .listWrap .supplierItem,.listWrap .supplierInfo{color:#22272E}
+    .listWrap .supplierInfo{border-top:1px solid #F7F7F7}
+    .listWrap .cartItem{width:100%;height:100px;line-height:100px;margin-top:10px;padding:14px 0}
+    .listWrap .cartItem:first-child{margin-top:0}
+    .listWrap .cartItem .c2{text-align:left}
+    .listWrap .cartItem>div>*{vertical-align:middle}
+    .listWrap .c0{float:left;width:34px;text-align:left;}
+    .listWrap .c1{float:left;width:100px}
+    .listWrap .c2{float:left;width:335px}
+    .listWrap .c3{float:left;width:142px}
+    .listWrap .c4{float:left;width:142px}
+    .listWrap .c5{float:left;width:142px}
+    .listWrap .c6{float:left;width:142px}
+    .listWrap .c7{float:right;width:118px}
+    .listWrap .c10{float:left;width:495px}
+    .listWrap .supplierInfo .c2{text-align:left;width:800px}
+    .listWrap .check{width:14px;height:14px;line-height:14px;vertical-align:middle}
+    .listWrap .image{display:block;width:100px;height:100px;border:1px solid #F7F7F7}
+    .listWrap .name{line-height:20px;display:inline-block;max-height:100px;overflow:hidden;vertical-align:middle}
+    .listWrap .cartItem .name{padding-left:14px}
+    .listWrap .cartItem .name .tag{display: inline-block;background:#f94b4b;color:#FFF;font-size:12px;padding:0 6px;height:20px;line-height:20px;border-radius:2px;font-style:normal;margin-right:5px}
+    .listWrap .c7 em,.listWrap .c10 em{color:#f94b4b;font-style:normal}
+    .listWrap .number{display:inline-block;width:120px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
+    .listWrap .number>em{display:inline-block;width:24px;height:22px;background:#FFE6DC;font-size:20px;font-style:normal;line-height:20px;vertical-align:top;cursor:pointer}
+    .listWrap .number input{width:70px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616}
+    .listWrap .del{font-size:20px;position:relative;cursor:pointer;display:inline-block;height:40px;line-height:40px;width:30px}
+    .listWrap .del .tips{position:absolute;top:40px;left:4px;opacity:0;white-space:nowrap;background-color:#f94b4b;color:#FFF;border-radius:3px;line-height:30px;font-size:12px;text-align:center;display:inline-block;transition:all .8s;padding:0 10px;font-style:normal}
+    .listWrap .del .tips:before{content:"";width:10px;height:10px;background:#f94b4b;position:absolute;top:-3px;left:6px;transform:rotate(45deg)}
+    .listWrap .del:hover{color:#f94b4b}
+    .listWrap .del:hover .tips{opacity:1}
+    .listWrap .price{position:relative;display:inline-block;height:40px;line-height:40px;}
+    .listWrap .price em{font-style:normal;}
+    .listWrap .price .tag{position:absolute;top:-10px;left:0;padding:0 6px;height:18px;line-height:18px;background-color:#1890f9;background-image:-webkit-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-moz-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-ms-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-o-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:linear-gradient(90deg,#1890f9 0%,#93cdff 100%);border-radius:9px;font-size:12px;color:#FFF;font-style:normal}
+    .listWrap .price .info .i{display:inline-block;vertical-align:middle;width:14px;height:14px;line-height:14px;text-align:center;font-size:12px;font-style:normal;background-color:#1890f9;border-radius:7px;color:#FFF;cursor:help}
+    .listWrap .price .ladder{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:32px;z-index:9;transition:all .8s;display:none}
+    .listWrap .price .info .i:hover+.ladder{display:block}
+    .listWrap .price .ladder em{white-space:nowrap}
+    .listWrap .price .ladder i{font-style:normal;display:inline-block;width:120px;text-align:center}
+    .listWrap .price .ladder .t{color:#627386}
+    .listWrap .price .ladder .p{color:#f94b4b}
+    .invalidTit{height:44px;line-height:44px;padding-top:16px;font-size:16px}
+    .invalidTit .tit{color:#22272e;float:left}
+    .invalidTit .delAll{color:#e15616;float:right;cursor:pointer;}
+    .invalidTit .tit em{font-style:normal;color:#e15616}
+    .summaryWrap{width:100%;background:#FFF;margin:16px 0 -29px 0;}
+    .summaryWrap .summary{width:1184px;margin:0 auto;font-size:18px;padding:11px 0;height:50px;line-height:50px;text-align:right;}
+    .summaryWrap .summary em{font-style:normal}
+    .summaryWrap .summary .left,.summaryWrap .summary .right{display:inline;}
+    .summaryWrap .summary .left .item:first-child{float:left;}
+    .summaryWrap .summary .item{display:inline-block;margin-right:32px;}
+    .summaryWrap .summary .check{width:14px;height:14px;line-height:14px;vertical-align:top;margin:18px 16px 0 16px}
+    .summaryWrap .summary .delete{margin-left:16px;color:#f55c5c}
+    .summaryWrap .summary .right .item em{color:#f55c5c}
+    .summaryWrap .summary .submit{display:inline-block;width:232px;height:50px;line-height:50px;text-align:center;background-color:#e15616;border-radius:2px;color:#FFF}
+    .summaryWrap.fixed{position:fixed;bottom:0;left:0;margin:0;z-index:99999;box-shadow:20px 20px 102px rgba(0,0,0,0.1)}
 
 
 
@@ -83,6 +94,66 @@ li{list-style:none}
     .empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw}
     .empty img{width:40vw;height:40vw}
     .empty a{color:#E15616}
+    .pageTitle .step{width:100%;height:12.4vw;line-height:12.4vw;background:#FFF;color:#9AA5B5;font-size:3.1vw;text-align:center;}
+    .pageTitle .step span{display:inline-block;height:4.2vw;line-height:4.2vw;vertical-align:middle;position:relative;padding-left:6.4vw}
+    .pageTitle .step span:before{font-style:normal;font-size:5.2vw;vertical-align:text-top;margin-right:1vw}
+    .pageTitle .step span:nth-of-type(1):before{content:'\2776'}
+    .pageTitle .step span:nth-of-type(2):before{content:'\2777'}
+    .pageTitle .step span:nth-of-type(3):before{content:'\2778'}
+    .pageTitle .step span:after{position:absolute;left:0;top:2.05vw;content:'';width:5.4vw;border-top:1px solid #9AA5B5}
+    .pageTitle .step span:first-child{padding-left:0}
+    .pageTitle .step span:first-child:after{display:none}
+    .pageTitle .step span.on{color:#E15616}
+    .pageTitle h1{color:#2D3036;font-size:3.7vw;font-weight:bold;height:10vw;line-height:10vw;padding:0 3.3vw;}
+    .listWrap .supplierItem{width:100%;background:#FFF;color:#9aa5b5;font-size:3.4vw;margin-bottom:1.2vw;}
+    .listWrap .supplierItem.disable{background:#f1f0f5}
+    .listWrap .supplierItem em{font-style: normal}
+    .listWrap .supplierTit{border-bottom:1px solid #F7F7F7;height:7.4vw;line-height:7.4vw;padding:1.3vw 3.3vw;}
+    .listWrap .cartItem{padding:2.2vw 3.3vw;height:24vw;line-height:24vw;position:relative;}
+    .listWrap .supplierInfo{border-top:1px solid #F7F7F7;width:93vw;margin:0 auto;height:10.6vw;line-height:10.6vw;color:#22272e;font-size:3.4vw;text-align:right;}
+    .listWrap .supplierItem .c0{float:left;width:9.6vw;text-align:center}
+    .listWrap .check{width:3.5vw;height:3.5vw;line-height:3.5vw;vertical-align:middle}
+    .listWrap .supplierItem .c1{float:left;width:24vw}
+    .listWrap .supplierItem .image{display:block;box-sizing:border-box;width:24vw;height:24vw;border:1px solid #F7F7F7}
+    .listWrap .supplierTit .img{width:7.4vw;height:7.4vw;border:1px solid #F7F7F7;margin-right:2vw}
+    .listWrap .supplierTit .name{color:#9aa5b5}
+    .listWrap .cartItem .c2,.listWrap .cartItem .c3,.listWrap .cartItem .c4,.listWrap .cartItem .c10{position:absolute;left:39vw;line-height:5vw}
+    .listWrap .cartItem .c2{top:2.2vw;height:10vw;width:58vw;}
+    .listWrap .cartItem .c2 .name{color:#22272e;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .listWrap .cartItem .c3{top:14vw;height:5vw}
+    .listWrap .cartItem .c4{bottom:2.2vw;height:5vw}
+    .listWrap .cartItem .c5{position:absolute;right:3.3vw;bottom:2.2vw;height:6.4vw;line-height:6.4vw}
+    .listWrap .cartItem .c10{color:#f94b4b;top:16vw;height:5vw}
+    .listWrap .cartItem .number{display:inline-block;width:26.6vw;line-height:6.4vw;height:6.4vw;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
+    .listWrap .cartItem .number>em{display:inline-block;width:6.4vw;height:6.4vw;background:#FFE6DC;font-size:4vw;line-height:6vw;vertical-align:top}
+    .listWrap .cartItem .number input{width:13.5vw;border:none;line-height:6vw;vertical-align:top;text-align:center;color:#E15616;font-size:3.4vw}
+    .invalidTit{height:9vw;line-height:9vw;font-size:3.7vw;padding:0 3.3vw;}
+    .invalidTit .tit{color:#22272e;float:left}
+    .invalidTit .delAll{color:#e15616;float:right}
+    .invalidTit .tit em{font-style:normal;color:#e15616}
+    .supplierItem.disable .name .tag{display:inline-block;background:#f94b4b;color:#FFF;font-size:2.4vw;padding:0 2vw;height:4.4vw;line-height:4.4vw;border-radius:2px;font-style:normal;margin-right:1vw;}
+    .listWrap .priTag{display:inline-block;margin-right:1vw;padding:0 2vw;height:4.4vw;line-height:4.4vw;background-color:#1890f9;background-image:-webkit-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-moz-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-ms-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-o-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:linear-gradient(90deg,#1890f9 0%,#93cdff 100%);border-radius:2.2vw;font-size:2.4vw;color:#FFF;font-style:normal}
+    .listWrap .price .info .i{display:inline-block;vertical-align:middle;width:3.7vw;height:3.7vw;line-height:3.7vw;text-align:center;font-size:2.4vw;font-style:normal;background-color:#1890f9;border-radius:1.9vw;color:#FFF;}
+    .listWrap .price .info .ladder{display:none;background-color:rgba(74,79,88,.7);z-index:998;}
+    .listWrap .price .info .ladder>span{display:block;box-sizing:border-box;width:74.6vw;padding:4vw 0;background:#FFF;border-radius:1.6vw;position:relative;top:50%;margin:-60vw auto 0 auto;line-height:10vw;font-size:4.2vw}
+    .listWrap .price .ladder em{white-space:nowrap;text-align:center;}
+    .listWrap .price .ladder i{font-style:normal;display:inline-block;width:35vw;text-align:center}
+    .listWrap .price .ladder .t{color:#627386}
+    .listWrap .price .ladder .p{color:#f94b4b}
+    .listWrap .price .ladder .close{display:block;width:46vw;height:10vw;line-height:10vw;text-align:center;background-color:#ffe6dc;border-radius:2px;border:1px solid #e15616;margin:6vw auto 0}
+    .summaryWrap{width:100%;background:#FFF;margin:1.4vw 0}
+    .summaryWrap .summary{width:93vw;margin:0 auto;font-size:3.4vw;padding-bottom:3.3vw}
+    .summaryWrap .summary em{font-style:normal}
+    .summaryWrap .summary .left{height:9.4vw;line-height:9.4vw}
+    .summaryWrap .summary .right{height:11.2vw;line-height:11.2vw}
+    .summaryWrap .summary .check{width:3.5vw;height:3.5vw;line-height:3.5vw;vertical-align:top;margin:3vw 3vw 0 3.3vw}
+    .summaryWrap .summary .delete{width:12vw;height:6vw;line-height:6vw;display:inline-block;text-align:center;color:#f55c5c}
+    .summaryWrap .summary .right .item{margin-left:6.8vw}
+    .summaryWrap .summary .right .item em{color:#f55c5c}
+    .summaryWrap .summary .submit{display:inline-block;width:30.4vw;height:11.2vw;line-height:11.2vw;text-align:center;background-color:#e15616;border-radius:2px;color:#FFF}
+    .summaryWrap.fixed{position:fixed;bottom:0;left:0;margin:0;z-index:99999;box-shadow:20px 20px 102px rgba(0,0,0,0.1)}
+
+
 
 }
 

src/main/resources/static/js/shopping/cart.js

@@ -5,6 +5,10 @@ var shoppingCart = new Vue({
         listLoading: true,
         listData: [],
         invalidData: [],
+        totalSize: 0,
+        totalCount: 0,
+        totalPrice: 0
+
     },
     computed: {
 
@@ -17,10 +21,25 @@ var shoppingCart = new Vue({
                 if (r.code === 0 && r.data) {
                     _self.listData = r.data.list;
                     _self.invalidData = r.data.invalid;
+                    _self.totalSize = r.data.totalSize;
+                    _self.totalCount = r.data.totalCount;
+                    _self.totalPrice = r.data.totalPrice;
                 }
                 _self.listLoading = false;
             });
         },
+        showThisLadder: function(event){
+            if(isPC){return false;}
+            var el = event.currentTarget;
+            $(el).siblings('.ladder').show();
+            fixedBody();
+        },
+        hideThisLadder: function(event){
+            if(isPC){return false;}
+            var el = event.currentTarget;
+            $(el).parents('.ladder').hide();
+            looseBody();
+        },
 
     },
     created: function () {
@@ -29,5 +48,15 @@ var shoppingCart = new Vue({
     },
     mounted: function () {
         var _self = this;
+        var minAwayBtm = $("footer").height();
+        //处理滚动条控制底部提交fixed
+        $(window).scroll(function() {
+            var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height();
+            if(minAwayBtm <= awayBtm){
+                $(".summaryWrap").addClass('fixed');
+            }else{
+                $(".summaryWrap").removeClass("fixed");
+            }
+        });
     }
 });

src/main/resources/templates/shopping/cart.html

@@ -26,65 +26,78 @@
     <!--列表-->
     <div v-else class="wrap">
         <div class="pageTitle">
-            <h1>我的购物车</h1>
             <div class="step">
                 <span class="on">我的购物车</span>
                 <span>核对订单信息</span>
                 <span>成功提交订单</span>
             </div>
+            <h1>我的购物车</h1>
         </div>
         <div class="listWrap">
-            <div class="cartTit clear">
+            <div v-if="isPC" class="cartTit clear">
                 <div class="c0"><input class="check" type="checkbox"></div>
                 <div class="c1">全选</div>
                 <div class="c2">商品信息</div>
-                <div class="c3">优惠价</div>
-                <div class="c4">数量</div>
-                <div class="c5">小计（元）</div>
-                <div class="c6">操作</div>
+                <div class="c3">包装规格</div>
+                <div class="c4">优惠价</div>
+                <div class="c5">数量</div>
+                <div class="c6">小计（元）</div>
+                <div class="c7">操作</div>
             </div>
             <div class="supplierItem" v-for="supplier in listData">
+                <div v-if="!isPC" class="supplierTit">
+                    <div class="c0"><input class="check" type="checkbox"></div>
+                    <a  :href="'/supplier/index.html?id='+supplier.id" target="_blank">
+                        <img class="img" :src="supplier.logo">
+                        <span class="name" v-text="supplier.name"></span>
+                    </a>
+                </div>
                 <div class="cartItem clear"  v-for="cart in supplier.cartList">
                     <div class="c0"><input class="check" type="checkbox" name="cartList"></div>
                     <div class="c1"><a :href="'/product/detail.html?id='+cart.productId" target="_blank">
                         <img class="image" :src="cart.image">
                     </a></div>
                     <div class="c2">
-                        <a class="name" :href="'/product/detail.html?id='+cart.productId" v-text="cart.name" target="_blank"></a>
+                        <a class="name" :href="'/product/detail.html?id='+cart.productId" target="_blank">
+                            <i v-if="cart.ladderFlag" class="priTag">阶梯价格</i>
+                            <span v-text="cart.name"></span>
+                        </a>
                     </div>
-                    <div class="c3">
+                    <div class="c3"><span v-if="!isPC">包装规格：</span><span v-text="cart.unit"></span></div>
+                    <div class="c4">
                         <span class="price">
                             <em v-text="'¥'+toFloat(cart.price)"></em>
                             <span v-if="cart.ladderFlag" class="info">
-                                <i class="tag">阶梯价格</i>
-                                <i class="i">?</i>
-                                <span class="ladder">
-                                    <em class="t"><i>价格</i><i>批量</i></em>
-                                    <em v-for="l in cart.ladderPrices">
-                                        <i class="p">¥{{toFloat(l.buyPrice)}}</i>
-                                        <i v-if="l.maxNum>0">{{l.buyNum+' ~ '+l.maxNum}}</i>
-                                        <i v-else>≥ {{l.buyNum}}</i>
-                                    </em>
+                                <i v-if="isPC" class="tag">阶梯价格</i>
+                                <i class="i" @click="showThisLadder($event)">?</i>
+                                <span class="ladder mFixed">
+                                    <span>
+                                        <em class="t"><i>价格</i><i>批量</i></em>
+                                        <em v-for="l in cart.ladderPrices">
+                                            <i class="p">¥{{toFloat(l.buyPrice)}}</i>
+                                            <i v-if="l.maxNum>0">{{l.buyNum+' ~ '+l.maxNum}}</i>
+                                            <i v-else>≥ {{l.buyNum}}</i>
+                                        </em>
+                                        <em v-if="!isPC" @click="hideThisLadder($event)" class="close">了解</em>
+                                    </span>
                                 </span>
                             </span>
                         </span>
                     </div>
-                    <div class="c4">
+                    <div class="c5">
                         <span class="number">
                             <em class="sub">-</em>
                             <input type="number" :value="cart.number">
                             <em class="add">+</em>
                         </span>
                         <input type="hidden" :value="cart.step"></div>
-                    <div class="c5">
-                        <span v-text="'¥'+toFloat(cart.price*cart.number)"></span>
-                    </div>
-                    <div class="c6"><span class="del">×<em class="tips">删除</em></span></div>
+                    <div v-if="isPC" class="c6"><span v-text="'¥'+toFloat(cart.price*cart.number)"></span></div>
+                    <div v-if="isPC" class="c7"><span class="del">×<em class="tips">删除</em></span></div>
                 </div>
                 <div class="supplierInfo">
-                    <div class="c0"><input class="check" type="checkbox"></div>
-                    <div class="c2"><a class="name" :href="'/supplier/index.html?id='+supplier.id" v-text="supplier.name" target="_blank"></a></div>
-                    <div class="c6"><span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span></div>
+                    <div v-if="isPC" class="c0"><input class="check" type="checkbox"></div>
+                    <div v-if="isPC" class="c2"><a class="name" :href="'/supplier/index.html?id='+supplier.id" v-text="supplier.name" target="_blank"></a></div>
+                    <div class="c7"><span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span></div>
                 </div>
             </div>
             <div class="invalidTit">
@@ -93,12 +106,12 @@
             </div>
             <div class="supplierItem disable" v-for="cart in invalidData">
                 <div class="cartItem clear">
-                    <div class="c0"></div>
-                    <div class="c1"><a :href="'/product/detail.html?id='+cart.productId" target="_blank">
+                    <div class="c0"><input class="check" type="checkbox" readonly disabled></div>
+                    <div class="c1">
                         <img class="image" :src="cart.image">
-                    </a></div>
+                    </div>
                     <div class="c2">
-                        <a class="name" :href="'/product/detail.html?id='+cart.productId" v-text="cart.name" target="_blank"></a>
+                        <span class="name"><em class="tag">失效商品</em>{{cart.name}}</span>
                     </div>
                     <div class="c10">
                         <em v-if="cart.status==1">商品已丢失</em>
@@ -110,12 +123,29 @@
                         <em v-else-if="cart.status==7">库存不足</em>
                         <em v-else>商品已失效</em>
                     </div>
-                    <div class="c6"><span class="del">×<em class="tips">删除</em></span></div>
+                    <div v-if="isPC" class="c6"><span class="del">×<em class="tips">删除</em></span></div>
                 </div>
             </div>
         </div>
     </div>
+    <div class="summaryWrap">
+        <div class="summary">
+            <div class="left mfbt">
+                <div class="item">
+                    <input class="check" type="checkbox">
+                    <span>全选</span>
+                    <a class="delete" href="javascript:void(0);">删除</a>
+                </div>
+                <div class="item">商品种类：<em v-text="totalSize"></em></div>
+                <div class="item">商品数量：<em v-text="totalCount"></em></div>
+            </div>
+            <div class="right mfbt">
+                <div class="item">总价：<em v-text="'¥'+toFloat(totalPrice)"></em></div>
+                <a class="submit" href="javascript:void(0);">去结算</a>
+            </div>
 
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->