购物车计算逻辑优化

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

@@ -22,7 +22,7 @@ table,td,th{border: 1px solid #EBECEF;}
 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: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: url("/img/cart/gouxuan.png");border: 1px solid #E15616;}
+input[type=checkbox]:checked:after{content:"\2713";font-size:12px;background:#E15616;border: 1px solid #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;}
 /* 定义动画效果 */

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

@@ -4,6 +4,8 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
+    input[type="number"]{-moz-appearance:none;-webkit-appearance: none;}
+    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance:none;}
     .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}
@@ -23,10 +25,15 @@ li{list-style:none}
     .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:60px;line-height:60px}
+    .listWrap .supplierItem em{font-style: normal}
+    .listWrap .supplierTit{border-bottom:1px solid #F7F7F7;height:60px;line-height:60px;text-align: left;}
+    .listWrap .supplierTit .img{width:auto;height:32px;border:1px solid #F7F7F7;margin-right:10px}
+    .listWrap .supplierTit .name{color:#9aa5b5}
+    .listWrap .cartTit,.listWrap .supplierBtn{height:60px;line-height:60px}
     .listWrap .cartTit{color:#333333}
-    .listWrap .supplierItem,.listWrap .supplierInfo{color:#22272E}
-    .listWrap .supplierInfo{border-top:1px solid #F5F5F5}
+    .listWrap .supplierItem,.listWrap .supplierBtn{color:#22272E}
+    .listWrap .supplierBtn{border-top:1px solid #F5F5F5;text-align:right;}
+    .listWrap .supplierBtn em {color:#f55c5c;font-size:16px;}
     .listWrap .cartItem{width:100%;height:100px;line-height:100px;margin-top:10px;padding:14px 0;font-size: 16px}
     .listWrap .cartItem:first-child{margin-top:0}
     .listWrap .cartItem .c2{text-align:left}
@@ -41,15 +48,14 @@ li{list-style:none}
     .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:16px;height:16px;line-height:14px;vertical-align:middle}
     .listWrap .image{display:block;width:100px;height:100px;border:1px solid #F7F7F7}
     .listWrap .name, .listWrap .unit{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:96px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #EFEFEF;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:#EFEFEF;font-size:20px;font-style:normal;line-height:20px;vertical-align:top;cursor:pointer}
+    .listWrap .number{display:inline-block;width:96px;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:48px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616}
     .listWrap .del{color: #9AA5B5;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}
@@ -74,15 +80,12 @@ li{list-style:none}
     .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)}
     .pageTitle .step label.line{width: 50px;height: 1px;background: #707070;display: inline-block; margin: 0px 10px}
-    .supplierInfo.top{border-bottom: 1px solid #F5F5F5}
-    input[type="number"]{
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    }
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    }
+
+
+
+
+
+
     .colorprice{color: #9AA5B5}
     .gouxuan{background: url("/img/cart/gouxuan.png");}
     .tips-text{
@@ -169,7 +172,8 @@ li{list-style:none}
     .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 .supplierBtn{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 .supplierBtn em {color: #f55c5c;}
     .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}

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

@@ -6,11 +6,14 @@ var shoppingCart = new Vue({
         userToken: '',
         listLoading: true,
         listData: [],
-        cartList:[],
         invalidData: [],
-        totalSize: 0,
+        kindCount: 0,
         totalCount: 0,
         totalPrice: 0,
+        allChecked: true,
+        submitIds: [],//去结算商品Ids
+
+        cartList:[],
         ischecked:false,
         isCheckAll:false,
         isStock:'',
@@ -33,9 +36,19 @@ 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.kindCount = r.data.kindCount;
                     _self.totalCount = r.data.totalCount;
                     _self.totalPrice = r.data.totalPrice;
+                    // 默认全选
+                    _self.listData.forEach(function(supplier){
+                        supplier.checked = true;
+                        if(supplier.cartList.length>0){
+                            supplier.cartList.forEach(function(cartItem){
+                                _self.submitIds.push(cartItem.productId);
+                            })
+                        }
+                    });
+                    _self.allChecked = true;
                 }
                 _self.listLoading = false;
             });
@@ -55,6 +68,87 @@ var shoppingCart = new Vue({
             $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.ladder').hide();
             if(!isPC){looseBody();}
         },
+        ckeckSupplier: function(event, supplierChecked){
+            var el = event.currentTarget;
+            var _self = this;
+            var cartList = $(el).parents('.supplierItem').find('input[name=cartList]');
+            this.$nextTick(function(){
+                if (supplierChecked) {
+                    $.each(cartList, function (index, item) {
+                        if (!_self.submitIds.includes(item.value*1)){
+                            _self.submitIds.push(item.value*1);
+                        }
+                    });
+                }else{
+                    $.each(cartList, function (index, item) {
+                        var loc = _self.submitIds.indexOf(item.value*1);
+                        if(loc >=0 ){
+                            _self.submitIds.splice(loc, 1);
+                            _self.allChecked = false;
+                        }
+                    });
+                }
+                _self.computedPrice();
+            });
+        },
+        ckeckAll: function(){
+            var _self = this;
+            this.$nextTick(function(){
+                if (_self.allChecked) {
+                    _self.submitIds = [];
+                    _self.listData.forEach(function(supplier){
+                        supplier.checked = true;
+                        if(supplier.cartList.length>0){
+                            supplier.cartList.forEach(function(cartItem){
+                                _self.submitIds.push(cartItem.productId);
+                            })
+                        }
+                    });
+                }else{
+                    _self.submitIds = [];
+                    _self.listData.forEach(function(supplier){
+                        supplier.checked = false;
+                    });
+                }
+                _self.computedPrice();
+            });
+        },
+        computedPrice: function(){
+            var _self = this;
+            this.$nextTick(function(){
+                var totalPrice = 0;
+                var kindCount = 0;
+                var totalCount = 0;
+                _self.listData.forEach(function(supplier){
+                    var supplierPrice = 0;
+                    if(supplier.cartList.length>0){
+                        supplier.cartList.forEach(function(cart){
+                            if (_self.submitIds.includes(cart.productId*1)){
+                                supplierPrice += cart.price*cart.number;
+                                kindCount += 1;
+                                totalCount += cart.number;
+                            }
+                        })
+                    }
+                    supplier.totalPrice = supplierPrice;
+                    totalPrice += supplier.totalPrice;
+                });
+                _self.totalPrice = totalPrice;
+                _self.kindCount = kindCount;
+                _self.totalCount = totalCount;
+            });
+        },
+
+
+
+
+
+
+
+
+
+
+
         changeCountAdd:function(item,pros){//商品数量加加
          var _this = this;
         console.log(item,pros)

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

@@ -37,7 +37,7 @@
         </div>
         <div class="listWrap">
             <div v-if="isPC" class="cartTit clear">
-                <div class="c0"><input class="check" type="checkbox"></div>
+                <div class="c0"><input class="check" type="checkbox" @change="ckeckAll()" v-model="allChecked"></div>
                 <div class="c1">全选</div>
                 <div class="c2">商品信息</div>
                 <div class="c4">单价（元）</div>
@@ -46,19 +46,19 @@
                 <div class="c7">操作</div>
             </div>
             <div class="supplierItem" v-for="supplier,index in listData">
-                <div  class="supplierInfo  top">
-                    <div v-if="isPC" class="c0"><input class="check"  type="checkbox" @click.stop="checkShop(supplier)" ></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>
-                <div v-if="!isPC" class="supplierTit">
-                    <div class="c0"><input class="check" type="checkbox"></div>
+                <div class="supplierTit">
+                    <div class="c0">
+                        <input class="check" type="checkbox" @change="ckeckSupplier($event, supplier.checked)" v-model="supplier.checked">
+                    </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="c0">
+                        <input class="check" type="checkbox" name="cartList" :value="cart.productId" v-model="submitIds" @change="computedPrice()">
+                    </div>
                     <div class="c1"><a :href="'/product-'+cart.productId+'.html'" target="_blank">
                         <img class="image" :src="cart.image">
                     </a></div>
@@ -71,9 +71,9 @@
                         <span class="price">
                             <em v-text="'¥'+toFloat(cart.price)"></em>
                             <!-- 促销活动 -->
-                            <template v-if="cart.actStatus==1">
-                                 <span class="activity" style="margin: auto;" @click="activity" :class="isShow?'activitystyle':''" >{{cart.promotions.name}}<i class="icon" :class="isShow?'activeicon':''"></i></span>
-                            </template>
+                            <span v-if="cart.actStatus==1" class="priceTag">
+                                <i class="tag icon mIcon" v-text="cart.promotions?cart.promotions.name:''"></i>
+                            </span>
                             <!-- 阶梯价 -->
                             <span v-else-if="cart.ladderFlag" class="priceTag">
                                 <i class="tag icon mIcon" @click="toggleThisLadder($event)">阶梯价格</i>
@@ -92,7 +92,7 @@
                     </div>
                     <div class="c5">
                         <span class="number">
-                            <em class="sub"@click="changeCountSub(supplier,cart)">-</em>
+                            <em class="sub" @click="changeCountSub(supplier,cart)">-</em>
                             <input type="number" :value="cart.number" v-model="cart.number" @blur="changeNnmber($event,supplier,cart)">
                             <em class="add" @click="changeCountAdd(supplier,cart)">+</em>
                         </span>
@@ -101,11 +101,11 @@
                         <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="c7"style="width: 100%;text-align: right"><span>合计：<em v-text="'¥'+toFloat(supplier.allPrice)"></em></span></div>
+                <div class="supplierBtn">
+                    <span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span>
                 </div>
             </div>
-            <div class="invalidTit">
+            <div class="invalidTit" v-if="invalidData.length>0">
                 <div class="tit">失效商品 <em v-text="invalidData.length"></em> 件</div>
                 <span class="delAll">清空失效商品</span>
             </div>
@@ -137,18 +137,17 @@
         <div class="summary">
             <div class="left mfbt">
                 <div class="item">
-                    <input class="check" type="checkbox">
+                    <input class="check" type="checkbox" @change="ckeckAll()" v-model="allChecked">
                     <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="kindCount"></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>